【原】涨姿势！交互作品集中的线框图和原型图应该怎么做？区别在哪里！？

线框图和原型图是交互设计中重要的表达图纸，很多同学在做设计的时候对这两种图纸的使用都分不清，本文将全面带大家解读交互线框图和原型图的区别以及他们的正确使用方法，文章共5998字，阅读需要9分钟。

01

线框图和原型图

1.它们有什么区别？

如果同学们对UX或者UI设计有略微的了解，就会发现这三张图片看着很眼熟。最右边的就是通常我们手机中的APP的样子，但是它在设计阶段并不是一开始就用最后的效果图来呈现，我们在设计的早期、中期以及后期会运用到不同类型的设计效果图去展示我们的设计，以及去进行迭代、去进行分析和改进。

所以大家应该能够感觉出来从最左到最右是慢慢去Refine、慢慢去改进、慢慢去提高设计效果的过程。最左边的线框图是最粗糙的，比较像前期像草图；中间的视觉稿稍好一点，我把排版、文字、整个框架都确定了下来；最右边的原型图甚至可以去做有点击能力、交互能力的原型，让用户能够真的在手机上点击进行交互。

这三类涵盖了大多数我们在设计阶段能够了解到的、应用到的类别，最左边是线框图的模板，视觉稿是静止的，最右边的原型图是能够进行交互的、能够去进行点击的，用户能够跟它进行交互、点击、滑动、拖动这样的行为，它就是我们最终原型图的呈现。 

2.什么是线框图？

线框图英文叫做Wireframe。线框图有很强烈的特征，首先它是低保真的形态来呈现，低保真英文也叫做Low Fidelity，它在设计的过程中不用在意细枝末节，比如在Text字段我们需要用什么字体、字体的大小、自重等等这些在线框图阶段是不用去考虑的，不用去在意绘制过程中涉及的细节，我们主要是想利用线框图进行呈现的是我们设计图的主干与核心，以及它能够更高效地用线框图框框的形式把整个产品的结构和布局给勾勒出来，这就是它的意义所在。

线框图的主要表现形式，我们通常都会用中性色，也就是黑白灰，或者再加四五个左右的跳跃色来进行制作。但主要还是集中用中性色，因为在线框图的阶段我们并不需要去在意颜色的选择，但是它必须能够表达出整个设计的思想、结构和布局。

我们为什么要去设计线框图呢？如果大家对设计过程有所了解，应该不难发现我们设计线框图需要进行非常多版本的迭代，在实际情况中，线框图的第一个版本不是所有人都能够同意的，第一版成为我们最终版的情况真的很少发生，所以在设计的过程中就需要非常高效、有效的迭代方式。

这就需要你去利用线框图，让它能够在设计早期就非常快速地、高效地获得别人的反馈和意见，因为它不用去在意设计的细枝末节，所以我们就利用中性色和比较固有的字体或者字重在设计当中进行表达，让它能够非常快速地去进行迭代。

大家看左边的示意图，这是我自己在我的学生项目当中制作的线框图，我这里主要想体现的是我想在产品当中展现哪些信息、我要在哪些地方展现哪些信息、我要利用什么样的方式，比如我是用List Layout还是Carousel Layout，或者是把这些信息用卡片Card的形式呈现出来；又比如我在这边会用深蓝色把链接的形式把它体现出来，在融合和中性色同时，我们也可以去加最多一个比较跳跃的颜色，把它Highlight出来，高亮出来代表我这个是Link或者按钮之类的呈现效果和方式。

总地来说，制作线框图的目的是我们能够在设计的早期快速进行交流和反馈，让我们能够更高效地去进行迭代。

3.什么是原型图？

原型图英文叫Prototype。那原型图又是什么呢？它有和线框图以及别的效果图非常好区别的方法。原型图最核心的点就是要以交互的方式去进行呈现，我的用户不管是什么人，我的老板或者我组里的工程师也好，他们要的最终呈现的方式是可以让用户能够跟它用交互、点击滑动的形式去进行呈现。

通常原型图都是以高保真的方式进行呈现的，因为我们的目标是要去模拟用户的操作流程并把它用于最后的测试即用户交互的阶段，所以这就是通常我们为什么要去制作原型图的原因。但是大家也可以看到，我右边的图片并不是高保真（High Fidelity）的，这看着不像最终的效果图。所以也有时候我们的原型图也是可以是低保真（Low Fidelity）的也没有问题，主要是看我们制作原型图的目的是什么、目标是什么 。

我们是想要把交互的模式在前期用线框图的形式做出来，然后在设计的前期进行模拟流程和测试，还是我们最后要以高保真的形式去进行最后的用户测试，或者我们把原型图用交互的形式呈现出来，让我们别的组的人或者我们的用户能够更加高效有效地了解产品是什么样的，产品是怎么样进行流程的或怎么样去进行交互的。

4.在设计不同阶段的原型图

原型图在不同阶段也有不同进行呈现的流程，我们可以看到最左边的原型图是以草图Sketch的方式来呈现的，我们并不用特别去在意我东西要放多大、图片放多大、字体字号或者以什么样的UI形式去呈现，这些我们在草图阶段是不用去考量的。

我们做草图原型图的主要目标就要在设计的前期了解用户使用产品的流程，像现在很多原型图它都会放小箭头，它想要了解到比如我用户点击了这按钮，那下一个界面会是什么样的；比如我滑动了这个页面，那下个界面呈现的效果会是如何的，所以在原型图里，我们主要测试的是交互的流程以及其他想要测试的东西。这个流程是以草图的方式呈现，比如我们的Sketch可以是以线框图的方式进行呈现，比如我刚才说的都是它很通用的概念，只要我们能够把用户的模型做出来，那就是它的原型图。还有最多的一类就是以最终视觉稿的方式去进行呈现。

02

如何设计与应用线框图和原型图

1.如何制作线框图

Wireframe顾名思义，它是用线和框所组成的，简单来说就是画框框的一个过程，专业一点的说法是线框图以占位符（Placeholder，Placeholder它并不是真实的UI元素）的形式，把线框放在设计页，然后用线框来表示出页面中会有图片，比如我会用线表示我我这里会考虑放一段文字、标题、Tag之类的东西。

所以Wireframe是用我们专业所说的占位符Placeholder组成的，比如我图片或者照片我们通常都是用X，在正方形、长方形这类矩形当中以在中间画X的形式/画叉叉的形式来表达，让用户知道这里表示应该图片、照片。还有一个表达形式是我们会把整个矩形变成灰色，可以把它改成我先把东西先放在这里，我考虑到我要把另一方在后期的视觉效果图当中换成照片，我们的标题和文字用线的形式进行表现。

大家会问，这图片里有很多不同的字的元素，有些我想要放标题，我想要放超大的高亮来吸引用户的注意，我下面会想加一行很小的字补充说明，那请问我怎么进行区分？

其实这种情况它也是非常好进行区分的，我们可以运用不同的字重或者我们如果是放真实的一段话，就可以去利用不同的字重和字号进去区分，我现在暂时把它定为10 pixel，那我上面最大的标题可以它换成32 Pixel，这样就可以区分开来了。那还有一个方式就是我们以线条的形式，我们想要在最终效果图当中比较大的字号，我们可以把线加粗加宽，比较常规的字我们可以用1 Pixel或者2 Pixel的线去进行呈现，这都是没有问题的。

在设计的过程当中，线框图或者我们最后的高保真效果图都是用同一个软件进行设计的。比较常见的UI或者UX设计软件第一个有Sketch，比较老牌的很多软件公司或者互联网公司都会用Sketch；我们也还会用Figma，因为它相对比较于Sketch可以更好地在网络上线上进行合作，所有的东西都是Based On Cloud，可以去和别人在线上进行实时高效的合作，所以我自己比较喜欢用Figma。

大家不要忘记了，我们最常见的是我们的纸和笔，我们在设计最前期最简单的方法是我们拿起笔，在纸上进行草图的绘制，我们在草图的绘制当中，一般来说是以非常低保真的形式进行呈现，因为我们是想要尽量去头脑风暴去想更多的Idea，在我们的纸上进行快速的描绘。通过纸和笔制作可以制作Wireframe，这是没有问题的。 

我在这里想跟大家展现的是我自己在个人项目为Side Project当中制作的线框图，大家可以看到，我并没有完完全全地按照我刚刚的设计规范，就是我要把它用线条进行表示。我个人的意见是我们可以时不时地进行改善，只要在我们所有的项目当中做的线框图都是以非常统一、整合、一致的形式表达就可以了。

就比我们在某线框图当中，我现在的照片或者图片是以灰色框去呈现的，那我就要把设计的规范应用到我所有的线框图当中，这样我自己或者是别人看到灰色框框的第一时间就能反应出来这个就是图片的Placeholder。

还有一些表达形式文字也可以做到，用具体的文字呈现出来，因为在线框图的制作过程当中所有的东西都是暂时的，字也可以是我随便写的Placeholder，我主要是想利用线框图表达我什么东西在什么地方以及我整个界面的结构和布局，比如我在最上面会想要放一个Hamburger Bar，一个Menu，然后我在这边就会有非常大的标题去吸引用户的注意，我下面会有Search Bar搜索栏以及今天想强力推送的东西，我在小卡片里用线框图展现了我整个文字Hierarchy的呈现，比如在最上面标题要比较大，下面的比较小，那我就把它换成小一号的字体进行呈现。

我想要这些食物的呈现方式是想要有卡片或者是我比较类似的行事方式去呈现它，我做的目的是我想要在设计的前期把整个APP的框架先搭建出来，大概什么地方放什么并且都以比较通用General的结构把它呈现出来，那就足够了。我们制作的线框图的目的是我们可以给用户看以及让用户进行测试，把Wireframe线框图做成原型图，我们进行早期的测试都没有问题，主要看我们如何去制作以及我们为什么要去制作它。

2.如何制作原型图（Prototype）？

我个人觉得制作原型图，特别是以高保真的效果呈现原型图，如果是刚接触UI或者UX的同学会没有那么熟悉。大家做得最多的是点击或者是滚动的呈现方式。

我跟大家说的Prototype它通常是以高保真的效果来模拟最终产品的交互流程，所以它有的时候会有很多种状况，比如我们在手机端App当中，我们会有不同的手势进行交互，我们在网页端会有不同的转场方式，我们会通过键盘进行交互，我们也可以通过我们手在屏幕上进行触击，所以它有非常多的交互模式以及最后动效的呈现，所以原型图相比于线框图制作相比较来说更复杂一点。

大家可以看到我右边的效果图有很多线指来指去，这就是我们原型图Prototype背后的核心。比如我在Wireframe A上点了左上角，我下面会到什么样的界面，我点了按钮我下面会到什么样的界面，点了图片上面信息或者我Hover Over上的效果，所以原型图的核心就是交互的表现形式。

我们的傻瓜软件Marvel和Invision都是以这样的操作流程去进行原型图制作的，同学们如果完全不会编程也不用担心，这些软件是不需要编程背景、编程能力的。

Figma和Principle也像我刚才说的，它也是我们现在工作当中比较常见的制作原型图的软件，Figma是制作UI和UX比较强力的工具和助手；Principle可以制作比较流畅的Prototype去调节每一帧的呈现方式；原理也可以应用到After Effects，After Effects制作动效比较多，但是它也可以把它应用到我们原型图中，如果我们想完成比较Fancy，看上去比较比较厉害，比较小的Micro Interaction，大家也可以通过After Effects去制作Prototype。

最后两个想跟大家提的两个软件是Framer和ProtoPie，这两个是需要一定的编程基础的，是以半Design和半Coding结合的模式去进行原型图的呈现，所以大家也可以想到相对来说比较复杂的工具在最终呈现我们Prototype的时候，更能够还原我们真实想要呈现的效果。如果这个APP真的上线，它想要有一个什么样的效果，复杂的工具就能够做得非常的细致以及能够非常高水准地还原我们原型图。

大家不要忘了还有最简单基础的纸和笔，大家想在设计的早期进行原型图的设计，不妨可以利用自己的纸和笔去进行用户测试，大家说不定可以获得意想不到的收获，然后在我们设计的中期和后期进行改进。最后一点，会编程的同学也可以通过写代码、应用编程这种能力去进行原型图的设计。

不知道大家有没有在工作当中会遇到这样的职位，在互联网行业都会有职位叫做User Experience Engineer，或者UI Prototyper，或者是我们所说的UX Engineer。为什么会有这样一个岗位的存在呢？他们每天的工作就是把设计师交付给我的图片，利用编程的形式把原型图制作出来。

他们或者也可以和设计师合作，利用原型图把效果图呈现出来，这些不需要后段的代码，只要把前段的代码写完就可以了，然后利用这些效果图和我们组队进行交流沟通，比较复杂的元素呈现可以去用电脑和编程的效果去呈现，因为有的东西没有办法用单纯的UI或者UX软件去达到目的。

扫码获取作品集和留学咨询

UXD录取大数据

近几年，UXD已经帮助数百位学生录取到了海外顶级名校。UXD的交互录取数据基于了2020Fall所有课程学员录取结果统计，通过多年的积淀，处于行业领军者地位，近三年来录取率逐年上升，均远高于行业平均值，其中美国交互名校CMU达到了35%，英国名校伦艺则达到了82%。美国综合类大U卡内基梅陇共有7枚录取，分布于MHCI、MIIPS、METALS、MDES和ETC等几个热门分支专业。英国方向则在皇艺和伦艺保持了决对的录取优势，分别达到了50%和82%。欧洲录取主要集中在AHO、TUD和Polimi等几所重要的交互/服务学校，均保持了极高的录取率。

注：录取率计算方式为（该校当季录取学员数/UXD该校当季总申请人数），其中一人同时录取两个专业记做2个录取名额统计。

▏美国院校：

▏英国院校：

▏欧洲院校：

▏亚洲院校：

同时为了更好地让同学们更好地了解当下的申请趋势，获取更多的申请经验和心得。UXD邀请优秀的设计学生，参与申请经验谈专栏采访，试图通过文字还原最真实的申请过程，让大家能从中获取宝贵的经验。