Sketch 01：打造一应万变的神奇按钮(Magic Button)
设计的世界里人人有功练，一起往Sketch 高手之路前进吧！
大家好！欢迎进入Sketch 的世界，在这里你将学会怎么解除Sketch的封印，让你的工作效率得到大幅度的提升！
关于Sketch Hacks
Sketch，一个武力强大的工具，在制作介面设计(User Interface Design)上几乎无人能出其右，推出至今经过多次改版与优化后，变得更灵活同时使用上也拥有更多的弹性。因此，我开始思考有什么样的技巧可以帮助设计师们发挥这个工具的最大效益。这个系列会着重于Sketch Tips的教学，有一些方法会比较反逻辑或是比较Tricky一点，所以必须事先打个预防针，每个技巧都有其适用的场景，没有最好的解决方法，只有最适合当下的做法，所以还是请依照专案需求来选择性服用。
另外Sketch Hacks系列也秉持着开源(Open Source)的精神，It's better when it's shared，分享可以让这个知识传播得更远，因此文末都会附上Sketch原始档案让大家下载来玩玩看。当然，如果有更好的做法，非常欢迎给我Feedback或是留言交流，如果你喜欢这个技巧或文章，也请不要吝啬分享给你的朋友哦！
关于本次主题
这集的主题是「打造一应万变的神奇按钮(Magic Button)」，你一定想说按钮不就是做个方块里面丢个文字就搞定了吗？不，人在江湖我们需要更有效率的做法，这次我们要利用Sketch里面的Symobl功能，让你只需要制作一个主要的Symbol，就能变出千千万万种不同颜色、不同状态、不同造型的按钮，听起来是不是很神奇呢？
先来看一下做完的效果(都是同一个Symbol)：
好的，来说说这次的目标
1.只有一个Symbol母体
2.按钮本体和里面的文字都必须可以换颜色
3.可以同时变成空心按钮或实心钮
4.可以有不同造型的按钮(方形/圆角等)
5.可以有不同的各种状态(Default / Hover / Pressed / Disable)
关于如何利用Symbol 制作一颗按钮，国外其实已经有许多文章有介绍到，今天这篇算是集各家大成以及综合我自己的心得，大家可以斟酌服用:D
那么，废话不多说，我们开始吧！
步骤一：设定颜色(Color)
在开始真正做一个按钮前，我们必须要做些基本设定，基本设定包括颜色、状态、造型等，因为这些在未来都是要可以被替换的，同时，要符合可以被替换的前提下，这些要被替换的元件也都必须也要是Symbol。
*请注意，为了方便，以下的内容都会在Symbol页面中制作，利用复制Artboard更改名称和内容物的方式来执行。
假设我们今天要做四种不同颜色的按钮，分别是主色(Primary)、次要色(Secondary)、强调色(Accent)、辅助色(Support)，我们就分别建立4个同样大小的Artboard填入这些颜色之后依序建立成Symbol，所以我们得到了4个填满不同颜色的Symbol ：
记得Artboard尺寸要一样大哟
颜色命名范例：Color/Primary
Tip: 在Sketch 当中，要可以被替换的Symobl 必须要在同样的Artboard 大小中才会生效，这个观念很重要，跟命名或是其他因素没有关系哦～
只有实心的颜色还不够，我们刚刚上面提到的目标还有一个，空心按钮，记得吗？所以我们要建立一样4种不同颜色的外框(也是跟颜色的Artboard一样大小)的Symbol，来为之后的替换做准备。
当然，除了一般的直角外框，这次我们希望也有其他不同造型的外框，所以我们复制这4个外框，同时分别改成10px和50px的圆角。
外框命名范例：Border/Primary/0px(无导圆角)
步骤二：状态(State)
太好了！到这边基本设定已经完成了80%，接下来我们来设定按钮的状态，这里我们配置有最基本的四种状态，分别是预设(Default)、游标滑入(Hover)、按下(Press )、无法作用(Disable)，这里我们一样建立四个Symobl，内容分别填入空白色块(Default)、20%透明度的白色色块(Hover)、20%透明度的黑色色块(Pressed)、100 %透明度的灰色色块(Disable)，你也可以视需求自己调整想要的状态样式，这边只是参考。
状态命名范例：State/Hover
Tip: 状态的Symbol 尺寸大小记得要和颜色(color)和外框(border)的尺寸做区分，以免之后要替换时混杂在一起。
步骤三：建立造型(Shape)
终于把基本设定建立好了，接下来我们要建立造型，这里会有点小复杂，要仔细看哦！造型里面包含了类型(Type)和状态(State)这两个Symbol，这边指的类型其实就是「颜色」和「外框」这两个Symbol(他们尺寸一样大，可以替换，记得吗？) ，只是为了避免之后套用时混淆，这里称之为类型，也就是按钮的类型(实心或是空心)。
我们先随便从旁边复制一个Artboard ，然后把他的尺寸改掉(一样，避免之后套用混淆)，名称也更换一下，接着插入Color 和State 这两个Symbol 进来并调整一下尺寸符合整个Artboard。
形状里面包含了Color 和State 这两个 Symbol
接着，重要的步骤来了～我们要新增一个形状图层，命名为Mask(遮罩)，这个遮罩的形状将会决定你最终按钮的形状，所以非常重要！接着同时选取这三个物件(Color/State/Mask)，按下右键，选择Mask，Boom！你的所有内容已经被包在这个遮罩里面了，接着我们复制这个做好的形状，依序做出另外两个不同形状的遮罩(圆角10px以及圆角50px)，太好了！你现在有三种不同造型的按钮了！
形状命名范例：Shape/Rectangle 或是Shape/Round 3px (代表3px的圆角)
步骤四：建立按钮(Button)
OK，搞了那么久，终于可以来做按钮了，我们新增一个Artboard，然后里面丢入一个Shape的Symbol ，调整一下让它符合Artboard的尺寸，接着在按钮中间摆上文字，一开始有提到我们的目标是连文字也要可以替换颜色，加上我们如果是空心按钮时，文字的颜色最好跟按钮外框一样比较好，所以我们设定好样式之后，将这个文字建立成Symbol，接着如法炮制复制出几个不同的文字，把里头的文字颜色改一改，就完成啰！
按钮命名范例：Button/Text
Tip: 把按钮中的文字放置在中间，并将Resizing 设置为Float in place ，这样不管你的按钮怎么缩放大小你的文字永远都在中间啰！
利用Symbol要制作出不同大小的按钮也是超Easy的啦
步骤五：整理图层命名(Renaming)
最后的步骤来啰！我们要整理一下图层的命名，方便我们更好阅读，在Symobl 中，图层的命名和排序很重要，这将直接影响到最外层Symbol 的Overrides 面版会如何呈现，若没有整理将会影响整个Symbol的可读性哦！这边有个提升可读性的小技巧，就是将你的Symobol 子层的图层名称做调整，甚至加上一个符号像是这样： ↳ :bulb:State，这样到时候在Overrides 面板上就可以非常清楚的区分资讯层级啰！
图层可以整理成像是是这样子：
图层命名顺序会直接影响到Overrides面板的呈现方式
Overrides面板呈现方式
最后我们来复习一下，整个按钮的结构是什么样子：
按钮(Button) — →这是最外面的Symbol ↳文字(Text) — →这是Button里面的Symbol ↳轮廓(Shape) — →这是Button里面的Symbol ↳状态(State) — →这是Shape里面的Symbol ↳类型(Type) — →这是Shape里面的Symbol (Color/Border)
最后透过Overrides面板就可以随时切换不同的按钮啰！
Oh，这真是太神奇了！All In One Symbol!! So Amazing!
最后sketch文件下载链接：https://pan.baidu.com/s/1bpy8nIR
