确定好前面的内容之后，在Sketch里开始创建图层样式。

Fill 填充

画些矩形填充你的主题色、功能色，在右侧的面板中创建图层样式
image.png
在命名图层样式的时候，根据前面做的脑图给样式做好分类，就像文件夹目录一样。例如：
fill/fuctionalcolors/primary/★ normal
如果你的sketch是比较新的版本，也可以在组件库中用树形控件管理你的图层样式
image.png
功能色常用于一些操作按钮，考虑到以按钮的形式展示就会有鼠标悬停、按下的交互样式变化。使用相同的衍生规则为功能色创建衍生色，分别命名为：normal、click、hover。这里作为参考，你也可以用中文命名。
这样我们就得到很多的色块，在图层中排列好、为每个色块命名并将色值也展示出来，方便日后查看和调整，养成一个良好的设计习惯。
image.png
在前面色彩部分提到中性色在落地的时候是按照透明度的方式实现的，所以在中性色样式中添加一组为浅色背景下的中性色一#000000为基础，另一组为深色背景下的中性色以#FFFFFF为基础的通过透明度呈现的中性色。
image.pngimage.png

image.png

Outline 轮廓

1.描边 border

描边在界面设计中也是经常应用到的样式，常用于次要按钮、卡片、表格等元素，除了实线描边外还有虚线描边，虚线描边在上传图片等场景应用较多。而功能色描边则在幽灵按钮上应用较多。
image.png

2.分割线 divider

分割线样式和轮廓描边类似，但只是用来分割强关联性的内容，起到装饰作用。值得注意的是分割线和描边都要记得区分浅色背景和深色背景下的效果。

Shadow 阴影

阴影也是图层样式中常用的一种样式，在界面设计中不建议超过3种以上的阴影。算上没有阴影的图层样式，可为界面创造四级高度的空间效果，基本足够使用。
image.png

none

第0层：表达组件和背景在同一层级高度时，组件不产生投影或投影与物体完全重叠，在界面中不对此层定义阴影值。如：输入框等；
image.png

base shadow

第1层：组件略高于背景时被操作悬停、点击等触发为悬浮状态反馈，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中，如：提示框等；
image.png

medium shadow

第2层：组件位于中层级，此时物体与基准面的关系是展开并跟随，物体由地面上的元素展开产生，会跟随元素所在层级的移动而移动，如：下拉面板等；
image.png

high shadow

第 3 层：组件位于高层级，和页面其他元素关联性低，需要突出显示等情况下应用，如：对话框等。
image.png
图层样式是组件的常用基本样式，除此之外sketch的样式面板中还有内阴影、模糊，根据项目实际情况决定考虑添加，如果用得少就没必要了，直接在特定组件设置样式即可。
image.png
设置样式的目的是为了统一视觉并高效的完成UI设计工作，具体体现在组件的属性中，过多的属性也会影响效率，各位设计师自行斟酌。
image.png