移动端UI设计规范

边距、间距

原则：边距（左右）要大于间距（上下）。

模块边距

10px、12px、15px、16px

15px 常用

10px 最小，要展示更多的内容才用

模块间距

8px、10px、15px、16px、20px

常用 10px 15px 20px

内容间距

5px 10px 15px

内容边距

5px 10px 15px

列表

最小高度 40px

单行 53px 55px 66px

全局规则

图片比例

16:9、4:3、3:2、1:1 和 1:0.618（黄金比例）。

字体​

原则：在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。少即是多，在视觉展现上用尽量少的样式去实现设计目的。避免毫无意义的使用大量字号、颜色、字重强调视觉重点或对比关系。

字重，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500，在英文字体加粗的情况下采用 semibold 的字体重量，对应代码中的 600。

字号选择在 3-5 种之间，保持克制的原则。

行高 1.4

• 12px 提示语
• 14px 主文字
• 16px 标题
• 18px 大标题
• 20px 最大标题

颜色

确定主题色，定义好字体、背景、禁用、线条边框、红橙黄绿蓝等色值。

每种色值最多配有 2~3 种浅谈变化，比如文字可有主、次、提示等三种（#333 #666 #999）。

使用的大颜色种类不可过多，常用的有黑、白、主题色、绿-成功、红-失败、黄-警告。

阴影

离地面越远的物体，产生的阴影颜色越淡、模糊度越高、面积越大；反之则颜色更深、模糊度越低、面积越小。

阴影向下：主要应用于组件内部或组件本身，是比较常规场景的用法

阴影向上：主要应用于底部导航或工具栏等

阴影向左：主要应用于右边导航栏、抽屉组件或固定表格栏

阴影向右：主要应用于左边导航栏、抽屉组件或固定表格栏

一级阴影

@shadow_1_down:
0px 1px 2px -2px rgba(0, 0, 0, 0.16),
0px 3px 6px 0px rgba(0, 0, 0, 0.12),
0px 5px 12px 4px rgba(0, 0, 0, 0.09);

二级阴影

@shadow_2_down:
0px 3px 6px -4px rgba(0, 0, 0, 0.12),
0px 6px 16px 0px rgba(0, 0, 0, 0.08),
0px 9px 28px 8px rgba(0, 0, 0, 0.05);

三级阴影

@shadow_3_down:
0px 6px 16px -8px rgba(0, 0, 0, 0.08),
0px 9px 28px 0px rgba(0, 0, 0, 0.05),
0px 12px 48px 16px rgba(0, 0, 0, 0.03);

文案

语言文字的表述需要精心推敲，仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性，同时让用户体验更加友好。

以用户为中心

文案以用户为主体来写作。比如：当用户向后台反馈问题、提出建议或申诉时，使用「我们」是合理的语境，例如「我们将会审核你的申诉」。

精简语句

省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。尽量提供简短、易于快速获取的内容。比如：保存而不是保存修改。

使用用户熟悉的语言

站在用户的角度，说用户熟悉的话。使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。间接、暧昧模糊的说法，生僻和过于「文雅」的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。

表述一致

• 描述同一个事物的词汇要保持统一；
• 上下文的语法、语种、语序要保持统一；
• 操作的名称和目标页面标题的名称保持一致。

用词精准完整

通用基本用词要规范，不要写错字，词语表达要完整。

专业用语要精准，并是所属行业认可通用用词；时间的表述必须明确。

比如：其他（其它x）、抱歉（对不起）、验证码（4位或多位数字或字母图片）、校验码（手机收到的6位数字，验证用户的身份）、登录（登陆x）。

语气

直接使用「你」、「我」来和用户对话，与用户建立亲密感。避免使用「您」，让用户感觉太过疏远。

不要在同一个句式中混用「你」和「我」，交互中指代混乱会让用户相当纠结。

多给用户支持与鼓励，不要命令和强迫用户，比如：请输入字母数字组合而不是不能输入字符。

大小写和标点符号

• 产品名称全称，首字母大写。产品名称缩写需要全部大写，如：ESC、SLB 等；
• 正确使用专有名词的大小写规范 iOS Android；
• 全英文的标题，标签，菜单项等等都要遵循英文句式中首字母大写的规范；
• 统计数据使用阿拉伯数字，你有 3 条短消息；
• 谨慎使用感叹号。

优化事项

重点突出

每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下，应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。

流程明确

为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。

异常可控，有路可退

在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。

要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。

表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。

减少输入

由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时应尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

减少等待，反馈及时

页面的过长时间的等待会引起用户的不良情绪，当出现加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。

数据加载：进页面、下拉刷新、上滑请求。

局部加载：点击提交按钮，增加、删除、修改数据。

---

关注公众号 前端一锅煮，全栈学习分享中~