2014年国外最佳的十款交互设计工具,25款新鲜出炉的实用网页设计工具大合集

工欲善其事,必先利其器,对于设计师而言尤其如此。好工具对于整个设计的加成是相当明显的。不同的工具配合不同的设计流程和设计对象,对于效果和效率的提升都有显著的效果。

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

让我们看一下目前可供网页设计师选择的一些原型工具,排名不分先后:

随着设计和开发壁垒的逐渐模糊,最新的设计工具也开始试图融合设计和开发的流程,而免代码开发的拥簇则将更多的精力投放到无代码平台的研发上去了。今天我们所搜罗的新工具,包含了不少针对网站和APP的原型设计工具,另外一部分则是测试工具。这些工具中一部分已经发布有一阵子了,但是因为版本一直持续更新,非常值得一用,它们也姑且算是新工具吧!接下来,让我给你一一介绍吧。

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

  1. Framer
  2. Adobe XD
  3. Adobe After Effects
  4. Adobe Animate CC
  5. Craft Prototype
  6. Principle
  7. Atomic
  8. Proto
  9. JustinMind
  10. Origami
  11. Flinto
  12. Webflow
  13. Marvel App

设计工具Macaw Scarlet

Webflow

最初向项目相关人员或者客户提出想法看似不费吹灰之力,但是当事情变的困难的时候,我们就需要借助工具来帮助加速反馈进程。对于前端设计师来说网页正在变的越来越复杂,需要引入更多的交互需求。像拖拽(drag)与轻扫(swape)这样的动作仅仅是冰山一角,弄清楚如何将整个拼图拼凑到一起才是真正的原型交互艺术所在。

图片 1

| Web app

原型的适合场景

顾名思义,“原型”是用来测试特殊概念的早期样本。原型用来评估和提升系统以便从全局角度来更好地洞察项目。我们每天都会做项目,其中一些要比另外一些更为错综复杂,但是什么时候才需要使用工具来帮助我们实现反馈食物链的援助呢?

有些人认为代码可以更快的开始,但是有时候与其花费时间写那些有可能付之东流的代码,不如花时间使用一个原型。原型为交互和放置提供反馈。它是一个交互线框图,让客户更好的理解项目是如何整合到一起呈现给用户的。

另外,在写代码之前做原型可以通过找出任何可能错过的边缘情形帮助项目受益。

Macaw Scarlet
之所以出现在这个列表当中,是因为这款工具还没有正是发布,但是非常值得期待!这款被称为实时设计环境的工具会让大家设计响应式网页和APP更加方便。

图片 2

原型制作以及网页设计场景

当我们问自己当今的场景设计在什么地方更为应景,我们肯定会归功于动效工作需要的日渐兴起。界面随着交互内容的出现更为生机勃勃。简单的交互可以进行老套的口头解释,但是在其他一些情形下,它有助于获得交互如何被触发的观点,并且客户现在需要在签收认可之前看到这些概念的验证。现在比以往任何时候,对于在哪里,在什么时候需要出现原型的想法都尤为重要。

目前市场上众多可用的工具,哪一款是你应该使用的?让我们来看看。

Wagtail

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

1. Framer

图片 3

  • 高级许可:$15/每月 (仅限Mac)
  • 企业许可: 联系开发团队

Framer借助熟悉的可视化灵活代码编辑,通过设备预览,版本控制以及简单化的分享,提供了一套连贯的工作流程。这是一款帮助开创全新交互模式来创建革新应用的程序。从你喜欢的API调入数据,捕捉真实的用户输入进行测试,以及与实际用户协作并获取反馈。可以从
Sketch,Photoshop 以及 Figma 直接导入图形。

尽管 Framer
可能看上去像是直接服务于移动app的,但是它也可以用于非app项目,或者作为独立的库使用。当单独使用
Framer
JS库的时候,你可以完全避开IDE。本质上它是一款开源的用来进行快速原型开发的Javascript框架。可以定义动画和交互,使用筛选器完成动作,弹性物理引擎,3D效果以及更多。尽管
CoffeeScript 不是必须的,但是文档中使用了 CoffeeScript 以及 IDE。

你应该清楚,Framer
并不意味着可以用来创建满足各种生产环境(production-ready)的动画。

@UXDesignDad
@framer
嘿,Andre! Framer 是Mac上的一款原型工具。因此没有生产力应用。

— Krijn Rijshouwer (@krijnrijshouwer)
2017年2月2日

由于 Framer
有自己的独立的图层概念并且重度依赖代码,你不能在纯(现有的)DOM中使用它,比如像你可能在GreenSock上做的那样。事实上,它在DOM中有自己的独立的画布,所有的动作都是在这个画布中运行。

  • https://framer.com/features/handoff
  • https://framer.com/getstarted/guide
  • https://framer.com/pricing/2017
  • https://framer.com/getstarted/import

图片 4

Marvel

2. Adobe XD

图片 5

Adobe XD

  • 价格:需要 Adobe’s Creative Cloud 账户

绘画,再利用,以及混合矢量图形及光栅影像来创建线框图,屏幕布局,交互原型以及满足各种生产环境(production-ready)的资源全都来自同一款应用。使用强大的工具进行UX设计,比如XD独有的重复网格(Repeat
Grid)工具,图层(layers),元件(symbols),以及钢笔工具(pen
tools)。使用不同的动画交互来创建画板之间的转场,从而进行app应用或者网站的流程模拟。

当你直接进行分享的时候,客户可以直接在你的原型上进行批注,并且可以在实际设备中进行实时预览。调整设计可以在不同平台上进行自动更新。线框图,视觉设计,交互设计,原型,预览以及分享可以轻松切换,非常强大的一体化工具。

虽然XD仍然是一款测试产品,但是如果它会为可预见的未来进行持续开发的话,我们还是拭目以待的。你可以从这里阅读更多关于功能的发布,包括即将带来的变化和增强功能。我们甚至发表了15个系列课程,覆盖了所有你需要开始使用Adobe
XD进行设计和创建原型的基本工具。

Wagtail
并非是设计工具,而是一套内容管理系统(CMS),它的特殊之处在于这套系统包含了设计流程,尤其是针对内容的设计。

免费 | Web app

3. Adobe AfterEffects

图片 6

  • 价格:需要 Adobe’s Creative Cloud 账户

After
Effects
不是一款专门为网站和应用开发的原型工具,但是它的确可以帮助那些寻求某种方式为客户进行动效模型绘制的人创建原型动效。为视频创建运动图形或者为网页创建动态效果。Tuts+
上有一篇 Charles Yeager 写的非常棒的文章:

Also checkout this ten part series on Tuts+ called Welcome to After
Effects.

它有一个梦幻般的功能,叫做Streamfield,它的工作原理接近于Medium的内容编辑器,不同之处在于它更加易于定制化,功能也更加完备。

图片 7

4. Adobe Animate CC

图片 8

Adobe Animate CC

  • 价格:需要 Adobe’s Creative Cloud 账户

Adobe Animate 是
Flash专业版的进化。它包括这些功能,比如时间线,帧,大量的导出选项,支持第三方JavaScript库,摄像头定位调整以及更多。虽然它更多的对准动画师,但是不要愚蠢的以为它不能用于其它需求。记住,这个工具只有你想不到的,没有它做不到的。使用它绘制网站线框图,为app进行动效测试以及更多。你可以仔细读一下关于Adobe
Animate内部工作原理的这篇文章:

Magic Mirror for Sketch 3

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

5. Craft Prototype

图片 9

Craft Prototype

价格:免费。需要Sketch,99美元

使用高保真原型创建你真实的设计文档。Craft属于Invision家族;一家拥有许多来自于外部工具(比如
Macaw 和
Easee)的实体公司。

Craft
Prototype
是一款强大的工具合集,可以让你使用真实的数据进行设计,一键创建样式指南。你可以在Sketch工作区的右侧进行原型创作,全都是一个空间里。通过实时连接你的手机同步测试你的设计原型。当你准备好进行分享的时候,你可以直接发布你的作品到Invision,即时获取你的用户或者团队成员的反馈。它甚至可以让你制作及其精准的动效,通过使用带有帧的时间线进行视觉上的调整。生成HTML及CSS,原生的swift代码,以及给开发者的文本。观看Vimeo上的这个短视频
Craft 2.0 预览 –
在sketch中进行原型创作
了解更多。

图片 10

Macaw

6. Principle

图片 11

  • 价格:$129.00(仅限Mac)

Principle
让设计动态和交互的用户界面更为容易。无论你正在设计一款多屏App的流程,还是全新的交互和动效,Principle都会让你创作设计的时候倍感惊喜。这款应用和sketch的界面非常类似,包括熟悉的对齐,画板创建,屏幕连接,以及实时预览。点击动作图层可以深入到帧以及调整自定义缓动曲线,就好像你在其它动画工具中那样。Principle通过不限制你的预设过渡带给你一种非常自由的体验,并且你可以从Sketch直接导入画板。

Principle
Mirror
是一款iOS应用,可以让你在其它设备上查看你的设计。当你做设计的时候,你可以将设备连接到你的电脑上进行即时交互,或者导出到一个独立的Mac应用让其他人查看。

这个名为Magic Mirror的工具是为Sketch
3的用户所准备的,它可以帮你将一系列智能对象所构建的原型融入到照片中去。

$99 | Mac & Windows

7. Atomic

图片 12

Atomic

  • 新手:$15/每月
  • 专业:$25/每月
  • 无限:$25/每月

Atomic
是一款网页应用,与Sketch整合,允许你按需从任何地方导入设计。将设计导入Atomic非常简单,使用强大的SKetch插件或者从你喜欢的设计工具中直接拖拽过来。

Atomic
有内建的绘画和布局工具可以让你从头进行设计或是基于导入的设计进行继续创作。使用一系列的手势和过渡快速连接你的移动或桌面端设计。使用自定义的CSS应用额外样式并且可以导出CSS分享给其他开发人员。你可以到他们的网站上阅读更多关于Atomic的特性。

线框图工具Wire Flow

图片 13

8. Proto

图片 14

Proto

  • 自由职业:$24/每月
  • 创业公司:$40/每月
  • 代理公司:$80/每月
  • 公司:$160/每月

使用Proto易用的时间线可以创建精准的动画给任何交互设计模式。这款应用内置一系列UI库,如iOS9,Material
Design,Windows
10以及更多。可以通过Sketch或Photoshop插件导入设计,导入图层并和Dropbox进行同步。直接导出UI资源。使用iOS或者Android版本的Proto应用在浏览器或者设备上预览原型。与客户或者团队成员共享协作与反馈。Proto集成领先的用户测试工具来获取强大的反馈与洞察力。

可以前往 Proto
网站了解更多特性。

图片 15

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

9. JustinMind

图片 16

JustinMind

  • 专业版:$19/每月
  • 企业版:联系开发团队

JustinMind是一款基于app的产品,将简单的视觉稿转换成iOS和Android的动态交互原型。得益于内建的UI库,内嵌HTML和文档,你可以随心所欲创建任何内容。付费账户允许多用户同时协作同一原型,获取回馈毫不费力。它甚至还有一个为设备模版量身定制的预设小部件的扩展库供你的项目选择。诸如交互按钮,复选框,列表甚至视差效果布局等元素都可供你使用。

如果你是初次接触此款工具,你可以查看这个非常棒的全套教程引导视频,它可以帮助任何人从新手成为专家。虽然它提供免费计划版本,但是如果你想和你的团队成员进行线上协作,你就必须升级到付费账户。使用JustinMind
原型工具你可以从任何设计工具导入图片,或者直接从网页浏览器导入,通过
”image hotspot“
工具将它们转化成令人振奋的网页原型。导出你的原型到具有完整功能的HTML文档并且可以在任何浏览器中进行查看。

  • https://www.justinmind.com/features

作为一款对绘图并不友好的平板而言,线框图工具Wire
Fow是如此的好用,可以说让我的老平板重生了过来。这款几乎可以满足你所有线框图绘制需求的工具,可以在手机、平板上运行,并且拥有良好的可视化的编辑功能,简直是业界良心。

UXPin

10. Origami

图片 17

  • 价格:免费,仅限Mac

Origami是为Facebook设计师们建造和使用的,它已经用来创建诸如Instagram,
Messenger 和
Paper这样的应用。从Sketch拷贝并粘贴原始图层到Origami。快速调整,添加行为,并且为任何图层添加动效。该工具为设计师提供了一系列UI模式通用的手势和过渡动画。

Origami为交互原型提供了有用的功能,具备Sketch和Photoshop插件,并且在论坛里有一套完整的文档库。

这里有一个 “导出到代码” 的功能可以将你的设计转换成可用于iOS, Android,
或者网页的代码样例。你只能在你自己的设备上进行原型分享,但是你可以通过Origami
Live预览你的原型,这款应用提供Android和iOS版本。前往Origami网站查看更多教程。

Apple Watch wire-frame kit

$15每月| Web app

11. Flinto

图片 18

Flinto

  • 免费14天试用
  • 基于网页的Flinto简版,订阅费 $20/每月
  • Mac应用:$99

Flinto
Mac版本是一款基于App的工具,容许你创建任何内容,从简单的触碰原型,到复杂的具备交互功能的原型。没有程序和时间线,这是一款专门以设计师为核心的原型创建工具。根据你的意愿放置你的物件和组件。过渡效果可以简单也可以复杂,并且是可以再利用的。你可以精确控制每个图层,包括spring或cubic-bezier曲线。

使用 “behavior designer”
工具创建存在于同一屏幕内的微交互。这个功能对于像按钮效果,切换,循环动作以及基于滚动的动画非常棒。

在你的屏幕上添加滚动区域也非常容易;选择图层,点击“scroll
group”按钮。你可以修改不同的选项,创建页面滚动群组,嵌套滚动群组,甚至创建基于滚动的动画。

所有你在Flinto
Mac版本中的改动都可以在预览窗口中进行即时测试,或者通过免费的iOS预览软件在WiFi连接的环境下在iPhone或iPad中查看。

Flinto iOS预览应用可以在App
Store中免费下载,这样你就可以将你的Flinto文件发送给任何你需要共享的人。

  • https://www.flinto.com/mac
  • https://www.flinto.com/tutorial_videos
  • http://blog.flinto.com

图片 19

图片 20

12. Webflow

图片 21

Webflow

  • 新手:免费
  • 简化版:$16/每月
  • 专业版: $35/每月

Webflow
是另一款基于网页的应用,可以直接在最新版本的Chrome和Safari中运行。这意味着该应用为这些浏览器进行了优化,但是创建出来的代码是跨浏览器支持的。

“无需编写代码创建动态,响应式的网站。一键启动,享受快速,最值得信赖的主机。导出简洁,语义化的代码给开发人员。”

Webflow重度聚焦于网页动画,交互以及响应式网页设计。Interactions 2.0
即将发布,并将提供基于跨断点(通常是设计师的痛点)的动画和交互的更多控制,当然还有创建视觉和代理代码的易用性。

为了让你见识一下Webflow的可能性,请查看这个在线视频,也可以在Webflow中预览,或者在Codepen演示中查看具体代码。你也可以观看该视频体会一下UI的好处。

生成的代码是具有语义的,简洁的,如果你要导出用于外部使用或者交给开发者也很容易上手。这里有一些示例展示生成的代码。

目前 Interactions V1 版本正在使用中,而 Interactions 2.0
版本将带来更多可自定义的视差类型动作以及视觉交互,还有基于鼠标/实时滚动位置的动画。Webflow希望能够尽快发布测试版本,这样
Interactions 2.0
将会成为界面上一个很大的组成部分,也会成为许多设计师和开发人员使用Webflow的重要诱因。

  • https://wishlist.webflow.com/ideas/WEBFLOW-I-17
  • http://3d-transforms.webflow.com
  • https://webflow.com/prototyping
  • https://webflow.com/feature/interactions-v2
  • https://interactions.webflow.com
  • https://flexbox.webflow.com

感谢来自 Webflow 的 Waldo Broodryk
抽出时间回答我的众多问题,并且分享了他的示例以及知识。

这是一套Apple Watch的线框图工具,多的就不用介绍了!

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

13. Marvel App

图片 22

  • 免费版:1人,2个项目
  • 专业版:$12/每月
  • 企业版:$48/每月

Marvel
是一款基于浏览器的编辑器,允许你将所有的设计关联起来,添加手势和过渡让你的原型更像一款真实的应用或者网站。为iPhone,
iPad, 桌面端, Apple TV, Apple Watch 以及Android创建原型。

Marvel具有这些特性:协作,评论,使用“Canvas”在浏览器中进行设计,使用Photoshop,
Sketch或者笔和纸添加图片。用户可以点击并且拖拽来创建设计中的交互热点,当这些设计被点击或者触碰的时候会做出反应。Marvel还有一些其他非常酷的特性,比如Sketch插件和iOS工具。iOS应用现在包括了Canvas(之前提到的),Marvel的快速设计工具可以让你从头创建一款app应用视觉稿。这款应用还包括
Iconfinder 和
Unsplash,供你使用成千上万的图片以及图标应用到你的设计中去。

Marvel 还具备这些特性:用户角色,使用文件夹组织项目,使用Google
Drive同步设计,以及使用选项从YouTube, Spotify, Vimeo 和
SoundCloud嵌入视频和音频。

  • https://marvelapp.com/design
  • https://marvelapp.com/features
  • https://marvelapp.com/sketch

PowerMockup

InVision

总结

无论你决定使用哪款工具,记得一定选择一款你用起来最舒服,最适合你的。如果你对如上提到的这些工具有什么可以帮助用户进行选择的经验,请在下方留言。我希望这篇文章可以帮助你获得更多的洞察力并且在你需要选择工具的时候能够做出专业的选择。

特别感谢如下人员在我研究期间提供的输入,知识分享以及观点:

  • David K
    Piano
  • Val Head
  • Waldo
    Broodryk
  • Stephen
    Shaw
  • Christopher
    Wallis
  • James
    Traggianese
  • Suresh
    Selvaraj
  • Will Phillips
    Jr.
  • Iván
    Uruchurtu

以上译文仅代表原作者观点。

原文作者:Dennis
Gaebel
原文链接:地址
原文译者:Twitter
/
Linkedin
/ 微博

本文为本人在Tutusplus官方许可的中文(简体)原创翻译,如需转载请遵循CC版权协议正确标明出处。

图片 23

免费 | Web app

为苹果的Keynote所定制的线框图工具已经不止一款了,但是为PowerPoint设计的这类工具并不多,而PowerMockup
就是这样的一款工具。

图片 24

原型工具Origami

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

图片 25

Flinto

Origami是一款Facebook发布的原型工具,他们是这样描述它的:Origami
是一款免费的工具,用于设计现代的用户界面。它可以帮你迅速组件原型,在iPhone和iPad上运行,迭代升级,并且导出开发可用的代码。

$20每月 | Web app

Marvel

图片 26

图片 27

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

这是一款非常简单的原型工具,即使是免费版都可以帮你制作一个非常不错的APP原型。它集成了Google
Drive和Dropbox并且允许你将指定的图像组合到一起,快速制作APP原型。也正是这种云端同步的方式,你所制作的原型也可以快速地传递到云端,让你的原型实时更新。

Quartz Composer

Protosketch

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

图片 28

Origami

Protosketch
是一款为iPad所设计的原型设计APP。其中包内置了一套包含大量组件的 UI
Kit,基本的矢量编辑工具、对齐工具等等也都具备。

免费 | Mac平台独占

虽然它只适用于iPad并且处于测试阶段,但是这可能是这个平台上你最好的选择。另外,它可以超出SVG和PDF格式的文档。

图片 29

Frontify

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

This entry was posted in 摄影专区 and tagged , , , , , , , , , , , , , , , . Bookmark the permalink.

发表评论

电子邮件地址不会被公开。 必填项已用*标注