如何将原型设计的优势发挥到淋漓尽致?

原型设计在整个产品阶段中的存在,绝非偶然。它能最快最准确的从用户那里获取产品信息的相关反馈。现如今,几乎没有任何一家产品公司能够完全不采用原型设计。特别是伴随原型设计变得越来越容易实现,其意义也越来越明显,逐渐处于不可取代的地位。原型设计的必要性已无可非议,如何充分利用原型设计的优势才是应该深思熟虑的问题。

1,原型设计的简单回顾

以防万一,还是有必要说明一下原型设计的相关信息。

首先,看一下基本的产品阶段:

1)想法生成

2)需求采集

3)功能与结构

4)原型设计阶段

5)PRD(绝大多数公司使用原型设计取代PRD文档)

6)路线图

产品阶段的流程在很大程度上已经说明了原型设计在整个生产过程中的作用和地位。设计者在整理了足够丰富的思路,数据,信息,需求,评估等相关信息后,往往会将这些抽象的思维以原型的方式具体呈现出来。原型设计为非专业的股东们和用户们提拱了一种最直观的方式来理解设计者的思路和创造。

其次,最常见的原型类别:

手绘原型:打印或手绘方式表示软件产品的用户界面

用户体验原型:要求说明产品的外观和功能

视觉原型:注重尺寸和外观,削弱功能

本文中,我将谈论使用原型设计工具制作的原型,它涉及到用户体验和视觉要素等方面,也是如今最流行和最实用的原型设计方式。由于我已使用Mockplus多年,我将通过分析使用Mockplus制作的原型来具体说明如何充分利用好原型设计的优势。

2.原型设计的优势

想要他人对你的原型设计为之惊叹吗?先了解原型设计的优势是很有必要的,知其用其,才能游刃有余。

1)仅仅依靠静态的高保真模型图和线框图是无法传达充足的功能和交互效果。但原型设计可以实现动态交互,能更直观的传达产品功能和动画。

2)与老板和用户进行有效沟通。他们了解您的设计越深入,你说服他们的几率就越大。

3)更早地检测错误,降低时间和金钱成本。相信我,你宁愿在原型设计阶段发现100个错误,也不愿在开发阶段发现1个错误让你止步不前。

4)加强团队成员内部的协作。

5)收集用户反馈和进行多重测试。

3.原型设计的不足

洞悉原型设计的缺点可以最大限度避免陷入做原型设计不当时的陷阱。

1)原型设计初期就一味追求做高保真原型。

高保原型的组成:线框图、交互设计、逻辑判断以及UI。不难看出,高保真原型必将消耗设计师更多的时间和精力。然而,除去时间等成本,高保真原型还将大大限制后期UI的发挥。

2)原型设计演示错​​误易导致设计想法的表述大打折扣。设计师100%的想法也许会因为不恰当的演示衰减到50%。

3)用户对原型和成品系统的误解。用户等非专业人员往往会有这样误解,尤其是针对高保真原型。会让用户产生这就是某个APP 的运作方式,被设计者的思维模式所牵引,难以提出有效反馈。

4)忽略可行性。这很简单,很多逻辑和交互可能会在后期的开发阶段不可实施。

4.如何充分利用原型设计的优势?

充分发挥优势,可以简单理解为,取长避短。

这里我使用一个实例来说明:

首先,如下图所示,看看这个原型是如何工作的:

应用名称:Gogobot

原型工具:Mockplus

Gogobot是一款旅游APP,共有28个互动页面和28张图片。我曾经邀请过一些朋友来体验这个原型,大多数人都误以为他们正在使用一个真正的APP。此原型中,使用了Mockplus的颜色选择器,加入了原始动画,并且使用Scroll Box组件实现水平和垂直滚动等动态效果,更多设计因素的使用,让Gogobot成功赢得了用户的青睐。

现在,具体讲解一下我如何在此原型设计中最大限度的发挥了原型设计的优势:

1)实用功能性和合理的交互

从头开始吧,看一下Start Page,页面下有3个按钮,为用户提供了三种方式进入到Welcome Page。用户可以自由选择使用Facebook帐户登录,注册一个新帐户,或者只是作为访客跳过注册直接浏览。每个选项都链接到相应的目标页面。如果用户对Gogobot感兴趣并愿意注册,只需点击Sign Up按钮,就可以到达注册页面。注册页面仍然为用户提供了实际的选项。用户可以填写必要的信息来创建一个新的帐号,但也许该用户意识到他已经有了一个帐号,那么他就可以点击已有账户按钮在注册页面就能完成登录,而不用先返回到登录页面再进行登录。这样的设置是完全符合实用性的,并且用户在体验交互时不会有困扰。

2)与您的老板、用户和团队成员即时有效沟通。这里不得不提Mockplus的团队协作功能。让多个团队成员可以协同操作编辑同一个项目。此外,批注和审阅功能更是锦上添花,它让所有相关人员都可以自由地查看项目和发表评论。

3)避免高保真原型,采用统一风格。看看Hotel页面。它使用Scroll Box组件进行水平滚动,并使用图片组件作为占位符。这里是没有必要选择华丽的图片告诉用户这里表示的是一个酒店,但需要注意的是,保持整体的风格一致。也就是说,在其他页面上也无需使用高像素的图片,使用图片组占位即可。保持你的所有界面是一个整体。

4)做快速原型跟进产品进度。看看Profile页面,它包含了超过15个图标和1个触发交互。时间成本在原型设计上至关重要,如果没有这15个图标可供选择,你将花费更多的时间。Mockplus拥有3000多个SVG图标和将近200个高度封装的组件。此外,通过简单拖拽鼠标做链接,就可轻松实现交互。这一点也是原型设计相较于手绘原型的优势,元素都是现成的,拖拽点击比手绘更快更逼真。

5)获取用户反馈并进行多重测试。这是一个充满吸引力和挑战性的需求。我迫切想要知道我的设计是否符合需求。Mockplus提供了8种预览方法可以帮助进行快速测试。我最喜欢的是扫描生成的QR,能够立即在本地设备上预览原型,快捷方便,不需要USB连接。快速测试是我检验可行性问题的一大帮手。通过可用性测试,我可以知晓设计中的哪一部分存在错误,哪一部分产生不良用户体验,以及哪一部分需要改进和反思。为产品策略的调整及时导航。

在线查看该原型:http://run.mockplus.cn/demo/index.html

那么这个原型是如何做出来的呢?请看教程:http://doc.mockplus.cn/?p=1668

好的原型设计可以说是产品成功的一半。充分发挥原型设计的优势,物尽其用,必将有助于创造出优秀的产品。感谢您的阅读,如有任何意见,欢迎发表评论。另外,我在这里展示的Gogobot是由原型工具Mockplus制作的。我并非是要对你的原型工具选择进行一些指手画脚的暗示,仅仅是因为我使用的是Mockplus,并且它的功能恰如其分的满足我充分利用原型设计的优势。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云技术沙龙

Serverless+SCF=打倒服务器,解放程序员

在很多外行人的眼里,程序员就是神一样的存在。他们全年996,节假日无休,不仅Java、PHP、C++要样样精通,还要会修电脑修音响修手机,做前端要懂运维,做后台...

2592
来自专栏ThoughtWorks

解读ThoughtWorks技术雷达的正确姿势

接地气的技术雷达 ThoughtWorks在每年都会出品两期技术雷达,这是一份关于技术趋势的报告,它比起一些我们能在市面上见到的其他各种技术行情和预测报告,更加...

4299
来自专栏web前端教室

7月9号晚10点的微课总结(文字版)

大家好,今天是周五,祝大家周末快乐,今天我们用大概一个小时的时间聊一下《学习前端的思路问题》。为什么要聊这个呢,因为群里的小伙伴经常会问我,前端怎么学,学了很久...

2218
来自专栏无原型不设计

优质产品需求文档(PRD)写作三大原则

在上一篇文章中有介绍,产品经理的两项主要职责包括:对产品机会进行评估,以及对开发的产品进行评估。而定义即将开发上线的产品,则需要借助产品需求文档,来进行产品的...

6535
来自专栏IT大咖说

微信开发中的前后端之坑

内容摘要 前端是快速呈现与验证产品,并且尝试把这些优秀的交互体验做出来并去实现。在前端级产品的研发过程中,工程师如何去解决他们所遇到的痛点问题,又引发了哪些思考...

3744
来自专栏速成应用小程序开发平台

实体商家缺少技术不懂编程自己能做微信小程序吗?

小程序的诞生给创业者带来了太多的创业机会,对于创业者来说如何拿下这个大市场。最好的选择就是做小程序服务商,这也是目前小程序最为盈利的模式之一。目前来说小程序已经...

4213
来自专栏A周立SpringCloud

Serverless+SCF=打倒服务器,解放程序员 | 技术沙龙

在很多外行人的眼里,程序员就是神一样的存在。他们全年 996,节假日无休,不仅 Java、PHP、C++ 要样样精通,还要会修电脑修音响修手机,做前端要懂运维,...

881
来自专栏互联网数据官iCDO

提升转化有无诀窍?利用动态内容促进转化的5个技巧!

本文长度为5252字,建议阅读10分钟,请细嚼慢咽噢! 今天推荐系统供应商Gravity R&D的营销专员Huba Gaspar将为大家娓娓道来关于动态内容如何...

2985
来自专栏ThoughtWorks

这些技术这么酷,为什么我们不关注?| 技术雷达

在上一期雷达发布时,曾有一篇文章获得广泛关注——作者好奇为什么《翻遍整个技术雷达,竟没有找到 AI 四个字!?》,对此,ThoughtWorks中国区CTO徐昊...

1505
来自专栏腾讯社交用户体验设计

在整理设计规范中变强

1143

扫码关注云+社区

领取腾讯云代金券