提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
2014年还剩下6个月,在这一年里,我们见到了很多新颖的交互设计工具和原型设计工具。工具旨在提高我们的工作效率,改善我们的工作流程,诸多新兴的工具造就了相关的讨论团体和设计,且这些工具,大大缩短了设计成本,现在,高保真的原型设计更简便了。
Pixate 即将到来,这里,我将做一个简明的介绍,给各位引荐一下这些正当年的交互设计工具。
https://webflow.com/
$16+ /月| 网页应用
“浏览器内设计”,这个名词想必大家不会陌生吗?没错,最近这种理念超火,Webflow就是这样的一款网页应用,让用户在浏览器内进行网页设计,实时预览,且可以编码。Webflow的编辑器非常友好,所见即所得,让设计师可以全盘操控设计,且输出非常方便,可在手机上查看效果。
Webflow 正在持续添加功能中——Webfont,视频支持,交互状态等等
相关文章:
《下一代网页设计工具:Webflow、Edge Reflow、Macaw测评》(英文)
————————————————————————————————————————————————————
https://marvelapp.com/
免费 | 网页应用
Marvel是一款专攻网页设计和移动端设计的原型设计网页应用。利用Marvel,可以在网上便可完成全部的交互设计工具——可通过Dropbox进行同步。Marvel还支持PSD文件——这样,无需转换格式,就能快速开始原型设计。
————————————————————————————————————————————————————
http://macaw.co/
$99 | Mac & Windows应用
Macaw是桌面端上的所见即所得的设计工具,非常便于成果产出。 令人印象深刻的有以下几点:
1.内置响应式断点编辑器,可便捷设置不懂屏幕尺寸下的页面布局
2.无需编码,自上而下设计即可,自动生成前端代码,只需一点点HTML CSS知识
相关文章:
————————————————————————————————————————————————————
http://www.invisionapp.com/
免费 | 网页应用
InVision严格意义上讲并不是交互设计工具。InVision被用于原型设计和提高项目 协同效率。在原型设计方面,InVision允许设计师添加交互事件。同时,InVision的项目管理功能让管理者和设计师能在开发之前,充分便捷的讨论原型设计。
————————————————————————————————————————————————————
https://www.flinto.com/
$20 /月 | 网页应用
在Flinto中可以创建可交互式原型,可在网页和手机中浏览。Flinto可以将静态图像转化成可以滚动、旋转的原型。
值得提得一点是:Flinto所创建的原型可以原生运行于iOS和Andorid设备中——原型测试无需开发转化
相关文章:
————————————————————————————————————————————————————
Quartz Composer
Quartz Composer是苹果创建的开发者工具,主要用于动态图形。尽管就现在的发展趋势来看,这款软件的应用已经背离了苹果的初衷——QC已经变成了神通广大的交互设计工具,在设计社区内被广泛的讨论,是编码能力薄弱的动效设计师的选择之一。(当然,如果懂Javascript,用QC设计起来得心应手)
QC无法让人一见钟情——它有着陡峭的学习曲线。不过幸好,各种插件的支持,让学习成本大幅降低。Facebook的Origami和IDEO的Avocado让设计师可以快速的制作交互效果
相关文章:
————————————————————————————————————————————————————
Origami
http://facebook.github.io/origami/
免费 | 仅支持Mac
Origami 是一款 Quartz Composer Patch库,由Facebook设计团队创造,主要用来构建移动设备交互原型。让设计师可以便捷的设计出常见的动画和交互效果——图形转换或是按钮按压
Origami的原型设计效果十分惊艳,但是不方便输出为代码,还好Facebook开源了相关的动画引擎POP,DesignCoder可以参考一下。
相关文章:
————————————————————————————————————————————————————
http://labs.ideo.com/2014/05/27/avocado/
免费 | 仅支持Mac
跟Origami类似, Avocado 旨在方便设计师用QC制作移动端交互动效(编者补充,除了Origami和Avocado,jQC这款插件也非常推荐大家使用)
Origami的重点是各种交互效果和动效,而Avocado的重点是提供了各种可交互控件——例如,iOS键盘。
相关文章:
————————————————————————————————————————————————————
http://framerjs.com/
免费 | Javascript框架
Framer.js是一款Javascript框架,用于事件触发类动效的制作,方便制作原型。功能众多——内置生成器,可以直接从PSD(以及.Sketch)文件中获取元素信息,方便可交互原型制作。Framer是JS框架——因此跟其他工具不一样,需要懂HTML、CSS和JS的知识。但是好处就很明显了,输出很方便,可以在大部分设备上查看交互原型效果。
相关文章:
《精准构建动效原型》
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册