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

相关推荐

  • 【案例】菜鸟裹裹如何打造双11极致物流体验

    作者:CNUX设计实验室(菜鸟无线UED团队)   如往年一样,2016年的双十一如期而至。当大多数人都在关注、鼓励你买买买的时候,有多少人关心你盼望包裹的那种期待?有多少人能体会你等待包裹时的焦虑?有多少人理解…

    交互专题 2017-08-07
  • 做好用户体验,掌握这些要素就够(三)

    用户体验这系列的文章要素,已经写到第三篇了,前面写的两篇《做好用户体验,掌握这些要素就够(一)》和《做好用户体验,掌握这些要素就够(二)》,更多的是偏向交互设计。而从这篇开始,会更多的偏向情感,也就是从人的情感、欲望、感觉方面来聊用户体验。

    2017-05-17
  • 直觉设计:如何让网页更直观、易用【UXRen译#162】

    作者:Peep Laja(ConversionXL的创始人,世界上领先的转换优化专家之一) 翻译:方糖小姐,校审:小四   你的网站越容易使用,那么使用的人越来越多。“容易使用”的至关重要的一部分是直觉。那么直觉设计也就意味着当…

    交互专题 2017-08-07
  • Sketch 这几招你肯定不知道

    1.精确调整元素属性在点击元素属性旁的箭头时按住 alt 键可以以10px 倍进行调整,按住 option 键则是0.1px 倍。2.用对齐工具对齐锚点Sketch 中的对齐工具不仅可以对齐群组和图层,还能够对齐锚点,非常方便。3.导航栏文本状态调整与其为导航栏每一个状态都重新做一下,不如将导航栏中的所有元素转为一个符号(symbol),这一个符号中调整样式即可。如果要隐藏文字图层的话只需要在符号的对应文字中输入空格键即可。4.直接拖动...

    2018-04-26
  • 用户体验双语术语,附阿里招聘广场舞达人资深用研专员

    这两天朋友圈被一则特殊的招聘刷屏了。先看看关键词:年薪40万,60+,广场舞 KOL(意见领袖)优先!一时间,网友沸腾了。这则招聘发布于1月16日,来自阿里巴巴集团社会招聘网站。从招聘网页上看,阿里对此职位的描述是“淘宝资深用研专员”,全称“淘宝资深用户研究专员”。记者推算了下,大致为阿里P序列中的P6等级。岗位给出的薪水待遇还不低,年薪范围是35万~40万。感兴趣的小伙伴可以转给符合要求的人士哦!点击阅读原文就可以看到这则招聘了。今天...

    2018-01-30
  • 酱课程丨交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!

    上周,我们发布了交互设计师Eary Alan的第一期课程,最值钱的内容,就是这张指导交互设计师们工作流程的“双钻图”了(横屏观看)。从0开始到完成一个设计项目,都是两次发散(Diverging)和两次汇聚(Converging)的结果。Discover探索与调研属于发散型的思考,探索研究问题的本质1. 质疑 rip the brief对需求质疑,对商业模式质疑,对用户质疑,质疑一切不合理的事情。2. 故事/场景 cluster topi...

    2018-04-07
  • 乐观派UI:真实的谎言

    我真诚地希望,这篇文章能帮助你理解乐观派UI设计背后的核心观念。乐观主义,形容词,对于未来充满希望和信心。

    2017-05-15
  • 把握交互的第四维 — 时机关系

    日常的交互设计工作中,设计师在明确了需求目标、用户场景,搭建了信息结构之后,下一步便是构思如何让这些信息与用户之间产生有效的互动,而这就需要设计师将思路放在时间的维度上一步步的推进,这中间,便会产生许多关于“时机”问题的讨论。

    2014-12-28
  • 用通俗的方式告诉你什么是「交互设计」

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-11
  • [自译]Medium的Title,Subtitles&Headings的改进介绍

    我们的目标是创造一个能够提供最佳写作体验的空间,让故事的讲述者能够触及到他们的听众。现在,我们很高兴地展示我们在标题方面的提升,这个改变微小而又重要,我们认为你每次在发布文章后,都会会欣赏它。

    2016-08-10