UI设计小白兔之视觉规范—UI设计师之间的共同准则

hello 大家好，

我是Wenhao,大家十一快乐，看过昨天的70周年大阅兵和烟火晚会相信每个人都倍感骄傲与自豪。“团结，奋斗与进取”是我观看完阅兵后对民族崛起与国家复兴的反思，折射到在工作上也是如此，要有女排精神，认真对待每一场比赛，在平凡的日常中积聚力量。上一篇文章我们简单聊了一下sketch的组件，说到组件，还有一个模块是不得不提的，那就是“视觉规范”。

视觉规范，个人从字面上取得的理解是，一套（项目的）UI页面整体效果或设计上所遵从的规则与条例。设计思想本是自由流畅的，但在设计表现上却是需要框架的，或者说是需要平台，但凡存在平台，都有平台自身的规则与约束，这一点和我第二篇文章中讲到的“dribbble设计与业务的联系”如出一辙，感兴趣的朋友欢迎去那里看看。

什么时候建立“视觉规范”？我通常情况下是先输出页面，把我脑海中的想法快速输出到几张主要的关键页面上，然后停下来，看，看是很重要的，看整体视觉效果是否合理，是否满足业务需求，是否贴近我的原始想法。这通常需要考虑很久，也是整套UI设计的关键，作为核心的几个页面风格要统一，需求要体现完整，交互动作要流畅，用户习惯要遵从，从以上几点出发反复修改，反复斟酌。当关键页面确定下来之后，我接下来需要做的工作就是制作主要的的相关组件，并同时建立起“视觉规范”。是的，任何设计不会先告诉你应该怎么样，而是你来告诉开发同事它是怎么样的，所以我认为“视觉规范”是帮助开发同事更好理解你的设计，帮助设计团队的其他设计师更好的进行后期协同，因为它规定了所有的元素特征和条件。

视觉规范都包含什么？一份具有亲和力同时又清晰明了的视觉规范，也是体现设计师设计感的一份设计作品。每个设计师的设计规范都由自己做主，什么样式的排版，按照什么顺序排布，如何表现，都由设计师自己操刀，但其中必不可少的内容元素及命名规范是我们应该要知道。

1.色彩规范，也可以称之为风格规范，将页面中所涉及到的所有色彩按照主次用色块排列出来，并将它们的色彩名称以18进制进行标注，我们大部分了解16位进制的色彩命名，如255的正红#FF0000,#FF0000是16位进制，之所以用18进制主要是考虑到有些颜色可能会存在透明度，这时候，前两位用来标注透明度，你可以自己定制规范也可以使用现存透明度的既定规范。举个例子，如不透明的255正红，其标注色彩为：#FFFF0000；如50%透明度的255正红，可以为其标注色彩为：#7FFF0000。接下来就要命名这个色块在这个项目中的名称，如页面的主色可以命名为“color_main”，一级辅助色“color_auxiliary1”，高亮色“”color_highlight“，各个不同元素的色彩也可以以他们的名称来命名，如深色分隔线颜色“color_partition_line_dark”，黑色/白色块可以直接命名为“color_white/black”。

2.文本规范，在UI设计上的文本类型就很固定，列举出你常用的字号，包括样式，如“24px粗体”并将其效果如实反映出来，行间距及间距比例也列出来，方便起见，我们可以将这种字号命名为"H1"，以后我们就知道在这个项目中H1就是指24px粗体文本。至于它是什么颜色，我们就可以利用文本组件替换颜色了，在第三篇文章中我提到了如何制作文本组件，其中也包括了文本色彩的替换。

3.icon规范，需要标注的内容有，1）页面中不同大小的icon尺寸（eg 24px/14px...），2）不同大小的icon在不同地方运用的文字说明(eg 最大尺寸的icon 用于导航栏/TabBar大图标...)，3）每个不同大小的icon名称(eg 最大的icon可以命名为“icon_maximum”，正常的icon可以命名为“icon_regular”)，4）最后不要忘记用矩形示意一下不同尺寸的icon展现形式，如24px的icon就画一个24px的矩形或是一个统一的icon放在名称下面。

4.间距规范，需要标注的内容有，页面中不同间距的尺寸（eg 5px/13px...），每个不同大小的间距名称（最大间距：distance_maximum，正常间距：distance_regular...）不同大小的间距用在的不同地方(eg 13px的间距 用于每页的页边距)，

5.圆角规范，如上。

6.阴影规范，这里要注意一点，我们的阴影通常情况都是有不同透明度外加X/Y轴偏移和模糊的纯黑色。所以需要标注的内容有，每个阴影的参数（eg X:0  /Y:8  /模糊：16  /扩展：0)，用在不同地方的说明(eg 卡片选中后的阴影效果), 每个阴影的名称(比如X:0  /Y:8  /模糊：16  /扩展：0的阴影类型可以命名为 shadow_black_8），最后不要忘记用矩形展示出来。

7.蒙版规范，蒙版有四种基本形式，带有透明度的黑色蒙版，带有不同透明度的渐变黑色蒙版，彩色（有色）蒙版，带有不同透明度的渐变有色蒙版。所以涉及到色彩时要标注出颜色18进制的色彩名称，和透明度。如运用在卡片图片上的30%黑色蒙版，画出一个矩形（一般为正方形）填充30%的黑色，标注色彩为#B2000000,此类型的蒙版可以命名为“mask_black_a30”，最后附上文字说明它运用的地方。

8.透明度规范，包括3个内容，图列示范，名称以及透明度参数表。因为在UI设计的页面中，黑色透明度最为常用，我们就以黑色透明度为例，如30%的黑色透明度可以命名为“opa_black_a30”,透明度参数表主要是服务于色彩规范中的18进制前两位的命名。

视觉规范就像是产品使用的说明书，目的是为开发人员和其他UI设计师更好的了解页面设计的各个元素。是的，它是对页面元素的说明，它更适用于UI设计师之间的协同合作，并不是一份专门写给开发同事的“导出规范”，“导出规范”也是是”API说明”，详细告诉开发人员这个接口的需求和内容，后续会为大家讲解一下页面的“导出规范”。

甜心小结

想了解更多有关设计或对设计与艺术感兴趣的朋友可以关注我的微博“UI设计小白兔”除了UI内容，还会涉及插画与平面，三维与产品。通过大神的指点我了解到，想努力成为一个合格的UI设计工作者从微观来讲，在设计与制作方面不仅仅要掌握页面设计的自然美观与交互的流畅，（欢迎/导航）页面风格的插画绘制，三维logo动效也是必须要掌握的技能；宏观来讲，在设计过程中要考虑到开发的流程，以及开发进程中所遇到的一些可通过优化的UI设计而避免的障碍；还要考虑到页面对后期运营的可迭代性，有些项目不仅需要前端的页面即我们俗称的UI页面设计，同时还会有系统的后台管理端，这时候我们就要考虑到前端页面对系统后台的贡献，即后台的链接中对页面模块化的利用程度。

我很有幸在北京工作，可以切身感受到国力的强盛与欢庆的气氛，祖国的繁荣昌盛关系到我们每一个人，她是我们在海外时最坚强的后盾和最挺拔的脊梁，一句“此生无悔入华夏，来世再为中华魂”不断萦绕耳旁。也在此祝愿我的明天，祖国的明天会更加美好，祝福大家国庆节快乐，拥有一个快乐的心情，积极的拥抱明天。