干货!所有常用的原型设计工具都在这里了

标签: 干货 原型 设计 | 发表时间:2016-11-22 10:05 | 作者:
出处:http://www.iteye.com

本文列举了20余款当前国内外比较火爆的原型设计工具。我把它们分为以下五类:

1. 交互原型设计工具(仅限页面交互)

2. 手机原型工具

3. 网页原型工具

4. 静态原型工具

5. 动态原型工具(组件和页面交互)

交互原型设计工具(仅限页面交互)

这一类工具主要是建立页面之间的交互。其本身不能进行组件的制作和设计,需要从其它地方(例如:PS,本地)导入设计图,对已有的设计图创建热点,进行交互设计。

Invision - 一款很好的制作原型交互演示的工具。你可以从本地、Dropbox、Google Drive和Box上传图片。使用拖拽快速创建热点。它的分享、协作、评论功能也很方便。

Chianco- 一款轻量级的交互原型设计工具。拖一拖鼠标, 快速创建交互;内置多种转场和触发效果,点一点就可以使用;扫一扫,直接在手机上预览效果,也可以导出HTML,分享给同事。

Marvel - 一款简单易用的原型工具。只需几次简单的点击,就能将静态的设计图链接起来,变成可点击的原型图。

Flinto for Mac - 一款Mac端的交互原型设计工具。支持一键将 Sketch设计稿导入, 添加热点配合相应的交互动作生成原型通过网页或者手机端展示给客户观看。

Atomic - 可以用来快速设计交互和动画的原型工具,无论是手机原型还是桌面端原型,都是不错的选择。

手机原型工具

这类工具内置了制作手机原型的组件,可以创建和编辑组件。设计时,可以选择不同的手机模型。在手机预览很方便。

Proto.io - 用Proto.io做手机原型是一个比较好的选择。有默认手机的组件库,拖出来进行简单的属性设置就可以用了。也支持交互设计,支持的触发和动作比较丰富。

Mockplus - Mockplus提供了大量的手机组件和图标,能够快速上手进行设计。设计前可以选择不同尺寸的手机模型,可以通过多种方式在手机上进行预览:发布项目,然后在手机浏览器中查看、手机端输入原型码、扫描二维码。设计手机原型十分快捷。

Fluid - Fluid 是一款在线原型设计工具,比较适合移动App原型的制作,包括iOS,Android以及穿戴设备。

Pixate - 用Pixate可以实现复杂的交互和动画,它也只能用于手机端原型的制作。

Justinmind - 可以自制高保真手机原型。支持复杂的交互、动画和手势。同时也是需要投入较高学习成本的工具。

网页原型工具

这类工具比较适合网页原型的制作。

Axure - 功能全面的原型设计工具,可以实现复杂的交互,需要投入较多的学习时间。

Webflow - 一款可以生成代码的原型设计工具,适合网页原型的制作,中等学校难度。

Webydo - 可以自制高保真网页原型的工具,不过学习难度也很高。

Indigo Studio - 这款工具即可以让你导入设计图进行交互设计,也提供了组件设计的功能。

Protoshare - 中等学习难度的在线原型设计工具,可用于设计具有交互效果的网页原型。

静态原型

这些工具整体来说操作比较简单,功能也比较简单,只能用于设计静态原型。

Fluid - Fluid是一款简单的在线原型设计工具,不能设计交互,可用于静态原型的设计。

Balsamiq Mockups - 手绘风格的原型设计软件,操作简单,初学者可以尝试用来设计静态网页原型。

Mockflow - 一款比较简单的静态原型制作工具。

动态原型工具(组件和页面交互)

这些工具功能比较全面,可以实现或简单或复杂的交互。学习难易程度也因工具而不同。

Axure - 老牌原型工具,能够实现复杂的交互。

Mockplus - 新兴的原型设计工具,Mockplus封装了常用的交互组件,实现了交互的可视化。无论是页面交互还是组件的交互都可以通过拖拽的方式完成。

UXPin - UXpin是一款在线原型设计工具,可用于制作网页和手机原型。自带了组件库,拖出来就可以进行基本的编辑,可实现简单的交互效果。

Proto.io - 一款在线原型设计工具,支持组件的交互。

Framer - Framer是一款基于代码的原型设计工具。如果你懂编程,那么Framer可以帮你实现复杂的动画和交互。

HotGloo - 在线原型设计工具,能够实现常用的交互设计。

Origami - Facebook旗下的一款原型设计工具,可以实现复杂的交互和动画。

Principle - 一款只能用于Mac上的交互设计软件。

Justinmind - 可以自制高保真手机原型。支持复杂的交互、动画和手势。

这么多原型设计工具, 总有一款是你的菜。如有遗漏,欢迎补充。



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [干货 原型 设计] 推荐:

干货!所有常用的原型设计工具都在这里了

- - ITeye博客
本文列举了20余款当前国内外比较火爆的原型设计工具. 交互原型设计工具(仅限页面交互). 动态原型工具(组件和页面交互). 交互原型设计工具(仅限页面交互). 这一类工具主要是建立页面之间的交互. 其本身不能进行组件的制作和设计,需要从其它地方(例如:PS,本地)导入设计图,对已有的设计图创建热点,进行交互设计.

加速原型设计

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
在实际使用过程中,由于项目具体阶段、平台特性以及输出物展示对象的不同,并没有哪个工具受到设计师们一致认可,每个都有其各自的优势和缺陷,按照个人经验对比了一下常见的几款. 下面,详细介绍一下每一类软件的优劣. Photoshop 作为设计师的看家技能,理论上可以通过它做出任何图形,但对于交互原型来说制作和改动成本略高,图层和组件的处理上比较死板,软件自身性能和模板库也很受挑战,容易过快进入细节讨论而忘记初衷,并非交互稿首选,当然也有设计师一开始就是朝着高保真 Demo 方向做的,用它最直观.

[干货]APP用户引导设计秘籍

- - 人人都是产品经理
用户引导,其主要目的当然是引导用户,开个玩笑啦. 一般而言,用户引导的目的主要有两种:用户需求和产品需求. 即出于用户自己的需求,这一类引导主要的目的是 为了使产品更加方便用户,让用户能够更加顺畅便利地使用自己的产品. 比较极限的例子就是Paper,它的交互基本建立在全手势操作地原则之上,所以在用户初次接触的阶段做了大量的引导设计.

AXURE在原型设计中的应用

- 超群 - 互联网的那点事
产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块、元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体、形象和生动. 就我个人而言,目前使用频率最多,最高效,交互效果最好的原型工具是axure. 今天给大家介绍一些我在工作中使用axure的经验.

关于原型设计的一些事

- - IT技术博客大学习
标签:   axure   原型设计.    为了讨论方便,有必要先做一个简单的定义.    这里的原型指的是对最终产品各页面上内容的简单呈现,通常不会设置颜色和字体,也不含图片. 这里的原型,也通常被称作线框图、示意图、蓝图. 在一些极端的情况下,原型图往往可以先被抽象成一个个的模块组合,然后再去细化每个模块中的内容极其展示形式.

原型设计:八大指导原则

- - 人人都是产品经理
原型设计没有你想象的那么难. 而且就像其他事情一样,熟能生巧. 但这其中也有陷阱——搞砸原型设计也很容易. 我自己碰到、看到或者听到的大部分错误并不是因为选择了错误的工具或者方法. 对错误的东西进行原型设计. 有效原型设计就是找到平衡并设定期望. 本文会揭示我们开发的有效原型设计八条指导原则. 无论使用什么方式或者工具,这些原则都适用.

干货:响应式页面导航设计解析(附demo下载)

- - 优设(UISDC)
一淘UX:有人说,2013将是响应式网页设计之年. 自用户体验设计师Ethan Marcotte在2010年提出Responsive Web Design(RWD)的名词,即响应式网页设计,这个概念从Responsive Architecture延伸到web设计领域,让所有的交互设计、视觉、前端开发都开始投入到这个趋势,或者说新的设计解决方案中.

超多干货!国内知名UED团队的设计流程是怎样的?

- - 优设-UISDC
编者按:阿里上市了,木有进入大公司的同学也不要灰心,今天分享一篇国内知名UED团队的设计流程的好文,现在学起来,以后可以更快上手,同时也能一窥大公司的工作流程,让自己更加专业,赶紧来学习吧. 写在前面:流程用好了是好东西,用不好是阻碍. 今天写的设计流程的思考,以下. 设计师的工作是基于设计流程的.

干货!专为网页设计师提供设计元素和代码片段的Bootsnipp

- - 优设(UISDC)
Bootsnipp 上面有许多人分享的UI资源和交互代码,赶紧去探寻宝藏吧. 在这个页面组件画廊里,为网页设计师和网站开发人员提供了各种各样的网页设计元素,如果您不会编写代码也没关系,可以预览您喜欢的特效,然后下载使用,修改相关字段即可. 如果您有一定编码基础,那更好了,这绝对是学习网页特效的宝库,你会觉得这是饕餮盛宴、海天盛筵.

移动用户体验设计中的原型应用

- 超 - UED TEAM,用户体验设计,web前端开发
一把好的椅子,是否需要我们通过阅读使用手册才能知道如何使用它吗. 一把好的椅子,是在我们看到它时,我们很自然的就知道它能够干什么,我们该如何使用它. 也就是说:“椅子”这个概念已经深入人心,是个被高度认可的原型(Archetype). 现有的移动领域里,我们也在探索如何将“原型”的概念揉入到我们的设计中去.