UI设计小白兔之sketch组件

Hello, 大家好，

我是wenhao, 一只在UI设计路上奔跑的小白兔。要在平凡的日子里为自己，为设计造势，慢慢积累，形成自己的风格特色和自己的设计系统。

为设计造势

这里的造势不是与他人争论，而是提升自己内心的自信心和对待设计严谨的态度。那么这也不是一朝而蹴的，要将设计融入生活，将美丽变成习惯，关注细节，对作品反复打磨，力求精益求精。也何尝不是在培养设计的态度呢？我想，现在树立起来的态度便是日后将独有的设计风格。“高级，科学，细节”，这便是我对自己设计的态度。今天我们来简单明了得说一下在UI设计上如何科学的运用Sketch组件来轻松管理你的页面。

Sketch的科学管理——组件

“组件”这个词对刚开始接触sketch的小伙伴来说应该比较烦恼，为什么点击进去之后总是进入进入再进入，甚至到最后会不知道它跟页面上的应用又有什么关系，但是组件是UI设计，是sketch页面设计必不可少的部分，是不可缺失的。

组件

我们知道每个页面的“具体内容”是不一样的，比如文字内容颜色字号，icon图标颜色大小，每个图片的内容。但是大部分情况下页面某个部分的“框架组成”都是相似甚至一样的，比如说每个手机页面都有Tab栏，那每一次使用的时候可以从自己项目组件库中直接调取Tab栏组件,然后将具体内容（文字/icon）替换成自己项目所需的内容即可（当然，对iOS系统的，设计师也可以用Apple UI组件库的），这样就不用自己在每个页面中都绘制tab栏。当你双击组件时，页面会调到组件里面的页面，你会看到这个组件是如何一个一个小零件搭配起来的。

组件的好处

那有人会说，直接做一个正常的，日后使用的时候反复复制不就好了，组件的魅力之处就在于它可以随时高效的进行更改，可以更改每个零件的具体内容但又能保障组件的结构不发生变化。一键更改，页面全部实现同步的高效办公效果（这里的更改是指对“基础组件”的更改，下文简述）。我们现在要设计的页面绝不是一个，而是整套的页面设计，少则二十七八，多则五六十个，这个数量绝不是告诉设计师你的任务量很多，需要加班加点，相反页面数量将不能影响你的设计水平和工作时间，设计师不会在“页面制作”上浪费大量时间。那么如何做到高效的对多个页面进行更改呢？制作“基础组件”，灵活运用“应用组件”。

UI设计里的组件分为“基础组件”和“应用组件”， 在sketch自带的“Apple UI”里能看到的均为应用组件，是指可以直接应用在页面上的，当你一层层像拨洋葱一样拨到组件的最里面的时候，你看到的便是基础组件，所以，应用组件由基础组件组成。基础组件有：文字，icon，图片。大部分情况下一切的应用组件都由他们或其中一个/两个组成。

基础组件——文字

对于手机界面来说，文字的字号和样式（细体/常规/粗体）是可以选择常用的几种样式，比如我们选择10pt thin,12pt regular,14pt regular,18pt regular,20pt bold,22pt bold,24bold, 注意，每个样式都要注意文本的位置(距上左，上中，上右；中左，中中，中右；下左，下中，下右)和颜色（黑色与白色是必要色，此外根据项目需求添置不同的颜色）的安排。要将他们都做成组件（制作完成后选择所有面板右击转换为组件），命名很重要，就拿“18号字居上中的白色“文本样式而言，我们可以命名为“通用_text_18pt_上中_白色”，这样在我们修改附有文本的“应用组件”时，如需替换文本，则在原本的文本处右击选择“替换为”，找到“通用”我们就会看到和命名一样的目录了，“通用”下一级目录就会出现“text”，接着下一级就会出现不同的字号，所以，组件的命名就是后期你要找组件的目录。

基础组件——icon

我们知道icon的页面应用的时候是会有不同色彩展示的，黑色/白色/红色/...，那如何在我们需要的时候快速一键替换icon的色彩呢？我建议大家在绘制icon后，存放两个版本，我们首先需要保留最干净的icon形状图形（没有背景，没有蒙版）标记为iconfont版本，这是方便上传到iconfont给开发同时看的，因为iconfont上传时对包含蒙版的组件文件是不会智能识别的，所以我们单独标记为iconfont版本。再复制icon，标记为应用版本，在应用版本里面我们需要在icon图形上绘制出一个和面板同样大小的矩形用来制作“颜色蒙版”（具体操作：全选icon形状和它上方的矩形，点击蒙版工具，再将成为蒙版的矩形右击选择替换为，选择黑色/白色/红色/任一颜色，这样我们就初步实现了让icon拥有颜色蒙版）完成后不要忘记右击面板名称选择转换为组件，这样以后替换icon的颜色便可通过组件的系统进行一键更改。但还没有结束，我这里引进一个新的概念“iconmaster”，此时的应用版icon是没有“透明背景”的，而透明背景的作用是必不可少的，它可以保证每个icon的像素是一样大的，即使每个icon形状大小不一样，但存在透明背景后，每个icon在页面上的应用，其像素大小都会一样，但给每一个icon都做一个透明背景会不会太浪费时间了呢，所以让我们制作一个“iconmaster”，通过这个第三方，一键实现（具体操作：选择一个应用版的icon，在面板上绘制一个方形，边框和填充都设为无，将这个透明背景命名为bg,将这一层拖到面板所有图层的最底层）。所有的icon 面板也包括“iconmaster面板”无所谓大小但务必为正方形。这样一来我们在应用或替换icon时，只需从组建中先调出iconmaster，在通过它来选择icon组件库里任何一个你需要的icon，替换icon颜色更不在话下（找到icon组件的图层，打开下拉内容找到颜色蒙版，右击选择替换，选择你所需的颜色，或者从右侧的选项卡中直接按照目录一层层进入然后选取）。还是要强调一下对组件的命名，对icon组件的命名要有章可循，这样在你查找的时候目录会非常清晰明了，有线性的icon可以命名为“icon_linear_**"，面性的icon可以命名为“icon_filled_**"，icon的命名要养成好习惯，应为icon是页面中使用率很大的一块，英文命名方便开发理解，也更加是UI设计师的专业度体现。icon这个模块还有很多可以那来讲，icon的绘制，icon的动效制作，什么样的icon可以导入AE...等等，我会在后期慢慢补充完整。

基础组件——遮罩，蒙版，图片

页面的瀑布流板式中，我们看到的所有图片都有圆角或者是颜色蒙版，其实无需发愁我们只需要完成一个这样的图片，接下来就是应用这个“图片组件”即可。我们开始分析它的基础组件都是什么，图片的圆角，我们可以理解成是一个有圆角的遮罩，图片的颜色渐变可以理解成有颜色的蒙版附在了图片上，那么我们可以选择几个常用的，也适合项目的，前期将它们都做成基础组件，比如5度10度13度20度的遮罩，比如黑色透明度从60%到20%的蒙版，20%的黑色透明度蒙版，45%的黑色透明度蒙版。有了这些基础组件，我们来制作图片组件，先绘制一个矩形（大小调整好）在矩形的属性里选择图片，将一张小图填充进去，再绘制一个同样大小的矩形右击“替换为”，找到你需要的遮罩即完成，蒙版也是一样的。这样我们完成了一个图片，这个图片我们可以命名为“picmaster"也算是一种图片样式了，当然对于瀑布流而言你可以做3个样式，不同的大小，1:1/16:9/9:16的图片大小。在制作瀑布流的时候，可以随心应用这些图片样式，剩下的工作只需要替换图片而已，我们可以用节省下来的时间找一些好图片，找一些好看的瀑布流样式，真正的将精力花在设计上。

应用组件——无穷尽

基础组件是可以细数过来的，目前我们知道有“文本，icon，遮罩和蒙版”，但应用组件是非常活跃的，它可以自己直接应用在页面上，也可以是其他应用组件的一部分。上文中我们制作了一个图片组件，而当页面需要一个list版式时，这个图片组件就成了一个元素而已。那么什么情况下我们需要组件呢？页面中有重复的模块式就需要运用组件。应用组件更像是对基础组件的排版，页面就像是对应用组件的排版。我的说法不准确，但对于小白兔是可以暂时这么理解组件的。

组件对principle的影响

组件的灵活使用在principle这里就遇上了麻烦，会发现包含组件的页面导入principle后，组件的部分会被无法识别，或是文字错位，这个问题也令我十分苦恼，所以现在我用AE做页面交互动效。如果对principle导入有好的解决方法，希望留言给我，我们一起学习呀。

甜心小结

物极必反，任何事做到极致就会出现系统的失衡，组件也是一样，最表面的表现就是，组件的理念形成后会隐性的压制创作空间。杨绛先生说过一句话，你痛苦的原因在于你书读的太少但却想得太多。我想作为设计师，工作上设计苦恼的来源是看的不多，输出的不够但偏在设计开始的时候想得太细太精又太多，这反而抑制了灵感和输出速度。Leader 经常跟我讲，在设计初始阶段要追求“暴力美学”，意思是，在设计初稿时期用最快的速度绘制出自己的设计想法，将灵感和构思视觉化呈现出来，先做出来再看，在脑子里想得东西是无法被任何人评判好坏的，只有视觉化之后才知道那里有欠缺和富盈。