蒋多多| 线框图和原型 聊设计-皇上与老板

蒋多多首先感谢书记的译文投稿。没想到我这种八百年不更新的号居然还有人投稿，可以说是要感动得哭出来了。
我们一致认为这其实是一篇非常基础的文章，不过基础往往最为致命。就像下文所说“客户往往倾向于跳过线框图和原型，直接想要看到成品”；但实际上线框图承载着方案确定前的思考和沟通，而原型承载着版本上线前的预先体验和试错。
这两者如果用得恰当，会节省很多时间。
“线框图和原型”
Prototype Design:
What is a Wireframe,
and What is a Prototype?
线框图和原型都是移动端和Web端应用设计过程中不可或缺的一部分，可以向客户表达设计概念与基础功能，但客户往往倾向于跳过线框图和原型来加快设计进程，进入下一阶段。
其实，主要是由于客户不了解它们在项目各阶段所扮演的角色及其重要性。
那么，线框图和原型有什么不同呢？我们应该先弄清两者的概念。
什么是线框图？

线框图是一个网页的视觉架构，承载页面内容及其概念，帮助设计师以及客户讨论网页构建的细节。由线、面和灰色组成的简单线框图是低保真原型的一种。
线框图所表达的是页面组成及排布，是承载页面内容及概念的可视架构，以此来帮助设计师与业务方讨论页面构建时的细节。它通常是由点、线和不同灰度方块组成的低保真图，使用黑白排版能够清晰表达页面的主要信息、页面排布结构及视觉层次。
线框图为什么重要？
因为它的绘制便利性，被常用来非正式的沟通交流，比如内部交流。但他不能是作为用户可用性测试的物料。
和建筑设计图纸一样，设计师都需要设计图来与业务方在项目开始阶段沟通项目细节或设计概念。线框图本身的绘制的便利性被常用来日常的沟通交流，如内部评审等。但也是这个原因，线框图不能用来做可用性测试的物料。
有哪些软件适合做线框图？
简单的线框图主要是由线、面、文档、按钮之类很基础的元素组成的，因此绘制过程相对容易。这里推荐两款常用的线框图工具Mockplus和Balsamiq。
（PS：现阶段更常用的线框工具还是Sketch和Axure）

Balsamiq是一款静态的线框图绘制工具，以手绘风格和预设的web页面模板而取胜，适合那些对设计流程理解透彻的人，因为他们知道线框图不是最终产物，不需要百分之百的精细。
相比较于Balsamiq，Mockplus更适合交互线框图。在高效设计方面，两者不分伯仲，但M更能直观的向项目、客户及团队表达设计想法和方案，他们理解起来也更加顺畅。
什么是原型？

相比于线框图，原型更接近于最终上线产品，是动态、可交互的高保真输出。因此，它不仅仅是完整的视觉设计，也可以作为模拟真实功能和交互行为开展用户测试的物料。
原型为什么重要？
原型除了作为向相关业务同学演示的Demo之外，也可以做成可交互的类型，作为产品进入开发流程前的可用性测试。这其实可以有效缩短开发周期及节省成本。此外，有标注并适合团队中流通的原型可以让设计师与开发之间的沟通更加顺畅，避免理解上的不一致造成的繁琐沟通，高效率的达成一致意见，也方便开发同学在原型的基础上高还原度的开发和推进。
有哪些软件适合做原型？
站在可交互高保真原型的角度，原型的作用要比线框图略高。因此选择合适的原型工具很重要。不同的标准和需要有不同的原型工具。这里简单介绍两款原型设计工具。
（PS：除下文提到的Justinmind和Mockplus外，更常用的原型工具还有比如Principle，Flinto，Keynote，PPT……）
在保真度方面，Justinmind专注于精致化的高保真原型，但入门略难，需要耗费很多精力才能掌控交互设定、触发时机、逻辑判断、变量等复杂组合。
在产出效率方面，Mockplus在简单快速原型制作上更有优势。使用其自带高还原度的交互组件，我们能够通过拖拽、点击等交互行为制作简单的交互场景。同时，它还支持团队共享及在线走查，这对于缩短开发周期及成本很有帮助。
总结
某种程度上，线框图是原型的一种表现形式，可以被提炼并设计为可交互原型。在表达层面，线框图适合静态表达，而原型适合动态演示。在功能上，原型近乎代表最终的设计产出，一般用来做前期的可用性测试；而线框图常用于项目早期阶段的沟通，方便快速与业务成员在页面布局、功能等方面达成一致。
原文（科学上网）：