2014年最佳的十款交互设计工具

   几年前交互设计师还是一个不明觉厉的工作,而现在,交互设计师和UI设计师一同战在设计最前线。UI设计师们拥有经典的PS和先锋的Sketch来开疆拓土,相比之下交互设计师这个新兴的职业还没有比较统一的设计工具。不过,交互设计社区的成熟催生出越来越多功能完善的新工具,也使得2014年成为了交互设计工具之年。

  在设计之初,UI设计师所提供的视觉稿和最终的可交互原型之间,需要交互设计师借助工具来补足,让静态的视觉转化为富有生命力的可交互界面。2014年所涌现出来的这些交互设计工具,在不断迭代升级中走向了成熟,易用性和可靠性得到了明显提高。如果你是一名交互设计师,这些优秀的交互设计工具里面总有一款符合你的需求,彻底告别说明靠吼、交互靠手的蛮荒时代!

  Webflow

  https://webflow.com/

  $16/月 | Web app


  WebFlow是一款 web app,你可以直接在浏览器中完成网站的视觉和交互设计,还包括实时预览和代码编写功能。WebFlow的编辑器界面友好,所见即所得,设计师拥有完全的控制权。WebFlow一直在持续更新功能,包括Web字体,视频支持,交互的状态,W3C标准化,乃至于主机托管。

  Marvel

  https://marvelapp.com/

  免费 | Web app


  Marvel是一款免费的原型设计 Web 应用,可以进行网页设计和移动端的UI设计。和WebFlow一样,你可以使用Marvel完全在线完成设计,并且可以和你的Dropbox同步,可以方便你进行共享或者分享。值得一提的是,Marvel 支持PSD格式文档,也就是说你的视觉稿无需转换格式就可

  Macaw

  http://macaw.co/

  $99 | Mac & Windows以使用。

 

 


  Macaw 是一款桌面端的所见即所得的设计工具,实时代码预览,便捷输出。比较独特的是Macaw可以创建响应式设计,内置的断点编辑器可以帮你轻松地在不同尺寸的屏幕上实现完美的响应式显示。尽管Macow中的代码编辑功能并没有太大必要,但是最新版的Macaw在HTML和CSS代码编辑上体验还是蛮好的。

  UXPin

  http://uxpin.com

  $15每月| Web app


  UXPin 是一款比较著名的设计类的web应用,用户可以借助UXPin在线协作完成线框图和原型的设计。UXPin旨在帮设计师快速便捷地进行线框图和原型设计,拥有完备的版本管理,支持响应式设计,通过拖拽预制控件进行UI设计。

  InVision

  http://www.invisionapp.com/

  免费 | Web app


  InVision 并不是一款严格意义上的交互设计师工具,InVision 可以帮助设计师和设计团队更加高效地做原型设计。在制作原型设计的时候,InVision可以让你创建互动活动,添加静态图像到活动中,便于和同事、用户交流,获取反馈。与此同时,InVision拥有完备的项目管理功能,团队协作完成原型设计。

  Flinto

  https://www.flinto.com/

  $20每月 | Web app


  Flinto 可以帮你创建可交互式的设计原型,并且可以在网页和移动端设备上运行。设计师可以在Flinto中使用静态图片创建原型,按照自己的想法令其旋转、与之互动。

  Quartz Composer

  Quartz Composer是一款图形化的编程工具,专门用来生成各种动态视觉效果,包括可交互的界面原型。作为一款图形化的编程工具,设计师同学在制作可交互原型的时候,可以省去很多麻烦。最近Facebook和IDEO也为之提供了专门的库,使得程序和原型的开发更加方便。

  Origami

  http://facebook.github.io/origami/

  免费 | Mac平台独占


  Origami 就是Facebook 为Quartz Composer专门提供的素材库,Facebook 的设计团队正是借助它实现了自家程序在移动端设备上运行原型设计,测试动效,交互等等。Origami 可以近乎完美地帮你制作高保真可交互的原型,但是无法生成可用的代码。

  Avocado

  http://labs.ideo.com/2014/05/27/avocado/

  免费 | Mac平台独占


  和Origami一样,Avocado是IDEO针对Quartz Composer所制作的库,用来模拟常见的移动端设备的交互。Origami 专注于交互和动效,而Avocado则更侧重于替代常用的UI元素,比如你可以无需任何代码就可以在原型中将iOS默认的键盘替代掉。

  Framer.js

  http://framerjs.com/

  免费 | Javascript framework


  Framer.js 是一款JS框架,用来制作动效触发事件的原型。Framer拥有许多功能,其内置的生成器能够读取PSD文档中的图层,并且将其中每组图层都输出成为单独的项目。Framer能够识别HTML、CSS和Javascript的代码,但是它本身并不依附于特定的程序,所以你可以在任何时候任何地方轻松使用。

时间: 2024-10-28 16:37:29

2014年最佳的十款交互设计工具的相关文章

十款逆天级效率工具盘点:环信移动客服上榜

在当今移动互联网创业环境里,好的创业项目在半年至一年时间里应该可以拿到A轮了.既然你是一个创业公司,要么快速"干"起来,要么赶紧去"死",半死不活的运行着浪费公司所有人的时间,毕竟时间是创业最大的敌人. 越来越多的公司和个人也开始愈加注重效率的提升.工欲善其事,必先利其器.现在就结合互联网创业公司的实际工作场景和需求,给大家分享一些能大大提高工作效率的工具神器,这些工具能从梳理工作思路.团队协作.产品原型图设计.数据统计分析.销售与客服等各方面提高创业公司的工作效率

2014年最流行的交互式原型设计工具

作为专业从事设计工作的设计师来说,在选择交互和原型设计工具方面他们通常有着最为宽广的视野和最为灵敏的嗅觉.而作为新型的发行和交流平台,Medium为设计师们提供了从模型到工作原型的崭新视界.在增长见地的同时,设计师们可以取长补短,相互学习.以下是笔者对3721.html">2014年上半年流行的交互式原型设计工具的一个简单总结. Webflow (16美元/月,Web应用) Webflow是一款用于设计浏览器上的网站的工具,通过它设计出来的网站生动且完全实现编码.Webflow友好的&qu

让你的设计更加高效便捷的5款原型设计工具

原型是整个产品面市之前的一个框架设计,它就好像建筑师的设计图纸一样重要,设计师可以利用它直观体现产品主要界面风格以及结构,并展示主要功能模块以及页面和组件直接的相互关系.举个例子,一个下拉菜单,通过原型设计,你可以直观地感受到每次点击或者鼠标划过时菜单如何响应.一款优秀的 原型设计 工具不仅可以提高设计师们的工作效率,也可以让他们根据客户的不同需求设计出不同版本的原型设计. Axure Axure RP是美国Axure Software Solution公司旗舰产品,它是一款专业的原型设计工具,

搜狐设计师:聊聊我常用的一套交互设计工具

  刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出,所以完成基本工作的同时也在积极寻找.学习适合自己又和工作环境相匹配的工具.与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物.这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍. 随着移动互联网的快速发展,很多针对移动端开发的工具层出不穷,这些工具的小.快.针对性强的特点在一定程度上对产统设计工具造成一定的冲击. 下面介绍自己常用的一套设计工具和在配合项目

最受欢迎的十款 AngularJS 开发工具

AngularJS 是 Google 推出的一款 Web 应用开发框架.它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定.DOM 操作.MVC 设计模式和模块加载等,同时也是那些想要以动态形式开发 Web 应用的开发者最喜欢的框架之一. 作为一个为动态 Web 应用设计的结构框架.AngularJS 能让你使用 HTML 作为模板语言,通过扩展 HTML 的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用数据绑定和依赖注入,它使你不用再写大量的代码了.这些全都是通过浏览器端

史上最全的43款字体设计工具大集合

  01. PicLab 利用照片编辑器,快速给照片添加流行的字体. 平台: iOS (iPhone and iPad), Android PicLab 能够利用应用内建的照片编辑器,快速给照片添加流行的字体.可选字体很多,还可以调整位置.不透明度.旋转角度.颜色.装饰等等. 02. A Beautiful Mess 为照片加上漂亮的字体装饰. 平台: iOS (iPhone and iPad) 可选字体很多,效果也很多 03. Typography Live Wallpaper 这款应用内含A

十款 UX 设计应用工具,总有一款你需要

目前市场上有很多好的多功能设计工具,但即使你已经尽量缩小关键词去搜索,可是仍很难找到合心意的.你需要寻找最适合自己的,在做出选择之前你需要问自己几个问题.这样做可以帮助你最快的找到自己想要的工具. 特征:选择那些你知道你需要的功能,避免选择的工具有过多多余的花哨的功能.因此,这是一个曲折的学习过程. 功能:你是以网站,手机应用还是桌面应用为原型的,还是包括所有这些. 交互性:确保你的选择支持这种重要的设计. 团队规模:对于大型团队,或者大型项目的团队,你需要具有强大功能反馈的工具. 当然还有其他

十款前景无限的新兴设计工具

  之前我们提及新设计工具 的时候,常常会将它们视作为PS.AI这类传统劲旅的附庸,即使是日渐强大的Sketch也因为Mac平台独占而无法更大范围地替代PS的稳固地位.可是前赴后继的新设计工具 真的都那么鸡肋么? 不知不觉之间,大局的天平正在逐步倾斜.著名的美国设计师Khoi Vinh 近期拿出的一份调查报告显示,新的设计工具正越来越受到设计师们的喜爱,相应的,老牌设计工具Photoshop 受欢迎程度则有所下降.这份调研的参考数据,是来自200多个国家超过4000名设计师所提供的,这些新兴的工

干货:推荐十五款APP原型设计工具

我们知道,一款优秀的移动APP产品原型设计工具应该具备以下特点: ①.支持移动端演示(随时随地演示给BOSS,厕所&食堂&电梯-以体现我是那么的敬业--长点工资必备) ②.组件库(高效复用,谁用谁知道) ③.可以快速生成全局流程(程序猿看不懂拆解的,给丫的看这个) ④.在线协作(多个PM狗一起用) ⑤.手势操作.转场动画.交互特效-(这些都不需要,留给专业的交互.视觉,搞那么虚的不如多想想产品流程逻辑做做减法.写写xxRD啥的) 以下逐步介绍那些我们势必要折腾的原型工具们: 1. POP(