UI设计规范指南

在上一份工作中我经常游走于各个项目，有些项目相对比较大，不仅涉及的页面上百个，合作的小伙伴也很多，这让我深刻的感受到设计规范的重要性，于是想给大家分享一下我在做设计规范时的经验所得

一、什么是UIKIT？

UIKIT是项目中应遵循统一规范的视觉参数、控件与模块设计文件集合，KIT应当配备关键参数标注文件，用于FE或DE创建开发所需的公共内容。

UIKIT文件夹包含KIT的PSD/sketch等设计源文件、效果图及标注。

二、UIKIT在项目中有什么作用？

1、UIKIT主要用于项目多UI之间的合作，用于制定视觉规范，快速迭代。

2、用于前端查看与参考。

三、与前端的合作注意哪些？

1、KIT产出时间

UIKIT一般在视觉提案评审通过之后，整理视觉参数，控件模块等设计文件，交付产出UIKIT文件夹，并告知前端，如果该项目没有视觉提案，则产出于页面评审通过之后。

2、状态及分类

UIKIT应当包含控件完整的交互状态，UIKIT对控件的分类可参照bootstrap对组件的分类，必要时需要标注组件颜色，大小，间距等相关视觉参数。

3、更新与迭代

如果UIKIT有更新和迭代，即时传达至前端，并且告知本次更新和迭代的内容，最好配备图文说明。

四、与UI设计师的合作注意哪些？

1、产出方式

统一先由一个人按照规范将控件，模块，视觉参数等整理到UIKIT，需按照一定的规律布局，切勿随意布局。

2、产物类型

与设计成员统一设计工具，产出设计源文件

3、更新与迭代

建议统一由一个人整理和更新UIKIT，如果多人更新，则需按照规范，更新前先告知其他UI这次更新和迭代的内容，并且告知影响的页面。

4、命名规范

- 重要内容图层应重新命名，图层应按用途、内容、状态、版本等维度进行命名。

- 命名语言应在产品产物范围内保持一致；不建议多语言混用。

- 如选用英文命名方式，则须按照前端开发的习惯拟定各图层名称。

 

五、UIKIT具体应包含哪些内容？

1、  色彩

（1）主色调

主色调指的是在某一产品中，以某一色调为主的颜色。

（2）辅助色

辅助色是指在某一产品中辅助或者补充主体色的颜色。

（3）状态色

状态色是指在某一产品中需表达成功、报错、警示等系统状态所采用的颜色

（4）中性色

中性色是指在某一产品中所采用的的灰色系颜色。

（5）其他色

根据产品的UI样式，可能还包含背景底色、描边色、投影色、特殊色等

注意：主色调、辅助色、状态色的色值在UIkit中用RGB、HEX、HSL或其他符合开发要求的格式表达，并附该色彩的图片。

参考下图：

2、文本

（1）字体

UIkit中需全部列举出产品所用的字体。

（2）字号

UIkit中需全部列举出产品所用的字体的字号。

（3）用途

UIkit中需标注出产品所用字体的用途。（如，用于表单、内容域的标题）。

（4）样式

PS有锐利、浑厚、犀利、平滑四种字体样式，但是不建议采用，因为前端代码实现只能粗体，细体、正常。

（5）颜色值

UIkit中需标注出产品所用字体的颜色。

参考下图：

3、组件

较为全面的组件类型和说明可参考https://ant.design

这里就不一一详细说明，列举部分组件供大家参考...

 

4、参数标注

推荐工具markman或其他PS插件来进行各种的参数标注。有利于UI之间、UI与前端之间进行合作。

（1） 目的

标注能让前端工程师清晰明了的看到所需的信息，从而减少沟通的代价以及尽可能还原视觉效果。

（2）主要受众

UI设计师、前端工程师、开发工程师

（3）标注重点

- 根据前端或开发的需求，仅标注关键且有用的信息；

- 标注主要针对独立页面，相似或重复页面可根据情况标注。

（4）颜色

- 网页产品使用十六位制颜色代码进行标注。

- 其他平台产品使用开发需要的颜色制进行标注。

（5）尺寸

标记内容与页面边距、大型内容模块之间的间距、大型内容模块的尺寸。

（6）文本

- 引用UIKIT中已定义的用数字标记的样式说明进行标记。

- 每个某块选取独立页面标注；相似页面不标注。

- 对字体，字号，颜色，用途进行标注。

参考下图：

 以上如果对您有些许帮助，那就点个赞👍吧～