如何制定一套UI设计规范
本文是作者根据自己的项目经验，对设计开发规范的制定和迭代的一些思考，这是一套从实践中总结出来兼具普适性和可执行性的方法论。最后分享作者是如何在工作中协调产品，设计，开发做出合适的规范，同时三方并行实施好这个规范为产品赋能的。
why（为啥要制定规范）
a. 统一性（UI,UX,前端），多个设计师横向合作时对通用部分的组件设计保持一致，强化视觉和交互的一致性，也便于前端建立统一的组件库，提高共用组件的复用率。
b. 高效率，基于统一性制定三方（产品，设计，开发）适用的规范让上下游合作沟通有依据可参考，减少沟通成本，保证产品质量。
c. 可延续（产品，团队），一款完善的产品UI规范可以帮助大家（产品，设计，开发，测试）快速定位对应页面和组件，新人/团队 可通过阅读规范快速了解产品，从而增加产品和团队的可延续性。
who（谁来制定规范）
一般团队都是UI或者UX来制定规范，制作人员在过程中一定要积极与团队其他成员深度沟通达成共识，制作出一套大家都认可的规范，并且严格执行。
when（啥时候制定规范）
a. 工程规范（文档规范）
工程规范需要在项目启动前提前规划好，建立UI目录规范，文件命名规范以及梳理好所需工程路径，与产品，前端统一规则。
b. UI视觉规范
在DEMO期，制作输出3-5个常见系统界面风格确定后就可以开始制作一些基础规范了，然后慢慢的随着版本不断选代完善。
how（怎么做规范）
- UI视觉规范
一般是基于1920*1080（16:9）分辨率来设计界面，这个分率手机目前是市面占比最高的。在适配性方面可以覆盖更多其他分率机型。
a.文字（字色，字型，字号）
界面中文字占比在屏幕中最大，选择合适的字体对信息的可读和易读有很大的提升（并且也影响视觉风格）。通过合理使用不同字色，字号和字重以及不同透明度来强调界面中的重要信息层级。
字色 一般涵盖常规色，辅助色，突出色，字色的定义一定要一致统一，例如红色表示警示色；绿色表示正常操作，引导色；黄色作为重点信息强调色等，类似这种概念要一直贯穿整个产品Ul，让界面的信息色彩更有统一性和识度。
字型 通常会选取同一字体2种字重的字体一粗一细，不同字重字体可以体现出不同层级关系，可有效凸显重要信息。注意一定不能使用衬线体。
粗体：多用于标题，图标文字，页签文字，按钮文字等
细体：多用于系统文本，属性文本，聊天文本，描述性内容等
字号 的大小决定信息层级和比重，有规律的大小字号，利于信息阅读。一般常规大小字号从20px，24p×，28px，32p×，36px，40p×，44px，48px，且都是间隔4px。
除了字色，字号，字型不同字重上作区别，我们还会经常在明暗关系上，利用不同透明度来体现文字层级，提升阅读的节奏感。
b.排版（整体与模块，模块与内容）
排版是对界面信息的梳理分层，合适的排版布局能提升信息的识别度，其中栅格化设计是我们排版布局最重要的一个基础技巧和规则。8点网格和格式塔原理是我一直在做界面设计排版布局用到方法，以8px为最小的原子单位，对界面的边距，列，水槽，进行划分，包括对控件的长宽也是以8px倍数去设定，让界面中所有元素都有规律可循，这样让整个页面更加有秩序感。
可用网格工具对界面信息元素布局，之所以选择8px为一个单位，是因为目前市面中主流手机屏幕分辨率，大多都8的倍数，普适率很高。对于开发而言也能更好做适配，且不容易失真。
栅格系统设计更多是一个辅助工具，了解其规则才是最关键，可活学活用，不是绝对的。下面就是利用栅格系统设计对界面排版布局做的一些规则设定：
整体与模块规则：把每组信息（亲密性）进行有效分组，布置在界面中，通过栅格化设计让他们彼此都存在空间关系和物理关系。
模块与内容规则：局部信息排版，设定好间距规则相当重要，更容易让用户读懂信息内容，间距一般选8的倍数，例如：8,16,24,32等。
c.控件（按钮，页签，列表，筛选框，进度条等）
界面中的控件都是可视化图形。其中大多数都是需要频繁交互的，比如点击按钮提交表单等。
按钮控件 是所有组件中操作频率最高的，应用场景复杂，设定定义好按钮层级，类型，大小，颜色至关重要，每个产品按钮的规范都略有不同。
页签控件 是一种内容切换组件，将所属模块内容进行展开和收纳的，因此页签的视觉层级很重要。页签类型相对简单，主要分一级页签（功能模块），二级（功能内容），三级（局部分类）。
列表组件 是基础组件之一，列表组件主要分为两种类型的，一种是筛选型列表，这种是组合式双层展开列表，例如下拉列表等；另一种是内容型列表，主要是某个道具装备详细内容描述。列表组件的作用就是将繁杂信息进行收纳展开。
进度条 是UI中最实用的一个控件，表示当前耗时进度或者未完成的百分比，让用户有一个明确的反馈预期体验。从整个产品UI层，不同颜色或者样式的进度条来设定好它的层级以便它更好实用于各个层级的页面当中。
d.适配（常规，异型机）
app设计的过程中，由于屏幕比例与尺寸的差异，为了给不同设备的用户带来更好的用户体验，适配也是我们着重需要处理好的一个环节，并且是前期就要与前端开发设定好规则统一标准。有些可能存在需要程序重新去封装组件，写出一个新的适配组件从而让我们的UI在不同机型上做到完美显示。
设计尺寸和比例都是采用1920*1080，1134*750及1280*720，都是16:9的比例。18年之后大屏时代，大多都选择1920*1080作为基础设计尺寸，以此来适配其他尺寸，既能确保Ul清晰度又能更好普适更多设备（此分率市场占有率很高）。
Ul适配，更多涉及到引擎里的规则。对于常规机型尺寸我们采用是等比缩小或者保持相对置去适配；针对异形机（ipx刘海，曲面屏），我们在设计时候首先要设定好我们安全区，在引擎里再针对性调整点参数，设定好Match参数；背景图的适配相对简单很多更多的是裁减或者是等高比例放大。
要针对iPhone和iPad做不同的适配规则。
e. 图标规范（矢量图标）
随着css3的发展，网页和app图标除非有必要，可以使用字体图标替代设计图标。但是有些特殊行业比如手游，有大量图片资源。
图标在UI设计当中有着非常重要的作用，它即传达着整个UI视觉风格调性，也代表着系统功能的作用，规范的图标既能确保风格的一致性和概念的统一性。以量图标为例，图标的设计一定要简单，清晰，遵循一定的规则对几何造型进行加工设计。绘制时候我们也是借用了Materialsdesign网格，在这基础上制作我们自己的网格规范，作为绘制图标的参考标准。
不同类型图标制作输出大小，颜色渐变，阴阳正负形占比都有一定的规范。矢量图标绘制时确保同一套图标的整体完整性。统一的用色规范，统一的圆角角度统一朝向，统一的形状，统一的icon线条粗细与整体视觉大小统一（而非逻辑大小）。
图标绘制标准：绘制标准框，适用于以上各类型图标，范围结构标准框，绘制尺寸 128*128
图标绘制具体方法：
1，使用标准框归纳图标轮廊比例
2，偏方形图标视觉效果会偏大，需适当缩小
3，图标不够饱满，不足以填充内容区，需要尝试更改造型，主体放大或者增加点
4，图标镂空程度要一致
5，图标朝向保持一致，透视尽量以正视角为主，不能过度夸张
6，线条宽度，空隙，转角等距大小一致
f.切图命名规范
图和标注是设计师的最终产物，切图方式的合适精准将会最大限度的降低沟通的成本，提高前端开发效率，起到事半功倍的效果，并且对UI性能（包体大小，内存，DC）都有会直接影响。
切图命名规范一般使用英文，下划线，数字，每个单词首写字母为大写，命名方式一般分两类，一种是公用资源，另外一种是系统模块独有的资源。
公用：类型_系统_功能_状态
举个例子：Tab_Role_Fashion_Select
系统资源命名规范：系统_功能_状态
举个例子：Role_Fashion_Select
资源类型英文命名参考
控件类型 命名规则 资源类型
Image Img_系统_功能_状态 图片
Label Lab_系统_功能_状态 标签
Text Txt_系统_功能_状态 文本
Button Btn_系统_功能_状态 按钮
Tab Tab_系统_功能_状态 页签
List List_系统_功能_状态 列表
Slider Slider_系统_功能_状态 滑动条
CheckBox Cbox_系统_功能_状态 单选，勾选
ScrollBar ScrBar_系统_功能_状态 滚动条
ProgressBar ProBar_系统_功能_状态 进度条
Component Comp_系统_功能_状态 组件
之所以这么去划分，是因为不同类型的资源所放置的文件夹不一样，通用资源会统一放在common文件夹；系统特有的会放在系统对应的切图文件夹，这样便于我们回查，资源的来源会更加清晰，能被快速定位，从而有利于我们后续版本快速选代。
图尺寸，大小必须为2的倍数，一些动态配置的切图图大小要一致；做成特效的资源需要切成2次幕大小，例如16，32，64，128，256，512等。
切图方式（找规律，复用图片）：
九宫，三宫（拉伸，复用）；对称（1/2，1/4）；拼凑，缩放等，切图的方式精准影响的效果的还原，同样也影响包体大小，针对不同类型的资源选择合适切图方式很重要。
三宫切（左边，中间【拉伸】，右边）
九宫切（复用）针对带花纹大外框可利用九宫复用花纹的方式去切。
- UI与性能规范（overdraw，drawcall，内存，包体大小）
产品的性能优化，是产品开发的一个重要需解决处理的工作，而UI性能优化是尤其重要当你的产品包体很大，用户需要足够多的时间来下载应用。从UI设计角度去分析UI性能主要从两个方面去拆解：
a.界面设计
界面设计主要涵盖4个方面：界面结构，文字样式，元素制作，界面适配。
1. 界面结构层级复杂，同屏叠加的层级越多性能开销越大，反之越小，保证视觉效果的前提下，层级控制在3层以内，且尽量不要使用大面积带透明度资源（overdraw优化）。
2. 文字样式，文字描边，投影和渐变慎用，特别是大面积动态文字加描边对性能损耗很大，会导致重复绘制次数增多（drawcall优化）。
3. 界面中的元素制作尽量规整，九宫资源更好，特别是大面积底板，叠加各种样式光效不仅还原度低，且图集内占比也大对包体和内存都有影响。
4. 界面适配，适配不同分率一级页面最好是全屏设计，会大大提升性能，尽量不要设计窗口化界面，即使设计也要用不透明的背景图全屏（drawcall优化）。
b.UI资源
UI资源的影响主要有3方面因素：切图大小，UI图集，UI背景图。
1. 切图一定不能留白且大小要为2/4的倍数，尽可能小， 可利用九，堆成，拼漆，拉升等方法从而让图集小而饱满（内存优化）。
2. UI图集，图集划分：一个公共资源图集common，大小控制在2048*2048，因为是常驻内存，一定要充分利用；主界面资源相当较多，图集大小也要控制在2048*2048，2048大小图集要严格控制个数（内存优化）。其他图集分别为各自系统独有的资源，确保同一个系统界面出现的资源在同一图集里，大小尽量控制在512*512以内，提高界面的加载卸载速率及性能（内存和drawcall优化）。
3. UI背景图，背景图一定要控制个数，能复用一定要复用；背景图不使用图集，使用rawimage组件；变化不大颜色单一且模糊的背景图，可尽量压缩大小使用，且背景图大小要是2/4倍数。
写在最后
一切的制作最终还是要以落到产品本身，规范的价值在于实施。以下几个小经验可有效帮助推动规范落地：
a. 制作编写规范过程中要多与其他UI人员讨论，强化UI人员对规范执行，制定完成后需要产品经理协调策划，程序，QA，制作人和老板一起就规范进行宣讲，让每位参与人员都有规范概念，针对他们的建议作调整，共同维护好规范落地到版本。此时指派一名前端同事一起制作好UI组件，把UI前端组件库做好，例如：按钮页签，进度条，一级页面框体，二级页面框体，提示框体，tips框体等。
b. UI组内部制定计划，实行责任制，每个功能模块负责人都要跟进好自己内容的落地并定期组织版本审核会。
c. 针对不同团队人员配置，安排特定人员来专门负责这一块落地工作。
d. 规范制作不是一而就的，也会随着版本代不断更新完善，所以需要建一个在线文档，方便部门内其他成员随时能查阅到最新的规范规则，并根据规范去选代旧内容。
e. 规范制作要通俗易懂，要真正能为产品赋能，做到真正统一，而不是为了“好看”而做规范。
f. 好用的工具会让我们推进规范时事半功倍，制作Ul字体工具，把字号，字色，字型制作到工具，提高容错率，在规定的范去制作。UI资源索引查询，快速定位到资源在那些地方有被引用，从而能快速替换检查。
