交互设计产出过程中，我们经常会听到一些专业术语Sketch草图，Wireframe线框，Prototype原型和Mockup样机。但是大家总是分不清这些图纸之间用途的区别。

今天UXD就带同学们横向对比这四种常见的交互设计产出产物，探讨他们的使用时间、使用方式以及注意事项，从此见到他们再也不会傻傻分不清。

01 Sketch

Sketch是写在纸上或数字工具中的手绘图，是用于提供概念的基本表示方法。

When什么时候使用：

在设计过程的概念化和初始可视化阶段，Sketch可能会非常有用。一张图片胜过千言万语。人们是视觉学习者，视觉可以比单词文字更好地解释思想。

How如何使用：

可以使用笔和纸或几乎任何设计工具来创建Sketch。

Sketch时要记住的事情：

•不要尝试细节化Sketch。可以绘制粗略的Sketch，只要它们可以帮助你传达主要思想。

•使用模具可以更快地绘制，这点对于手绘能力较差的同学非常有帮助。

•练习Crazy Eights方法，Crazy Eights是Google Ventures Design的sprint技术，可让产品团队在短时间内可视化很多创意。该过程要求每个团队成员在五分钟内勾勒出八个想法。

•为Sketch拍照。这有三个原因：首先，图像可以用作项目的文档。其次，你将可以使用这些照片作为你的投资组合。第三，Marvel POP之类的工具可以帮助你将笔和纸的想法转变为交互式iPhone或Android原型。

Its possible to turn any sketch or image into an interactive prototype. Image by Marvel

02 Wireframe

Wireframe是低保真度的设计工件，仅表示UI的基本元素（Wireframe看起来就像是用线设计的，这就是名称的来历）。Wireframe充当设计的骨架，它们描绘了基本的UI，并成为产品的蓝图。

When什么时候使用：

Wireframe在产品设计过程的初始阶段最为相关。Wireframe可用于：

•评估单个页面/屏幕的结构；

•了解相关屏幕/页面如何协同工作（从用户角度）；

•准备详细的项目需求文档（Wireframe可以作为很好的参考）。

How如何使用：

类似于Sketch，可以使用笔和纸创建Wireframe。在数字工具方面，Balsamiq也许是最有用的工具。

制作Wireframe时要记住的事情：

•不要给Wireframe添加太多细节。Wireframe是产品的准系统结构。Wireframe的目的是评估设计，而不是抛光细节。因此，仅添加将在页面/屏幕上显示的基本元素。

•使用颜色引起注意。Wireframe传统上是用黑白创建的，但是可以使用有限数量的颜色（例如，一种或两种对比色）来创建视觉强调。

•添加简短的注释。如果你打算向团队展示Wireframe，请添加注释。注释有助于创建上下文并快速交付关键思想。

•从静态Wireframe创建可单击的Wireframe。可点击的Wireframe可以帮助其他人更好地理解你的想法。

03 Prototype

Prototype是应用程序/网页的工作模型。Prototype允许设计人员模拟用户交互。与上面提到的所有其他工件不同，Prototype始终是交互式的。Prototype的目的是模拟用户与界面之间的交互。

When什么时候使用：

在设计过程的功能设计阶段，Prototype可能会很有帮助。Prototype可以帮助你：

•评估用户旅程。Prototype将帮助产品团队确定交互流程中的潜在问题。

•测试可用性。通过与用户一起测试设计，你可以在编码之前建立信心。

How如何使用：

Figma可以帮助你为Web，移动，智能手表甚至语音体验等各种界面创建Prototype。

Prototype制作时要记住的事情：

•为Prototype选择正确的保真度。一些设计师认为Prototype始终是高保真的人工制品，这是错误的想法。Prototype的保真度应与思维的保真度相匹配，并且Prototype可以是低保真度，中保真度和高保真度。

•使用高保真原型来获得可视化复杂的过渡。当你需要显示动画状态转换时，Hi-fi原型非常有用。

•使用高保真原型与用户一起测试概念。你的设计越类似于真实产品，你将从测试参与者那里得到越详细的反馈。

•创建编码的原型。几乎所有产品都存在技术可行性问题。并非设计人员创建的所有内容都可以轻松地转换为代码。但是对于设计人员进行编码和创建本机原型的项目，面临技术可行性问题的风险较低。

04 Mockup

Mockup是设计的中保真度或高保真度可视化。Mockup可提供产品设计的视觉效果，非常适合评估设计的外观。

When什么时候使用：

在设计过程的可视化设计阶段，Mockup可能会很有帮助。在设计新产品和重新设计现有产品时都可以使用模型。当团队想要：

•评估视觉设计决策。了解颜色，版式和图像如何协同工作。

•尝试各种样式。设计师可以尝试不同的颜色组合，并查看哪种颜色方案最适合用户。

•评估设计的视觉一致性。确保产品中的所有屏幕看起来像整个产品的一部分，而不是单个屏幕的集合。

•评估设计的可访问性。你的设计应允许所有能力的用户浏览，理解和使用你的产品。专注于色彩对比，阅读有关如何为正文和图像文本选择合适的对比度的W3C建议。

•向利益相关者展示用户界面。Sketch和Wireframe通常需要澄清，使人们更容易理解模型。

How如何使用：

可以在Photoshop，Sketch，Figma和许多其他设计工具中，借助样机模版快速创建模型。

创建模型时要记住的事情：

•小心Lorem Ipsum。许多设计人员使用伪文本（也称为Lorem Ipsum）填充模型。尽管这种方法可以节省设计时间，但当设计人员用真实内容替换虚拟内容时，可能会引起很多问题。内容容器的设计可能不适合实际的内容，这会导致布局的重新规划。

•不要为模型选择一个单一的设计思路。设计新产品时，我们需要进行实验并尝试各种解决方案。因此，最好尝试尽可能多的不同想法，然后再选择你喜欢的想法。

UXD官网也给同学们准备了相应的课程讲解，感兴趣同学们可以点击下方链接进行学习。网址：https://video.uxd001.com/page/762019

更多知识干货以及其他海外留学的资讯可以关注UXD交互工业产品设计分享或者添加小助手，还可获取讲座直播哦~

|福利大放送 | WELFARE 
对于设计初学者，完成从0开始创作几乎是不可能的，就像学习过程中书读百遍其义自见一样。有了大量的积累，才能在脑海里建立素材库，这些素材库能帮助同学们完成最初的设计想法积累，基于这样的基础再进行个性化的创作，最终才能做出高质量的作品集。全球院校最新作品集免费拿！添加小助手即可获取：

UXD交互工业产品设计学院是尤克斯国际旗下的一家专注于交互、服务、工业、产品设计专业的顶级设计学院。除了一对一设计课、基础技能课程、小组课题、设计评图、联合教学外，我们提供不定主题的公开课和内部小组课，教学计划课程由三大部分组成，包括基础软件技能教学、设计理论系统讲座、申请必备知识解析等。

本文版权归UXD尤克斯所有

部分图片来自于网络

如有侵权请与我们联系