姗姗来迟的总结！2014年最佳的十款交互设计工具

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

编者按：几年前交互设计师还是一个不明觉厉的工作，而现在，交互设计师和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的代码，但是它本身并不依附于特定的程序，所以你可以在任何时候任何地方轻松使用。

【交互设计学习指南】

掌握大屏时代的交互重塑规律：
《防砸脸指南！大屏时代如何重塑界面交互？》

从低保真模型开始做交互设计：
《过稿有诀窍！超全面的低保真原型初级指南》

交互设计师每天的工作是怎么样的：
《向前辈学习！交互设计师每天是怎么工作的？》

原文地址：medium
木子设计网译者：@陈子木

本文由木子设计网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【木子设计网 原创文章 投稿邮箱：13671295@qq.com】

================关于木子设计网================
"木子设计网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：https://www.muzisucai.com/。
设计微博：拥有粉丝量88万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：https://www.muzisucai.com/
官方微信：想在手机上、被窝里获取设计教程和各种意想不到的"福利"吗？添加优设哥微信号：muzisucai_com