首页 >产品设计

4种场景下最合适的原型设计工具推荐

2017-07-14 10:54 编辑: 四门三连 分类:产品设计 来源:

本文为CocoaChina网友mo311投稿

7498b98d-3176-471e-8b77-038e7411b318.jpg

原型设计是将想法转变为设计过程中至关重要的一环。经常有设计师小伙伴可能会问到,“哪个原型设计工具是最好的呢”?实际上这是一种错误的提问方式,尤其是在当下原型工具种类繁多,针对不同需求各有优势的大环境中更加如此。就设计师而言,更在意的应该是“哪个原型设计工具对我现阶段的目标是最好的”?在这里,笔者列出了在4种常见场景下最合适的原型图设计工具的推荐清单,希望对你有所帮助。

一、设计中低保真、快速的手机端和Web网站场景

b6c8513c-6c01-489a-ad1c-376ce9a07024.png

场景特点:

  • 构建移动应用(手机端APP和Web网站)

  • 中低保真

  • 快速搭建

中低保真原型一般指有限的功能和交互原型设计。它们被用于描绘设想、设计方案以及界面布局……建立这些原型的目的主要用于沟通、演示和报告。对于低保真、快速移动应用程序的原型设计,用于此场景的最佳工具是可以在短时间内以低保真方式展示整个应用体验流程。

工具推荐:

  1. Mockplus

  2. Balsamiq

二、响应体验设计

94c407e2-78f0-4010-8be5-3a319f87c4d4.png

场景特点:

  • 构建响应式网站(手机、平板、桌面)

  • 省时和高效兼备

  • 需要将页面链接在一起,显示它们的流程

在面对响应式设计需求的用户时,首先应当明确以下几个问题:

  1. 为什么必须设计响应?

  2. 响应设计真正的目标是什么?

  3. 设计每个显示模块详细需求是什么? 

在进行响应式设计的同时,也需要前后端开发的支持,否则设计高效率的响应设计将会变得非常困难。 

工具推荐:

  1. Raw HTML/CSS/JS(真正的响应式设计)

  2. UXPin

三、高保真设计(手机或者桌面)

aaa5086b-0830-47b3-a68e-e30e53a08e90.jpg

场景特点:

  • 在APP上构建特定的动画

  • 需要极高的保真度

  • 需要高效率

  • 需要显示运动,动画元素和时机

设计高保真的原型不仅仅是需要特别高的保真度,与此同时还需要显示应用程序中的整个流程。这是一项非常耗时的任务,如果设计师希望需要构建一个高保真原型,包含有趣的动画并且实现页面之间导航,来为用户创造一个真正的高保真体验,那么可以使用下面这些工具:

工具推荐:

  1. Flinto

  2. Origami

四.特定功能需求

e714d090-5b1e-4433-a824-7026b034a37f.jpg

场景特点:

  • 在移动应用上构建特定的动画

  • 需要特别高的保真度

  • 需要高效率

  • 需要显示运动,动画元素和时机

工具推荐:

  1. Adobe After Effects

总结:

正如Facebook设计总监Julie Zhuo预测未来十年时所说,“未来的设计思维,就是产品思维”。对于设计师而言,应该更专注于设计而不是工具。设计过程中需要沟通什么、展示什么、测试什么?需要建立怎样的模块?需要什么程度的保真?当专注于原型所需要的目标时,你就知道你要采用何种工具了。建议所有的设计师,都应当广泛的涉猎目前主流的原型图工具的使用,一旦需要,即可使用。

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:如何成为一名优秀的UI/UX设计师?
下一篇:主流原型工具可用性测试横向比较
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部