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的代码,但是它本身并不依附于特定的程序,所以你可以在任何时候任何地方轻松使用。

(0)

相关推荐

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

    之前我们提及新设计工具 的时候,常常会将它们视作为PS.AI这类传统劲旅的附庸,即使是日渐强大的Sketch也因为Mac平台独占而无法更大范围地替代PS的稳固地位.可是前赴后继的新设计工具 真的都那么 ...

  • 超全面!给零基础设计新人的交互设计学习资源

    想作为一名交互设计师,需要具备设计思维能力.协作沟通能力.设计价值提升等.多去思考问题,相信看到自己的成长和提升会是一件美好的事情,相信每个设计师都有各自不同的成长路径,也会经历不同的问题和解决. 什 ...

  • 2016年值得一试的七款原型设计利器

    2016年,你的设计软件更新了没?今天给同学们推荐7款原型设计 工具,除了经典的Axure,也有一些异军崛起的新利器,优缺点和价格都列出来了,按照自己的需求挑一款吧. 1. Axure PR 难度:★ ...

  • 小白入门交互设计成长指南

    想入门交互设计,又感到手足无措?对于0基础,又对交互设计感兴趣的新人来说,给大家对交互设计进行一些简单的梳理,希望能给你在学习交互设计的路上指明方向. 交互设计(英文Interaction Desig ...

  • 图解10款常用的移动界面原型设计工具

    首先,一款优秀的 移动APP界面原型设计工具应该具备: ①.支持移动端演示(随时随地演示给BOSS,厕所&食堂&电梯-以体现我是那么的敬业--长点工资必备) ②.组件库(高效复用,谁用 ...

  • 【新手指南】UI交互设计vs UI设计 vs 交互设计:有啥区别?

    UI交互设计到底到底是什么?我们常常听说UI设计,交互设计,那UI交互设计又是什么呢?难道是两者的结合?作为一名初入设计行业的或者对设计有一定热忱的人来说,搞清不同设计术语的定义真的非常头疼.别担心, ...

  • 十款Surface Pro 3最佳配件推荐

    对于微软最新的Surface Pro 3平板电脑来说,我们的感情非常复杂.不过有一件事是肯定的,那么就是作为一款售价超过800美元(约合人民币4980元)的设备来说,非常有必要进行好好保护一番.现在, ...

  • 十款iPad桌游类游戏推荐

    经典的棋盘类游戏具有永恒的魅力,并且在当今非常火爆的iPad平板电脑上发挥出了全新的特性,而桌游题材甚至要比以往更加吸引人.虽然和朋友们面对面坐在一起玩桌游类游戏是一件非常有趣的事情,但是这种机会现在 ...

  • 交互设计中的5项视觉指导原则

    来自UXPin的Jerry Cao,通过本文向我们解释了如何保持视觉与交互的协调. 我不想贬低文字的重要性,但也不想忽视视觉.两者是同等重要的交互设计元素.文字就是交互,但那些视觉元素(比如图标.菜单 ...