如果您从事设计工作，那么通常会听到草图(Sketch)、线框(Wireframe)、模型(Mockup)和原型(Prototype)。

许多设计师互换使用这些术语。因为他们是相关的，但是其实它们是不同的。

我们来回顾一下四种类型的可交付设计成果，并探索可以帮助我们创建它们的工具。

1、Sketch (草图)

（这里说的Sketch并不是大家熟知的钻石图标💎的原型制作软件）草图通常是在一张纸上或用数字工具画的，给你一个基本的概念表现。

手绘草图（图片来源：Behance）

 When？

草图在设计过程的概念化和初始可视化阶段非常有用。

A picture is worth a thousand words.

一图胜千言

人们是视觉学习者，视觉比文字更能解释想法。

 How？

草图可以用纸和笔或者在电脑上通过设计软件来创建。

制作草图的注意事项:

不要试图过分美化你的草图。绘制粗略的草图即可，只要它们能帮助你传达中心思想。

使用蜡纸、模具或者模板可以让草图制作的更加快速

模具  (图片来源: Amazon)

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

如果你感兴趣的话，可以去搜索阅读Jake Knapp有关Crazy Eights的文章，了解有关此技术的更多信息。

Crazy eights (图片来源：Google Ventures)

给你的草图拍照。有三个原因。首先，图像可以用作项目的文档。其次，你可以将这些照片用于你的作品集。第三，像Marvel POP这样的工具可以帮助你把笔和纸上的想法转换成交互式的iPhone或Android原型。

它可以把任何草图或图像变成交互式原型 (图片来源:Mavel)

2. Wireframes（线框图/低保真图）

线框图是一种低保真度的设计产物，它只代表UI的基本元素(线框图看起来就像是用线设计的，这就是它的名字的由来)。线框图是你设计的骨架——它们描绘了基本的UI元素，并且是你产品的蓝图。

(图片来源:Balsamiq)

 When？

线框图在产品设计过程的初始阶段尤为重要。线框图适用于:

评估个别页面/屏幕的结构;

理解相关屏幕/页面是如何一起工作的(从用户的角度);

准备详细的项目需求文档(线框图可以作为很好的参考)。

 How？

与草图类似，线框图也可以用纸和笔来创建。说到数字工具，Balsamiq是一个不错的工具。

绘制草图的注意事项:

不要给线框图添加太多的细节。线框图是产品的骨架结构。线框图的目的是评估设计，而不是修饰细节。因此，只添加将在页面/屏幕上显示的基本元素。

使用颜色来吸引注意力。线框图通常是用黑色和白色创建的，但也可以使用有限数量的颜色(比如一种或两种对比色)来创建视觉重音。

添加简短的注释(To The Point)。如果您计划向团队展示线框，请始终包含注释。注释帮助创建上下文并快速传递关键思想。

带注释的线框图(图片来源:Chaymae Lougmani)

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

3. Mockups(中/高保真图)

Mockups是设计的中保真或高保真可视化。Mockups提供了产品设计的视觉外观，并且对于评估设计的外观和感觉非常有用。

机票预订界面高保真图 (图片来源:Gleb Kuznetsov ✈)

 When?

在设计过程的视觉设计阶段，Mockups都是非常有用的。

Mockups在设计新产品和重新设计现有产品时都可以使用。当团队想要:

评估视觉设计决策。看看颜色、排版和图像是如何协同工作的。

尝试不同的风格。设计师可以尝试不同的颜色组合，看看什么配色方案最适合用户。

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

评估设计的可访问性(Accessibility)。您的设计应该允许具有各种能力的用户导航、理解和使用您的产品。

关于色彩对比。请阅读W3C关于如何为正文和图像文本选择适当的对比度的建议

向涉众展示用户界面。草图和线框图通常需要澄清，而实物模型对人们来说更容易理解。

 How？

Mockups可以在Photoshop、Sketch、Figma和许多其他设计工具中创建。

绘制Mockups的注意事项:

避免使用Lorem Ipsum。许多设计人员用虚拟文本(Lorem Ipsum)填充Mockups。虽然这种方法可以在设计过程中节省一些时间，但当设计者用真实文本内容进行替换时，它会产生许多问题。文本容器可能没有设计成适合实际内容，可能产生计划外的额外工作量。

不要为你的模型确定单一的设计理念。使用一个修改的想法或设计理念，并开始细化它，似乎是正确的。然而，这并不是最好的设计方法。当我们设计一个新产品时，我们需要实验和尝试各种解决方案。因此，最好尝试尽可能多的不同的想法，然后选择一个最适合的方案。

4. Prototypes(原型)

Prototype原型是一个应用程序/网页的工作模型。与我上面提到的所有其他设计产物不同。原型的目标是模拟用户和界面之间的交互。

在AdobeXD中创建的原型(图片来源:Adobe)

 When?

原型在设计过程的功能设计阶段非常有用。

原型可以帮助您:

评估用户旅程(User Journey)。原型将帮助产品团队识别交互流的潜在问题。

可用性测试。通过在用户中测试您的设计，您可以在编写代码之前建立信心。

 How？

Adobexd和InVision可以帮助您创建Web、移动、智能手表甚至语音体验的原型(Adobexd)。

绘制原型图的注意事项:

为原型选择正确的保真度。一些设计师认为原型始终是高保真的人工制品。其实并非如此，原型的保真度应与思维的保真度相匹配，并且原型可以是低保真度，中保真度和高保真度。

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

音乐应用中的放大过渡 （图片来源:Ehsan Rahimi）

使用高保真原型与用户一起测试概念。你的设计越像一个真实的产品，你就会从你的测试参与者那里得到更详细的反馈。

创建编码的原型。几乎所有产品都存在技术可行性的问题。并不是设计师创造的所有东西都能很容易地转化为代码。但对于设计人员编写代码并创建本地原型的项目来说，面对技术可行性问题的风险就低了。(但这一点，对于设计师的要求就比较高了，国内目前能够胜任编码工作的设计师少的可怜）

学习如何设计更好的产品

计算机和人之间的交互应该像两个人之间的对话一样直观。《交互设计基础》将帮助您学习如何进行高效和有说服力的设计。