研究主题：产品工作核心流程内的设计工具

研究对象：产品设计工具

好的工具可以让你在设计时如虎添翼，作为一名UI/UX设计师想要设计出让用户满意的作品，除了需要具备高超的技能、丰富的经验外，还需要掌握一些工具。下面辞典酱将提取UI/UX设计中，相对核心的工作流程，并以此为纵向参考，发散介绍一些常用的设计软件。

提取的核心工作流程有：

01 头脑风暴图（草图）

02 流程结构图

03 框架原型图

04 设计&交互动效

 01 头脑风暴（草图）

1.1 Excalidraw，一个在线加密可协作的画板

Excalidraw是一个很有意思的在线白板，它提供了一些基础的形状，你可以绘制出草图风格的图形。Excalidraw不需要注册，打开就可以画，还能邀请别人加入一起协作。Excalidraw的协作是加密的，甚至Excalidraw服务器都不知道你画了什么。

价格：免费

官网：https://excalidraw.com/

帮助文档：https://howto.excalidraw.com/

1.2 Miro，自由自在的在线协作白板

在传统的办公会议中，团队成员往往会在一块白板中写写画画，激发创意。但是，这种方式受限于物理空间，需要在固定的会议室才可以进行，远程协作成员也无法参与其中，而且受限于白板的面积也无法将所有人的想法沉淀。但在Miro，这个写写画画的脑暴过程，就被搬到了浏览器中。

价格：个人免费版（可使用3个白板）

官网：https://miro.com/

可添加多类型元件

多人协作进行脑暴

还支持移动端操作，不过元素添加只能放些文字、便签、评论、形状、画笔。

Miro免费版支持 3 个画板，此外还有付费的团队版和商业版，支持更多画板以及私密分享、高清导出等额外的特性。

02 流程结构图 

2.1 ProcessOn，流程图、思维导图、原型图

常用的结构图工具，除了Xmind被人熟知外，还有就是ProcessOn了。它不仅是一个在线作图工具的聚合平台，还可以在线画流程图、思维导图、UI原型图、UML、网络拓扑图、组织结构图等等，Mac与Windows都可操作。

价格：个人免费版（可存9份文件）

官网：https://www.processon.com/

在推荐/模板栏目中，ProcessOn用户还能发布自己的模板来获得收益，也可以将自己的读书笔记，分析亦或是经验流程图公开上传，学习交流。

2.2 Whimsical，在线绘制流程图、线框图、思维导图

Whimsical是一款在线流程图、线框图、便利贴、思维导图绘制软件，支持实时协作。

价格：个人免费版（可建立使用4个画板）

官网：https://whimsical.com/

4大主要功能

实时协作，与团队一起完成

其中一个亮点是，Whimsical内置了图片库，种类繁多，内容非常丰富，不仅元素众多，还可以通过检索来找寻想要的图案。

画起图来也是得心应手，操作灵活，甚至是一些原型图也能帮助完成，像常见的手机与操作系统都能看到。

2/3 FlowMapp，网站地图和用户流程绘制工具

FlowMapp是一款专业的网站地图和用户流程工具绘制工具，无需下载，直接在浏览器中使用。

价格：个人免费版（可使用1个项目）

官网：https://www.flowmapp.com/

快速创建创建网站地图、让在线协作的团队成员对产品有全面了解；用户使用路径地图，即时向成员展示用户使用产品的流程与逻辑。

03 框架原型图 

3.1 Axure，经典原型设计工具

Axure是一款经典的原型工具，可以用它快速表达想法，进行测试验证，加快产品计划进度。

价格：免费30天试用

官网：https://www.axure.com/

绘制各式原型图

导入Sketch，Adobe XD和Figma文件

3.2 Mockplus(摹客)－交互快、设计快、演示快、上手快的原型设计工具

Mockplus中的原型交互设计完全可视化，拖拽鼠标做个链接，即可实现交互。同时，Mockplus弹出面板、内容面板、滚动区、抽屉、轮播等系列组件，对于常用交互，使用这些组件就可快速实现。

价格：免费

下载：https://www.mockplus.cn/mockplus

官网：https://www.mockplus.cn/

200多个组件、3000多个矢量图标，也可以组件图标库与团队共同协作；组件、页面、状态交互，轻松拖拽即可完成，简单可视化；也可以从APP端和微信小程序端快速查看。

3.3 墨刀，强大易用的原型设计与协同工具

墨刀是一款在线原型工具，支持在线分享、文档生成、团队协同、设计标注。无论是PM从0—1绘制原型、还是设计师导入设计稿制作交互，都可以快速轻松完成可交互原型。

价格：个人免费版（可创建3个项目）

官网：https://modao.cc/

支持制作高、低保真原型，不论是工作交流，还是客户展示都能满足，也能与Sketch轻松对接标注。

 04 设计&交互动效 

4.1 Sketch，使用最多的 UI 设计软件

应该是UI/UX设计师电脑里必备的软件了吧？设计功能同Photoshop一样强大，但更轻量，操作也更易上手。它支持矢量图形绘制、快速原型、组件共享、插件扩展等特性。Sketch目前不仅被用于UI设计，还被用于原型制作、插画绘制。

价格：免费试用30天

官网：https://www.sketchapp.com/

除了功能强大外，插件生态也非常丰富，帮助UI/UX设计工作更高效。

4.2 Adobe XD，UX/UI 设计和协作工具

Adobe XD是Adobe推出的一款用于UI/UX设计的工具，从网站和移动应用程序到语音交互等，全面覆盖。

价格：免费

官网：https://www.adobe.com/cn/products/xd.html

XD的软件界面简洁，使用简单，操作顺手，同时也足够的专业。实际用起来，你会发现它显示平滑，性能优异，其体验犹如在真机屏幕上体验一般，给人印象非常好。

4.3 Figma，在线协作设计工具

Figma可以说是一款新兴的协作式界面设计工具，它的界面布局和Sketch几乎一样。这款工具以云端为基础，允许多人同时合作一个项目，设计稿会根据评论及修改进行实时更新。

价格：个人版免费

官网：https://www.figma.com/

Figma也同样支持组件，把常用元素变为组件，多次复用，帮助提高设计效率，组件支持就近摆放，且示例组件可以灵活调整。

网站还有一个404彩蛋，来体验其钢笔工具，摸鱼的时候可以戳一戳(https://www.figma.com/404)。

4.4 Principle，让动效制作变得简单

当想要设计一个微动效，或者是多页面的高保真原型，就交给Principle吧！在 Principle中，你可以使用时间轴轻松制作一些动效，还可以连接多个页面来做一个完整的应用。这个过程中不需要编写代码，上手成本很低。

价格：14天免费试用

官网：https://principleformac.com/

无论是Sketch还是Figma，都可以把设计图导入其中，完成动效。

动效展示

4.5 Flinto，交互式设计神器

在Flinto中设计动效，无需代码，无需时间轴，只需要设置初始和结束状态，再把它们一连接，动效就完成了，而且支持从Sketch和Figma导入设计。

价格：14天免费试用

官网：https://www.flinto.com/

4.6 ProtoPie，新型交互设计工具

这款交互工具由韩国的创业团队研发，可以通过不同模块组成一个完整的交互原型，使用时无需编码且以可视化的方式进行设计。它帮助设计师无需编写代码就可以简单快速地制作出高保真交互原型，还能实时在手机上演示，使原型能够在更多的场景下被使用。

价格：30天免费试用

官网：https://www.protopie.io/

中文官网：http://www.protopie.cn/（目前升级中）

ProtoPie的操作原理也十分简单：交互=触发动作+反应动作+对象。只需要将下面表中的触发动作和反应动作自由组合，就可以像拼拼图一样轻松制作高保真交互原型。

4.7 inVision ，一站式设计工具

从UI设计，到快速原型，到高级动效，再到团队协作，也是一个很全面能打的工具。同时，inVision还推出了inVision Studio是一款桌面端一站式设计工具，支持Mac和Windows双系统。

价格：免费

官网：https://www.invisionapp.com/

inVision Studio的高级布局引擎帮助你快速且简单地设计响应式界面，让你的设计自动适配各种屏幕尺寸。

4.8 蓝湖，高效的产品设计协作平台

蓝湖是一款高效的产品设计协作平台，支持 Sketch、Photoshop、Adobe XD文件导入生成标注，还支持Axure文件生成在线需求文档，可以将产品、设计、研发工作流程无缝衔接。

价格：免费版（≤10人团队）

官网：https://lanhuapp.com/

核心流程中的设计工具，也了解的差不多啦，先慢慢消化吧。俗话说“工欲善其事，必先利其器 ”，好的设计也离不开创造力和便捷的工具，物尽其用，利用好身边的资源，就能事半功倍。

相关引用

-图片、GIF来自网络；封面动图 by Gur Margalit

-未经UX Pedia允许不得转载

欢迎关注作者公众号：UX辞典，获得更多UX设计干货

Powered by Froala Editor