恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
2014交互设计工具革新之年
0.0°
2014-06-16 自译外文 经验/观点 原作者: Emelyn 举报 57621 205 66 4

2014 ,交互设计工具革新之年

新兴原型设计与交互设计工具简介

2014年还剩下6个月,在这一年里,我们见到了很多新颖的交互设计工具和原型设计工具。工具旨在提高我们的工作效率,改善我们的工作流程,诸多新兴的工具造就了相关的讨论团体和设计,且这些工具,大大缩短了设计成本,现在,高保真的原型设计更简便了。


 Pixate 即将到来,这里,我将做一个简明的介绍,给各位引荐一下这些正当年的交互设计工具。



Webflow

https://webflow.com/
$16+ /月| 网页应用
“浏览器内设计”,这个名词想必大家不会陌生吗?没错,最近这种理念超火,Webflow就是这样的一款网页应用,让用户在浏览器内进行网页设计,实时预览,且可以编码。Webflow的编辑器非常友好,所见即所得,让设计师可以全盘操控设计,且输出非常方便,可在手机上查看效果。

Webflow 正在持续添加功能中——Webfont,视频支持,交互状态等等


相关文章:

下一代网页设计工具:Webflow、Edge Reflow、Macaw测评》(英文)


————————————————————————————————————————————————————


Marvel

https://marvelapp.com/
免费 | 网页应用
Marvel是一款专攻网页设计和移动端设计的原型设计网页应用。利用Marvel,可以在网上便可完成全部的交互设计工具——可通过Dropbox进行同步。Marvel还支持PSD文件——这样,无需转换格式,就能快速开始原型设计。


————————————————————————————————————————————————————

Macaw

http://macaw.co/
$99 | Mac & Windows应用
Macaw是桌面端上的所见即所得的设计工具,非常便于成果产出。 令人印象深刻的有以下几点:

1.内置响应式断点编辑器,可便捷设置不懂屏幕尺寸下的页面布局

2.无需编码,自上而下设计即可,自动生成前端代码,只需一点点HTML CSS知识


相关文章:

次世代网页设计工具Macaw教程


————————————————————————————————————————————————————


InVision

http://www.invisionapp.com/
免费 | 网页应用


InVision严格意义上讲并不是交互设计工具。InVision被用于原型设计和提高项目 协同效率。在原型设计方面,InVision允许设计师添加交互事件。同时,InVision的项目管理功能让管理者和设计师能在开发之前,充分便捷的讨论原型设计。


————————————————————————————————————————————————————


Flinto

https://www.flinto.com/
$20 /月 | 网页应用

在Flinto中可以创建可交互式原型,可在网页和手机中浏览。Flinto可以将静态图像转化成可以滚动、旋转的原型。
值得提得一点是:Flinto所创建的原型可以原生运行于iOS和Andorid设备中——原型测试无需开发转化


相关文章:

在Flinto中快速制作iOS原型


————————————————————————————————————————————————————


Quartz Composer


Quartz Composer是苹果创建的开发者工具,主要用于动态图形。尽管就现在的发展趋势来看,这款软件的应用已经背离了苹果的初衷——QC已经变成了神通广大的交互设计工具,在设计社区内被广泛的讨论,是编码能力薄弱的动效设计师的选择之一。(当然,如果懂Javascript,用QC设计起来得心应手)

QC无法让人一见钟情——它有着陡峭的学习曲线。不过幸好,各种插件的支持,让学习成本大幅降低。Facebook的Origami和IDEO的Avocado让设计师可以快速的制作交互效果


相关文章:

Quartz Composer源文件 Vol.01

Quartz Composer源文件 Vol.02

《Quartz Composer手表动效制作》


————————————————————————————————————————————————————



Origami


http://facebook.github.io/origami/
免费 | 仅支持Mac
Origami 是一款 Quartz Composer Patch库,由Facebook设计团队创造,主要用来构建移动设备交互原型。让设计师可以便捷的设计出常见的动画和交互效果——图形转换或是按钮按压

Origami的原型设计效果十分惊艳,但是不方便输出为代码,还好Facebook开源了相关的动画引擎POP,DesignCoder可以参考一下。


相关文章:

Origami可点击开关动效制作

如何入门Origami

Origami快速入门

QC/Origami学习资源汇总


————————————————————————————————————————————————————


Avocado

http://labs.ideo.com/2014/05/27/avocado/
免费 | 仅支持Mac
跟Origami类似, Avocado 旨在方便设计师用QC制作移动端交互动效(编者补充,除了Origami和Avocado,jQC这款插件也非常推荐大家使用)

Origami的重点是各种交互效果和动效,而Avocado的重点是提供了各种可交互控件——例如,iOS键盘。


相关文章:

隆重介绍Avocado插件:交互设计师的新工具


————————————————————————————————————————————————————



Framer.js

http://framerjs.com/
免费 | Javascript框架


Framer.js是一款Javascript框架,用于事件触发类动效的制作,方便制作原型。功能众多——内置生成器,可以直接从PSD(以及.Sketch)文件中获取元素信息,方便可交互原型制作。Framer是JS框架——因此跟其他工具不一样,需要懂HTML、CSS和JS的知识。但是好处就很明显了,输出很方便,可以在大部分设备上查看交互原型效果。


相关文章:

重新思考动效设计工具

精准构建动效原型

更新:2014-06-16

收藏

205人已收藏

MartinRGB

http://www.MartinRGB.com

  • 234

    作品

  • 1.7w

    粉丝

  • 413

    关注

  • MartinRGB.com
  • Icon Freebie - Code
  • 实验系列II —— Music App For Tv/Pad
  • Private Trainer 引导页实现
相关标签

    猜你喜欢

      2014-06-16 自译外文 经验/观点 原作者: Emelyn 举报 57621 205 66 4

      2014交互设计工具革新之年

      0.0°

      你确定要举报2014交互设计工具革新之年

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年06月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      66
      205
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录