Sketch和Axure画原型，哪个好用？

最近换了一家公司，就换了一款设计软件。之前公司，同事之间的稿件交流，都是统一用Axure原型图。现在新公司，同事之间的稿件交流，都是统一用Sketch原型图。我把自己这段时间的Sketch使用感受，现在分享一下。

Sketch和Axure相比，有哪些特点？

Sketch大部分功能和操作思路，和Axure是一样的，比如：按住空格键，  显示抓手工具，这时候一边按住空格键，一边可以用鼠标拖动界面大图。

下面我通过边用Sketch画几个示例图片，然后通过示例来讲解Sketch的特点。

-----------------------------------------------

▲上图是Sketch示例1：

这是一个Sketch布尔运算功能画icon的示例。通过这里示例，可以发现Sketch包括有4种不同的布尔运算，你可以根据需要来具体选择：

合并形状 (Union)：

减去顶层形状 (Subtract)：

与形状区域相交 (Intersect)：

排除重叠形状 (Difference)：

这些功能跟CDR和Ai以及PS软件的使用效果是一样的。

之前喜欢用布尔运算画icon的同学们，你们遇到Sketch，就有福了。因为Sketch也可以通过布尔运算来画icon。 现在新版的Axure8.0，也开始有了布尔运算的功能。不过，还是Sketch的布尔运算位置更明显，用起来更顺手。

-----------------------------------------------

▲上图是Sketch示例2：

这是一个用Sketch画的搜索框的示例：这个功能和Axure的一样的。不过，仔细看上面这张图，可以发现，Sketch可以绘制两头渐隐的直线，可以给文本框添加内阴影和外投影。

-----------------------------------------------

▲上图是Sketch示例3：

这个示例展示了sketch快速切图的功能。sketch可以快速导出切图， 包括各种倍数的切图，一键导出，并且自动命名，比如：2倍图，导出之后，自动命名尾巴，@2x；3倍图，导出之后，自动命名尾巴，@3x；

-----------------------------------------------

▲上图是Sketch示例4：

这个示例是我用Sketch调整的2段示范文字。Sketch可以轻松调整字间距，行间距，段间距。配图的间距比例为：字间距(Charater) : 行间距(Line) : 段间距(Paragraph) = 1:26:16

-----------------------------------------------

▲上图是Sketch示例5：

这是一个快捷键的示例。Sketch的界面截图：它具备很多自带的快捷键，比如：输入R，就可以绘制矩形；输入L，就可以绘制直线；输入T，就可以开始输入文字。Axure则需要用鼠标选择矩形，然后拖动到面板，才可以开始更改矩形的尺寸。

-----------------------------------------------

▲上图是Sketch示例6：

这是一个镜像功能的示例。Sketch画icon，可以支持镜像功能，使用方法和CDR，Ai是一模一样的。上图是先用布尔运算先绘制返回icon，然后通过镜像之后，就变成了更多按钮。

-----------------------------------------------

▲上图是Sketch示例7：

这是一个导出pdf的示例。Sketch可以导出pdf格式的文件，从而解决Mac邮件发送附件到windows电脑，打开为乱码的问题。因为pdf文件的兼容性很好。具体操作是：点击“Insert”，在弹出的下拉菜单中，选择“Artboard”，或者直接按下快捷键A，直接在界面上画一个新画板，点击File，在下拉菜单中，选择导出pdf格式即可。

-----------------------------------------------

▲上图是Sketch示例8：

这是一个展示Sketch自带规范控件的示例。Sketch可以自动提供iOS Ui Design的尺寸和按钮规范控件，比如：在线框图（wireframe）绘制过程中，经常需要绘制界面Tab的按钮大小和位置，在Sketch这里，只需要直接复制一套过来就好。除了iOS 的规范控件之外，Sketch还提供了Web Design的规范控件。具体操作：点击File，在弹出的下拉菜单中，选择New from Template，再选择iOS Ui Design。

-----------------------------------------------

▲上图是Sketch示例9：

这是一个Mac电脑缩放屏幕的示例。轻轻滑动Mac电脑的触摸键盘，即可缩放Sketch的界面。双指向外滑动，Sketch界面开始放大。双指向内收拢，Sketch界面开始缩小。这个功能，在Axure上是不能单靠Mac的触摸屏来实现的。

-----------------------------------------------

▲上图是Sketch示例10：

这是一个所页面pdf排序的示例。Sketch可以导出多页面的pdf，多个画板导出多个pdf。页面的顺序，可以在上图的红色区域中，调整Artboard的顺序，即可对应到pdf内页的页面顺序。

-----------------------------------------------

▲上图是Sketch示例11：

这是一个Sketch选择群组里面的单个控件的示例。选中已经群组过的单个箭头。Sketch里面，对于已经群组过的部件，如何选中？只需要按住command键单击，就可以选中群里过的单个部件。

-----------------------------------------------

▲上图是Sketch示例12：

这是Sketch快速更新版本的示例。Sketch的版本更新，只需要在联网的情况下，点击“Sketch”，弹出下拉菜单，再选择“Update”，即可一键完成软件的版本升级

-----------------------------------------------

▲上图是Sketch示例13：

这是在Sketch里面把彩色图片改成黑白的示例。使用场景：制作交互稿的时候，直接把彩色稿，改成黑白稿。操作步骤：选中图片，点击Color Adjust，调整Saturation即可实现。

-----------------------------------------------

与Sketch相比，Axure作为专业的线框图的原型工具，也有一些很有趣的功能。

▲上图是Axure示例1：

这是Axure的切图功能的示例。我们可以把电脑桌面上的图片，拖入Axure中，利用Axure的裁切图片功能，进行裁切，从而截取图片中的一部分。

-----------------------------------------------

▲上图是Axure示例2：

这是一个Axure画流程图的示例。Axure的流程图控件很强大，在绘制原型图之前，可以先绘制流程图，再用流程图去沟通。等流程图定稿大致确认之后，再开始绘制页面的线框图。这时候，工作过程中，我们就可以避免因为业务流程没有理顺，导致的原型图频繁修改的沟通情况。

-----------------------------------------------

▲上图是Axure示例3：

这是一个Axure绘制页面跳转关系的示例。Axure的优点是可以设计出全套页面，点击跳转的高仿真页面操作流程图。因为Axure的最小单位是page，很适合整理页面之间的整体架构，通过页面之间的跳转流程，来反映出线下业务的真实流程。

其次：Axure用户群更广。Axure有windows和Mac两种版本。而Sketch目前只用Mac版本。这样一来，Sketch的用户群就丢失了windows用户。

-----------------------------------------------

▲上图是Axure示例4：

这是描述Axure的主要特点的示例。我个人的更倾向于先分析产品的使用场景，用户需求，产品目标，以及商业模式，接着分析业务流程，然后绘制功能流程图，再分析页面的跳转流程图。接下来才开始绘制原型图，前期只需要用手绘打草稿的原型图，经过大致沟通确认之后，再开始绘制线框图。至于用什么工具绘制线框图，这并不重要。我看有些产品经理直接使用PPT画原型图，整个产品思维，业务流程，功能逻辑，也表现得挺不错的。

-----------------------------------------------

总结一下，如果想表现产品的业务流程，那么我建议使用Visio来绘制流程图。如果想表现产品的页面图文布局和页面的跳转关系，我建议使用axure。如果想表现产品的信息架构，我建议使用Mindmanager或Xmind。如果想表现产品的视觉层，包括圆角＋投影＋布尔运算画icon，我建议使用Photoshop或Sketch来作图。

本文作者：张云钱，个人微信公众号：泡一杯茶