研究主题:产品工作核心流程内的设计工具
研究对象:产品设计工具
好的工具可以让你在设计时如虎添翼,作为一名UI/UX设计师想要设计出让用户满意的作品,除了需要具备高超的技能、丰富的经验外,还需要掌握一些工具。下面辞典酱将提取UI/UX设计中,相对核心的工作流程,并以此为纵向参考,发散介绍一些常用的设计软件。
提取的核心工作流程有:
01头脑风暴图(草图)
02流程结构图
03框架原型图
04设计&交互动效
Excalidraw是一个很有意思的在线白板,它提供了一些基础的形状,你可以绘制出草图风格的图形。Excalidraw不需要注册,打开就可以画,还能邀请别人加入一起协作。Excalidraw的协作是加密的,甚至Excalidraw服务器都不知道你画了什么。
价格:免费
在传统的办公会议中,团队成员往往会在一块白板中写写画画,激发创意。但是,这种方式受限于物理空间,需要在固定的会议室才可以进行,远程协作成员也无法参与其中,而且受限于白板的面积也无法将所有人的想法沉淀。但在Miro,这个写写画画的脑暴过程,就被搬到了浏览器中。
价格:个人免费版(可使用3个白板)
可添加多类型元件
多人协作进行脑暴
常用的结构图工具,除了Xmind被人熟知外,还有就是ProcessOn了。它不仅是一个在线作图工具的聚合平台,还可以在线画流程图、思维导图、UI原型图、UML、网络拓扑图、组织结构图等等,Mac与Windows都可操作。
价格:个人免费版(可存9份文件)
在推荐/模板栏目中,ProcessOn用户还能发布自己的模板来获得收益,也可以将自己的读书笔记,分析亦或是经验流程图公开上传,学习交流。
Whimsical是一款在线流程图、线框图、便利贴、思维导图绘制软件,支持实时协作。
价格:个人免费版(可建立使用4个画板)
4大主要功能
实时协作,与团队一起完成
其中一个亮点是,Whimsical内置了图片库,种类繁多,内容非常丰富,不仅元素众多,还可以通过检索来找寻想要的图案。
画起图来也是得心应手,操作灵活,甚至是一些原型图也能帮助完成,像常见的手机与操作系统都能看到。
FlowMapp是一款专业的网站地图和用户流程工具绘制工具,无需下载,直接在浏览器中使用。
价格:个人免费版(可使用1个项目)
快速创建创建网站地图、让在线协作的团队成员对产品有全面了解;用户使用路径地图,即时向成员展示用户使用产品的流程与逻辑。
Axure是一款经典的原型工具,可以用它快速表达想法,进行测试验证,加快产品计划进度。
价格:免费30天试用
绘制各式原型图
导入Sketch,AdobeXD和Figma文件
Mockplus中的原型交互设计完全可视化,拖拽鼠标做个链接,即可实现交互。同时,Mockplus弹出面板、内容面板、滚动区、抽屉、轮播等系列组件,对于常用交互,使用这些组件就可快速实现。
价格:个人免费版(可创建3个项目)
支持制作高、低保真原型,不论是工作交流,还是客户展示都能满足,也能与Sketch轻松对接标注。
应该是UI/UX设计师电脑里必备的软件了吧?设计功能同Photoshop一样强大,但更轻量,操作也更易上手。它支持矢量图形绘制、快速原型、组件共享、插件扩展等特性。Sketch目前不仅被用于UI设计,还被用于原型制作、插画绘制。
价格:免费试用30天
除了功能强大外,插件生态也非常丰富,帮助UI/UX设计工作更高效。
AdobeXD是Adobe推出的一款用于UI/UX设计的工具,从网站和移动应用程序到语音交互等,全面覆盖。
XD的软件界面简洁,使用简单,操作顺手,同时也足够的专业。实际用起来,你会发现它显示平滑,性能优异,其体验犹如在真机屏幕上体验一般,给人印象非常好。
价格:个人版免费
Figma也同样支持组件,把常用元素变为组件,多次复用,帮助提高设计效率,组件支持就近摆放,且示例组件可以灵活调整。
价格:14天免费试用
无论是Sketch还是Figma,都可以把设计图导入其中,完成动效。
动效展示
这款交互工具由韩国的创业团队研发,可以通过不同模块组成一个完整的交互原型,使用时无需编码且以可视化的方式进行设计。它帮助设计师无需编写代码就可以简单快速地制作出高保真交互原型,还能实时在手机上演示,使原型能够在更多的场景下被使用。
价格:30天免费试用
ProtoPie的操作原理也十分简单:交互=触发动作+反应动作+对象。只需要将下面表中的触发动作和反应动作自由组合,就可以像拼拼图一样轻松制作高保真交互原型。
从UI设计,到快速原型,到高级动效,再到团队协作,也是一个很全面能打的工具。同时,inVision还推出了inVisionStudio是一款桌面端一站式设计工具,支持Mac和Windows双系统。
inVisionStudio的高级布局引擎帮助你快速且简单地设计响应式界面,让你的设计自动适配各种屏幕尺寸。
蓝湖是一款高效的产品设计协作平台,支持Sketch、Photoshop、AdobeXD文件导入生成标注,还支持Axure文件生成在线需求文档,可以将产品、设计、研发工作流程无缝衔接。
价格:免费版(≤10人团队)
核心流程中的设计工具,也了解的差不多啦,先慢慢消化吧。俗话说“工欲善其事,必先利其器”,好的设计也离不开创造力和便捷的工具,物尽其用,利用好身边的资源,就能事半功倍。