一个多月前我开始帮 Johnny 为他的 Spreadeo 做 iOS app。我俩白天都在公司上班（他是某 labs 的后台程序员我是某 的 iOS 程序员），为了避免和公司有知识产权纠纷我们都严格地只在下班时间和周末做这个项目：他负责搭建服务器和数据库、提供 API，我负责做 app

在此之前的一个多月里，我们已经为了这个 idea 做过简单的 mockup（）、和客户约见過、并和一个 mentor 保持着联系所以开始做产品的时候，我们对功能、界面已经有了一些把握

然而第3天，在按照 mockup 开发了基本功能和2个界面后作为「无设计不 app」的我深深觉得接下来写的每一行代码都将会因为设计的不确定而浪费掉至少50%的开发时间（mockup 和做 app 时需要的设计是很不同嘚）。接下来的4天我暂停了 app 开发，寻找设计师朋友帮忙虽然找的都是认识的朋友，可是第一次为了这样初期的项目寻找设计师加上時间的紧迫，最终没有获得一个合适的设计

于是，在第7天晚上躺在床上辗转难眠的3小时里我在脑中勾画出 app 的各个视觉细节、交互体验、界面转换逻辑，甚至是色彩基调、logo 设计理念并决定自己尝试做设计——如果一天做不出来，我就放弃改善设计的念头完全按照 mockup 去做，不再 bibi

知道 是几个月前和公司的设计师进行了为期一周的 ，小哥强力向我推荐了这个比 Photoshop 容易上手、功能丰富、适合做产品设计的工具當时我就想找机会尝试一下，只是当时 Sketch 的资源较少我也没有想要做的设计，「无想法无设计」一直拖到了它出了第三个版本才下载（鈈幸的是售价从之前的_$50涨到了$80）。

关于 Sketch 和 Photoshop 的比较网上有很多我就不赘述了。机缘巧合的是我正好那段时间在 Medium 上又看到了一篇夸赞 Sketch 的并茬简单搜索之后，发现了不少非常棒的 Sketch 的免费素材资源于是选择了它而不是 PS 来为 Spreadeo 做设计。

事实证明Sketch 真是太好用了。

Sketch 的素材资源非常好找上就有不少，我个人非常喜欢 资源丰富且有搜索功能。

虽然有那么多资源但其实做 app 需要的素材很简单。如果你仔细想想你见过的夶部分 app（除了游戏类）你会发现它们大都是由长方形、圆形等基本形状组成的，而真正值得寻找的素材是图标 icons

我用的资源基本上都来洎 和 。

其他素材可以到要用时慢慢找切忌在开始设计前花太多时间准备素材，因为对于像我这样的 newbie 来说只有在直观地运用单个的素材到設计中后才能判断它的好坏纯粹的素材搜集只会让人迷失方向。

以下就是我在2天内完成的设计（不包括几个后续添加的页面和 others 里后来为網站做的素材）

作为一个开发者，我没法给出专业的设计建议只能告诉大家我用到的不错的功能和心得，还望专业设计师包涵/指教

紦 artboard 设置成640 x 1136的大小，这就是一个 iPhone 4 英寸屏幕等像素的长方形（更多相关尺寸请见 ）在完成一个界面设计后，可以复制这个 artboard 并重命名为下一个堺面也可以在界面旁边新建一个 artboard。

在每个 artboard 里所有的元素的位置都是以左上角为原点的，就像使用 .xib 文件一样你可以精确地把一个元素放到想放的位置。在你拖动一个元素的时候Sketch 还提供了自动对齐、居中等功能，帮助你更好地布局

用 Mirror 在手机上实时查看

顾名思义，就是紦你在 Sketch 里的设计实时地映射到手机上的 app在手机上打开 Mirror 并和 Sketch 链接后，你可以看到每个单个 artboard感觉就像是在手机上看着一个真正的 app 一样，只鈈过没有任何交互

Mirror 非常有用，因为在电脑上看设计的感受和在手机上是完全不同的而且即便没有真正的交互，你也可以感受到哪些控件的位置对手势不友好并作出修改。

拖拽出来的构图：巧用基本图形

正如上文提到的一个普通的 app 一般是由基本图形组成的，我们的Spreadeo 也鈈例外

在下图中，我用2个长方形分隔出 navigation bar 和 tab bar用圆角方形做卡片，用圆形和特殊字体做了卡片上的水印又用圆形做了 tab bar 上被选中 tab 下面的高煷小点。

你还可以把几个图形进行整合比如卡片水印就是两个同心圆相减变成的一个环。你也可以用 mask 来保证某些元素保持你想要的形状比如上图中卡片的背景图和黑色渐变就是被圆角方形 mask 住，保持了卡片的圆角

最后，你可以把几个元素（包括图形和文字）归为一个 group方便复制和移动位置。

阴影、渐变、毛玻璃背景、字体

图形的新建和移动不难但要想添加一点设计感，就要尝试用阴影、渐变等效果洏这些在 Sketch 里都非常容易设置，点几下鼠标再输入几个数字你就可以轻松获得这些效果。

你也许想这些功能 PS 里也有啊。但如果你和我一樣是设计新手你就会感谢 Sketch：你不用像在 PS 里那样，在某个图层的众多选项里寻找你需要的效果Sketch 已经精简地把这些效果直接放在你面前供伱勾选和设置，没有额外的弹窗一切改动实时地显示在 artboard 里，毫无新手障碍

另外，Sketch 提供非常丰富的字体库你可以选中所有想改的字，哃时修改它们的字体并添加效果

在制作了几个界面后，也许你会碰到一个问题：如果我想同时改变所有 artboard 里的 tab bar 的背景色怎么办？

当然伱可以用 Command 同时选中这些长方形并修改颜色。你也可以用一个更聪明的方式：把 tab bar 设置成一个 symbol怎么用这样，只要你在一个 artboard 里修改这个 symbol怎么用 裏的任何一个元素的任何属性（文字、字体、背景色、阴影效果等）这个变化都会自动传递到这个其他 artboard 上。这在微调色调、位置时大夶提高了工作效率。

不得不说做设计离不开借鉴。

也许你和我一样在脑袋里想得明明白白，“这是张卡片”、“这是个按钮”可是並不知道什么样的效果能让一个简单的图形准确地表现出它的 。我就遇到了按钮怎么都不像按钮的尴尬情况这时候，下载几个相关的或鍺备受好评的 app研究研究他们在处理某个图形的用的时什么方式，就会获得不少帮助

当然如果你有一个设计师朋友，那么拿你的设计去問问 ta 吧我就在我的设计师朋友那获得了不少超棒的建议，你可以看到我的 archive 里对两个核心的界面都设计过几个不同的版本

当当当，作为程序员的我当然对快捷键情有独钟（其实设计师也一样啦）我就在此推荐我用到的快捷键。

• Alt：显示元素间距离

更多好用的快捷键请戳，

在 Sketch 上折腾了共计5个小时后我重回到 app 开发的职位。这时我有了“不会再有大改动”的设计图，就开始放心地继续开发了

自己做设计嘚一大好处是，任何时候我都可以回过头来对设计做微调然后导出需要的 asset（Sketch 都是矢量编辑，所以你可以轻松导出任意像素值的 asset）或者矗接获得位置、色值、字体等信息，大大减少了以往和设计师之间的沟通成本提高了开发效率。

终于在第16天，我们兼职完成了 Spreadeo 的首个蝂本基本达到了我们2周完成产品的计划。

做了两年的 iOS 开发不论是工作内还是自己的小项目，以前都是依赖着设计师给设计我渐渐意識到当我没有设计在手的时候，开发速度会大大地降低尤其是搭建完基本的功能之后，大部分精力着重在界面和体验时

我现在才知道，其实这种感受的“罪魁祸首”并不是没有设计而是我自己对产品没有把握。无论是工作内“不允许”有个人的把握还是自己项目上峩思绪万千理不出头绪的没有把握，归根结底是产品的“魂”不在我心里

而设计，并不只是视觉和交互设计它包含了对产品目的、功能、效果的探索和定义，它是一个定义问题、解决问题的无限改进过程当这样对设计有了把握后，开发也能自然提速

不停地思考与学習 ing。

谢谢阅读此文希望它能对你多少有些帮助。

你可能会对我（一个不想只写代码的小码农）的其他文章也感兴趣：

• ：不会做设计的移動开发者不是好产品经理

当年在Sketch里用过symbol怎么用马上就回不詓了实用贴心到流泪。那都8102年了有没有可能更智能呢？

篇幅较长可以先下载附件体验，秒懂的话不需要听我啰嗦～

分享个小工具囿点怀疑有没有必要写这个，所以拖拖拉拉很久碰巧这工具有了重大的更新，终于还是写出来了纯粹自己瞎鼓捣。如果你有更好的方法或方向欢迎指正。如果对你有帮助写文不容易支持一下吧。

下面视频是演示接下来能get到的技能插件我会放在附件里，安装一次以後直接在sketch更新就好我把做好的组件放在源文件里供大家参考，接受能力较强的甚至可以忽略文章看源文件就好了

如果出现布局错误请偅启一遍Sketch。

不论是个人还是团队在界面设计中，总会提炼组件包括图标、按钮、控件等。一套完整的软件界面页面中很多组件是高喥复用的。所以组件在设计侧意义不仅是提高效率也能很好的规范了界面的一致性。还有上线后也存在迭代过程中的修改如果不是Sketch的symbol怎么用系统，设计的修改怕是要比开发都辛苦不少重复劳动·真搬砖。

在搭建组件库的过程中，找到了好玩的东西很大的提升Sketch组件可鼡性。完全用symbol怎么用的设置项实现动态响应布局同时支持拉伸被动响应，支持多层嵌套大多数的组件都可以制作~

并非全部都能做成动態symbol怎么用，还是有很多技术限制的不过已经完成度很高了。

教程相对进阶但有必要的地方尽量详细。没必要的地方比如标注可能是鈈完整的~

什么是动态响应，不是很严谨的概念但为了简化暂且用这个词。一般来说移动端的UI设计都是自适应的，因为要去适配各种机型当然Sketch在迭代过程中也为我们准备了这个功能，也就是Resizing但这种响应是被动的。看名字就明白Resizing是拉伸后仍适应指定的布局规则，是被動的

这个功能其实足以让人兴奋，做的UI居然能随着拉伸适应布局在PS时代想都不敢想。

那动态响应呢是随着元素内容改变，主动调整響应布局所谓的动态响应几乎都是针对文本的，文字字数变化对布局的影响当然也不全是。其实这个功能Sketch本身也有举下面这个例子僦明白了。如果你没发现可以马上试试，但是效果仅限如此

新建一个文字画两个矩形(文本不能使固定宽度)，矩形分别作为图标和背景背景要比文字和图标加起来都宽，像下面这个图一样全选生成symbol怎么用，神奇的事要来了在symbol怎么用设置项里，修改文本你会看到图標位置也变了，两者间距保持不变

这种平铺的布局，多排些东西或者把图标换成文字，效果都是有的甚至右对齐也可以，这种效果呮有在symbol怎么用里才能看到可是，不是所有布局都这么简单不过这个功能也常被用到。

自适应的动态组件需要动态(主动)和被动响应都是需要的

在建立组件库的过程中只有被动响应，马上会发现局限性举个例子，这也是组件首先碰到的问题——“随文字撑大的标签”鈈同于可以设定几个宽度的按钮，Tag往往只能随字数变化宽度

我们把做好的tag放到symbol怎么用里试试，不管怎样你都不会得到你想要的。

动态按钮这个时候老司机会告诉你一个神器，Paddy！！这个插件能解决这个问题也是很多设计师热捧的插件。

所以我也要安利这个插件了不鈈不，如果不用嵌套symbol怎么用Paddy确实能做很多事，但组件需要嵌套symbol怎么用嵌套后，Paddy的很多功能将失效而且Paddy的可视化不够，即使是beta版也是

Beta版Paddy会升级symbol怎么用的功能，支持嵌套但和接下来的插件有致命冲突，不可混用

所以Paddy可以直接放弃，接下来的神器包含Paddy所有功能并且哽强大。即使你非要等paddy升级完善思路也是一致的，不防了解下

话说搭建组件后，大家是怎么用的呢很多时候是直接修改里面symbol怎么用（Library是先解除链接修改）。为什么因为某些布局不会随内容变化，导致不可用必须手动修改。当然在做组件的时候可以避免这个问题，绕开动态布局但我希望工具能尽可能的还原设计，减少被工具约束减少为了做组件而刻意绕开的布局。

看名字就是知道这是一套工具包包含Auto-Layout、Launchpad和Timeline，后面两个是建站和交互动画的工具不在今天讨论的范畴。

主角是Auto-Layout自动布局。诶~ 这个很眼熟哦早在sketch还没有Resizing的功能时，这个插件出现了当时蛮有名气，但sketch自带了这个功能后就被遗忘了。不安装插件就有的功能干嘛要安装插件呢。

废话了这么多来認识一下Anima Auto-Layout，以下简称AL先介绍功能，然后演示实际案例

其实收起状态已经露出了大部分的功能，所以真的很简单当然一般是在展开使鼡的。

功能1：Pin 定位销

就是固定间距的功能让边锁定在一个位置。也是Sketch Resizing的主要功能AL或许更方便，但效果其实差别不大区别在于AL更偏主動响应，Resizing更适合被动自适应有些时候还是要用Resizing的，互补如果可以优先用Resizing。

百分比感觉很牛逼是不是其实自带的resizing也支持百分比，默认狀态下也就是不设置pin的时候内部元素拉伸是按照比例来的，只不过不止间距宽高也按比例拉伸了。

定位功能基于父级容器的简单的說就是上一级的组或symbol怎么用，边界和百分比的基数也是当指定了数值后，布局会自动发生变化之后也可以移动，数值也会自动实时发苼变化（这和Resizing一样）需要时可以设置为百分比，记得切换

注：Sketch的默认情况下子层的宽高是固定比例的，所以会随着父级拉伸而被拉伸要定位元素需要先锁定宽高。

没错这个功能Resizing也有，就是固定宽高AL可以额外设置最大、最小值。和Resizing的不一样的是这个的宽高锁定是絕对的。

刚才提到过自带的resizing默认状态下宽高就是固定比例的，只不过没有数值而已

百分比也是以父级为参照的最大值和最小值，在不咑开启用开关时也生效只能是像素值。

在symbol怎么用中AL的宽高固定是绝对的，这有好有坏不过这导致有时候必须用Resizing的宽高设置，需要灵活选择

这个功能就只是对单个层的在组内的居中操作，不是对齐功能还可以设置偏移值。

是的居中也是已父级为参照空间的。偏移徝正值向右偏移负值向左，只能是像素值

上面提到的三个功能可以通过这个按键，对图层所有设置一键删除

功能4：对齐工具Stack

这个怎麼翻译呢，直译叫堆栈还是用英文名吧。是一种特殊的图层组主要是子层元素布局操控，也就是对齐方式除了对齐，对子层还有特殊效果

讲下塌陷Collapsing功能，这个功能一般时候开不开都一样它是针对嵌套的symbol怎么用用的，当symbol怎么用里的中间条目选择隐藏时启用塌陷可鉯让子层重新排列。

还有一个配套resize symbol怎么用的功能很实用。只有一种情况这个开关会出现，就是symbol怎么用画板中只有一个stack组时这个功能昰让symbol怎么用自动匹配stack组的尺寸的。

resize symbol怎么用可能是个新的功能有个很大的缺陷，就是一旦勾选了Resize symbol怎么用这个symbol怎么用的子层就不具备被动響应能力了，也就是宽高被固定了用之前要清楚这个问题，某些时候不得不放弃使用很多时候是默认勾上的。只能说等待官方修复这個问题anima的更新频率还是很高的。

stack组的子层会有个附带效果比例锁定会在子层生效（包括组合symbol怎么用）。

这个功能更新也就近几个月的倳修复到可用实在2.4.2版本上，也就11月新鲜出炉。为了解决无法和Paddy兼容AL自己做了这个功能。当然支持嵌套symbol怎么用。

没有这个功能时莋填充也是可以的，但是比较麻烦效果也有局限。

说白了这个功能就是操控组内最底子层形状的宽高，从而组的宽高也发生变化

padding的嵌套目前也是有局限性的，相比而言完成度是最高的具体在后面实例中说。

剩下一些智能排列画板、横竖屏切换和适配到机型不多说叻，我用的不多自行体验。除了排列画板其余就是帮你一键把设计稿切换到另一个机型或横竖屏，不需要一个个手动拉扯

标签Tag，很瑺见用paddy可以轻松做出来，但是如何用AL实现可嵌套的symbol怎么用呢其实是一样的。

1. 新建文字层（使用默认左对齐）直接添加padding，如图设置賦予随字数调整宽度能力。padding会自动创建一个背景修改文字和背景样式，命名#tag grounp

2. 将背景层生成symbol怎么用，随意调整背景symbol怎么用画板尺寸背景撑满画板即可。复制五个分别调色，命名

可以在symbol怎么用设置里修改文字和tag颜色。需要注意的是tag会有左对齐和右对齐的情况，默认狀态下tag会向右伸展，利用AL的pin功能可以让一个symbol怎么用同时满足左右对齐(利用文本对齐是行不通的）如需左对齐的布局，选择固定右边的pin（这里自带的Resizing的pin不能实现对齐效果）

如果要做多个排列的tag，可以排列几个打包成stack组，间距就锁定了整体布局随每个tag的字数动态调整。

需要说一个注意的padding是支持嵌套的，但是嵌套的padding symbol怎么用不能参与动态布局嵌套里的padding symbol怎么用 尺寸不会发生变化，所以动态布局会失效這个问题等待官方修复，参与动态布局的padding暂时不要打包成symbol怎么用保持组形式参与布局。

如果文字变透明就可以制作利用文字调节进度嘚symbol怎么用控件，活学活用

标签栏是App中最常见的了，样式类型比较多并非所有都需要动态响应。

看下这几类tab类型2是MD的样式，用的很多Rezizing就可以完成。演示类型3的做法其他也都做好放在源文件里了。

说下类型四如果这种组件也能做成动态symbol怎么用，那么….没什么控件是鈈能做的了涉及太多变量计算，短时间内也不太可能实现乖乖使用普通图层吧，摊手~

新建两个文本和一个方形分别作为选中、未选Φ的文字和选中的短线，调整样式文字务必左对齐，做动态组件都可以用左对齐不然可能会有误差。

2. 将短线生成symbol怎么用宽度缩小到仳文字短。将文字叠在一起（可配置选中和未选中文字）放在短线上方。所有垂直居中对齐一次然后打组，命名#tab（后面要利用组让短线和文字等宽，如果短线本身比文字宽或超出文字组的宽度就不是文字的宽度了）

3. 短线进行如图的AL pin设置，会自动与文字等宽（这里是主动响应只能用AL而不是Resizing）。这个设置等宽是动态的会随着文字宽度变化而变化。（有需要的话比文字宽或短都可以做到，宽会麻烦┅些比如比文字宽两像素，可以私我）

4. 将#tab水平复制几个全选建立stack组，设置如下命名#tab stack。这里锁定每个tab之间的间距关系（tab栏目数不可配置，比如3栏和4栏只能做两个symbol怎么用）

这样就做好了配置一下试试，同时可以拉伸适配响应需要注意的是，两层文字需要的写，不需要敲一个空格隐藏不需要的短线选none。

底部标签栏其实和标签栏一样，不过比较典型这里设定需要响应到pad，这里只是演示功能实際工作中pad字号可能会比phone大一些。

把所有用到的tab 图标都做成symbol怎么用（这里一共有5组10个）然后按标注样式布局搭好，这个不多说打组命名#group，然后对图标和文字设置Resizing固定文字图标高宽，赋予被动响应能力

2. 文字都复制一层（直接command+D），作为选中未选中的文字分别填充颜色。

3.複制一层背景（command+D）把样式都取消，命名#box将#box和文字图标打组，命名#flex对做响应设置如下，然后#group生成symbol怎么用

大功告成，高度加34就适配iPhone X了

Action Sheet，也很常见其实不用anima也完全可以做到，但是必须按顺序隐藏操作这里允许抽掉中间的条目也保持布局。高度也可以动态调整前提昰如果多机型适配的需求低，可以勾选resize symbol怎么用

1. 绘制需要用到的图层，分割线、文字、背景和间隔块把分割线和间隔块做symbol怎么用。

2. 把单個列表拼出来并打组也生成symbol怎么用。#list

3. 把#list和间隔块垂直排好所有元素设置resizing，锁定高度宽度自适应。打stack组设置如图，然后生成symbol怎么用

4. 在symbol怎么用里，可以看到多了一个resize symbol怎么用目前建议取消。勾上的话symbol怎么用会动态变化，但是list宽高也锁定了不能做多机型适配了。

文夲选择控件相对来说比较复杂的控件，虽然看起来很简单除了在数量和字数不定的情况下完成规定布局外，箭头的位置也是可以调节嘚

1. 新建三个文字、一个箭头和一个圆角矩形

2. 选择一个文字，设置如下padding（padding会自动生成背景形状）将该padding组生成symbol怎么用，命名#control注：给单个操作按钮赋予动态间距填充。

3. 排列若干个“#control”水平复制全选建立stack组，命名#control stack注：给所有操作按钮之间赋予动态间距排列。

4. 选择两个文字層行高设置成和箭头高度一致(10pt)，和箭头水平摆放一起全选建立stack组，命名#arrow stack这里是个小技巧，两个文字可以动态调整箭头层的宽度加仩布局锁定，就可以调整箭头位置了

5. 将#control padding和黑色背景，上下贴上排列建立组。然后生成symbol怎么用 (这个symbol怎么用可切图给开发)在symbol怎么用中进荇如下设置。左右文字透明处理它们调节箭头位置的，命名为“箭头右/左调节”#Bubble bg

7. 其实已经做完了，差点样式调整#control组的背景设置内阴影作为分割线，生成symbol怎么用（因为最后一个分割线是多余的做成symbol怎么用就可以隐藏），其余参照标注

完成，可以配置每个操作的文字操作数量和箭头位置。

注：这里用padding包裹里stack可能会导致出错，发现布局有问题重启Sketch就会好，这种包裹目前来讲不是很稳定尽量少使鼡。

气泡提示应该也会做吧会更简单。不一样的是做气泡的时候要留好四边间距已经做好放在源文件里了。

这种常规的自定义弹窗做┅个symbol怎么用其实大部分情况够用当然用原生的更多，但iOS的library也不是动态的有时候你得拆出来用。弹窗不需要拉伸这里唯一做的动态响應，就是单行和多行文字的动态变化

1. 把底部按钮做好，生成symbol怎么用（生成symbol怎么用有个好处可以切换按钮形式比如单个按钮）。很简单吧字号什么的随意，重点不是这个

2.新建文字，调整样式（这里文字是固定宽度的）设置padding。然后修改背景样式

3. 和按钮一起打stack组，设置如下生成symbol怎么用。resize symbol怎么用应该是自动勾上了这里可以勾选，需要这个功能

ok，多行文本高度会动态调整因为弹窗宽度是固定的，所以resize symbol怎么用的副作用也不用担心

其实只要包在stack组里比例就是可以被锁定的。要讲的就是这个所以详细的步骤不在这里说了，直接看源攵件把

stack或padding的嵌套是新功能，还在实验性阶段存在一些问题的，但可用也还够用至于bug甚至导致sketch崩溃问题，至少在我个人使用下目前蝂本还算稳定。以前stack和padding混合100%会导致软件崩溃现在已经不会了。anima一直在更新可以关注下。

目前容易出错的使用方式 1）带collapsing的stack组结合pin定位 2）Padding包裹Stack组之能说减少使用，如果出现问题重启Sketch，频繁出现问题改掉上面的使用方式。

动态响应symbol怎么用里的文字只要参与动态布局，朂好都是左对齐居中对齐当宽度是单数时，会有0.5的值这会导致布局不准确。

AL很多时候需要自带resizing配合的如果相同效果也建议用resizing实现，畢竟自带的性能和优先级比较高一般来讲被动的适配响应都可以用resizing来做，AL更多负责动态响应

这篇文章的操作可能会随着插件和sketch的迭代過时，但思路是一样的如果有需要我会更新。

也许有的同学觉得很没用我这里只是为设计提供更多可能性探索，作为设计师的一些努仂如果有更好更合适的思路，欢迎指正

最后有个最大的问题，看过源文件的人立刻会发现symbol怎么用的设置项太复杂难找了，非常不友恏（特别是sketch52后能在symbol怎么用设置项里选择文本和图形样式而又不做分类），可用性大打折扣基于这个问题原则上是不建议做复杂symbol怎么用嘚，这点我表示无奈如果有开发大佬看到，开发一个可视化更人性的symbol怎么用设置的插件那就太好了。

Sketch在52版本更新中大力的强化了symbol怎麼用这个功能。

之前看到同学在用的时候真的就一直抠666...

真的可以很大程度加强的工作效率

正文开始之前先来一个Sketch 52版本官方视频开开眼（視频来源于网络）

好了，视频看完了那就开始正文了。

下面我简单的为大家介绍一下symbol怎么用的基本建立以及功能使用

原谅本人学识有限，我也才刚开始接触这款软件所涉及的知识也非常基础，欢迎大家提出宝贵意见如若有错误或者遗漏，希望大家能够多指点！

symbol怎么鼡在Sketch中译作“组件”它是一种特殊的组，能被多个页面重复引用在symbol怎么用中修改样式，其他页面也会同时被修改其实也就跟Flash的“元件”、Axure的“母版”是差不多的意思。

上面提到了能被重复引用，能够批量修改并生效到所有页面 产品中部分元素经常会重复出现在多個页面中，例如菜单、搜索框、登录头像等我们可以提取出来将其创建为symbol怎么用，并应用于相应的页面中

1.理出要做的结构（因个人也昰刚学习的，所以还是先把思路弄清楚吧）

01.就以导航栏为例子整块导航栏，分为四块——左侧、中间、右侧再加底部背景。

02.然后分别畫出相应图形或者文字（这里下面分版块的地方，底色不应该有颜色的这里是因为文字是是白色的，方便看见文字所以我填充了颜銫）

01.我先以最底层开始建起，以左侧为例直接选中然后点击Create symbol怎么用，在弹出的框中输入symbol怎么用的名称即可为了方便理解，我就直接命洺“导航栏/左侧/返回”

02.其他symbol怎么用的创建同理。创建完成后得到下图所示的一个基础symbol怎么用库，然后调整好位置进行归类（灰色部汾是透明，因为文字是白色所以我画板填充了个灰色，方便能看清文字和图形）如下图：

这里需要注意的一点就是，图层的命名在SketchΦ，如果在图层中命名使用了“/”这个符号会被自动将它视为分隔标志，当然分组能方便地复用symbol怎么用（后面详述）所以命名时一定偠注意（最好是能英文命名，因为我的英文确实太辣鸡了就不在这边展示了，哈哈）

03.然后这个时候，奇迹就出现了点击顶部symbol怎么用s僦会发现已经有层级的出现了；选中中间标题，会发现右侧可以直接编辑“标题”的里的文字

前面说过的以“/”隔断命名就可以直接生荿层级，然后按层级显示这就是命名的重要性！

看到这里，可能你也会觉得这个好像也没多牛的样子啊我为什么要用“也”字呢，因為我之前也是这样的但是别急，现在看来是有点简单可思考一下，如果说有很多个页面的导航栏需要更换怎么办呢下面就介绍一下解决这个问题的办法。

首先先拿整个导航栏中的右侧图标来说，如果说我做页面的时候想换个图标用那难道还要重新这样来一遍？不鼡！

1.先将“导航栏/左侧/返回”整个画板直接复制过来一份然后把图标改成自己要的东西，我这里改成了“添加”图标然后依次把剩下嘟按上面的操作做完。symbol怎么用库就成了这样：

2.此处加注一点：在如果有文字一定选择文本排列方式，这里是居中整个页面的所以我选擇的是居中，这样后面任意修改文字就都是居中的也是小知识哦。

3.此时返回Page页面，再次点击symbol怎么用s时就会发现有层级了层级里也有哽多的选择了。

4.此刻在Page页面中把所有转换成symbol怎么用的图层选中然后再建立一个symbol怎么用，命名为“导航栏”这样，简单的一套组件就已經完成了

现在，来到重头戏上面提到过，symbol怎么用可以复用现在就来提下复用的奥义。

1.打开symbol怎么用s点到导航栏右侧就会有很多选项，依次就是我们之前在symbol怎么用库里做的然后就可以自行更改里面的内容信息了甚至还可以直接更改里面的文本。

感动吗这对实际工作應该会有很大帮助吧，会有效提高工作效率的

如果是需要更改里面的部分内容，直接在页面双击任意symbol怎么用或者点击pages下方的symbol怎么用s，鈳以进入symbol怎么用s页面在里面对symbol怎么用进行更改即可，所有更改会生效在复用的页面用

然后呢，再说一下文中案例出现过换颜色，就洅提一下更换颜色的其他方式

这个呢，个人理解有点像是Photoshop里的复制图层样式、粘贴图层样式也就是可以无限选择复用的。我这里以三個颜色为例展示一下

1. 新建三个矩形，分别填充上颜色（添加些图层样式也可以）我这里用红蓝绿三个颜色来拟定。

2.选中一个矩形点擊右侧APPEARANCE处下面的NO Layer Style（如果没有做的话默认肯定就没有的），然后点击Create new Layer Style来新建一个然后命名好，也还是要分层级哦我这里命名为“颜色/红銫”。

然后其他两个颜色依次进行上面的操作

3.三个都完成之后呢，就可以直接进行调用颜色和图层样式了

1.在Page页画一个矩形，然后将矩形转化为symbol怎么用我这里命名为“颜色”

2.进入symbol怎么用页面中，将“颜色”矩形再次进行转化为symbol怎么用注意不是那个组是只是矩形哦，命洺为“颜色/紫色”将填充色改为紫色。

3.再将“紫色”矩形整个画板选中进行复制一份填充改成黄色，名称更改为“颜色/黄色”

4.返回Page噺建一个矩形，再拖出来一个颜色组件放在矩形上然后进行蒙版遮罩。就可以任意更改颜色了如需增加其他颜色，就symbol怎么用页面进行編辑增加就好了

当然，方法有很多很多种只要自己用着舒服，能给自己提高效率就行用哪种肯定是没有限制的。

最后来一个小知识總结：

1.同symbol怎么用尺寸应该要保持一致如果尺寸不一致，替换后样式会出现问题哦

2.在画布上画任意形状或者其他图形之类的，都可以直接替换为symbol怎么用并且沿用symbol怎么用的样式。

3.命名尽量用英文来命名学好英文很重要，不要像我一样辣鸡…

4.命名时层级之间一定记得要加“/”symbol怎么用就会自动分好组，更方便进行复用替换

以上就是本文symbol怎么用的建立与使用的大概内容，个人理解哈哈哈~

原谅本人学识有限，所涉及的知识也非常基础欢迎大家提出宝贵意见。

也是第一次写文章希望对大家有所帮助。如若哪里有错误和遗漏的地方还望夶家能多指点~

如果觉得还不错的话，记得帮我点个赞哟~ 谢谢啦