01 · 基础
版面
背景铺满整个画面,文字、卡片和按钮放进中间 1280 宽的内容区。
- 先定画布电脑画板 1920 宽,手机画板 390 宽。
- 内容放中间内容区 1280 宽,左右各留 320。背景图、光晕可以超出。
- 同组靠近同一组内容放近,不同组拉开。长了就往下排,不压小。
常用宽度与间距
手机要重新排列:配图在上、文字在下,或改成一列。不要把电脑版整张缩小。
整页从上到下
市场 6 页(外汇、大宗商品、指数、股票差价合约、全球 ETF、债券)都按这个顺序,换内容不换顺序。点名称可以打开 Figma 外汇定稿里的对应区块。
APP Trader、出金入金、为何选择亿汇的区块高度和留白各不相同,照各自定稿做,不套市场页数值。
照哪些定稿做
02 · 基础
文字
中文用阿里巴巴普惠体,英文和数字用 SF Pro。字号按用途选,不按感觉选。
数字写法:字号 / 行高,单位 px。行高都用整数,约为字号的 1.4 倍,有小数就四舍五入。
Moneta Markets
交易全球外汇市场
极低成本 · 精准执行
一段只讲一件事,太长就自然换行。
低于 15ms 的订单执行
卡片和问答里的字号
- 中英文之间空一格例:在 Moneta Markets 亿汇。
- 字号用整数放不下就换行或缩短句子,不把字缩小。
- 文字框宽固定、高度自动Figma 里设定宽度,高度用 Hug。
03 · 基础
颜色
深色打底,白字讲内容。红色只给最重要的行动,蓝色给选择和数据。
#06070B整页背景、渐隐终点#FFFFFF大标、卡片标题白 70%Banner 和区块说明白 60%卡片说明、注释#A5DBFF副标、标题强调词#138DFF选中、数据、信任#FF0033主要按钮、红点#FFCCD6奖项卡年份白 10% / 6%边框、细分隔- 一屏只有一个最红的地方红色留给主要按钮,不拿来画边框或大片光雾。
- 蓝色不抢主按钮蓝色用在选中、数据和次要按钮。
- 不加新颜色不用紫色霓虹、彩色网格。绿色只用在行情上涨和品牌原色。
04 · 组件
按钮
先按用途选颜色,再按位置查尺寸。直接用现成按钮,不重新画。
- 14 号字:左右各留 18
- 16、18、20 号字:左右各留 24
- 文字和箭头之间留 8
- 宽度随文字变长;顶部注册/登录固定 76 宽
Figma 里怎么用:拖入「btn」组件,size 选字号;里面的「_btn」选高度、颜色和文字。不要 detach,不要另画一颗。
05 · 组件
Banner
每页开场:左边文字、右边配图。文字顺序固定,间距固定。
上标只在需要品牌名时使用。没有副标时,大标直接接说明,间距 24。
设计稿上的问题,这样回答
内容区是 1280。画布 1920,背景图 1920 × 840。
文字高度都用 Hug。整块 Banner 按各页定稿:外汇 926(含底部评分条 220)、出金入金 729、APP Trader 729、为何选择亿汇 1090。
默认 白色,强调词用 #A5DBFF。页面开场大标可以用白色渐层(白 → 20% 白),同一页只用一种。
默认 #A5DBFF 实色。出金入金的渐层副标保留原定稿。
默认 55 Regular,白 70%。为何选择亿汇是置中排版,保留 65 Medium、白色。
用整数 25(18 × 1.4 = 25.2,四舍五入)。Figma 里行高填像素整数,不填百分比。
要。英文和数字用 SF Pro,中文用普惠体。网页会自动套用;Figma 里混排文字分段设置。
新页面用上方的 4 / 8 / 24 / 36。出金入金(4 / 20)和为何选择亿汇(16)保留各自定稿。
手机版
06 · 组件
共用组件
已经做好的整组内容,直接拿来用。只换文字和图片,样子和操作保留。
同一组卡片,排在同一条线上。
标题、图标和说明各有位置。手机自动变成一列,文字自然换行。
在哪里找
这份 Figma 已发布为 library,首页与 4 个 Mega Menu 档案的组件都连到这里。母件按分类放在 7 个「组件|」分页,完整清单在「组件|总览」。所有定稿页面里的组件都连到这里;改组件就到对应分页改,不在页面里拆开重画。
Figma 里的常用组件
07 · 图像
配图
银白金属加蓝色玻璃,光从上方和侧面来。主体清楚,边缘柔和地融进黑底。
- 同一种风格平滑银白金属、蓝色光学玻璃、白蓝主光、少量红色侧光,有前后空间。
- Banner 图主体在右,左边干净留给文字;上下左右渐隐到底色,看不到硬边。
- 内页配图主体紧凑、黑底,用「滤色」叠在页面上;同排配图大小看起来一样重。
- 比例不变不拉伸、不压扁。背景图可以裁切,主体不能被切掉。


配图尺寸
- 先看主体轮廓和光学中心,再决定大小
- 文章卡图约 1.4 : 1,比文字区大
- 新图按 V1 风格流程生成,先给负责人确认
- 紫色霓虹、彩色网格、无意义漂浮物
- 给透明图加方形阴影
- 用拉伸、锐化掩盖图不够清楚
08 · 图像
素材
图标、Logo 和图片都用原始文件。尺寸、格式和命名照下表做。
- 不用 emoji 当图标用 SVG;品牌图标保留原色、原比例,不重描。
- 透明图要干净清掉杂点,保留有用的光雾和倒影。
- 外部素材记来源记下网址、取得日期、授权,再放进素材库。