编辑导语：假如你从事设计事情，你常常会听到草图、线框、模子和原型等术语；很多设计师瓜代利用这几个术语，固然术语是相关的，但它们是差异的；在本文中，将回首四种范例的可交付设计，并摸索哪些东西可以辅佐我们去建设它。

一、草图

草图是在一张纸上或用数字东西徒手画的，给你一个根基的观念表示。

1. 什么时候？

草图在设计进程的观念化和初始可视化阶段很是有用。

一图胜千言——人们是视觉进修者，视觉比文字更能表明想法。

2. 如何做？

草图可以用纸和笔可能任何设计东西来建设。

画草图时要记着的工作：

不要试图深入你的草图，可以绘制大致的草图，只要它们能辅佐你转达中心思想。

利用模具画得更快。

操练猖獗的八分法：这是是Google Ventures Design的sprint技能，可让产物团队在短时间内可视化许多创意，该进程要求每个团队成员在五分钟内勾勒出八个想法。

给你的草图照相，有三个原因：

图像可以用作项目标文档；

你可以将这些照片用于你的作品集；

像Marvel POP这样的东西可以辅佐你把笔和纸上的想法转换成交互式的iPhone或Android原型。

二、线框图

线框图是一种低保真度的设计产品，它只代表UI的根基元素（线框图看起来就像是用线设计的，这就是它的名字的由来）。

线框图是你设计的骨架——它们描画了根基的UI，成为你产物的蓝图。

1. 什么时候？

线框图在产物设计进程的初始阶段最为重要。

线框图合用于:

评估个体页面/屏幕的布局；

领略相关屏幕/页面是如何一起事情的（从用户的角度）；

筹备具体的项目需求文档（线框图可以作为很好的参考）。

2. 如何做？

与草图雷同，线框图也可以用纸和笔来建设；说到数字东西，Balsamiq大概是最有用的东西。

线框图绘制时要记着的工作：

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

利用颜色来吸引留意力，线框图凡是是用玄色和白色建设的，但也可以利用有限数量的颜色(好比一种或两种比拟色)来建设视觉重音。

添加简短的“指向重点”注释；假如你打算向团队展示线框，请始终包括注释，注释辅佐建设上下文并快速通报要害思想。

从静态线框建设可单击的线框，可点击的线框可以辅佐其他人更好地领略您的想法。

三、模子

模子是设计的中高保真可视化，模子提供了产物设计的视觉外观，而且对付评估设计的外观和感受很是有用。

1. 什么时候？

在设计进程的视觉设计阶段，模子长短常有用的。

模子在设计新产物和从头设计现有产物时都可以利用。

当团队想要：

评估视觉设计决定：看看颜色、排版和图像是如何协同事情的。

实验差异的气势气魄：设计师可以实验差异的颜色组合，看看什么配色方案最适适用户。

评估设计的视觉一致性：确保产物中的所有屏幕看起来像整个产物的一部门，而不是单个屏幕的荟萃。

评估设计的可会见性：您的设计应该答允具有各类本领的用户导航、领略和利用您的产物；存眷色彩比拟。

向涉众展示用户界面：草图和线框图凡是需要澄清，而实物模子对人们来说更容易领略。

2. 如何做？

模子可以在Photoshop、Sketch、Figma和很多其他设计东西中建设。

建设模子时要记着的工作：

小心Lorem Ipsum：很多设计人员利用伪文本（也称为Lorem Ipsum）填充模子；尽量这种要领可以节减设计时间，但当设计人员用真实内容替换虚拟内容时，大概会引起许多问题；内容容器的设计大概不适合实际的内容，这会导致机关的打算外事情。

不要为你的模子选择一个单一的设计思路，诱使你爱上之一个好像是正确的想法，并开始改造模子；可是，这不是更佳的设计要领，设计新产物时，我们需要举办试验并实验各类办理方案；因此，更好实验尽大概多的差异想法，然后再选择你喜欢的想法。

四、原型