UI设计规范

UI Design Specification
设计规范操作的几大误区
动手前了解一下有哪些误区，可少走弯路

错误一：规范建立时机不对

错误二：对非重要界面进行规范设定

刚接触设计规范的时候，大多数人都会觉得设计规范就像一本设计圣经可以非常细致全面的指导设计工作，然后极有可能会对全部界面都做详细的规范，花了很多时间和精力做出的设计规范多达几十页好几十个细分模块，最后实际应用时发现自己被这份设计规范打脸，因为有时做新的页面，如果死板的100%遵循了规范，做出来的视觉效果不好；如果完全抛开设计规范，那之前做的过于全面的规范等于白做了，可见太过全面的规范会影响设计师发挥，并不是一件好事。
所以，整理规范时，应只针对控件、色值、质感、动效、品牌元素等重要界面进行规范设定。

错误三：规则没弹性

采用28原则只能针对产品80%的界面进行规范。这里讲的80%和20%是一个相对的概念，80%代表色彩、按钮、字体、间距等重要内容，这些内容需要进行详细的规范说明。另外的20%是指某些控件是不可复用并且不重要的，这种20%的内容不需要花费精力做进规范里。这个28原则需要设计师根据具体情况具体分析，作出更适合当下的设计。
如果对所有界面进行100%规范，一方面会束缚设计师的发挥，另一方面也会影响产品迭代的设计弹性，比如一个产品官网进行了100%规范，需求迭代时要在导航加上一个活动入口，这时如果死板的遵循原先的导航规范来加这个活动入口，视觉效果和活动数据效果可能并不理想，所以在面对这类需求的时候，适当的做出导航调整也是可以的。

错误四：规范没有迭代

在完成v1.0版规范后，产品还会一直迭代，产品改版过程中必定会不断优化设计。
如果设计师没有跟着产品改版的节奏去迭代视觉规范，一般会出现两种情况：一是被原规范的旧样式束缚，死板的遵循最初的规范，长久下去会出现视觉样式过时的问题。二是改版中用了新的视觉风格，没有及时总结归纳成规范，这样一来又会出现品牌形象走样的问题。
所以在产品迭代过程中需要对旧的规范进行更新优化，不好的、过时的规范需要及时同步归纳，并及时通知到项目相关人员。要不然，陈旧的规范起不到帮助设计工作的开展，反而是一种负面影响。

设计规范怎么做？

规范如何做到科学易用？以下六个维度可以作为参考

1、信息系统：字体选择、颜色、层级区分

产品中的字号应该有一个全局的规划，在同一个界面内，尽量少用太多太接近的字号，比如一个产品详情页的正文部分，如果同时用了12、13、14、15、16、18去排版，文字的层级对比会比较弱，不利于阅读，视觉效果也会有点凌乱。
如果你对全局的字号没把握，不妨参考一下上图的字号分布，这套基于12、14、16、20和34号的字号分布能够良好的适应布局结构，层次明晰，所以具有一定的参考意义。当然以上仅供参考，没有绝对的字号布局方案，设计师可以根据具体的产品情况来分布。

2、控件系统：按钮的样式统一

在产品中按钮控件的复用度是很高的，同样的一个确定按钮也会根据页面环境不同来设定不同宽高尺寸。
需要注意的是，即使按钮宽高不同，按钮样式也需要统一宽高比例、描边、直角、圆角、色值、文字区域、字体、字间距等，以保证按钮样式的统一。
另外，在一般情况下，按钮会有四种鼠标状态。不同颜色的按钮之间，相同的鼠标状态也需统一视觉效果。比如同层级的蓝色和绿色按钮放在一起，这2个按钮在hover状态下的明度变化看起来应相对统一。

3、布局系统：界面内不能出现多余的行间距

在设计的过程中，间距这个隐形元素往往会被新人忽略，间距能表明内容之间的层级和从属关系，凌乱复杂的间距会对用户认知造成较大困扰。
因此，设计师需要将间距当做色彩、字体、字号一样的元素来设计。一个界面中能用5种间距，就不要用6种；能用3种就不要用4种，这是一个需要做减法的设计原则。
另外，内间距尽量不要大于外边距。大多环境下，外边距小于内边距时内容会有外扩力，显得拥挤，有阅读压力。外边距大于内边距时，有适当的留白，内容没有外扩力，用户的视线不受干扰，更专注于内容本身。

4、配色系统

选择主色调时，首先确定产品的调性、用户对象和所要表达的气氛，以及利用色彩所希望达到的目的，色彩取向决定了这个产品的风格。产品的辅助色可用主调色的邻近色，也可用对比色。确定主色和辅助色之前，建议应用到各种页面中去看看实际效果，因为每个页面的使用环境都不同，反复验证后才能确定最终的色彩方案。
一般情况下，可选择一到三种辅助色配合使用，整个产品的色彩最好控制在四种颜色之内。

5、品牌系统：LOGO应用