设计稿/一键换肤，利用Sketch制作高效能设计规范
利用Sketch制作高效能设计规范
最近的工作项目，总是会有一些只需要改颜色，但是界面布局和设计不会变的页面，量还很大。之前没有建立组件库的习惯，只能一张一张的改，效率很低，也容易出错。最近网上看到了一些运用sketch组件库和style库来提升设计效率控制设计规范的方法，甚至可以达到一键换肤（改颜色），真的是想要啥就来啥哈哈。下面我就把方法分享给大家吧。
先看一下最终效果吧
可以看到，开始界面按钮的颜色是蓝色的，当我在style页面改变一个蓝色样式后，界面的按钮也跟的变了。
大纲
我会分三个部分向大家说明，这一篇先讲文字样式部分。
1.如何一键更改颜色、图层样式和字体样式
通过建立颜色、图层样式和文字样式的style库来管理页面。
2.如何创建symbol嵌套symbol
通过用大symbol嵌套小symbol的方式来管理页面，使替换更为方便。
3.如何通过“原子设计”的思想来创建一套视觉规范
将嵌套symbol、style库综合起来，建立一套自己的视觉规范。
一、如何一键更改颜色、图层样式和字体样式
在项目开始前，我们需要建立一份基础的字体和颜色和图层样式的style库，这样才能在绘制页面时方便调用，方便之后的修改和管理。
注意：
说明一下style库建立需要自己手动新建一页pages，不像组件库是软件自动建立。
在pages区新建一页，命名为style。
1.字体style的库构建
步骤1
在style页面整理一些自己常用字体样式，我的字体样式库构建分类是：颜色/字号/对齐方式/字体粗细。注意，在sketch里是用“/”来分组的。我通常分：深色、灰色、白色、其他色等大类。
步骤2
我用一部分深色的字体分类来举例，
① 首先定义好文字的字体、颜色、粗细、对齐方式、间距等属性，如果有特殊要求定义投影和渐变也是可以的。
② 选中定义好的一行字；
③ 在右面的属性面板，APPEARANCE栏
③ 在右面的属性面板，APPEARANCE栏选择Create new Text Stvle，并输入分好类的名称。再次注意sketch里只能用“/”来 分组，如：深色/22/左对齐/中等。
④ 把所有字体挨个录入到style库。
步骤3
如何调用字体样式
① 在画布上随便输入文字，不用在意字体大小颜色等属性
② 在右面的属性面板，APPEARANCE栏选择适合自己的文字样式，这样输入的文字就关联到自己建立style库了。
步骤4
老板说深色的字体颜色不好看，现在要改成原谅色。
① 在style库中，选中定义好的一行字，更改属性栏的字体颜色。
② 在右面的属性面板，APPEARANCE栏选择“Update Text Style”，这样只要是这个属性的文字，都会变成原谅色啦。你也 可以给字体加渐变，投影等。
2.图层样式和颜色style库的构建
图层样式和颜色的style库建立方法基本跟字体一样，初期我们需要总结出app的固有品牌色，功能色等。之后再APP的绘制过程中慢慢完善。
步骤1
① 我们在style页面新建一张画布，名为“颜色”。
② 将总结好的一些颜色分类，我的颜色分组方法是按照：颜色/颜色功能/什么颜色-纯色or渐变方向，如“颜色/品牌色/蓝色-上下渐变”。颜色功能分组还可以有：辅助色、字体颜色、背景颜色、分割线颜色等，图层样式的分组方法是按照：效果样式/什么样式/样式-序号-颜色-方向。如“效果样式/投影/投影-3-蓝色-四周”。大家可以按照自己的需求分组。
步骤2
① 选中设定好好的色块。
② 在右面的属性面板，APPEARANCE栏选择Create new Layer Style，并输入好颜色的分类名称。 注意颜色也是用“/”来分组。
③ 将分好类的颜色全部录入到style库。
步骤3
如何调用颜色或图层样式，跟字体的调用方法是一样的。
①选中页面上画好的形状图层。
②在右面的属性面板，APPEARANCE栏选择适合的颜色或图层样式，这样在我们画的按钮就关联上style库了。
步骤4
老板又说品牌蓝色不好看，要求换成原谅色做APP的主色调。
① 在style库中，选中主色的色块，在属性栏调整颜色为原谅色。
② 在右面的属性面板，APPEARANCE栏选择“Update Layer Style”，这样只要是关联这个颜色的圆的，都会变成原谅色啦。
3.重点
如果是第一次建立style库，是需要把每个颜色、图层样式、字体样式都新建一次。
在sketch里是用“/”来的。
每次修改字体样式，都需要在APPEARANCE栏选择“Update Text Style”之后关联的字体才会变化。而图层和颜色则是APPEARANCE栏选择“Update Layer Style”。
只需要建立一页style库就行，里面包括了文字样式、颜色、图层样式等。
二、如何创建symbol嵌套symbol
symbol嵌套symbol的好处是可以方便管理页面组件，快速替换元素。团队协同时也能减少错误和沟通成本。
以标签栏来举例
步骤1
以标签栏来举例
① 将标签栏所有元素选中，打组，命名好后创建组件。这里说明一下，组件的依然是用“/”来分组。
② 进入组件页面，根据自身需求将元素分别命名，打组，创建组件。注意：每个相互之间替换的元素，画布尺寸要一致，这样软件才会认定为相同类别可替换的元素。
步骤2
如何调用组件
① 在工具栏选择组件工具，选择“Document”之后就是分好组的组件了。直接点击选择就能调用组件了。这里的只是当前页面的组件。
步骤3
如何替换组件中的元素和文字
① 点击调用的组件，在右边属性面板会出现“Overrides”的属性栏，这里就是我们调整组件元素的地方。
三、如何通过“原子设计”的思想来创建一套视觉规范
上面的教程基本已经达到了“一键换肤”的要求，在这里要给大家扩展一下“原子设计”的概念，如何通过原子设计理论来建立Library文件，方便项目中同事之间的协作。
1.什么是”原子设计”？
“原子设计”就是将界面拆分到最小的原子：颜色、字体、分割线等，在构成分子：标签栏、导航栏、金刚区等。由分子构成的组织：如新闻模块，视频模块。由组织构成原型图，由原型图在转换成页面。
原子
界面中最基本的元素单位，如：文字、颜色、图标、背景、图层样式等。
分子
由基本元素构成的组件，如导航栏，标签栏，按钮等。
组织
由分子构成的组织模块，如聊天模块，内容卡片，瀑布流模块，类表模块等。
模板
模板其实就是原型图，由原子，分子，组织而成。
页面
页面就是最后的效果图了。
如何创建Libraries
Libraries其实就是一个sketch文件，编辑了Libraries的style和symbol后，调用了这个Libraries文件的sketch文件就会收到提示更新，这样大大的提高了在项目中团队的工作效率。
步骤1
点击菜单栏的sketch，选择弹出菜单的Preferences后弹出窗口。
步骤2
点击窗口左下角的“Add Library”按钮。找到自己创建好的设计标准的sketch文件。点击“打开”按钮，这样你的设计标准就上传到Libratys了。
步骤3
如何调用和更新Librery
点击工具栏的“symbol”会看到上传的设计标注sketch文件已右边的图标已经变为链接图标，点击后，就会看到分好类的组件，可以直接使用。调用颜色和图层样式在右边属性面板的APPEARANCE栏，同样有已连接的图标，可以直接关联颜色和图层样式。
步骤4
如何与更新后的Librery保持同步
① 如果Librery有更新了组件或图层样式，调用Librery的sketch文件右上角会提示“Librar Updates Available”，点击之后会弹出更新前后的对比，点击“Update Components”按钮就与Librery文件同步了。注意：Library文件需要“⌘+S”保存一下，关联的sketch文件才会有更新提示。
② 因为某些原因sketch自己的网络共享是被墙的，我们可以选用蓝湖等国内的共享软件来协同设计。
重点
“原子设计”只是一种设计理论，更偏向于工程师的思维，严格遵守层级结构。作为设计师要灵活运用这个理论，而非死板的硬套，抹杀原有的创意。
.利用“原子设计”构建组件库时，我们应该更注意经常使用的“基础组件”，如颜色，背景，分割线等。构建组件库时大的分类时。3-4即可，不宜超过5个。如“大型组件”有：系统组件、导航、弹窗等。小组件：提示信息，空状态，图片等。icon：线性，面型，线面结合等。其他：首页，我的页面等。
3.Library更新后关联的sketch要点击右上角的“Update Components”才能看到更新后的效果。
