十大顶级原型设计工具
编代码之前,原型设计工具可以帮助程序员解决设计问题,即便审美不行也没关系,这些工具都有着很棒的模板可供选择。与客户快速分享不同迭代的可能性可以显著加速设计过程,接下来这十大原型设计工具值得一试。
1. Origami Studio
Origami最初由Facebook开发,以帮助团队建立和设计产品。现在可以免费使用,程序员可注册为苹果开发人员,使用Quartz Composer下载并安装Xcode以使Origami在Mac上顺利运行。
与其他原型工具相比,此工具需要更多安装工作。一旦安装完成,重庆多媒体制作就可以立刻开始创建设计概念,模拟滚动、滑动和页面链接。Sketch和Photoshop的设计可以导入Origami,并且项目图层将被保留,可以根据需要进行链接,动画或转换。Origami不以移动设计为中心:可以设计响应式网站,并模拟文本输入,FaceTime相机和OS X拖放等功能。
只需点击一下即可导出原型组件(包括动画),Origami还提供了演示工具,使用户可以为设计添加自定义背景,全屏查看,并模拟不同的设备。然而,缺点是无法让客户或设计团队直接对项目或版本记录评论。
2. Webflow
Webflow真正的发光点是,当原型设计完成后,点击一个按钮就可以转换为生产就绪的网站。
最近,Webflow引入了新功能:一个用于原型的CMS。Webflow的CMS完全可视化,允许创建强大的动态网站而无需编写代码,另一个特别有用的功能是使用博客页面原型概念创建博客。
如果你是自由设计师,并且难以找到程序员将你的设计变现,Webflow可以帮你。你可以设置用户帐户或指定管理员来管理内容,也可以在客户端直观进行更改,或者将原型导出到代码中,Webflow干净的语义代码可以节省程序员几个小时的代码清理时间。
Webflow附带可以拖放到原型中的网站模板和Web组件。Webflow响应自然,网站布局将针对所有设备进行优化:桌面设备,移动设备和平板电脑。如果这还不够,你还可以设计适用于移动设备和所有现代浏览器的动画。Webflow还具有内置扩展性,可以轻松地将直播原型连接到Slack,MailChimp,Google Drive以及超过400种其他服务。
3. Proto.io
Proto.io自带的网站和应用程序模板可让你快速启动项目,现成的模板内置了多种互动功能,整个应用程序在网络上运行,所以可以在任何平台上运行Proto.io。但其每个功能似乎都创建了一个新窗口(用于构建和实时预览项目)。如果希望将标签数量保持在最低限度,那么这可能是一件令人烦恼的事。
Proto.io最近发布了一些插件,可以通过简单的拖放整合Sketch和Photoshop设计。当导入文件时,Proto.io将文件保留在适当位置,用户不必浪费时间重新对齐。如果已经导入Proto.io,也可以继续在Sketch或Photoshop中进行更改,Proto.io原型将自动更新,不必重复导出和导入。
4. Framer
Framer是最受欢迎的原型设计工具之一。重庆动画公司可以通过代码对任何东西进行原型制作,从而创造出新的突破性设计。但该工具学习困难,不过Framer编码语言的文档结构非常良好,并有很多学习资料。
Framer的Mac应用程序是精心设计的,可在编写代码时提供实时预览。使用Framer,用户不会受到其他应用程序拖放工具的限制。此外,由于Framer使用代码来构建原型,所以可将实时数据从Twitter和Parse等来源整合到原型中。
像其他工具一样,Framer支持Sketch和Photoshop项目,并且还将保留设计图层。与大多数工具不同的是,Framer还可以导入After Effects文件。当你准备好分享原型时,Framer可以生成与客户端共享的URL。这些可共享网址可在移动设备上打开以进行实时预览,Framer还可以对VR进行原型设计。
5. Vectr
Vectr是免费的,无论是桌面还是网络浏览器,原型都将保持同步,随时都可使用并始终可访问到最新更改。
Vectr原型可与URL共享,并集成到诸如Slack之类的应用程序进行强大的协作。目前,Vectr功能并不丰富,该应用程序的路线图已经发布,详细列出了功能列表。包括:完全脱机桌面应用程序,更多平台,内置版本控制,内置设计资源市场,协同编辑,内置反馈和注释工具等。
6.Atomic
Atomic拥有漂亮的用户界面和直观易用的动画时间轴,Atomic是一个需要运行Google Chrome浏览器的Web应用程序,此外,没有可用的桌面应用程序。
如果使用After Effects进行原型动画,你将感觉到Atomic的动画时间轴有多棒。Atomic很灵活,方便调整交互,只需点击播放按钮就可查看更改和动画。
其历史选项允许用户快退以查看历史迭代,并从任何角度创建新版本。对于iOS设计人员,Atomic推出了带有iOS设计元素库的套件,以实现快速原型设计。你也可以直接将自定义CSS添加到Atomic中,也可以导出CSS,简单地将其复制并粘贴到项目中。
7.Easee
Easee是最令人印象深刻的原型设计工具之一,当很多人认为该产品是Steven Fabre的激情项目时,Easee却给人留下了深刻的印象。Easee的目标是帮设计师为网络构建漂亮的动画,而无需编写代码。
使用Easee,你可以从Sketch和Photoshop中拖放图层并开始动画制作。Easee可以在应用程序中创建平滑动画并导出到CSS,因此可以将它们导入到实际的Web项目中,还可以在网上查看动画实时预览。
8.InVision
InVision可以说是世界上最流行的原型设计工具。该团队不断添加新功能,帮助设计人员更高效地进行原型设计。InVision的最大功能是其对项目反馈的管理,客户和设计团队可以直接在原型上提供意见。
将项目状态传达给客户和团队是至关重要的,通过InVision的项目管理页面,用户可以将设计组件组织到状态工作流中。例如,如果将设计组件拖入“进行中”队列,客户或团队查看状态时会立即知道正在进行的工作。
前不久,InVision发布了一个称为Boards的功能,它可用作演示工具,项目资产管理器以及创建moodboards。
InVision的功能列表似乎永无止境:用户可从Sketch或Photoshop导入设计文件,动画设计资源,链接页面以模拟现实生活中的网站,并在移动设备上预览原型,还有版本控制,无限的免费用户测试以及与Slack,Dropbox,Box等应用程序的集成等。
9.Adobe Comp
最近发布的iPad Pro告诉我们,许多广告素材正在使用平板电脑开发项目。Adobe Comp提供了将自然绘图手势转换为生产就绪图形所需的工具。
使用Adobe Comp,可以创建与Photoshop,Illustrator和InDesign无缝集成的打印,Web和移动布局。Comp可与Adobe Stock和Typekit一起使用,从而提供图像,图形和数百种字体,可以在设计原型时轻松整合。
Adobe Comp提供了开发和设计原型的新方法,并且由于其用户友好的设计,实际上没有学习障碍。
10.Principle
Principle由OS X的前苹果工程师构建,Principle具有可将原型导出到视频或动画GIF的功能,重庆flash制作可以在Dribbble,Twitter或任何地方共享!
Principle仅适用于Mac,如果你使用过Sketch,则原理界面将会非常熟悉。虽然Principle不包括协作工具,但这种缺点可能会被其离线功能所掩盖。
上一篇:2018年度顶级开源创作工具