原型设计在整个产品阶段中的存在，绝非偶然。它能最快最准确的从用户那里获取产品信息的相关反馈。现如今，几乎没有任何一家产品公司能够完全不采用原型设计。特别是伴随原型设计变得越来越容易实现，其意义也越来越明显，逐渐处于不可取代的地位。原型设计的必要性已无可非议，如何充分利用原型设计的优势才是应该深思熟虑的问题。
1，原型设计的简单回顾
以防万一，还是有必要说明一下原型设计的相关信息。
首先，看一下基本的产品阶段：
1）想法生成
2）需求采集
3）功能与结构
4）原型设计阶段
5）PRD（绝大多数公司使用原型设计取代PRD文档）
6）路线图
产品阶段的流程在很大程度上已经说明了原型设计在整个生产过程中的作用和地位。设计者在整理了足够丰富的思路，数据，信息，需求，评估等相关信息后，往往会将这些抽象的思维以原型的方式具体呈现出来。原型设计为非专业的股东们和用户们提拱了一种最直观的方式来理解设计者的思路和创造。
[img=900,400]http://upload-images.jianshu.io/upload_images/5146264-69dd6824bfa7c53a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240[/img]
其次，最常见的原型类别：
手绘原型：打印或手绘方式表示软件产品的用户界面
用户体验原型：要求说明产品的外观和功能
视觉原型：注重尺寸和外观，削弱功能
本文中，我将谈论使用原型设计工具制作的原型，它涉及到用户体验和视觉要素等方面，也是如今最流行和最实用的原型设计方式。由于我已使用Mockplus多年，我将通过分析使用Mockplus制作的原型来具体说明如何充分利用好原型设计的优势。
2.原型设计的优势
想要他人对你的原型设计为之惊叹吗？先了解原型设计的优势是很有必要的，知其用其，才能游刃有余。
1）仅仅依靠静态的高保真模型图和线框图是无法传达充足的功能和交互效果。但原型设计可以实现动态交互，能更直观的传达产品功能和动画。
2）与老板和用户进行有效沟通。他们了解您的设计越深入，你说服他们的几率就越大。
3）更早地检测错误，降低时间和金钱成本。相信我，你宁愿在原型设计阶段发现100个错误，也不愿在开发阶段发现1个错误让你止步不前。
4）加强团队成员内部的协作。
5）收集用户反馈和进行多重测试。
[img=900,400]http://upload-images.jianshu.io/upload_images/5146264-499300843517fd8f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240[/img]
3.原型设计的不足
洞悉原型设计的缺点可以最大限度避免陷入做原型设计不当时的陷阱。
1）原型设计初期就一味追求做高保真原型。
高保原型的组成：线框图、交互设计、逻辑判断以及UI。不难看出，高保真原型必将消耗设计师更多的时间和精力。然而，除去时间等成本，高保真原型还将大大限制后期UI的发挥。
2）原型设计演示错误易导致设计想法的表述大打折扣。设计师100%的想法也许会因为不恰当的演示衰减到50%。
3）用户对原型和成品系统的误解。用户等非专业人员往往会有这样误解，尤其是针对高保真原型。会让用户产生这就是某个APP 的运作方式，被设计者的思维模式所牵引，难以提出有效反馈。
4）忽略可行性。这很简单，很多逻辑和交互可能会在后期的开发阶段不可实施。
4.如何充分利用原型设计的优势？
充分发挥优势，可以简单理解为，取长避短。
这里我使用一个实例来说明：
首先，如下图所示，看看这个原型是如何工作的：
[img=700,930]http://upload-images.jianshu.io/upload_images/5146264-acc6e08bfea251d0.gif?imageMogr2/auto-orient/strip[/img]
应用名称：Gogobot
Gogobot是一款旅游APP，共有28个互动页面和28张图片。我曾经邀请过一些朋友来体验这个原型，大多数人都误以为他们正在使用一个真正的APP。此原型中，使用了Mockplus的颜色选择器，加入了原始动画，并且使用Scroll Box组件实现水平和垂直滚动等动态效果，更多设计因素的使用，让Gogobot成功赢得了用户的青睐。
现在，具体讲解一下我如何在此原型设计中最大限度的发挥了原型设计的优势：
1）实用功能性和合理的交互
从头开始吧，看一下Start Page，页面下有3个按钮，为用户提供了三种方式进入到Welcome Page。用户可以自由选择使用Facebook帐户登录，注册一个新帐户，或者只是作为访客跳过注册直接浏览。每个选项都链接到相应的目标页面。如果用户对Gogobot感兴趣并愿意注册，只需点击Sign Up按钮，就可以到达注册页面。注册页面仍然为用户提供了实际的选项。用户可以填写必要的信息来创建一个新的帐号，但也许该用户意识到他已经有了一个帐号，那么他就可以点击已有账户按钮在注册页面就能完成登录，而不用先返回到登录页面再进行登录。这样的设置是完全符合实用性的，并且用户在体验交互时不会有困扰。
[img=900,409]http://upload-images.jianshu.io/upload_images/5146264-1610cbce130f6a33.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240[/img]
2）与您的老板、用户和团队成员即时有效沟通。这里不得不提Mockplus的团队协作功能。让多个团队成员可以协同操作编辑同一个项目。此外，批注和审阅功能更是锦上添花，它让所有相关人员都可以自由地查看项目和发表评论。
[img=897,423]http://upload-images.jianshu.io/upload_images/5146264-7eda02c7ad9fe0cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240[/img]
3）避免高保真原型，采用统一风格。看看Hotel页面。它使用Scroll Box组件进行水平滚动，并使用图片组件作为占位符。这里是没有必要选择华丽的图片告诉用户这里表示的是一个酒店，但需要注意的是，保持整体的风格一致。也就是说，在其他页面上也无需使用高像素的图片，使用图片组占位即可。保持你的所有界面是一个整体。
[img=900,408]http://upload-images.jianshu.io/upload_images/5146264-25500fb12c48a6e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240[/img]
4）做快速原型跟进产品进度。看看Profile页面，它包含了超过15个图标和1个触发交互。时间成本在原型设计上至关重要，如果没有这15个图标可供选择，你将花费更多的时间。Mockplus拥有3000多个SVG图标和将近200个高度封装的组件。此外，通过简单拖拽鼠标做链接，就可轻松实现交互。这一点也是原型设计相较于手绘原型的优势，元素都是现成的，拖拽点击比手绘更快更逼真。
[img=900,406]http://upload-images.jianshu.io/upload_images/5146264-222ea7706011036b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240[/img]
5）获取用户反馈并进行多重测试。这是一个充满吸引力和挑战性的需求。我迫切想要知道我的设计是否符合需求。Mockplus提供了8种预览方法可以帮助进行快速测试。我最喜欢的是扫描生成的QR，能够立即在本地设备上预览原型，快捷方便，不需要USB连接。快速测试是我检验可行性问题的一大帮手。通过可用性测试，我可以知晓设计中的哪一部分存在错误，哪一部分产生不良用户体验，以及哪一部分需要改进和反思。为产品策略的调整及时导航。
在线查看该原型:[url=http://run.mockplus.cn/demo/index.html]http://run.mockplus.cn/demo/index.html
那么这个原型是如何做出来的呢？请看教程：[url=http://doc.mockplus.cn/?p=1668?hmsr=wen]http://doc.mockplus.cn/?p=1668
好的原型设计可以说是产品成功的一半。充分发挥原型设计的优势，物尽其用，必将有助于创造出优秀的产品。感谢您的阅读，如有任何意见，欢迎发表评论。另外，我在这里展示的Gogobot是由原型工具Mockplus制作的。我并非是要对你的原型工具选择进行一些指手画脚的暗示，仅仅是因为我使用的是Mockplus，并且它的功能恰如其分的满足我充分利用原型设计的优势。
![[致奋斗的你]TANGPION](https://img.zhisheji.com/Fk_B53cYb4RjlpM-_tz02-mCHuNB?imageMogr2/quality/100/sharpen/1/thumbnail/290x/crop/!290x180)
粤公网安备 44030902001796号 粤ICP备19041343号-3
签到成功
jongde
全部评论()