sketch如何做设计稿交互_用 Sketch 绘制一份美观的交互稿

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

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

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

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

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

除了 Axure 以外，以前在一家公司中有被要求使用 Fireworks 进行交互稿的输出。相比 Axure，Fireworks 在绘制静态的移动应用交互稿上其实是有优势的，操控上要流畅一些，更为重要的一点是它可以导出一种特殊的 p