为了省时省力,许多人都会想省略产品构思到生产之间的测试流程,但缺乏实体样本,可能会让最终产品错漏百出,这也是为什么我们需要Prototype!
不论是已累积许多工作经验的老手还是新手,制作原型都是设计师与开发人员的重要任务,但是在没有适合工具的情况下,想实现原型并不容易,也可能相当耗时。
在我们深入探讨皮肤之前,先认识EagleApp吧!
EagleApp支持90多种格式,包含PSD文件、包装参考图、材质、3D物件、图像、字体、RAW档等!Eagle优秀的UI可以帮助数位工作者和UI/UX设计师存储和获取素材,且用户只要快速点击并拖动就可以将素材放进原型工具中。不仅如此,Eagle也为设计师们提供了各式各样丰富的原型设计灵感!
接下来,我们会介绍12种优秀的原型设计工具以及他们的功能。每种软件适用的平台及价格范围都不相同,相信你可以在其中找到最适合你的原型工具!
以用户友善而闻名的Sketch,有许多对设计师而言相当实用的功能。
这是一款在图形编辑方面广受欢迎的软件,能够协助提升用户体验。Sketch拥有一切将想法转换为实体模型所需的东西,包含Mockup能力及强大的协作工具。强大的Mockup能力及协作工具
另外Sketch的集成功能非常优秀,让你在和他人合作与编辑上更加轻松。如果你也在运行以矢量图形为基础来提升用户体验的工作,Sketch是一个你必须试试的工具。
Sketch的最佳功能之一是你可以在结束Prototype制作后直接取用他的CSS样式,并贴到你的网站样式表中,轻松地将你的想法转移到网页上。
另一个Sketch的强大功能是他拥有数百种扩展功能,包含用PDF档输出设计、对Mockup进行随机地实验性变化等。
Sketch在业界中被广泛运用,非常适合用来建立线框与进行UI设计,因此在工作中选择这款软件绝对是个聪明的决定!
操作系统:MacOS
价格:
如果你熟悉Sketch的话,那Figma对你而言应该也不困难,这是一款相当实用的全端设计工具。
他能够处理线框、原型制作、UI设计、工程交付等任务,如果你不想写进程码或想以互动模式查看你的原型,那你一定要试试Figma。
Figma直觉的操作界面,可以满足设计师想要在自己的设计上添加动态,并预览设计在各种app、网页浏览器、运作系统和设备上呈现效果的期望。
你除了可以用Figma来设计界面及网站外,还能够与团队进行实时协作。并且,由于Figma是一款在线工具,只要网络状态良好,你就可以随时随地与任何人一起操作。
操作系统:Windows、MacOs和在线版
XD是Adobe数位和创意工具套件(又名Adobe原型制作工具)的一部分。由此可知,这是市面上最优秀的设计和原型制作工具之一。另外,他也是一款采用订阅制的工具,因此可能会较为昂贵。
你可以使用XD来制作高品质的网站或是行动app,XD平台中简单的切换可以帮助你从一般设计开始,把你的所有元素发展成互动动作。
由于XD是一款以矢量为基础的工具,能够创造不同萤幕尺寸的设计。用户还可以依照需求调整尺寸、剪裁并延展自己的设计。
不过XD也有一些缺点,包含不能与Figma或Sketch等其他设计平台兼容。
操作系统:AdobeXD最适用于MacOS与Windows10,而尽管存在一些小问题,但XD也是可以在桌机和行动浏览器上使用的。
以下是InVision能提供给你的:
如果你也是大型团队中的一员,那么InVision会是一个不错的选择。这个平台高度专注于协作,且在远距工作及混合式工作空间中格外有用。
例如Uber、Netflix和Twitter等许多知名公司都使用了这款原型制作工具。
InVision的CraftManager功能相当强大,用户可与Photoshop和Sketch同步,让你的设计和原型制作能力更上一层楼。
设计师们可以将自己的创作版导入专案空间中,或是将自己的设计上传到云端与他人进行协作。
操作系统:MacOS、MozillaFirefox、Chrome和Windows。
UXPin是另一种云端的端对端工具(end-to-end),可以帮助用户设计一页式网站、数位产品和行动app。从建立低拟真线框到高度还原的原型,UXPin都能做到。
这款原型制作工具以一系列的内建功能而闻名,例如:协作、设计系统与交付。
UXPin同样是建立在矢量基础上的云端软件,可以在桌机与个人计算机上使用。
UXPin除了让用户可以插入现有的元素或是进阶互动效果,你还可以从Sketch或Photoshop中导入你现有的设计。
操作系统:MacOS(10.12或以上版本)、Windows10、Google浏览器。
Proto.io是一款云端原型制作工具,可以帮助用户设计互动式的行动app原型。
他以作为最灵活的高度还原原型创作软件之一而广受喜爱。就算是对进程没有任何基础的用户,也可以操作这款软件。
Proto.io可以与所有的浏览器兼容,只需要注册、选择模板,你就可以开始依照自己的需求进行调整。
操作系统:可与所有浏览器兼容
Framer是以代码为基础的原型工具,学习成本较低。该款软件被认定为快速原型工具,可以帮助用户更快地创建杰出的原型。
这个原型工具能帮助你轻松地为设计加入动态或互动元素,像是Google和Airbnb等公司都有使用Framer。
Framer和Proto.io一样有类似的拖放界面,你可以将现有的设计加入到Framer中,来实现开发代码原型的任务。
通过简单的规则来改变设计,你的原型也会跟着调整。
操作系统:macOS、Windows、iOS、Android和在线版。
OrigamiStudio是Facebook的矢量设计和原型制作工具。该款软件的目的在于帮助设计师创造高度拟真的原型。
做为参考,这款软件是Instagram和Messenger等你所喜爱的app的幕后推手。
而作为新手,你会对操作OrigamiStudio感到些许吃力,因为这款软件的学习门槛属于中阶,不过你也不用太过担心,OrigamiStudio上有大量「How-To」的教学内容,可以带你慢慢上手。
你可以在任何设备上使用OrigamiStudio来加载并展示你的设计,但是这款软件不支持协作,这也是OrigamiStudio的缺点。
虽然OrigamiStudio最适合想要练习设计和原型制作,却又不想负担太多初学者,但你仍然可以将他作为高阶设计工具来创建原型。
操作系统:适用于Mac,而iOS和Android则会有原型预览app。
价格:无需支付任何一分钱,使用完全免费。
FluidUI是一款以网页为基础的原型设计工具,因此,你无需要下载或安装任何东西就可以随时随地创建你的原型。
使用FluidUI时,你不用担心他是需要学习复杂内容的软件,因为他的学习门槛低,很容易上手。
FluidUI拥有超过2000种现成的组件,你可以浏览他的内建资源库来使用他们,帮助你在几分钟内启动并运行你的原型。最后,你还可以与设计师和开发人员共同协作来调整你的原型设计。
操作系统:Windows、MacOS、Linux和Chrome或Firefox。
Justinmind是一款功能强大且易于使用的原型设计工具,拥有超过4000个零组件,通过这4000多种元素,你可以加速动效和过渡的运行。
与许多其他的原型制作工具一样,Justinmind也有拖放功能。
他的不同之处在于Justinmind允许用户拖机操作,且最棒的是没有任何专案规模的限制。
另一个你必须要知道的Justinmind惊人功能是,他可以在原型中融合现实生活的氛围,你还可以与他人进行共编并以HTML导出成果。
操作系统:网页、Android、Mac和iOS。
Balsamiq是一款快速线框工具,也同时是新手和专家们的理想工具。
他可以让用户连接萤幕并体验舒适的使用流程,但Balsamiq只能帮助创造低拟真的原型。
Balsamiq有许多内建组件、Icon和素材,且因为他也是用拖拉的方式来制作原型,所以学习门槛不高。
这款软件以提供素描般的外观与体验著称,让你感觉就像是在白板或记事本上绘制草图,如此一来也就不会被其他架构和内容所分心。
如果你正在寻找一款专用于线框的工具,那么Balsamiq会是你的好选择。
操作系统:可与IntelliJIDEA、Confluence和GoogleDrive搭配使用,也适用于Windows和Mac。
AxureRP是专家们制作高拟真原型的工具,也是市场上使用历史最久远的工具之一。
想让你的原型看起来非常逼真吗?那么AxureRP中能运用特定条件的能力,将能帮助你达成这个目标。
如同其他工具,AxureRP也有创建线框和运行动态交互的能力。AxureRP的用户还可以运用他的其他功能,例如:灵活的视图与开发者素材,对于设计师来说,这将会是一款难以抗拒的配套软件。
操作系统:Mac、Windows、在线版、Android和iOS的App。
什么是最好的原型设计工具?答案取决于你的需求。但是,如果想制作出符合行业标准的原型,使用InVision和Sketch仍会是个好主意。
但如果你是以学习为目标或需求不多,使用如OrigamiStudio这样的免费工具也是可行的。重要的是为你的观众打造最好的使用体验,并尽量减少可能的倦怠感。
此外,别忘了使用Eagle来管理你的设计素材,毕竟在构建原型之后,存储你的设计以便于未来使用是至关重要地。
马上就开始使用原型设计工具,将你的设计理念变为现实吧!