跳到正文
Moneta Markets
Library|设计规范与定稿01 · 版面

01 · 基础

版面

背景铺满整个画面,文字、卡片和按钮放进中间 1280 宽的内容区。

  1. 先定画布电脑画板 1920 宽,手机画板 390 宽。
  2. 内容放中间内容区 1280 宽,左右各留 320。背景图、光晕可以超出。
  3. 同组靠近同一组内容放近,不同组拉开。长了就往下排,不压小。

常用宽度与间距

项目数值用在哪里
画布1920电脑画板、背景图、通栏光晕
内容区1280标题、卡片、按钮都在这里面
文字起点内容区 + 8Banner 文字从这条线开始
窄内容1156市场页说明卡片区
问答区980常见问题列表
卡片间距24同一排卡片之间
网格间距32 / 40图文并排、多栏内容
手机左右留白20 / 24首页 20,市场页 24

手机要重新排列:配图在上、文字在下,或改成一列。不要把电脑版整张缩小。

整页从上到下

  1. 菜单
  2. Banner
  3. 热门品种
  4. 核心优势
  5. 奖项
  6. 交易解读
  7. 交易平台
  8. 交易学堂
  9. 更多交易品种
  10. 开户步骤
  11. 常见问题
  12. 页脚

市场 6 页(外汇、大宗商品、指数、股票差价合约、全球 ETF、债券)都按这个顺序,换内容不换顺序。点名称可以打开 Figma 外汇定稿里的对应区块。

项目电脑手机
区块和区块之间230120
例外核心优势 220 · 更多交易品种 180核心优势 110
区块标题 → 副标88
标题 → 内容6028
例外条件表、问答、文章 40开户步骤 40
最后一块下方230120

APP Trader、出金入金、为何选择亿汇的区块高度和留白各不相同,照各自定稿做,不套市场页数值。

照哪些定稿做

02 · 基础

文字

中文用阿里巴巴普惠体,英文和数字用 SF Pro。字号按用途选,不按感觉选。

中文阿里巴巴普惠体 3.0标题 105 Heavy · 正文 55 Regular · 按钮 95 ExtraBold
英文、数字SF Pro标题用 Display · 正文用 Text
其他Noto Sans Thai泰文 · 数据用 JetBrains Mono,数字 0 为空心

开场与区块的字号

数字写法:字号 / 行高,单位 px。行高都用整数,约为字号的 1.4 倍,有小数就四舍五入。

用途电脑手机效果 · 电脑
上标Heavy · 白色渐层24 / 3416 / 19

Moneta Markets

大标Banner 与区块标题 · Heavy40 / 5626 / 36

交易全球外汇市场

副标Heavy · #A5DBFF24 / 3412 / 17

极低成本 · 精准执行

说明文Banner 与区块说明 · Regular18 / 2512 / 20

一段只讲一件事,太长就自然换行。

条列Regular · 白色16 / 2514 / 20

低于 15ms 的订单执行

按钮字ExtraBold 8001816

卡片和问答里的字号

用途电脑手机
产品卡标题20 / 3218 / 26
卡片说明 · 白 60%14 / 2014 / 20
问答 · 问题18 / 2816 / 26
问答 · 答案16 / 2414 / 24
奖项 · 年份18 / 2412 / 24
开户步骤标题18 / 2618 / 26
  1. 中英文之间空一格例:在 Moneta Markets 亿汇。
  2. 字号用整数放不下就换行或缩短句子,不把字缩小。
  3. 文字框宽固定、高度自动Figma 里设定宽度,高度用 Hug。

03 · 基础

颜色

深色打底,白字讲内容。红色只给最重要的行动,蓝色给选择和数据。

页面底色#06070B整页背景、渐隐终点
标题白#FFFFFF大标、卡片标题
说明文白 70%Banner 和区块说明
次要文字白 60%卡片说明、注释
浅蓝#A5DBFF副标、标题强调词
功能蓝#138DFF选中、数据、信任
品牌红#FF0033主要按钮、红点
奖项年份#FFCCD6奖项卡年份
分隔线白 10% / 6%边框、细分隔
  1. 一屏只有一个最红的地方红色留给主要按钮,不拿来画边框或大片光雾。
  2. 蓝色不抢主按钮蓝色用在选中、数据和次要按钮。
  3. 不加新颜色不用紫色霓虹、彩色网格。绿色只用在行情上涨和品牌原色。

04 · 组件

按钮

先按用途选颜色,再按位置查尺寸。直接用现成按钮,不重新画。

红色 · 主要带人进行下一步
蓝色 · 了解查看更多内容
灰色 · 次要放在主要按钮旁边

六档尺寸

用在哪里字号高度实际按钮
左 24右 24
  • 14 号字:左右各留 18
  • 16、18、20 号字:左右各留 24
  • 文字和箭头之间留 8
  • 宽度随文字变长;顶部注册/登录固定 76 宽

Figma 里怎么用:拖入「btn」组件,size 选字号;里面的「_btn」选高度、颜色和文字。不要 detach,不要另画一颗。

06 · 组件

共用组件

已经做好的整组内容,直接拿来用。只换文字和图片,样子和操作保留。

同一组卡片,排在同一条线上。

标题、图标和说明各有位置。手机自动变成一列,文字自然换行。

外汇 · 说明卡片
真实网页组件:可以点击,会按宽度重新排列。

在哪里找

组件在哪一页用在哪里
品牌 Logo组件|品牌与按钮 › 品牌顶部菜单、页脚
按钮组件|品牌与按钮 › 按钮所有按钮(btn 组件)
顶部菜单组件|导航与菜单每一页顶部
页脚组件|页脚每一页底部

这份 Figma 已发布为 library,首页与 4 个 Mega Menu 档案的组件都连到这里。母件按分类放在 7 个「组件|」分页,完整清单在「组件|总览」。所有定稿页面里的组件都连到这里;改组件就到对应分页改,不在页面里拆开重画。

可以换标题、说明、图片
保留字体、间距、颜色、操作方式
检查电脑看一遍,手机看一遍

Figma 里的常用组件

组件尺寸怎么用
顶部菜单1920 × 80上留 12、内容高 60、下留 8;内容宽 1840,Logo 在左,注册、登录在右
产品小卡200 × 407 · 圆角 28配图 192 × 140;标题 20 / 32,说明 14 / 20;只有当前品种用高亮
奖项卡302 × 141左右月桂 60 × 99;由上到下:年份、奖项名、颁奖单位
文章区块1620 × 653标题到卡片 60;六个市场各一个版本,只换文字和图
常见问题980 宽问题 18 / 28,答案 16 / 24
页脚1920 × 829内容宽 1832;所有页面共用同一个

07 · 图像

配图

银白金属加蓝色玻璃,光从上方和侧面来。主体清楚,边缘柔和地融进黑底。

外汇页 Banner 配图:发光地球与货币硬币
左侧留给文字
主体放右侧
四边渐隐到 #06070B
外汇页 Banner 背景图 · 1920 × 840 显示
  1. 同一种风格平滑银白金属、蓝色光学玻璃、白蓝主光、少量红色侧光,有前后空间。
  2. Banner 图主体在右,左边干净留给文字;上下左右渐隐到底色,看不到硬边。
  3. 内页配图主体紧凑、黑底,用「滤色」叠在页面上;同排配图大小看起来一样重。
  4. 比例不变不拉伸、不压扁。背景图可以裁切,主体不能被切掉。
外汇产品解读配图
内页配图:主体居中,四周留空、渐隐
大宗商品产品卡配图
卡片配图:同排卡片统一配图区与轮廓大小

配图尺寸

位置显示尺寸怎么做
Banner 背景1920 × 840原图 3840 宽;手机用同一张图,主体保留,高约 324
交易解读插图约 450–590 宽按主体看起来一样大来定,外框可以不一样
产品小卡配图192 × 140六个市场一套,主体轮廓大小一致
交易学堂大图1920 × 640原图 3840 × 1280;手机裁成文章卡,比例不变
奖项月桂60 × 99左右各一片,对称摆放
这样做
  • 先看主体轮廓和光学中心,再决定大小
  • 文章卡图约 1.4 : 1,比文字区大
  • 新图按 V1 风格流程生成,先给负责人确认
不要这样
  • 紫色霓虹、彩色网格、无意义漂浮物
  • 给透明图加方形阴影
  • 用拉伸、锐化掩盖图不够清楚

08 · 图像

素材

图标、Logo 和图片都用原始文件。尺寸、格式和命名照下表做。

素材规格做法
网页导出图3840 宽透明 PNG浏览器 1920 宽、2 倍直出;不缩放、不锐化
网页用图1x + 2x照片用 WebP,图标用 SVG;写上真实宽高
菜单图标20 × 20 / 24 × 24电脑 20、手机 24;线宽约 1.65
图标颜色#EDF5FD / #9FB5CC主色 / 辅色;悬停变白和红
平台 Logo官方 SVG深底上字标转白,品牌色元素保留
Logo 一排时固定高度槽位按字的视觉大小对齐,不按外框
资产硬币1024 × 1024白珐琅母版、黑底;命名 代号_白底银边风格.png
存放位置exports/组件名/同一组件放同一个资料夹,改版加 _v2
菜单图标电脑与手机尺寸对照
菜单 43 个图标的电脑与手机尺寸对照。新增图标先放进来比一比大小。
  1. 不用 emoji 当图标用 SVG;品牌图标保留原色、原比例,不重描。
  2. 透明图要干净清掉杂点,保留有用的光雾和倒影。
  3. 外部素材记来源记下网址、取得日期、授权,再放进素材库。