我也刚开始用，不知道怎么样，看官方视频，做icon挺快的
如果全团队是Mac的话，Sketch是非常好用且适应现在的设计趋势的。我们公司现在已经全部都用Sketch了。Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作。线框到视觉稿可以在一个软件里完成，能省去不少时间。&br&Sketch的用户社区也比较繁荣健康，让人挺有信心继续用下去。（Sketch的扩展开发比PS容易的样子，我看github上还有人做了自动生成iconfont之类的高级脚本……）&br&&br&其他回答基本都只是在特色功能上评论，确实，这软件一开始的印象可能只有小巧便捷够用。但用多了后就会发现他&b&最好的地方不是比PS多了什么功能，而是针对UI设计的操作、交互模式，用起来非常高效。&/b&&br&PS因为要考虑摄影用户的使用，并不能针对UI设计师做最优设计。有些回答中说道的切图、测距等功能，其实最新的PS CC也能胜任（其他很多功能我相信要在PS上出现也只是个时间问题。跟PS比功能是很难有核心竞争力的），但PS的基本工具的操作/交互方式从来不是对UI设计专门设计的（我想这很难改变）。而这正是Sketch的取胜之道。&br&&br&UI设计时，最频繁的操作有选择/移动，整理图层、更改属性/样式。这3样东西是互相影响的，Sketch在这3方面都做得挺好，就完成了1+1+1=5的出色体验（虽然有一些是矢量软件天生的操作优势）：&ul&&li&整理图层&br&UI设计中得图层，和照片编辑时很不同的一点是，模块（or板块or分组）之间大多数不重叠，因此图层顺序也就相对不那么重要。只要对象能够被用户方便的选择到（后面讲选择功能的设计），图层的顺序很多时候是无所谓的。事实上浏览图层面板是低效的，不管缩略图还是文件名，人的读取效率都是不够理想的。Sketch通过更适宜的基本功能设计，很大程度上减少了用户对图层面板的依赖程度（不用去看），不仅直接简化了操作，也使用户可以更专注于画布上得内容。&br&&/li&&ul&&li&不要小看Forward和Backward的设计。Sketch的这个功能设计地非常好。&br&首先这个功能的运作方式非常高效，它会考虑到遮罩关系，不做无意义的顺序变动。比如从上到下有a/b/c三图层，a遮着c了，但是b在其他地方，那我对c执行一次forward，c就是直接跑到a上面了（c/a/b），而不是只傻傻地提升一个级别（a/c/b）&br&其次它只改变同级别内的图层，所以图层组内的东西怎么forward都不会跳出图层组。&br&相比PS，图层一多，拖动来改变顺序太痛苦，用forward和backward每次只移动一层，低效，而连按太欢了又可能一不小心把分组逻辑搞乱了，必须小心翼翼&/li&&li&复制、粘贴&br&Sketch中复制、粘贴的操作和日常其他软件里的复制粘贴很相似。选中图层or图层组的情况下command+c复制，command+v粘贴。另外很重要的一个设计是，当前选中的对象决定粘贴出来的东西在哪个图层组里。这样大部分复制粘贴操作是不用看图层面板的。&br&而PS里，ctrl+c和ctrl+v只能复制像素（选区），图层/对象的各种复制都远没有Sketch那么爽快，因为你必须通过不狗直观的图层面板来决定新图层的上下关系和包含关系。&/li&&/ul&&li&选取、移动工具&br&这个最基本、最重要的工具设计的好不好，影响是巨大的。&/li&&ul&&li&PS选择分为矢量的选择（A）和位图的选择（M）和图层的选择（V），略微复杂、繁琐。比如我现在要改变一个矩形矢量图层的圆角参数，我得先V切换到图层选择工具选中图层，然后A切换到矢量选择工具选中该路径，然后属性面板里才给我出现了圆角的参数。&br&而Sketch里只有唯一的选择工具，一统天下。&/li&&li&Sketch里的选择工具，通过双击可以把选择范围的层级深入一层（也就是可以选图层组里的东西），这样即使是嵌套了很多层图层组，每层还好多个图层组的情况，也可以很方便且逻辑较清晰地进行对象的选择。这个双击使得用户更加不需要关注图层面板。&br&而PS里的选择工具有两个模式，一个是选图层组，一个是选图层。图层组模式是不能选图层组里的图层；图层模式时不能直接选整个图层组。双击？那是什么？&/li&&li&Sketch里的默认的工具是选择/移动工具。其他工具都是画一下就切换回选择工具。你说你要连续添加很多个图形/元素？用make grid批量复制并布局吧。&br&画好一个东西后接着布局，更加符合绘制UI的情况。而PS里你画好一个图形后还得按着ctrl才能移动。（PS的操作就是ctrl基本不离手）&/li&&/ul&&li&更改属性/样式&br&Sketch里的涂层样式是在右栏里常开的。而在PS里先要在图层面板里找到当前选中的涂层然后双击打开样式编辑窗口，而样式窗口的弹出位置又是不那么确定的（尤其是多屏环境时），这么多次的视线和鼠标的移动，是非常低效且烦人的。&br&其实这点PS也是可以模仿的，只要开发个图层样式的面板，然后这个面板可以自定义显示哪些属性（不然会过多塞不下）就可以了。但Adobe没有，我也没搜到这样的一款扩展/插件。&/li&&/ul&经我这么一番叙述大家应该可以意识到了PS做UI设计是多么繁琐。&b&sketch不仅简化了流程，还让左手（不用太多时间按着ctrl）和眼睛（不用去仔细阅读图层面板）更加轻松。它带来的隐藏的效率提升是比较可观的。&/b&至少操作体验是很好的。&br&Sketch还有很多人性化的设计细节。各位用着用着就能体会到。&br&&br&简单明了的功能加上以上各种亲切的交互设计使得这软件的上手难度极低。我转向Sketch的时候除了个别疑点稍微搜了下文档，总体边学边用的过程都毫无阻碍。&br&&br&感受到的相对的不足有：&br&&ul&&li&团队小，软件没有Adobe的产品稳定，遇到bug时基本上就是毫无办法。也不知道什么时候会修复。&/li&&li&大点的项目or大尺寸位图多点，性能就很一般了。&br&之前做一个web app，背景整个是个位图，结果artboard也就十几张就比PS还卡了。&/li&&/ul&Sketch如果功能上能满足团队需求，是目前的不二之选。它决不是简单地针对UI设计开发特别的功能、去掉不太用的功能，而是在基本的操作层次上给UI设计师带来了得更好地体验。
如果全团队是Mac的话，Sketch是非常好用且适应现在的设计趋势的。我们公司现在已经全部都用Sketch了。Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作。线框到视觉稿可以在一个软件里完成，能省去不少时间。Sketch的用户社区也比较繁荣健康，让…
大概用 Sketch 用了将近一个月，原来是一直用 Illustrator 做界面设计。&br&Sketch 有很多优点，但是同样的也有很多不爽的地方，大概列举一下，供参考：&br&&br&&b&优点：&/b&&br&&ul&&li&&b&快&/b&，用 Sketch 好像没有冷启动时间一样，这也就是为什么 AI 和 PS 需要启动画面&/li&&li&&b&OSX 支持好&/b&，原生全屏，原生的版本控制，支持 Retina&/li&&li&&b&功能集足够，&/b&支持贝塞尔曲线，支持布尔运算，支持文字转曲，支持图层样式&/li&&li&&b&功能亮点&/b&&/li&&ul&&li&原生支持 @2x 图片导出&/li&&li&保存切片时，可以选择导出的图层。如果在背景上画图标的话，不用像PS那么苦逼&/li&&/ul&&/ul&&img src=&/aae37a467698afb51827d08_b.jpg& data-rawwidth=&196& data-rawheight=&318& class=&content_image& width=&196&&&br&&ul&&ul&&li&多个图层样式叠加，一个样式可以有n个阴影，基本上用 PS，AI 做出来的效果用 Sketch 没大问题。&br&&/li&&li&方便的阵列生成，有一个图形快速生成 n×n 的阵列，有内建的功能。&/li&&li&支持 CSS 样式复制&/li&&li&每个顶点的圆角半径设置 (PS内牛满面)&/li&&/ul&&/ul&&img src=&/bc11b18bbcae2d0c5c3850_b.jpg& data-rawwidth=&241& data-rawheight=&180& class=&content_image& width=&241&&&ul&&ul&&li&比 Adobe 好用的智能辅助线，不仅可以对齐，选中之后按住 option 还可以量距离&/li&&li&Sub-pixel 的文字渲染，这个 Adobe 从来没做到过。&/li&&/ul&&/ul&&img src=&/69d8ca9add50aec28c111bb34c00bd73_b.jpg& data-rawwidth=&161& data-rawheight=&95& class=&content_image& width=&161&&&ul&&ul&&li&像素对齐，这个 PS 和 AI 也是痛点，但是 Sketch 也有小问题。&/li&&li&不限制大小的画布，这也是 PS 的一大痛点。&/li&&/ul&&li&缺点&/li&&ul&&li&快捷键覆蓋率不高，和 Adobe 系不一样 (比如R是矩形，Adobe系一直是M)，且不好自定义。&/li&&li&像素图像编辑功能弱到爆，相当于没有。&/li&&li&蒙板功能难用到爆，哪怕我只是想 Crop 一张像素图，也要画个路径，选中之后做蒙板。&/li&&li&只支持 SVG 的导入，不支持 psd, ai 路径的导入，复制粘贴&/li&&li&群组内编辑比较弱&br&&/li&&li&偶尔不稳定，不明原因地变慢&/li&&li&文字编辑工具属于刚刚能用的状态&/li&&li&&del&不能设置虚线和箭头&/del& Update: 可以设置，Border 那里有下拉菜单……&/li&&li&最大的缺点：Sketch 文件属于没人支持的状态。你不可能永远不把原文件给别人。&/li&&/ul&&/ul&&br&既然一个工具能让我用将近一个月，并且有相对稳定的产出，这个工具肯定是足够一般的用途了，但是要挑战 Adobe CS 这些大块头，还是不太现实，比较适合小团队，做一些简单的界面（话说现在扁平化流行的年代，用 Sketch 倒是刚刚好）。&br&&br&秀一个 Sketch 画的，并不复杂，但是比较典型的比其它工具都方便：&br&&br&&img src=&/39202caeaa485b8d8bc9_b.jpg& data-rawwidth=&521& data-rawheight=&247& class=&origin_image zh-lightbox-thumb& width=&521& data-original=&/39202caeaa485b8d8bc9_r.jpg&&
大概用 Sketch 用了将近一个月，原来是一直用 Illustrator 做界面设计。Sketch 有很多优点，但是同样的也有很多不爽的地方，大概列举一下，供参考：优点：快，用 Sketch 好像没有冷启动时间一样，这也就是为什么 AI 和 PS 需要启动画面OSX 支持好，原生全屏…
总的说来是个打杂的浅谈Sketch ，最适合手机UI的设计工具_乐收 >
> 详细信息浅谈Sketch ，最适合手机UI的设计工具 发布于： 21:36:00
大家在手机应用中，经常看到很多华丽且动感的界面，然后不由得让我们感叹，&这么好看的画面，为什么我就PS不出来呢？&。
其实，那是因为你完全搞错了，这些图片中至少8成以上根本不是用PS做的。
没错，他们大多得益以Sketch，这款目前最火的手机UI图片设计工具。
下面，小弟将就Sketch，进行一下基本的介绍
首先，您要明确知道，Photoshop并不是一款合适的手机界面设计工具
为什么我们会期待一个新的设计工具？因为当我们更多的关注效率和关注协作，就越发现Photoshop已经不足以满足我们的期待了。下面看看具体的理由：
一、它并非为设计师打造
Photoshop是为图像处理开发的，诸如路径和矢量工具都是后期才加上去的，所以如果你关心一下Photoshop的更新路径，用户界面设计师完全不是Adobe做这条产品时关心的用户群。所以，如果抛去那些复杂的功能，一个为用户界面设计师打造的设计工具完全可以做得更简单，更高效。
二、它不适合移动时代
相信我们都会觉得为不同的设备输出不同分辨率的素材而痛苦不已吧。或许，你会使用一些第三方插件或是启用一些模板来处理这些事，但依然是很浪费时间的。
三、引擎太过陈旧
Photoshop的引擎是上个世纪为图像处理而打造的，非常的耗费资源，即使是启动一下都要等很久，更别说一次移动多个分组了。话说回来，由于要兼顾Mac和Windows平台，能做到这样已经不容易了。
四、越来越跟不上时代
大公司的执行效率实在太低。不知道大伙是不是和我一样，非常痛苦地等了好几个月才等到Photoshop对Retina屏幕的支持。诸如自动对齐的等功能我已经不做期待了。
为什么Sketch确实值得我们去使用
一、自动保存和多版本控制
&
有没有梦想过拜托机械的手动保存？Sketch可以做到。Sketch在工作的时候会不断地自动保存成果，并且允许你回复到此前的任一版本。
二、矢量作图并且像素级的完美
&
矢量图意味着可以任意扩展。你没有必要不断地去调整素材的尺寸，Sketch会自动就帮你维持一个像素级完美的作品。如果有的时候你必须用像素点来作图，比如说是画图标或者是插画设计，Sketch 也提供了从矢量切换到像素视图的功能。
三、智能标尺
&
你喜欢xScope吗？还是正在用选框工具来进行测量？又或者是难用的网格？Sketch的智能标尺可以帮你轻松地把设计元素的对齐方式、内外间距都调整完美。就我个人而言，这个功能非常节省时间而且避免了复杂的人工计算，是我觉得最有用的功能之一。
四、 随时随地编辑元素
在Sketch里我们可以随时随地修改一个元素的圆角、高度和宽度。只需要简单地修改数值就可以轻松调整元素，对于刚从Photoshop切换过来的设计师而言非常好用。甚至会让你产生强烈的依赖。
五、图形拼接
在Sketch 里你可以很轻松地把多个图形合并，构成一个新的图形。并且Sketch在提供了多种图形合并模式的同时，还允许你随时修改已经合并图形的子图形。这项功能使得你可以很轻松地管理和创造更复杂的图形。
六、 每个图层都可以有多种混合效果
&
&
在Photoshop里想要让一个图层有多种混合效果是很困难的。但在Sketch里，你可以很容易给一个图层加上多种混合效果，看看下面的示例就知道了。
七、自动选择最接近的像素边界
自动选择最接近的像素边界可以让一个图形或者是图层自动修正边距到一个像素级完善的位置。比如可以把一个宽度是5.3px的图形自动修正到5px，这样就不会有模糊的像素点和粗糙的图形了。我自己给这项功能设了一个快捷键（Command+Opitons+x），来确保我做出的每一个图形都像素级完美。这比人工一个一个按照网格修改图形高效得多。
&
八、样式链接
有的时候你会做一些充斥文字的设计，样式链接可以帮助你设定一个固定的样式来快速地应用在新的文字上。如果你修改了其中任何一处的样式，那么所有链接该样式的文字都会自动更新到新的样式。并且，这项功能也可以应用在图形上。
九、导出素材
用Photoshop的时候，最痛苦的事莫过于切割元素，然后到处素材。Sketch则可以帮助你快速地导出各种分辨率和格式（pdf, eps, svg, png, jpg, tiff）的素材，通常导出只需要一个点击，并且不用借助任何第三方应用程序。
十、分布式布局
作富文本设计的时候，布局会变得非常重要，这项功能可以帮助你快速地试验不同的方案。
十一、网格化功能
其实可以把网格功能理解成按照纵横两个维度自动地结构化布局内容。这个对于排版布局而言，非常方便。
十二、出色的文字渲染
Sketch的文字渲染引擎非常出色，可以用来做很出色的文字布局和字体设计。因此，你可以放心地放弃Photoshop的抗锯齿功能。
十三、支持CSS样式导出（这个功能目前用的最多，话说拜他所赐，目前不像人写的CSS也越来越多&&）
如果你在做一些网页设计，Sketch可以帮助你快速地把你的成果到处成CSS样式，能够把画面效果直接融入HTML使用。
&
十四、旋转副本
这是一项小功能，但是确实可以节约你很多时间和精力。
十五、Sketch Mirror
Sketch Mirror是一个Universal App，可以方便你在iPhone或是iPad上查看自己的成果。（作者撰写这个文章的时候Sketch还没有推出官方的镜像工具，所以这一段是译者补充的）。
快速响应是杀手锏
Sketch目前还是一个不大的团队，但发展非常快速。简单扫一眼Sketch的升级日志，你会发现每一个更新都会带来新的功能。 我非常建议你去使用Beta版本，你会见证Sketch快速的升级。 Sketch团队非常善于聆听用户的诉求，因而软件不断地变得更好。你可以去tenderapp上向他们提出新功能的要求。相关链接链接地址：软件编程类站点，主要是关于Ripple支付协议，以及程序与游戏开发的综合性技术资料发布与介绍，附带是LGame(Loon）游戏引擎主站。联系信息PS让你设计效率疾速提升的免费15个Sketch插件
下面小编为大家推荐PS让你设计效率疾速提升的免费15个Sketch插件，相信这些插件肯定能让你设计地很好更快，下面我们一起来看看吧
&　　尽管Bohemian Coding团队一直在尽力更新提高Sketch的易用性，完善功能和特性，但依然无法满足设计师和开发者的全部需求和愿望。好在开发者社区K]有坐以待毙，而是积极地开始为Sketch开发各种各样地插件。
　　有些开发者打算用自己开发的插件替代系统预制的组件，旨在让GUI、图标和原型地设计拥有更大地定制空间，还有一些开发者则选择试图开发出提高工作效率，完善工作流程地组件，解决各种尚未完善地问题。如果你打算借助Sketch从零开始设计一个项目，那么下面介绍地许多插件和工具应该能给你极大地帮助。
　　这些免费地插件不仅简化了复杂的技术，加速了基本的流程，提升了原型开发速度，使得整个设计过程比原来提升了不止一星半点。打开你的Mac吧，下面的15个Sketch插件中，总有一款能帮你走的更快，设计得更好。
　　Sketch Mate
　　不想看常常的Sketch说明书?那么这款插件就是你的菜了。Sketch Mate 可以帮你熟悉Sketch相关的术语和功能，让你在简单上手过程中就可以了解画板、智能对齐、排版和文本等工具的具体功能。
　　Dynamic Reposition
　　这个插件的名字已经非常形象了，动态重新定位插件，它可以帮你动态调整对象的大小和位置而不用破坏其内容，还能保持对象的比例。使用之前，你可以事先设置位置和尺寸，方便后续操作。这款插件和Sketch 3完美兼容，并且配有相应快捷键。
　　Sketch Framer
　　如果你想使用交互良好的原型展示给客户，那么这款插件可以帮你达成这个愿望。这款插件能够帮你将Sketch中设计的原型输出到FramerJS中，生成可交互的原型，便于执行和展示。
　　Sketch Toolbox
　　这个名为 Sketch Toolbox的工具可以帮你更为方便地组织管理Sketch插件目录。它不仅可以帮你组织管理插件，还可自动更新已安装的插件，只需几次点击，你还能获取更多可用、易用的Sketch插件。目前，Sketch Toolbox 的团队还在为其添加更多功能，诸如排序、快捷键和自定义设置等，尽量与Sketch本身的开发保持相同进度。
　　Generate Gif
　　使用Gif来展示产品其实是颇受欢迎的一种方式。比起静态的图片，动态的Gif能更便捷地展现交互和动效的实际效果。Generate Gif 可以帮你快速生成动画的关键帧，也与OSX Yosemite的沙盒机制完美兼容。
　　Sketch to App Store
　　当你使用Sketch为iOS或者Mac平台设计APP的时候，发布到App Store 也是自然而然的事情吧?Sketch to App Store 这个工具能帮你生成一整套符合市场需求，漂亮且符合App Store 与 iTunes Connect 规则的展示截图。
　　Smartboards
　　这个名为 Smartboards 的工具旨在通过一系列插件，来彻底解决新建画板相关的所有问题。
　　在这一系列插件中，第一个是Gridify。这款工具可以帮你快速为画板矩阵命名(列用数字表示，行用字母表示)，然后按照字母顺序排列，画板与画板之间还会预留100px的间隙，快速便捷高大上哦。
　　Sketch Sort Layers
　　每次项目都要接近尾声的时候，都会发现所有的图层乱七八糟犬牙差互，难以处理(不只是Sketch上，在PS上我们就没少碰到这样的情况)。而这个Sketch Sort Layers 插件正如同它的名字所说的，可以简单有效地为你重现组织图层顺序，小巧，实用。
　　Sketch CSS Sprite Mixin
　　Sketch CSS Sprite Mixin 可以帮你从Sketch 快速生成干净清爽的SCSS代码，甚至无需额外操作就能生成无延迟的Sprite 图像。
　　Sketch Notebook
　　对于那些看不到描述、评论和解释就不知道怎么完善工作流程的人而言，这个小插件绝对算是良心了。Sketch Notebook 拥有一个简洁高效的侧边栏，对于每一个工具和条目都有简短而清晰的描述，还能有效地创建靠谱的文档。
　　Efficiency
　　在Sketch 中安装Efficiency 意味着，将会有一系列工具合集会帮你从各个方面提升你的工作效率。从文本控制到图层管理，你会发现Efficiency会从各个方面各个细节提升你的工作效率。
　　CSS Buddy
　　虽然这个插件仅仅还处于测试阶段，但是本身的易用性已经开始显现。CSS Buddy 会使用CSS帮你控制图层，对于开发者而言，这是一个伟大的创举。现在，它已经可以控制图形、文本和画板，今后它还会控制更多类型的元素。
　　AEFlowChart
　　如果你需要在Sketch中绘制五颜六色的图表的话，就千万不要错过这个插件。你唯一需要做的，就是编辑好文本和标签，这个插件会帮你转化为你需要的图形和图表。稍加调整，你要的图表就搞定了。
　　Blade 可以将你在Sketch中绘制的原型、视觉稿转化为HTML代码，目前已经针对最新的 Sketch 3 的特性进行了升级。Blade 会针对不同类型的元素插入标签，所以为了让转化效果更好，最好针对不同的元素和图层进行合理的分组。
　　Sketch Export Assets
　　开发者提供了两个有用的插件来处理所有的输出和导出的问题。其中一个插件负责帮你针对Android、Windows Phone 以及iOS三大平台导出素材，去它的Github页面看看，你会发现另外一个插件还为你准备了什么功能~
　　想比起昂贵而复杂的Photoshop， Sketch 看起来确实单薄了点，但是它对网页和UI设计具有极强的针对性，社区和开发者提供的诸多插件也都专注于这方面的功能完善和技巧提升。稍加探索，我想你一定会爱上它的。多亏 Sketch，我这个小码农可以自己设计 app 了 - 简书
下载简书移动应用
写了13948字，被491人关注，获得了704个喜欢
多亏 Sketch，我这个小码农可以自己设计 app 了
Spreadeo logo
一个多月前，我开始帮 Johnny 为他的 Spreadeo 做 iOS app。我俩白天都在公司上班（他是某 labs 的后台程序员，我是某
的 iOS 程序员），为了避免和公司有知识产权纠纷，我们都严格地只在下班时间和周末做这个项目：他负责搭建服务器和数据库、提供 API，我负责做 app。
我们的产品 Spreadeo
在此之前的一个多月里，我们已经为了这个 idea 做过简单的 mockup（）、和客户约见过、并和一个 mentor 保持着联系，所以开始做产品的时候，我们对功能、界面已经有了一些把握。
Spreadeo simple flow
然而第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。
我用的资源基本上都来自
Sketch Active
其他素材可以到要用时慢慢找，切忌在开始设计前花太多时间准备素材，因为对于像我这样的 newbie 来说只有在直观地运用单个的素材到设计中后才能判断它的好坏，纯粹的素材搜集只会让人迷失方向。
以 engineer 的思维来 visualize 脑中的东西
以下就是我在2天内完成的设计（不包括几个后续添加的页面和 others 里后来为网站做的素材）。
Spreadeo Sketch
作为一个开发者，我没法给出专业的设计建议，只能告诉大家我用到的不错的功能和心得，还望专业设计师包涵/指教。
用 Artboard 分隔界面
编程的时候我们用 view controller 来分隔每个界面，在 Sketch 里，我们用 artboard。
把 artboard 设置成640 x 1136的大小，这就是一个 iPhone 4 英寸屏幕等像素的长方形（更多相关尺寸请见 ）。在完成一个界面设计后，可以复制这个 artboard 并重命名为下一个界面，也可以在界面旁边新建一个 artboard。
在每个 artboard 里，所有的元素的位置都是以左上角为原点的，就像使用 .xib 文件一样，你可以精确地把一个元素放到想放的位置。在你拖动一个元素的时候，Sketch 还提供了自动对齐、居中等功能，帮助你更好地布局。
用 Mirror 在手机上实时查看
顾名思义，就是把你在 Sketch 里的设计实时地映射到手机上的 app。在手机上打开 Mirror 并和 Sketch 链接后，你可以看到每个单个 artboard，感觉就像是在手机上看着一个真正的 app 一样，只不过没有任何交互。
Mirror 非常有用，因为在电脑上看设计的感受和在手机上是完全不同的，而且即便没有真正的交互，你也可以感受到哪些控件的位置对手势不友好，并作出修改。
拖拽出来的构图：巧用基本图形
正如上文提到的，一个普通的 app 一般是由基本图形组成的，我们的Spreadeo 也不例外。
Sketch - Shape
在下图中，我用2个长方形分隔出 navigation bar 和 tab bar，用圆角方形做卡片，用圆形和特殊字体做了卡片上的水印，又用圆形做了 tab bar 上被选中 tab 下面的高亮小点。
Spreadeo - Referrals
你还可以把几个图形进行整合，比如卡片水印就是两个同心圆相减变成的一个环。你也可以用 mask 来保证某些元素保持你想要的形状，比如上图中卡片的背景图和黑色渐变就是被圆角方形 mask 住，保持了卡片的圆角。
最后，你可以把几个元素（包括图形和文字）归为一个 group，方便复制和移动位置。
阴影、渐变、毛玻璃背景、字体
图形的新建和移动不难，但要想添加一点设计感，就要尝试用阴影、渐变等效果，而这些在 Sketch 里都非常容易设置，点几下鼠标再输入几个数字，你就可以轻松获得这些效果。
你也许想，这些功能 PS 里也有啊。但如果你和我一样是设计新手，你就会感谢 Sketch：你不用像在 PS 里那样，在某个图层的众多选项里寻找你需要的效果，Sketch 已经精简地把这些效果直接放在你面前供你勾选和设置，没有额外的弹窗，一切改动实时地显示在 artboard 里，毫无新手障碍。
Sketch editor
另外，Sketch 提供非常丰富的字体库，你可以选中所有想改的字，同时修改它们的字体并添加效果。
巧用 Symbol
在制作了几个界面后，也许你会碰到一个问题：如果我想同时改变所有 artboard 里的 tab bar 的背景色，怎么办？
当然，你可以用 Command 同时选中这些长方形并修改颜色。你也可以用一个更聪明的方式：把 tab bar 设置成一个 symbol。这样，只要你在一个 artboard 里修改这个 symbol 里的任何一个元素的任何属性（文字、字体、背景色、阴影效果等），这个变化都会自动传递到这个其他 artboard 上。这在微调色调、位置时，大大提高了工作效率。
借鉴、学习、迭代
不得不说，做设计离不开借鉴。
也许你和我一样，在脑袋里想得明明白白，“这是张卡片”、“这是个按钮”，可是并不知道什么样的效果能让一个简单的图形准确地表现出它的 。我就遇到了按钮怎么都不像按钮的尴尬情况。这时候，下载几个相关的或者备受好评的 app，研究研究他们在处理某个图形的用的时什么方式，就会获得不少帮助。
当然如果你有一个设计师朋友，那么拿你的设计去问问 ta 吧。我就在我的设计师朋友那获得了不少超棒的建议，你可以看到我的 archive 里对两个核心的界面都设计过几个不同的版本。
当当当，作为程序员的我当然对快捷键情有独钟（其实设计师也一样啦），我就在此推荐我用到的快捷键。
R：添加长方形
O：添加圆形
T：添加文字
Cmd (+) +：放大 canvas
Cmd (+) -：缩小 canvas
Cmd (+) 0：缩放 canvas 到实际大小
Cmd (+) 1：居中 canvas
Alt：显示元素间距离
Alt (+) Cmd：显示 group 里元素间距离
Shift (+) 上下左右箭头：以10 pixels 为单位改变 Y 或 X 值
Cmd (+) 上下左右箭头：以1 pixel 为单位改变高或宽
更多好用的快捷键，请戳，
设计与开发
在 Sketch 上折腾了共计5个小时后，我重回到 app 开发的职位。这时，我有了“不会再有大改动”的设计图，就开始放心地继续开发了。
自己做设计的一大好处是，任何时候我都可以回过头来对设计做微调，然后导出需要的 asset（Sketch 都是矢量编辑，所以你可以轻松导出任意像素值的 asset），或者直接获得位置、色值、字体等信息，大大减少了以往和设计师之间的沟通成本，提高了开发效率。
终于，在第16天，我们兼职完成了 Spreadeo 的首个版本，基本达到了我们2周完成产品的计划。
设计与思考
做了两年的 iOS 开发，不论是工作内还是自己的小项目，以前都是依赖着设计师给设计，我渐渐意识到当我没有设计在手的时候，开发速度会大大地降低，尤其是搭建完基本的功能之后，大部分精力着重在界面和体验时。
我现在才知道，其实这种感受的“罪魁祸首”并不是没有设计，而是我自己对产品没有把握。无论是工作内“不允许”有个人的把握，还是自己项目上我思绪万千理不出头绪的没有把握，归根结底是产品的“魂”不在我心里。
而设计，并不只是视觉和交互设计，它包含了对产品目的、功能、效果的探索和定义，它是一个定义问题、解决问题的无限改进过程。当这样对设计有了把握后，开发也能自然提速。
不停地思考与学习 ing。
。。。。。。
谢谢阅读此文，希望它能对你多少有些用。
你可能会对我（一个不想只写代码的小码农）的其他文章也感兴趣：
：带着你的创业点子，跟我一起学习+思考
：不会做设计的移动开发者不是好产品经理
：看看我在这家 startup 学到了什么吧
如果你想与我交流移动产品、硅谷生活、startup 体验、运动健身，或者想看到我写某个方面的文章，请站内信联系我 :)
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
互联网产品相关的一切
· 15568人关注
欢迎投稿 将实用的知识共享
· 15177人关注
移动产品设计
· 9604人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：