草图/线框/原型/样机四种产出图横向大比对，UXD教你如何正确地使用表达方式
交互设计产出过程中，我们经常会听到一些专业术语Sketch草图，Wireframe线框，Prototype原型和Mockup样机。但是大家总是分不清这些图纸之间用途的区别。
今天UXD就带同学们横向对比这四种常见的交互设计产出产物，探讨他们的使用时间、使用方式以及注意事项，从此见到他们再也不会傻傻分不清。
Sketch是写在纸上或数字工具中的手绘图，是用于提供概念的基本表示方法。
Paper sketches. Image by Behance
When什么时候使用：
在设计过程的概念化和初始可视化阶段，Sketch可能会非常有用。一张图片胜过千言万语。人们是视觉学习者，视觉可以比单词文字更好地解释思想。
How如何使用：
可以使用笔和纸或几乎任何设计工具来创建Sketch。
Sketch时要记住的事情：
·不要尝试细节化Sketch。可以绘制粗略的Sketch，只要它们可以帮助你传达主要思想。
·使用模具可以更快地绘制，这点对于手绘能力较差的同学非常有帮助。
·练习Crazy Eights方法，Crazy Eights是Google Ventures Design的sprint技术，可让产品团队在短时间内可视化很多创意。该过程要求每个团队成员在五分钟内勾勒出八个想法。
Crazy eights. Image by GV
·为Sketch拍照。这有三个原因：首先，图像可以用作项目的文档。其次，你将可以使用这些照片作为你的投资组合。第三，Marvel POP之类的工具可以帮助你将笔和纸的想法转变为交互式iPhone或Android原型。
Its possible to turn any sketch or image into an interactive prototype. Image by Marvel
Wireframe是低保真度的设计工件，仅表示UI的基本元素（Wireframe看起来就像是用线设计的，这就是名称的来历）。Wireframe充当设计的骨架，它们描绘了基本的UI，并成为产品的蓝图。
Wireframes for various types of apps. Image by Balsamiq
When什么时候使用：
Wireframe在产品设计过程的初始阶段最为相关。Wireframe可用于：
·评估单个页面/屏幕的结构；
·了解相关屏幕/页面如何协同工作（从用户角度）；
·准备详细的项目需求文档（Wireframe可以作为很好的参考）。
How如何使用：
类似于Sketch，可以使用笔和纸创建Wireframe。在数字工具方面，Balsamiq也许是最有用的工具。
制作Wireframe时要记住的事情：
·不要给Wireframe添加太多细节。Wireframe是产品的准系统结构。Wireframe的目的是评估设计，而不是抛光细节。因此，仅添加将在页面/屏幕上显示的基本元素。
·使用颜色引起注意。Wireframe传统上是用黑白创建的，但是可以使用有限数量的颜色（例如，一种或两种对比色）来创建视觉强调。
·添加简短的注释。如果你打算向团队展示Wireframe，请添加注释。注释有助于创建上下文并快速交付关键思想。
Annotated wireframes. Image by Chaymae Lougmani.
·从静态Wireframe创建可单击的Wireframe。可点击的Wireframe可以帮助其他人更好地理解你的想法。
Prototype是应用程序/网页的工作模型。Prototype允许设计人员模拟用户交互。与上面提到的所有其他工件不同，Prototype始终是交互式的。Prototype的目的是模拟用户与界面之间的交互。
When什么时候使用：
在设计过程的功能设计阶段，Prototype可能会很有帮助。Prototype可以帮助你：
·评估用户旅程。Prototype将帮助产品团队确定交互流程中的潜在问题。
·测试可用性。通过与用户一起测试设计，你可以在编码之前建立信心。
How如何使用：
Figma可以帮助你为Web，移动，智能手表甚至语音体验等各种界面创建Prototype。