经常有人问我：“你的交互稿怎么画得那么好看？能不能教教我？”

其实，我更期待听到的是：“你的方案怎么做得这么好？能不能教教我？”

毕竟，交互稿只是需求的沟通工具，方案本身的设计才是最重要的。但即便如此，在方案靠谱的前提下，交互稿的美观度当然可以作为一个加分项。我最讨厌一些人酸溜溜地说：“交互稿画这么好看有什么用哦，我们又不是在做 UI 设计。”其实我想说，产品经理长得帅有错吗？UI 妹纸长得漂亮你不喜欢吗？不是外观好的就是花瓶，知道什么叫内在美与外在美并存么？

好了，其实上面只是为了凑字数瞎扯的，下面进入正题。

文章封面图的交互稿是用 Sketch 画的，Sketch 是 Mac 系统的一个设计应用，既可以用于 UI 设计，也可以用于静态交互稿的绘制。最初入行的时候画交互稿其实用的 Axure，Axure 早期被非常广泛地应用于网站原型的设计，可支持的保真度范围十分广，既可以绘制粗略的静态线框图，也可以实现带有动态交互效果的 Demo。另外，在智能手机兴起之后，Axure 也快速地跟进新增了不少针对于移动应用交互设计的功能。但我个人其实是不喜欢使用 Axure 的，尤其在设计移动应用的交互稿时，因为需要一张大画布，上面绘制很多页面，使用 Axure 在操控上感觉十分不便。

除了 Axure 以外，以前在一家公司中有被要求使用 Fireworks 进行交互稿的输出。相比 Axure，Fireworks 在绘制静态的移动应用交互稿上其实是有优势的，操控上要流畅一些，更为重要的一点是它可以导出一种特殊的 png 图片，当中保存了相关的编辑信息，使得其他人使用 Fireworks 可以直接更改原来的稿件，这点对于团队协作而言十分有吸引力。

然而，Fireworks 的这些优势对于我来说吸引力还是不够，因为其实我是不想在别人的交互稿上进行修改的。所以，在没有特殊要求下，我会倾向于使用 Sketch。在绘制静态交互稿时，它操作的效率及美观度都比 Axure 及 Fireworks 要好。

除了是用什么软件绘制以外，一些同行看到我的交互稿时还会问：“你的交互稿为什么不是那种黑白线框，而是有块面以及颜色的？”

对于这个问题，我的观点是这样的：

之所以早期看到的原型图大多数都是粗略的黑白线框图，有好些原因。

首页，对于大多数交互设计师及产品经理而言，他们欠缺视觉设计的素养，很难要求每个人都画得那么美观，对于绘图软件而言，提供的默认模板自然是越通用越好，而黑白线框保证了通用度；其次，早期的移动应用界面视觉设计偏向于拟物风格，交互稿自然无需模拟，毕竟对设计技能及成本的要求都更高。然而，自从 iOS 7 的设计风格普及开来之后，界面的视觉设计已经越来越偏向于几何元素的点线面组合，这也正是 Sketch 有取代 PS 进行 UI 设计的趋势的原因。从拟物化变得几何化，意味着界面的绘制变得更加的简单，使用线框图绘制软件也完全有可能做出比以往更高保真度的原型效果。

另外，最核心的一点是，我们必须搞清楚交互稿的作用是什么？在说到原型的保真度时，其实在不同的设计阶段有不同的选择。如设计早期可能更多依赖纸上草图，在内部进行协作时使用电子的线框图，在给客户或老板展示时需要高保真的静态页面甚至是动态 Demo。交互稿其实是用于团队内部协作的，它的作用是传达需求，是一种沟通工具。如此一来，自然是沟通的障碍越低越好。草图、低保真原型图、高保真原型图之中，自然是保真度最高的沟通起来越容易准确地传达信息。所以，在不影响项目进度的情况下，美观的交互稿自然是更利于沟通，使用者阅读的体验也更好。以前和朋友沟通，听说腾讯某个项目组就有高保真的界面元素组件库，产品经理或交互设计师在绘制原型图时直接拿来就用，有些简单的修改甚至不需要 UI 设计师出图。

但其实我个人是不喜欢画全彩的高保真的原型图的，因为这样可能反倒增加了一些不必要的沟通障碍，还是需要让团队能够清晰地辨别哪些是交互稿，哪些是视觉稿，否则可能会出现 “这两张图以哪张为准啊？” 的情况出现。

又有人可能会问：“画得这么漂亮，很费时间吧？另外这样会不会影响 UI 设计师的发挥啊？”

说实话，和我工作过的人都知道，本人画交互稿效率奇高。别人做两天的需求我可能一个下午就搞定了，也正是因为这个原因，之前在创业公司的时候一直不肯快速扩充部门人员。这样做一方面是认为早期的产品迭代需要有节奏地进行，而不是越快越好。因为需要观察每个功能投放出去后会有什么反应，另外用户在接受产品的演进上也需要认知的时间，不能一个版本一个样子。另一方面就是既然需求没那么多，作为创业公司，自然是越低成本越高效越好。

为什么画交互稿快？很简单，首先是对快捷键熟练，其次是在早期需求绘制的过程中，早就累积了相关的组件库，直接复制拼凑再细微调整一下页面就出来了。最后，其实把交互稿画得美观一些所需要的功夫并不多，无非控制好尺寸、颜色、间距而已。

至于会不会影响 UI 设计师这个问题，我只想说，如果我画个线框图就能影响他的发挥，那这种水平的 UI 设计师我干脆不要了。

上面说完了为什么绘制美观的交互稿是可取的，下面接着说怎么绘制。但鉴于写了这么久，确实没什么耐心了，可能会写得简略一些。

首先，要了解页面上各元素的官方尺寸标准，比如说 Status Bar、Navigation Bar、Tab Bar 的高度，参考文章：http://www.jianshu.com/p/67ab63723e54。

然后，要有规范意识，除了上面所说的官方控件的规范，还有页面里字号、色彩、间距等的规范。千万不要一个页面弄出七八种字体、十几种字号、几十种色彩，各元素参差不齐的情况。其实这些都是最基本的设计素养，操作起来一点也不难，在这里推荐一本叫《写给大家看的设计书》的书，真的就是写给大家看的。什么？还要我给购买链接？不，又没有返点，你们自己搜。

最后，简单地示范一下我使用 Sketch 绘制交互稿的一些基本步骤吧。

1. 创建文件，把以往做的画布复制一份，画布上有页面标题及几个页面和简单的标注，主要是用于保持各个交互稿在视觉上是有统一规范的。

注意，画布是用简单的矩形工具绘制的，但在矩形工具下方有一个相同尺寸、位置与画布完全重叠的 Slice 图层，这个图层用于对完整的交互稿进行导出。

2. 从第一个页面开始替换页面元素，替换的方法是前面提到的从以往的交互稿中复制粘贴过来，再进行相应的调整。保证页面中各元素的尺寸、色彩、间距尽量与真实效果一致是提高交互稿颜值的关键。另外，交互稿中的图片我会用浅灰色的色块来表现。一些 icon 如果没时间画，可以直接用个圆圈进行替代。有时间又有兴趣的话，可以自己绘制陶冶一下情操。很多不规则的 icon 都是可以通过规则的图形进行布尔运算获得的。

另外，每个页面最底下的图层我使用的分辨率是 640*1136，并设置为 Mask，这样意味着这个图层以上的图层元素的显示范围不会超出 “屏幕”。对于这种遮罩效果，UI 设计师可能更喜欢通过 Artboard 来实现，但由于交互稿的标注是全局的，而 Artboard 会把它尺寸范围中的其它图层自动归入到 Artboard，导致无法全局显示，所以画交互稿的朋友可以通过将图层设置为 Mask 来实现这样的效果。

顺带提一下，一定要有对图层进行编组的良好习惯哦，我会基于页面、组建两个大的层级对图层进行编组，有时因为对齐的需要，也会把一些小的页面元素进行编组。

3. 把主流程绘制出来，非主留存的交互分支在后续补上，一些分支只需要在页面下方或旁边贴上相关元素就能体现，另一些分支则需要绘制单张或多张完整的页面。页面与页面之间，不管是在水平方向还是垂直方向上都需要留有足够的间距，以便标注。同个方向上页面间的间距也需要保持规范。

4. 对页面元素的说明及交互进行标注，标注元素放在同一个文件夹并于图层中置顶。在图示里，标注元素我使用了荧光绿，因为这个色彩能够与页面元素区分开，另外在深色的背景上也更显眼。那线条妖娆的圆角和箭头是怎么弄的？Sketch 的线条编辑功能支持在线条的开头和结尾增加箭头，也支持调整节点的圆角大小哈。

但 Sketch 有个不好的地方是如果图层多了，而又有重叠的区域，在移动一些元素或调整页面视图进行拖拽的时候很容易误操作，把别的图层给移动了。正是因为这个原因，之前经常会做着做着发现：“咦！一些标注怎么被挪歪了！”但随着谨慎程度的提高已经越来越多地使用 Alt+Command 快捷键进行图层移动，这种情况出现的概率大幅度降低。

5. 选择 Slice 图层，将交互稿导出为 PDF，不管怎么缩放都还是那么地清晰和锋利，强迫症再也不用死于马赛克。不管你是 iOS 开发者、android 开发者还是 QA 同学，用的是不是 retina 显示屏，阅读的效果都是妥妥滴。

最后放知乎首页高清原型图一张。

这张原型图中，文字共使用了 4 种字号、4 种色彩，其它页面元素也是只用了几种色彩，但懒得数了。需要注意的是在选择不同的字号和色彩时，一定要想清楚什么时候应该深色，什么时候应该浅色，深浅度应该是多少，因为这些都是为了体现信息层级的，不能乱定。另外，在选择色彩的时候，RGB 每值的结尾我都要么是 0，要么是 5，有同样强迫症的同学赶紧冒泡，233333

好，完结了，看完可以点个赞吗？加下关注就更好了，毕竟星期天写这么长，你说我图的是啥，对不对？(*^__^*) 嘻嘻……