草图，线框图，设计草稿，高分辨率的可视效果：原型对交互式应用发展的作用是必不可少的。下面跟大家一起探讨一下其中的联系和区别，哪些方式适用于哪些项目。

在电子产品的开发中没有一个最终目的是原型。原型的目标是将想法，功能，内容形象地表达出来，以此得到反馈并改进产品。交互设计中最重要的挑战往往是界面：它应该是友好的，直观的，最好是一目了然的。

在开发的过程中会不断地出现一些必须用原型的方式来解释的问题：用户感知到了什么元素？组件是如何交互的，整个系统背后的逻辑是怎样的？这种逻辑用户是否能快速的理解？操作是否会令人困惑？原型能够帮助解答建立在使用价值之上的实际问题，以此做出最好的设计方案。

但是什么样的原型适合一个交互项目的什么阶段呢？它应该尽量精致还是应该简易、快速？是否还能用工具对原型做一些快速的交互呢？

从低保真到高保真







原型根据外观和功能有不同程度的保真度。Sketches或者Scribbles通常足以应付第一阶段的草稿。在这种类型的低保真原型中线框也只用保持简练和单色，只用突出框架和功能。这些简略的草图不用色彩丰富绚烂，不用太多的可视化的元素。

用Axure,Balsamiq或者Mockplus等带有许多组件的原型软件工具能让你快速地制作界面。通过进一步地集成设计元素，线框图能够打造得更为精致。

在高保真原型阶段，原型和产品同步完成

这种情况下设计稿已经充斥着色彩，图形，文本，间距和字体。对于高保真的程度是没有统一的标准的，可以用PowerPoint展示，可以用HTML，亦或是图表的形式。你也可以用Photoshop组合你找到的视觉元素。如果网站或APP是动画的，用比如说After Effects这样的软件就可以清楚地向客户展示产品的思路是怎样的。




团队讨论和概念测试中效果不用夺目

测试过程并不会像实践一般简单，合适的原型取决于几个因素：目标组，技术背景和开发阶段。“没有比手绘草图更好的了”，汉堡的UX设计师Miriam Scheibe说到，“像乒乓球一样在概念和开发之间不断来回打磨构思。”Scribbles也能用被用来展示行为和交互，比如说展示当用户完成登出的流程后会发生什么。在这个阶段只有概念需要被印证，没有视觉设计的必要。“想法有多模糊，原型就应该有多简单”，Miriam说到。这些草图应该尽量地远离产品，因为针对早期测试它们还需要修改成特殊的形态，能够形成模板，利用原型软件能够方便的变为简单的交互网站或APP。

内部细节沟通

Wireframe有助于内部沟通，以传达在设计，视觉，开发方面的架构信息。尽管这种工作可以由PDF完成，但是其自带的丰富的工具能提供更多。取代了大量难以阅读的任务列表，越来越多的的机构都在使用可以模拟应用效果的交互线框图。快速的原型工具Mockplus也能提供帮助。




视觉工作是有必要的。“如果团队在概念阶段达成了一致，想要得到部门经理的认可，展示形式需要更为具体”，Miriam Scheibe解释到，“因为这些人通常没有太多时间，你可能需要在电梯里阐述你的想法。在没有时间和预算用于Photoshop设计的情况下，Wireframe也能够用于集成背景，图案，字体和色彩。”

甚至如果代理人是代表风险投资的客户的话，最好依靠高保真的原型而不是在观众前表述抽象事物的能力。在这种情况下爆炸式的美学和令人印象深刻的触感更加为你的表达加分。

综上所述，不同的设计阶段和设计需求有很多合适的工具，线框图适用于内部细节沟通，包括页面结构／导航／交互细节等，草图用于捕捉想法，不必纠结细节的构思阶段。原型图则是针对原型测试和改进，关于行为和逻辑的验证阶段，选择适合的工具可以为极大地提高设计的效率和质量，更好地完成产品。

	

是新朋友吗？记得先点击蓝字关注我们~
本期重点
 了解、熟悉并学会制作原型图
在产品制作初期，我们经常会听到三个字在产品经理及设计师的口中被频繁提及，那就是“原型图”。那么，什么是原型图？原型图在整个产品的制作过程中起到什么样的作用？如何制作原型图？以及有哪些好上手的原型图制作工具？相信大家心里都有很多疑问，今天小编就带着大家来了解一下原型图的那些事儿~
(本文较长，预计需花费5-10分钟的时间阅读，建议需要的小可爱先收藏哦~)
什么是原型图？
原型图简单的来说，就是一款产品成型之前的一个简单的框架，通常用于展现页面的排版布局，每个功能键的交互，整个产品的逻辑，使产品的初步构思有一个可视化的展示。
原型图  ▲ 
原型图在整个产品的制作过程中起到
什么样的作用？
对企业(甲方公司)：
当一家企业的领导人想开发一款产品时，TA本身极有可能并不懂得互联网的相关知识，跟外包公司(如我们)沟通清楚业务流程和需求后，也想象不到自己的产品的表现形态。
原型图就可以让TA提前看到产品的界面排版，每个按钮的功能和交互效果，产品的基本框架和运作机制，从而获得比较真实的感受。
对我们(外包公司)：
因为原型图不是最终设计稿，当客户需要修改需求，或者逻辑交互不符合需求时，修改起来也是比较方便，能够在开发前排除相当一部分的潜在问题和故障，从而提升项目效率。
在企业方确定了原型图后，接下来UI设计就能够根据原型图设计相关的界面与交互，原型图能够帮助没有与企业方直接沟通过需求，不能理解产品真实意图的UI设计理解产品逻辑，能很好的节省沟通成本。
开发人员也可以由此快速的理解到产品的排版、需求以及功能点。
如何制作原型图？
首先，我们要明确原型图是画给谁看的，通常是以下几类人：UI设计师、开发、测试和企业领导，一个完善的产品流程离不开这几个角色。
设计师通常关心元素之间的联系、排版和布局。开发通常最关心的是有多少功能，功能的复杂度怎么样，边界条件是什么，异常情况怎么处理等。测试则关心产品目标用户，辅助他们写测试用例，以及是否穷尽考虑到各个场景。而企业领导通常最关心功能整体的流程、原型的易读性，以及价值体现。
下面是小编工作以来画原型图的一些经验总结，希望能帮助到想要学习的朋友。
一、清晰的视觉层次
突出重要元素，弱化次要元素
页面是由元素组成的，这些元素包括线、颜色、按钮等，要做到层次清晰，就要对重要的元素进行强化，次要的元素进行弱化。比如可以通过颜色的饱和度来突出重要元素，通过面积突出重要元素等，引导用户聚集视觉焦点到重要的元素上。
如下图，通过对比颜色和区域面积的大小，来突出重要元素。
格式塔原理
将相关的元素组织在一起，让用户知道这些元素在任务、数据和工具上是相关的，通常用位置表示。相关的元素位置上相近，不相关元素用空间隔开。
如下图，第一个图为反面例子，信息距离上下一致，用户无法区分中间的信息是属于上方还是下方。第二张图是Airbnb的截图，红色线框部分明显与下方隔开一定距离，在视觉上体现为跟上方相关。
二、视觉流结构
什么是视觉流？
视觉流是指视觉焦点形成的轨迹，由于眼球生理结构限制，人眼在某时刻只能产生一个焦点。而用户在对界面持续关注后会留下一系列的视觉焦点，这些视觉焦点的轨迹被称为视觉流(visual line)。
平稳的视觉流结构能帮助用户快速理解逻辑路径，减少用户的认知成本。而平稳的视觉流有两个原则：
一、视觉焦点不宜过多；
二、视觉焦点的路径逻辑尽量简单。
如下图，同为软件教程详情页，左侧的视觉焦点过多，视觉流向路径复杂，而右侧的视觉流向路径简单，容易理解。
三、功能预见性
看到一个功能，就知道该功能如何使用，称为功能预见性。
如，lofter底部导航栏在改版前，只用图标表现功能，没法清晰知道每个图标的含义。改版后，用“图标+文字”，直接解释每个图标的含义，减少认知负荷。
四、视觉的焦点为信息的焦点
每个页面都有一个核心功能，这个核心功能不应该被其他功能所覆盖，特别是当功能越来越多、越来越复杂时。那我们怎么判断页面上哪个功能是信息的焦点呢？如果针对竞品调研，页面上颜色饱和度最高，或者功能占据区域最大的即为页面的核心功能，即信息焦点。当设计自家产品功能，要从主流用户的主流场景，或者功能的商业价值、使用频率等维度进行分析，一个页面的信息焦点不宜过多，过多会影响视觉流的稳定。
如下图，图1为《风起长林》中的剧集截图，图2为点击后的效果，图3刻意把进度条拖动方块变小。我们先来分析进度条的使用场景：查看进度、快进、拖动进度条，当把进度条变小，如图3，进度条不再成为信息的焦点，视觉效果被弱化，用户在查看进度、快进时要自己看才能看到当前进度，拖动滑块时要小心翼翼才能点中。
五、把简单留给用户
复杂度守恒定律(Law of conservation of complexity)由Larry Tesler 于1984年提出，也称泰斯勒定律(Tesler’s Law)。根据复杂度守恒定律，每个应用程序都具有其内在的、无法简化的复杂度。
无论在产品开发环节还是在用户与产品的交互环节，这一固有的复杂度都无法依照我们的意愿去除，只能设法调整、平衡。在交互设计中，体现为把复杂留给系统，尽量把简单的界面呈现给用户。
比如，你在家里点外卖和在公司点外卖，无需每次都定位和选择收货地址，系统会自动检测你当前的地理位置，从而给出合适的收货地址。并显性显示用户最关心的信息，比如在美团上点了外卖，很多人很关心外卖的送达时间，会好几次进入订单详情查看，美团干脆直接把送达情况展示出来，无需进入详情页查看。
六、考虑到边界条件
产品经理或者交互设计师，在做功能时，很容易遗漏一些边界条件，出现遗漏的原因，主要是在设计功能时至考虑到了主流场景，只做了主流场景下我设计，异常场景或者边界条件很难考虑到，这里教大家一个小技巧，写产品需求用例。在构建产品架构雏形时，用例往往能起到帮助确定功能界限的作用。
用例包括以下内容：
用例名称  – 此产品/功能的名称
用例编号 – 此产品用例的编号
角色- 操作/执行该功能的角色
简要说明 – 最简化的内容对该需求功能的描述
前置条件- 执行该功能的前提条件
后置条件 – 该功能执行完毕后的结果条件
主事件流- 该功能角色所执行的主要正常过程
异常和分支事件流 – 该功能角色所执行的次要异常过程
如在图片素材下载网站下载图片的用例：
如果不写产品用例，很多人可能只考虑进入详情页-点击下载按钮-下载成功这个流程，很容易遗漏用户未登录状态下的提示，无权限下载该图片的提示，甚至是图片下架后无法下载图片的提示。
有哪些好上手的原型图制作工具？
1. 摹客原型
免费方式：通用版免费
功能特色：
全新的主辅画板模式，可以灵活创建不同的交互效果。
支持多人同时在线编辑同一项目，共同完成APP原型设计。
自带钢笔工具、铅笔工具、布尔运算、响应式布局等特色功能，设计创作自由随心
支持页面交互、状态交互、命令交互，以及设置多种触发方式和曲线，快速制作交互原型。
设计稿中支持直接绘制流程图，清晰呈现项目逻辑。
适用情景：中高保真原型，快速原型， WEB/移动端/平板原型，线框图，视觉稿。
摹客原型设计采用基于Web的全新架构，不需要下载安装，不受设备系统的限制，通过浏览器即可快速进行原型设计。摹客原型自带钢笔、铅笔等矢量工具，可帮助用户自由完成设计。设计完成后可以和团队成员无缝协作，轻量设计还能直接交付开发，真正实现“从创意到落地”。
官网地址：
https://www.mockplus.cn/?home=1
2. Axure RP
免费方式：免费试用30天
功能特色：
支持交互设计、生成规格说明文档、输出HTML原型、版本控制管理、支持多人协作设计、母版功能、支持动态面板和复用模板。
适用情景：视觉稿/高保真原型，大型复杂项目，Web线框图，网页原型
Axure RP是一款专业设计师不容错过的免费原型设计工具，设计师可以用它快速创建应用软件或Web线框图、流程图、原型和规格说明文档。作为一款专业的设计工具，它能快速、高效的创建原型，但对于新手来说，需要投入较高的学习成本。
官网地址：
https://www.axure.com/
3. Justinmind
免费方式：免费试用30天
功能特色：
支持手势交互、自定义组件(库)、支持动画、支持团队协作功能、支持版本控制、快速预览原型、多种导出方式(HTML+JS, Word, PNG, 导航地图)
适用情景：高保真原型，线框图，移动端原型
这也是一款适用于高保真原型和线框图的原型工具。不过对于新手设计师来说，这款工具的学习曲线也是比较高的。
官网地址：
https://www.justinmind.com/
4. Invision
免费详情：免费1个项目
功能特色：
项目反馈管理，团队协作，支持手势和转场功能、快速创建热点链接页面、支持Sketch/Photoshop导入、支持版本控制、支持多种分享方式(URL, Email, SMS, Zip, PNF)
适用情景：线框图，移动应用原型
InVision可以说是一款较流行的免费原型设计工具，设计师可以利用它免费设计一个的项目。这款工具允许设计师编辑，分享和测试具有一定交互的应用原型。而其团队协作功能，即允许设计师导入原型，讨论和添加交互及动画，也为部分设计师用户所喜爱。因此，InVision更适合团队使用。
官网地址：
https://www.invisionapp.com/
5.Flinto
免费详情：免费试用30天
功能特色：
支持转场动画，画面滚动流畅、支持创建手势交互、支持Sketch导入、支持在iPhobe/iPad上进行实时预览、分享原型
适用情景：多页面，复杂交互的原型，高保真原型
Flinto是一款mac上强大的移动应用原型设计工具，你可以使用它创建多种原型。从最简单的页面跳转到令人印象深刻的交互动效，无需任何代码和复杂的时间轴，我认为这正是大多数交互设计师所期望的。
官网地址：
https://www.flinto.com/
6. Proto.io
免费情况：免费试用15天
功能特色： 
丰富的移动端设计组件 (可自定义)、支持Sketch和Photoshop插件、大量现成的项目模板、支持原型预览(HTML，短信发送至手机预览)，支持多种文件导出形式(HTML, PNG, PDF)
适用场景：移动端原型，弱动画原型
一款专注于移动端原型开发的软件，可以建立全交互式的移动App原型。设计师可以直接在真实的移动设备上对原型设计进行测试。并且可以使用iOS或Android上的浏览器以全屏模式运行原型。不过这是款在线设计工具，设计师在进行原型设计时需要保持经常在线。
官网地址：https://proto.io/
结语
一图胜前言，一个原型胜过一千次会议。原型图，在一个项目的开发过程中有着不可取代的地位。
好啦，除了文中小编已经介绍的方法和工具，大家如果有更好的原型图制作方法和原型图制作工具，也可以在下方留言分享哦~比心~
           商务合作｜18967672398(孙经理)
           公司地址｜椒江区浙江大学台州研究院三幢
期待你的“分享”和“点赞”和“在看”哦~

一、为什么要绘制软件原型图


原型图的作用

原型图是一种动态模拟软件最终形态的图。原型图主要用于和领导或目标客户确认软件的最终呈现效果。原型图可以生动的展示最终效果并支持初步的模拟操作和测试，因此可以用于验证软件设计理念，以及接收修改意见和设计缺陷反馈。虽然绘制原型图会花费一些时间，但是能避免之后多次修改软件造成的额外人工浪费和资金浪费。

一般来说，绘制原型图和软件功能的确定是由"产品经理"来完成的。最终软件漂亮的外观还需要UI设计师来设计。这就需要产品经理告诉ui设计师傅最终要的软件界面布局。而这个时候“原型图”就是最直观有效的交流方式了，即所谓的“一图胜千言”。因此原型图是UI设计师设计软件最终效果的重要依据。


原型图并不是“线框图”

线框图是是使用用纸和笔绘制的一种静态的呈现方式的图纸。只要简要描述出内容大纲、信息、布局、界面交互方式即可。线框图经常应用在非正式场合，比如团队内部讨论的时候。


展示一个示例原型图效果

接下来会说明设计这样一个原型图的方法和步骤。使用原型图动态交互的示例如下：




二、常用原型图绘制工具介绍
常用的原型图工具推荐

Axure RP

这个工具是“产品经理”常用的专业原型图设计工具。没有什么缺点，所以你需要的功能都有。软件容易上手，拿起来就可以绘制。对于软件的高级功能可以买一个书专门学习。
墨刀

是一个web类型的原型图设计工具。不用安装，直接在浏览器打开即可使用。免费可以绘制4个软件的原型图，会员没有限制。这个软件的特点是便于分享。体验原型图的人在浏览器直接打开就能体检软件使用效果。尤其适用于手机app原型图设计。缺点是不能保存离线工程文件。只能保存一份静态网页。

三、原型图绘制方法介绍

举例使用Axure RP绘制一个“导入对话框”

1.1 使用Axure RP新建一个文档

1.2 从左侧工具栏拖动一个“Box1”到工作空间，并调整为对话框大小如下图所示：



1.3 从左侧工具栏拖动一个“Box1”到工作空间，并调整尺寸和位置，形成对话框的TitleBar，如下图所示：



1.4 从左侧工具栏依次拖动“Label”到对话框中，并输入“名称”，如下图所示：



1.5 从左侧工具栏依次拖动“Box1”到对话框中间，形成两个“输入框”，如下图所示：



1.6 从左侧工具栏依次拖动“Button”到对话框中间，形成对话框的按钮，如下图所示：



1.7 从左侧工具栏拖动一个Box1到TitleBar形成关闭按钮的外框，如下图所示：



1.8 从左侧工具栏选择“图标”，选择并拖动一个“X”按钮到TitleBar，调整大小形成关闭按钮，如下图所示：



1.9 给背景和Titlebar配上合适侧色彩，最终效果如下图所示：


举例说明“链接动作”的方法

比如制作一个点击主界面的“删除”按钮，软件页面跳转到“删除对话框”的动作。实现步骤如下图所示：



四、完整的“电子书阅读器”原型图设计

“电子书阅读器”原型图的各个页面的截图如下


“电子书阅读器”原型图的“Axure RP”工程文件下载地址

点我获取工程文件

无论是做App产品开发，还是网页设计，设计师朋友们经常都会把“快速原型”挂在嘴边。 

那么，什么是快速原型？

快速原型模型又称原型模型，它是增量模型的另一种形式；它是在开发真实系统之前，构造一个原型，在该原型的基础上，逐渐完成整个系统的开发工作。原型设计是产品开发的一个重要阶段，它在整个产品流程中处于最重要的位置，有着承上启下的作用。




为什么要做快速原型设计？

1. 将产品功能具象化

对于开发者来说，产品的需求分析或是功能描述用文字表达，不仅抽象而且繁琐，他们无法直观地呈现产品的最终样貌或功能。而通过快速原型设计将需求或是功能信息这些相对抽象的信息转化为具象原型，帮助开发人员更好的理解产品的功能板块、界面、元素以及它们之间的执行逻辑。从而将原型转化为真正的产品上线。所以说，原型设计的重要性无可替代，产品经理应当要对此有绝对的控制和驾驭能力。

2. 方便用户测试，节省时间、开发成本

快速原型的另一个优势还在于，它可以直接拿来给真正的用户测试产品。早期的原型测试能够节省巨量的开发成本和时间，如此一来，团队就不会因为不合理的交互界面而浪费后端的产品架构。所以，对设计师和开发者而言，原型是用来测试产品的绝妙工具。




有哪些快速原型设计工具？

1. 纸+笔

快速原型设计能力：★★★★★

俗称手绘原型。以快速且随心所欲著称，设计稿往往也难以保存。正是由于这种特性，一般不适合在大型项目开发中正式使用。

2. Mockplus

快速原型设计能力：★★★★

如它的宣传语“更快更简单的原型设计工具”，Mockplus满足各种项目包括手机、平板、网页、桌面端的原型设计需求。简单快速的交互设计，高度封装的丰富组件，花样繁多的预览方式，省时省力的团队协作，这些亮眼的功能让Mockplus俘获了大批设计师和产品经理。听说最近在国内推出了终身版，值得试试。

3. Balsamiq

快速原型设计能力：★★★

Balsamiq是一款适于低保真原型的工具，简单快速。但其在交互方面的不足也限制了它的发展，仅适于Web产品设计中的低保真线框图或者草图设计，相对于纸和笔，它不够灵活；相对于Axure，它不够精确。

4. Axure

快速原型设计能力：★★

老牌的原型设计工具，其最大的特点是功能齐全，有强大的交互功能，完整的教程和需求文档。但学习成本非常高，复杂的交互不适于小白用户和快速原型。




那被大家说烂的快速原型的首选工具是什么呢？我想了下，应该有这么几点要求：

1. 很低的学习和上手成本；

2. 快速而高效的绘图功能；

3. 能够用可视化的方式快速设计交互。

更多设计类相关干货（文章及经验教程），尽在：UI/UX专业博客