如何透过Sketch提高设计工作效率(下)

核心功能、操作观念、实用技巧、资源小补帖

关于上集

上一篇文章我们提到了制作Symbol 的方法和一些快速键的运用等等，不知道对于大家有没有帮助呢？还没看过的的朋友可以点下面的连结前往上篇：

如何透过Sketch提高设计工作效率(上)

核心功能、操作观念、实用技巧、资源小补帖medium.com

而这一篇就来聊一下一些做UI的小观念与分享一些Sketch 的相关资源吧！

7.插件(Plugin)

插件的支援是Sketch相当重要的卖点之一，强大的社群资源以及众多开发者不断的投入之下，Sketch插件目前呈现一个百花齐放的状态，不时有新玩意释出，虽然想用Sketch原生的武功打天下也不无不可，但是好好的运用这些插件，相信我～你的工作效率就会像开了加速器一般呢！

我们可以利用一个叫做Toolbox的工具来快速安装以及管理插件，这边我也推荐一下几个我常用的插件：

https://www.invisionapp.com/craft

Craft： Craft是Invision这个线上协作平台所推出的一插件，它是由许多功能集成的套件，除了可以快速复制纵向与横向的物件排列、还可以产生许多资料内容方便编排、快速同步画板到invision 、自订自己的素材库等等，未来也将推出更完整的制作动态原型的功能，所以我非常看好这款插件之后的发展，有兴趣的朋友也可以上Craft的网站了解更多。

http://sketchrunner.com/

Runner：正如他的官网说描述：Run Everything，这个插件可以帮助你快速的去你想去的地方，不管是开启档案、去某个画板或图层、新增Symbol等等，总之就是可以可以省下我们找东西的时间，我觉得相当的方便。

Icon Font：这个插件内建许多icon可以立即使用，包含font-awesome以及material icons等等，而且可以使用「编辑文字」的方式来调整样式(这个icon本身就是一个字体)，所以可以让我们在初期排版时快速放入一些icon示意内容，不过比较精细的icon我建议还是自己画，毕竟画一个容易识别且符合情境的icon也是UI设计师的任务之一，这个工具只是帮助我们放一些通用型icon ，让开发端可以先从font-awesome之类的平台先抓来替代，我们画的图之后再补上就可以啰！

Rename it：不知道你有没有遇过这样的经验，同一个物件复制了好多个，档案名称的最后就会有无限个”xxx copy”，这时候我们就需要这个命名小工具来做一次性的命名处理，把相同类型的元件重新命名或加上编号，这个插件还提供了各种变数，让你更灵活的去调整你的命名规则。

Magic Mirror：这个插件做展示图的时候的非常的方便，它可以相当轻易的把Artboard投影镜射到你所选取的形状图层上，因此在制作有透视或是各种角度的Mockup都很好用，只不过这款插件若要取得较高画质的镜射是需要付费购买Pro版本的哦！

https://abynim.github.io/UserFlows/

User Flow：以前要在Sketch中画整个产品介面的流程图也是一个满痛苦的事情，虽然现在有些工具像是Prott，可以让你使用平台串连页面之后产出整个介面的Flow，但大部分还是会在Sketch先完成Flow再去做原型，所以这个工具就是让你更方便的产出页面连接的线，甚至还可以增加一些不同状态的逻辑判断呢～

Git Sketch：对于设计师来说，版本控管一直是一个很头大的问题，以往都透过修改档案命名来辨别(v1,v2,v..100)，但是随着时间一长档案会越来越多甚至覆盖掉过去的版本，因此这个插件也导入了程式的版本控制(Git)的方式，让设计师用简单的插件就能做好版本管理，每天下班就是按下Commit，收工！

https://ozzik.github.io/Slicer/

Slicer：我切！这个切图插件除了可以快速帮你导出不同倍率的图案之外，连不同装置的后缀都帮你加好了，汇出后也会帮你分资料夹收好，汇出的icon也可以保留背景透明度，是个非常实用的插件。

8.制图时的观念与方向

做好图层命名，好的命名习惯有几个好处：

1.直觉好找、搜寻容易(不管是自己看或是和同事协作都是好棒棒！)

2.帮助自己厘清自己到底做了什么东西，有时候设计很多页面时会做到头昏脑胀，这时在命名的过程常常就会发现一些不必要或可以合并的元件，顺便保持图层结构的干净。

3.串接原型工具(Prototype Tools)时可以省去不少时间，因为许多工具的运作规则都会根据命名而有所影响。

了解各种装置的限制

随着时代演进，现在介面的载体越来越多元，在UI设计上的考量也要越仔细，我们要知道我们的画面在不同装置间会如何呈现，例如做网页的话我们必须要了解网格系统(Grid System)以及流体布局(Fluid-Layout)基本概念，手机版网页是否要乘载所有的资讯？如果是做手机App介面的话也要知道iOS和Android的使用逻辑与习惯，另外建议一定要搭配Sketch Mirror在手机上查看细节和字体大小，因为在电脑上做图和眼睛真正在看手机的距离是不同的，所以每个装置的规范或限制都必须要去了解。

http://www.alleywatch.com/2013/05/what-are-grid-systems-and-why-you-need-to-know-about-them/

建立专案的视觉规范(Style Guide)

正如前面所提到的，不管是建立Symbol或Share Style都是在加速我们的效率，而更重要的是经由这个过程来建立一套视觉规范，这不仅能帮助我们厘清我们整个产品的色彩模式、文字、元件结构等等，对于程式开发以及团队其他成员来说也能有更一致的沟通画面。有些人可能会觉得整理或制作这些规范有点花时间，不过我个人是认为「沟通成本」远大于「制作成本」，前期的资料建立越完整，后期反覆修改调整的机会越小。