使用sketch library简化设计流程初体验（become ui1.0设计规范制作与应用全过程）

Becom ui1.0的产生背景

随着公司产品的不断细化，和设计、开发团队不断扩大，为了维护我司品牌设计整体化，提高设计与开发的工作效率，建立整体设计体系，建立整体细化的UI KITs是目前解决以上问题最有效的方案。

Becom ui1.0是一个中后台的sketch组件库，通过统一色调、统一尺寸、统一组件达到设计产出的规范性和一致性，在设计团队需要快速产出设计稿时起到重要的作用。

开始制作Becom ui

1.首先在文件夹中创建一个新的Sketch文件，我这边命名为Becom UI1.0.

2.然后规划整体的设计体系，我这里分为颜色、字体、图标和元素四个大类，分别新建不同的页面并命名，这样我们整体的设计体系就生成了。

3.我们首先要确认的是颜色体系，由于要适应多种主题配色，快速呈现出不同的效果，Becom UI 提供了非常多主题色彩方案和功能色彩方案。方法是：在画板上分别绘制形状，填充想要的颜色，在右侧工具栏“外观”中选择创建图层样式并使用“/”来进行命名，如“颜色/主题/红色、颜色/主题/蓝色”等等。

4.然后我们要确认字体体系，在字体页面中，我们需要绘制字体以及该字体相应的大小、字重，并用“/”区分层级进行命名，如上文所述，设置图层样式。

5.在元素页面绘制元素组件，单击鼠标右键选择“创建组件”，给该组件使用"/"归类命名，一个Symbol就创建好了，其他元素以此类推。

6.将绘制好的的图标也一一根据上面的方法创建好Symbol

  7. 整理Symbol页面组件，方便日后的维护。

 8.单击“文件”下的“添加到资源库”，然后关闭就完成了。现在随便打开一个sketch文件，在顶栏symbol里就可以看到你创建的library了。

9.最后的最后，大家可以使用svn或者设计协同软件如蓝湖网盘将该文件进行团队内共享和维护，不要忘记写设计规范文档提供给开发人员进行开发哦～

使用Becom ui快速搭建的页面实例