视觉规范

图标

 

 图标规格

常用图标规格我们定义了三种:32*32px、24*24px、16*16px   均为@1x尺寸。

  • 32*32px:用在导航图标,例如顶部导航图标,底部tab导航以及其他导航入口。需要醒目易操作。
  • 24*24px:用在模块常见的操作图标,或起辅助作用的列表、卡片图标。
  • 16*16px:仅起提示作用的图标,不承载交互。

 

可操作的图标必须保证48px宽高,@1x为24px

 栅格选择

图标统一在320*320px、240*240px、160*160px栅格底板上绘制。之所以不创建等倍率的栅格底板,原因过小的尺寸在绘制时难以像素对齐。另外为保证三种规格的图标视觉上更方便对齐,栅格的内边距统一设为20px。


*橙色区域为安全区域

 

 栅格应用

常用的几何形可以根据栅格底板的参考线绘制。复杂形的图形需要根据视觉重心调整。

配色

 

 调色盘

根据品牌调性确定提炼品牌色。继而推导衍变出辅色。辅助色起点缀修饰作用,尽量和品牌拉开差距,使得整个界面的配色更有张力。

品牌色应用范围:logo主视觉或背景,图标可操作状态,导航栏等。

辅色应用范围:提示、辅助图标,子业务或功能的类别划分。


*主色与辅色的应用案例

 颜色梯度


我们从品牌色和辅色依次衍生出9个梯度。

横列明度从上到下依次递增:不同的明度可以用来解释元素的不同状态。

纵色色相从左到右依次变暖:可以用作同一色系下的颜色搭配,以及渐变色的吸取参考。

梯度的配色设计在控制颜色数量的同时,极大地丰富了页面的层次。让界面的配色更有章可循。


*梯度配色的应用案例

 

 中性色

页面元素不一定都是有明确色彩属性的,中性色的搭配使用,能让需要强调的内容更容易被用户发觉,从而帮助他们完成操作。

同样为了使界面元素的配色与品牌色有一定关联性,我们利用从品牌色里提取色值运算出三种灰度。

highlight

用于信息高亮提示背景色

secondary

次级文字按钮,图标未选中状态

dark

toast背景,导航图标

 

除此之外中性色还运用在文字信息传达上,后面的排版章节再做详细说明。

 

 功能色

功能色的定义通常要符合主流用户的认知习惯或者行业规范。通常颜色的明度较高,色彩比较鲜艳,能给用于一定的情感暗示。

recommend

主要操作、文字链

success

提示安全,成功

warnning

警示,报错

*中性色&功能色的应用

 图像

图像的取材遵从清晰聚焦,传达精确,场景真实三个基本原则。

清晰聚焦

主体鲜明,避免大而乱的背景从而干扰主体。

传达精准

图像选取要能精准地传达出其所要表述的内容。

案例:关键字[幼儿保险]

场景真实

取材推荐使用真实、自然的场景,更容易拉近产品与用户的距离。

文字排版

字号

F1-48pt medium

金额大字体

F2-28pt regular
F3-24pt medium
F4-24pt regular

页面标题

F5-20pt regular

模块标题

F6-18pt medium
F7-16pt medium

按钮

F8-16pt regular

控件标题

F9-14pt medium
F10-14pt regular

正文

F11-12pt regular

辅助文本

字色

排版

大段文本进行排版时要遵循垂直的韵律关系。预设一个基准行高,要保证正文始终压在基准线上,所以标题或配图的高度和间距之和要为基准行高的整数倍。

基准线行高预设为24px