文档章节

10款原型设计工具推荐

jongde
 jongde
发布于 2016/09/07 08:41
字数 1200
阅读 185
收藏 1

最近看到网上很多的文章在推荐一些与UI/UX设计相关的书籍和网站,熊先生想了想,决定写一篇推荐原型设计工具的文章,和大家一起分享一下。这一次我收集了10款工具,根据特点的不同,主要分为以下三类:简单快速、灵活轻快、功能全面。

第一类特点:简单快速。

代表工具:Chainco、InVision、Flinto Lite。

操作难度:低。

就像Chainco的标语一样,这一类工具是UI设计师的交互演示利器。三款工具都是在网页端进行设计,虽然风格略有不同,但实质上是大同小异。交互的设置上多以创建热区为基础,点击热区跳转页面为主要功能,几乎不需要任何学习成本,也没有什么操作难度。国内用户可能对Chainco更熟悉一点,但Chainco还没有国外的版本,而且由于具有协作功能等原因,InVision显现出更加优秀的一面,也赢得了跟多国外用户的青睐。

使用这一类的工具有一点明显的好处,就是可以把UI设计师做好的图片直接导入当做界面,比如InVision和Flinto Lite,它们可以直接导入PS或AI的设计文件。然而,它们是,也只能是UI设计师的交互演示利器,因为这三款工具并不支持设置组件以及组件交互。

Chainco:Chainco.png

InVision: invision.png

第二类特点:灵活轻快。

代表工具:Mockplus、Proto.io 6、UXPin、Flinto for Mac。

操作难度:适中。

在第二类的四款工具都是进行交互设计的好帮手,它们的共同特点就是设计上相对的轻便快捷。比如Flinto for Mac,只需要根据层级移动组件位置,就可以创造出对应的交互效果。同时,这些工具虽然看上去操作方式并不是完全一致,但它们都不约而同的采用了拖拽链接点来作为基本的操作方式。这种操作中的高度可视化,使得设计的过程变得十分简单有效。

Mockplus可以说是在这四款工具中比较具有代表性的,相对与Proto.io 6这种由小组件组成容器,再由容器组合为其他组件的设计模式,Mockplus则是更多的直接提供高度封装组件。作为一个“懒人”,熊先生对这种化繁为简的方式甚是喜爱。而且依靠着这种简单的操作方式和程序本身自带的超过2000枚的矢量图标,你甚至可以在完全没有网络的情况下仍然出色地完成原型设计。导出的演示包、HTML的离线包也会让预览变得不受网络的限制。

Flinto for Mac:Fintomac.png

Mockplus:Mockplus.png

这一类工具的学习成本和操作难度相对于第一类确实是要高一些的,但是如果和下面的第三类比较,那你就会发现,第二类工具的学习成本,还真的是低得很啊。

第三类特点:功能全面。

代表工具:Axure RP、Justinmind、Framer JS。

操作难度:高。

原型设计想做到功能全面,那就难免会和代码挂上钩。这一类中,Axure应该是大家更为熟悉的一个。也可以说,Axure是原型设计工具中在设计难度和可用性上平衡把握的比较好的一个了。但是,即便如此,它的变量、判断等等功能还是难倒了许多交互设计师。

如果说Axure是在寻求平衡,那么Framer JS则是在诠释着到底什么才是用代码“写”原型。这才是这一类中真正以代码为基础的原型设计工具,只要能够写出相应的代码,它就可以把你的想法通通变成现实。

这一类工具功能虽然相对全面,但是学习成本被大幅提升,尤其是Framer JS,功能强大到使其他工具望尘莫及,但其学习成本也可以说是“十年磨一剑”。所以,想要熟练运用这一类工具,最好还是先掌握了足够的知识,再来尝试。

Framer JS:FramerJS.png

以上就是熊先生最近探索总结出的十款原型设计工具的推荐。每个人对原型设计的理解不同,对各类知识的掌握程度也不一样,还是希望大家能够根据自身的具体情况,多加琢磨,相信这十款工具中一定有一款是适合你的!

© 著作权归作者所有

jongde
粉丝 8
博文 260
码字总数 323940
作品 0
成都
私信 提问
加载中

评论(2)

cindy21
cindy21
Mockplus最近更新的新功能很实用呢。
请勿吸烟
请勿吸烟
为国产原型工具mockplus点赞
推荐给UX新人几款实用的工具

作为一名UX设计师,我们需要掌握一些必备的技能:从用户研究到原型设计,到产品沟通,到产品成形。特别是作为UX新人,可能不知如何下手。这篇文章将介绍一些实用、易学的工具。希望对你的UX职...

jongde
2016/09/01
30
0
推荐给UX新人几款实用的工具

作为一名UX设计师,我们需要掌握一些必备的技能:从用户研究到原型设计,到产品沟通,到产品成形。特别是作为UX新人,可能不知如何下手。这篇文章将介绍一些实用、易学的工具。希望对你的UX职...

jongde
2016/08/24
18
0
10款原型设计工具推荐

最近看到网上很多的文章在推荐一些与UI/UX设计相关的书籍和网站,熊先生想了想,决定写一篇推荐原型设计工具的文章,和大家一起分享一下。这一次我收集了10款工具,根据特点的不同,主要分为...

jongde
2016/10/20
35
1
看了这三个问题,你就知道UX设计师如何起步

如何成为一个合格的UX设计师,怎样才能从菜鸟转变为设计高手,每天都有无数的设计师思考着同样的问题。凡事要做好,必须得回答这三个问题:做什么?怎么做?用什么做?看了这三个方面的问题,...

jongde
2016/11/24
7
0
你应该知道的原型图工具Mockplus(摩客)

去年10月份,我发布了一篇短文《你所不知道的原型图工具Mockplus》,快大半年过去了,为什么又要写这款软件呢,我觉得有必要推荐给大家,和大家一起分享,它确实是一款简单高效的原型图制作工...

jongde
2015/04/14
260
2

没有更多内容

加载失败,请刷新页面

加载更多

搭建高可用MongoDB集群(分片)

搭建高可用MongoDB集群(分片) MongoDB基础请参考:https://blog.51cto.com/kaliarch/2044423 MongoDB(replica set)请参考:https://blog.51cto.com/kaliarch/2044618 一、概述 1.1 背景 ......

linjin200
9分钟前
1
0
CDH6.0.1集成tez-0.9.1计算引擎

参考文章: https://www.jianshu.com/p/9fb9f32e1f0f https://www.baidu.com/link?url=OgpwasnZi7H1dySN2T111sseEWDBaCCTC3DFV61G7756YbrkJCA8Y3UFaueyqnfN&wd=&eqid=daeb8b3500049cf3000000......

Sheav
11分钟前
1
0
Vue内置指令的使用

v-model(数据绑定) v-model常用于表单数据的双向绑定,它本质上是一个语法糖。它主要的有两种应用: 在文本框、多行文本、input的下拉框、单选按钮、复选框中的应用 <div id="app"> ...

凌兮洛
11分钟前
1
0
外部来源应用检查-烦死了,终于找到解决设置了

Android 连接usb调试应用的时候: 华为关闭方法:1、设置-安全-更多安全设置,关掉外部来源应用检查。2、设置-系统-开发人员选项-关闭“监控ADB安装应用” 不知道OPPO 怎么关闭的?...

QGlaunch
12分钟前
2
0
6个K8s日志系统建设中的典型问题,你遇到过几个?

作者 | 元乙 阿里云日志服务数据采集客户端负责人,目前采集客户端 logtail 在集团百万规模部署,每天采集上万应用数 PB 数据,经历多次双 11、双 12 考验。 导读:随着 K8s 不断更新迭代,使...

阿里云官方博客
14分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部