第一节：颜色

在移动端规范颜色的部分，将从「类型」、「用途」两个方面提供可以适用移动端项目的基本颜色规范。

其中「类型」包括：主题色、辅助色；「用途」包括：文字色、背景色、状态色。

按类型分

1.主题色

在实际项目中，会有一个与业务或者行业相呼应的主色（主题色 & 品牌色），主色要参考的因素比较多，不同的行业、产品、用户群体都要兼顾，根据实际项目确定即可。一般主色的饱和度建议不低于70，避免在不同的使用环境中识别度不高。

这里选取蓝色（色值：#1D6FE9）为主色。（此处没有任何指导或建议的意思，只做事例展示）

2.辅助色

除了主色以外，规范中的其他颜色我们统称为辅助色，辅助色在项目中起到传递不同信号、分割内容、强调不同内容的重要程度等作用，一般情况下辅助色包括: 提醒类（成功、失败、警告、超链接）、中性色（黑白灰），中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。

大多情况下辅助色是根据主色确定的，在视觉上保持一致，搭配使用时视觉上保证和谐。结合主色，得到辅助色类型如下：

按用途分

1.文字色

文字在不同使用场景中，所要传达信息的重要程度不同，一般情况下使用 3-4 种中性色就可适用大多数的功能页面。根据内容的重要性的不同对应不同类型中性色。在传递提醒类内容的文字时使用相对应的提醒色。

中性色文字在浅色文字在深色背景或深色模式时，会使用反白的文字色。无论是中性色文字还是白色文字，这里均采用调节透明度的方法为示例。

2.背景色

理论上所有的颜色均有可能作为背景使用，但实际项目的功能页中用到 2-3 种中性色（包括#FFFFFF）即可，使用时根据实际所承载的内容的重要性选择使用。

3.状态色

状态色是对按钮不同状态时的颜色：Normal-常态、Press-点击态、Disable-不可点击，一个按钮至少要具备常态、点击态两种状态。这里提供一种方法，在不同的项目中有统一的方法实现。以主色为例进行说明，常态一般使用主色作为按钮的背景色，在点击态时在常态背景上叠加一层，调整叠加图层的属性则可得到对应按钮状态的背景色。

第二节：图标

图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号，有非常大的覆盖范围。

1.图标尺寸

在常规使用中，为避免图标个数过多，选择8px（最小尺寸）、12px、16px、20px、24px、32px、48px、64px（最大尺寸）作为主要图标尺寸。

2.图标网格系统

在图标设计中，为避免图标图形不一造成视觉上的不平衡，我们需要用到图标栅格系统。

以 32pt 的图标为例，首先要画一个 32pt 的正方形，确定出血线，画出内部正方形（图标 2/3-3/4 大小），画出内部圆形（比正方形大 2-4pt ），然后画出宽形和长形（一端宽度比圆大 2-4pt ），具体参数看下图的案例。

3.图标转角

移动端项目中，不同类型的 APP 用的图标转角都不尽相同，比如金融类的产品会更多的用到直角，而母婴类的产品则会更多的用到圆角。下图所示的是几种转角类型。

圆角规则：外转角-1/2线宽=内转角

斜角规则：常用斜角有30°、45°、60°

4.图标端点

在绘制线性图标中，经常会将图标进行断线，可以根据项目类型选用以下几种端点。

第三节：字体

字体是 UI 设计中最基本的构成之一。字体系统的建立主要解决的是内容可读性以及信息的表达，同时选择不同的字体传达不同的设计风格。通过定义字体的使用规则在设计上达到统一性和整体性，从而在阅读的舒适性上达到平衡。

我们建议从下面四个方面出发：字体家族、字号与行高、字重、字体颜色

1.字体家族

优秀的字体系统首先是要选择合适的字体家族。若无特殊需求我们推荐优先使用系统默认的界面字体。

iOS 默认字体

中文：苹方-简；英文&数字：SF UI Text

Android 默认字体

中文：思源黑体；英文&数字：Roboto

2.字号与行高

行高

行距/行高：Photoshop 里为从一行文字的底部到另一行文字底部的间距。但在前端代码实现上，行距会自动平均分配到文字上下端，因此这里说的行距/行高为每行字体占用的高度空间（如下图）。

行间距：从一行文字的底部到另一行文字顶部的间距。

行距（行高）= 字号 + 行间距

字号

3.字重

字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 Regular 以及 Medium 的两种字体重量。

我们建议标题类使用 Medium，以突出层级关系，让信息更清晰。正文和辅助文字建议使用 Regular 字重，当需要强调时，建议使用 Medium 字重。

4.字体颜色

文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。

第四节：阴影

1.亮色模式

在亮色模式下，页面的层级可以靠阴影进行区分，底层元素阴影面积较小、而上层元素阴影面积较大。

以下阴影规范依据安卓 Material Design 进行定义，大家可以根据自己产品定义符合的阴影效果，但要注意页面中内容层级的合理区分。

目前比较主流的设计为运用黑白灰和背景模糊进行内容层次区分，并非使用阴影，这里可以根据产品情况自行定义。

2.深色模式

暗黑模式使用深灰色作为背景色。深灰色背景可以表现出更广泛的颜色，有利于表现元素的高度和深度，因为我们更容易看到灰色上的阴影。

推荐的暗黑模式背景色为：#121212

在暗黑模式下，我们通过使用半透明白色覆盖层，来表达层级关系，作出阴影效果。随着元素高度变高，颜色开始变浅。高度叠加透明度范围从最低级别的 0％到最高级别的 16％。

UI设计规范视觉篇到这里就讲完了，后期我们会更新布局篇、UI栏类、导航类、按钮类、操作反馈类、表单类、提示类、列表类、加载类、缺省页等相关设计规范，敬请期待吧~