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

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

Webflow

https://webflow.com/

$16/月 | Web app

6e1b5653gw1eo6k5w2orzj20m80hmjuh

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

Marvel

https://marvelapp.com/

免费 | Web app

6e1b5653gw1eo6k6i4ezoj20s10m8djg

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

Macaw

http://macaw.co/

$99 | Mac & Windows

6e1b5653gw1eo6k6tdgebj20s10m879e

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

UXPin

http://uxpin.com

$15每月| Web app

6e1b5653gw1eo6k74co6jj20rt0m7whr

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

InVision

http://www.invisionapp.com/

免费 | Web app

6e1b5653gw1eo6k7d20jhj20s10m8djm

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

Flinto

https://www.flinto.com/

$20每月 | Web app

6e1b5653gw1eo6k9inktfj20s10m8q7m

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

Quartz Composer

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

Origami

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

免费 | Mac平台独占

6e1b5653gw1eo6kabz1knj20s10m8wk4

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

Avocado

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

免费 | Mac平台独占

6e1b5653gw1eo6karswi6j20s10m841n

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

Framer.js

http://framerjs.com/

免费 | Javascript framework

6e1b5653gw1eo6kb7uc9fj20s10m8dmd

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

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/2879/

(0)
iouedioued
上一篇 2015-01-14
下一篇 2015-01-15

相关推荐

  • 【案例】LOFTER 信息框架改版(iOS版)

    对于一款APP的信息框架改版,可以分为以下几个步骤 竞品的信息框架分析 目的:找出差异点和共同点 作用:差异点可以根据产品的定位,做特色设计,成为产品特征;共同点是指同类产品的框架/布局共同点,可以用来寻…

    2016-07-01
  • 使用Axure制作出信息化风格的精美简历(提供模板源文件下载)

    最近又到了每年“金三银四”的求职旺季,相信这段时间很多同行朋友们也正在找工作。在求职的过程中简历是非常重要的一块敲门砖,设计精美的简历能帮助你获得更多引起招聘人员注意的机会。如果我们能花点时间从设计感方面来包装一下自己的简历,这样既能体现自己的求职态度,又能展示出自己的专业细节,相信能让大家的简历增色不少,所以今天这篇分享我将教大家如何使用Axure制作出信息化风格的精美简历。从正式分享之前我需要先说明为何要使用Axure来设计简历,而...

    2018-03-24
  • 如何进行可用性启发式评估

    经验分类: 经验/观点 / 自译外文 原作者: Armen Ghazarian 用户体验只有在渗透入从创意到开发测试等产品开发的各个阶段时才能发挥最佳效果。当通常来说事情没这么简单,用户体验专家需要反复对已经完成的产品进行…

    2014-10-30
  • 为什么交互设计师总觉得自己的方案不完美?

    最近和一个交互设计师闲聊,聊到了关于对自己设计产出物的满意度问题,感触颇深,专门整理了一下分享给大家。

    2017-04-29
  • 产品设计师的自我重启

    有几个月没喝威士忌了,半年都有了,今天又捡起来了。这两周因为喵的事焦虑万分了,恢复的不太稳定,几乎每天都有不同的状况,让人揪心。揪到后面自己也不好了,各种代表焦虑的梦算是梦了个一溜够。那么让自己放松…

    2014-12-13
  • 快速用 Sketch 绘制30个图标

    长得好看的人都已关注操作分解:一个正方形,两个同等直径的圆形即可完成,最后旋转多选矩形 Edit 后可以一起改圆角正方形不停地裁剪一个椭圆加长方形,复制即可圆角矩形加两个不同大小的圆合成小矩形旋转角度,最后拉下 Radius 即可选中锚点删掉,调下倾斜度,复制合成添加锚点一拉一调添加左右两个锚点的时候放大比较容易处理号细节锚点的 radius合成后记得 Flatten 下,就可以选择锚点加 radius添加钢笔锚点,并且 Show Gr...

    2018-04-09
  • 2017年视觉设计的六大趋势

    我们在去年的趋势基础上进行筛选提炼,在历时两周的最终定义阶段之后,整合出一份2017年的设计趋势分析报告,希望能给各位从事并热爱设计的同学们带来一些启发和帮助。

    2017-05-09
  • 想成为云计算交互设计师,该具备哪些能力?

    最近有不少设计师会跟我聊到,做云计算的交互设计 与其他设计师有什么区别吗?我其实也不知道怎么回答,能够记起的最后一次 TC 类的项目已经是两三年前在学校的时候了,工作以后一直在做云计算的产品,没有太深入体验做其他的产品,我真的还不太能说出有什么区别。

    2017-08-28
  • 个性化赋能电商转化率的四个基本方法【UXRen译#173】

    作者:DAVID MANNHEIM |  翻译:xiuxiu,校审:Gogi   相关性可以提高用户体验,这不是什么秘密;用户体验的改善能带来转化率的提升,从而进一步提升用户忠诚度和留存。 那么问题来了:如何提升相关性? 答案在于个…

    交互专题 2017-08-07
  • 设计产品的第一个环节:定义方向策略,有理有据做设计

    本文作者将来聊聊设计产品的第一个环节——定义方向策略,这是后续设计的大前提和指导方针。我们需要从老板、产品/运营、用研及设计团队分别获取有效信息,进行分析整合,以得到正确、完善的方向策略定义。

    2017-05-13