事半功倍!帮你设计加速的7款顶尖原型工具

2016/09/21 7501

7-top-prototyping-tools-1

对于许多刚刚开始接触原型设计的设计师而言,很容易混淆线框图(Wireframe)、视觉稿(Mockup)和原型(Prototyping)这三个基本概念。

在许多项目和相关文章中,这些概念经常被混用。虽然在功用上,三者有许多相似点,然而差异也非常明显。

  • 线框图是一种低保真的静态设计稿,它勾勒出布局轮廓,但是缺少细节。
  • 视觉稿则是算得上是接近于高保真的设计稿,其中拥有大量的视觉信息和细节呈现,但是它依然是静态的。
  • 原型和视觉稿接近,是接近于高保真的设计稿,但是原型是动态可交互的,一些后期的、完成度极高的原型设计甚至和最终的产品看起来相差无几,因为它们不仅拥有细致到位的视觉设计,同时还模拟出了理想中的用户体验。

不过,许多原型并不一定得做的非常的好看,它最主要的的功能是还原并呈现设计思路,它需要是可运行、可交互的,这是核心。

一个典型的原型设计工作流大概是这个样子的:

  1. 绘制页面流程。呈现出用户可能会如何浏览页面或者APP。
  2. 创建低保真原型,为每个页面创建多个不同的版本,进行可用性测试,搜集相关的数据和用户反馈。
  3. 完善原型的细节和真实度,向着最终产品的外观靠拢。在增加细节之前,请确保原型的功能已经得到完善,并足以满足需求。

对于原型本身在产品设计中的重要性,通过前天的文章《等等,原型设计的重要性你真的明白么?》,想必已经无需赘述。都说工欲善其事必先利其器,那么,有哪些优秀的原型工具值得推荐呢?

InVision

image001 (1)

InVision有多优秀?Twitter和 Uber在用它,福布斯推荐它,而财富榜百强企业都在用它来设计产品。InVision 将产品设计流程中的每一个环节都进行了细化,让协作成为了流程的核心,让团队中每个人都能围绕着项目推进紧密地合作。

InVision 让团队可以在浏览器中实现实时协作。如果你想让你的高保真原型能够像真实产品一样运作,如果你想让你的原型自由无限制地进行测试,如果你希望你的原型能够像素完美,那么InVision 应该是最适合你的原型工具,哪怕你没有一点编程和代码知识。

Pidoco

image003 (1)

如果你不想在产品开发流程中放弃线框图,那么Pidoco 可能是更好的选择。和InVision 不同,Pidoco 真正的核心优势在于设计出强交互性的UX原型。在Pidoco 的协助下,你能创造出可用来展示、完全可操作的原型,支持手势操作、过渡动效、键盘录入等多种复杂交互,它可以为你带来理想的移动端演示原型。

你可以在浏览器、iOS和Android 设备上实时演示你的原型,Pidoco 的智能模板使得原型的设计和搭建极其快速而便捷,这也使得它简单易学,将它介绍给团队成员并作为主要的工具之一绝不会是麻烦的事情。

由于Pidoco 主要是在云端运行,所以你不需要安装程序,只需要登录、同步、演示就好了。同样的,Pidoco 不需要你具备代码知识,上手很快的哦。

Proto.io

image005 (1)

Proto.io 是一款专门的移动端原型设计平台,它不仅能帮你搭建可交互的原型,可以能用来测试和模拟移动端APP。Proto.io 能运行于绝大多数的网页浏览器,它拥有一个用来管理整个项目的控制面板,一个专用的编辑器,以及专门运行原型的播放器。这些工具使得你可以在iOS和Android 设备上测试你所设计的原型。

在使用编辑器搭建原型的过程中,用户可以查看并参与进来,通过交互和体验之后,给予设计者以反馈。来自IDEO、迪士尼、PayPal 的设计师目前都在使用Proto.io 设计原型。Proto.io 不仅加快了他们的设计工作,而且避免了开发过程中犯错的可能带来的高昂代价。

如果你想更快地将产品推向市场,Proto.io 所提供的解决方案应当能够让你事半功倍。

Webflow

image007 (1)

如果你的产品从研发到发布都是采用标准的HTML、CSS和JS的代码,那么Webflow 能够为你提供从原型设计到最终交付一条龙的服务。借助Webflow 设计的页面都是响应式的,当你打算将它展示给团队成员、客户和其他利益相关者的时候,发送一个链接就可以了。

Webflow 是一款针对网页端的高素质原型设计工具,版本控制和迭代升级永远不是问题。从原型、设计到开发,逐步推进,步步为营。

PowerMockup

image009 (1)

如果你是PowerPoint 用户,那么这款原型工具会是你的菜。PowerMockup 是一款PowerPoint中运行的原型工具包,有了它,你可以借助PPT直接设计制作出可运行、能交互的原型,绝对有说服力。

借助PowerMockup 来设计原型并不复杂,你所需要做的就是从PowerMockup 的库当中选取合适的形状和控件,托拽到PPT背景上,制作成合理的布局。结合PPT当中的动效和交互功能,一个可靠的原型就能搞定了。

HotGloo

image011 (1)

如果你一直在寻找一款简单易用、拥有全部正确功能的原型工具,那么不妨试试HotGloo。作为一款屡获殊荣的原型设计工具,HotGloo 能为你提供舒适的设计环境,帮你在浏览器中设计出交互生动而有趣的原型。

当你开始使用HotGloo的之后,你同时拥有了其中内置的2000+ UI控件,多账户授权能够方便你与同事进行协同,同事能够针对移动端优化,测试你的设计效果,并且能够动态地添加注释。除此之外,HotGloo还拥有完整的文档说明,详细的视频教程,还有在线论坛供大家讨论。

Lucidchart

image013 (1)

Lucidchart 可能是目前市场上最好的图表和线框图设计解决方案。它不仅仅能帮你完成工作流程图和思维导图,还能将你设计的图表和线框图快速地转化为可交互的原型,并且能用作展示和测试之用。

有了Lucidchart ,创建大型、复杂的线框图就再也不是问题了,内置的协同服务让你可以更加便捷地同团队成员和客户进行合作。Lucidchart 本身是一个基于云服务的APP,能够和 Google Apps 、Google Drive、Confluence、Jive以及 JIRA 进行联动和协同。

总结

其实就像刘语老师在她的交互课程中所提到,原型设计工具都只是手段,选择合适的工具即可,更重要的是原型设计的思路。

了解更多原型设计的知识,参与更多的项目,一边实践一边学习知识,在实战中了解不同工具的优劣好坏,再作出符合你需求的选择就好了。

【这些文章让你更懂原型设计】

原文地址:designyourway
原文作者:Bogdan Sandu
优设译文:@陈子木

yestone-uisdc-2

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/7-top-prototyping-tools

界面设计 交互设计师 HTML5 素材 用户体验设计 好文 UI 转场动效 设计师专访 设计师 设计规范 排版布局 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里