第5课  交互设计工具

5.1 Axure RP 7.0

对于高保真的快速原型设计来说，往往需要借助专业的原型设计软件来完成。Axure RP

就是目前国内外应用较为广泛的一款专业化的原型设计工具。该软件是美国 Axure Software

Solution 公司旗舰产品，作为专业的原型设计工具（图 5-1），它能快速、高效地创建原型，

同时支持多人协作设计和版本控制管理，可以让负责定义需求和规格、设计功能和界面的

专家快速创建多种规格的手机 APP 应用、Web 网站线框图、流程图、原型和规格说明文档。

商业分析师、信息架构师、可用性专家、产品经理、用户体验设计师、程序开发工程师、交

互设计师、界面设计师等都非常青睐这款原型设计工具。目前包括 IDEO、青蛙设计（Frog

Design）、苹果、谷歌等知名设计公司和 IT 企业都在使用 Axure RP，国内的淘宝、雅虎、腾

讯和当当等公司的设计师、产品经理也都使用这款软件作为原型开发和演示的工具。Axure

RP 中的 RP 是快速原型（Rapid Prototyping）的缩写。

图5-1 专业原型设计工具Axure RP的界面

Axure RP 所依赖的快速原型法（rapid prototyping）是一种有效的、高效率的、以用

户为中心设计（User-Centered Design）技术，可以帮助用户体验专家、设计师、工程师

Jhszw.indd 52 2017.1.20 2:45:04 PM

第二篇

53

创造更加有用的、高可用性的产品。Axure RP 最大的优点是无须编程，只通过控件拖曳

和图形化人机交互的方式就能够生成应用程序或者网站模型。这对于没有太多编程基础的

设计师和美工来说无疑是个福音。Axure RP 可以通过简洁直观的方式快速进行线框图和

高保真原型的设计。其设计原型可以直接在手机上让客户体验和验证，也可以通过大屏幕

向用户演示。不仅可以在手机屏幕上看到这个应用的图标，还可以执行单击、长按、水平

划屏、垂直划屏、滑动、双击、滚动、切换窗口、浏览动画和广告等操作，就像运行一个

真的 App。还可以让所有相关人员“安装”这个高保真应用（图 5-2）。当设计师更新了原

型之后，所有相关人员都可以看到最新的反馈。此外，Axure RP 8 还可以应用多个动画功

能，如褪色、移动、动态旋转部件或变形部件等。当设置动态面板的交互状态时，翻转动

画可以同时被应用。另外，Axure 还能让团队成员进行多人协同设计并对设计进行方案版

本控制管理。

图5-2 Axure RP的手机高保真App原型设计界面

5.2 Justinmind 6.5

在开始原型设计之前，首先要做的就是选择一款设计工具。目前国内外有十几款交互

设计原型软件，除了 Axure RP 外，比较流行的还有 InVision、Proto.io、Balsamiq Mockups、

Codiqa 和 FluidUI 等。这些工具功能相似，但各有优缺点。2015 年，库珀（Cooper）设计公

司的艾米丽·施瓦兹曼 (Emily Schwartzman) 通过速度、保真度、分享（导入原型到手机）、

用户测试、技术支持、触控（手势交互方式）和动态控件这 7 个指标对包括 Axure RP 在内

的 8 款原型设计软件进行了评测和比较。其中，西班牙 Justinmind 公司出品的原型制作工具

Justinmind Prototyper 获得了除速度外的 6 项好评，其中“良好”（good）4 项，“优秀”2 项，

Jhszw.indd 53 2017.1.20 2:45:05 PM

54

交互与服务设计：创新实践二十课

其表现超过了 Axure RP 的评分，也成为领先其他软件的佼佼者（图 5-3，有删节，仅保留了

其他 4 款同类软件的评测数据）。总体来说，Justinmind 满足了一款优秀的移动 App 产品原

型设计工具所应该具备的条件：

① 支持移动端演示；

② 组件库的支持和插件灵活使用；

③ 可以快速生成全局流程图或 HTML；

④ 可以多人在线协作；

⑤ 具有手势操作、转场动画和交互特效。

图5-3 在施瓦兹曼对8款原型工具的比较中Justinmind胜出

因此，与目前市场其他的设计工具相比，Justinmind 更适合设计移动终端 App。该软件

能够很方便地进行移动端 App 的原型设计，不用代码编程就能轻松实现交互效果，特别是针

对 iPhone 6 plus、iPad、黑莓和 Android 手机的移动端触屏手势操作，如单击、长按、水平划屏、

垂直划屏、滑动、划过、缩放、旋转、双击、滚动等就多达 18 种（图 5-4），甚至还可以捕

捉设备方向来模拟重力感应。此外，当数据列表或数据网格的值变化时可以触发交互事件（on

data change），当变量的值发生变化时也可以触发事件（on variable change），由此高度仿真地

实现了各种手势效果。该软件还有丰富的组件，如菜单、表单或数据列表，以协助实现绘制

高保真原型，同时可以由用户创建自己的组件库。

Jhszw.indd 54 2017.1.20 2:45:05 PM

第二篇

55

图5-4 Justinmind可以模拟的手机触控方式

此外，Justinmind 的操作简洁方便，可以通过拖曳等方式来实现跳转、定向等交互效果，

无须像 Axure RP 一样每一步都只能通过点击来完成。并且该软件的显示更为直观（如进度

条）。这些基于手机交互的响应和反馈相比 Axure RP 来说更为快捷和灵敏。更诱人的是，该

软件生成的交互程序原型可以直接导入手机中进行仿真操作，让用户能够更直观地感受交互

原型的魅力（图 5-5）。Axure RP 最早是专门针对 Web 应用而发展起来的原型工具，虽然后

期针对移动设备作了大量的改进，但用户测试显示，该软件在移动端演示的流畅性和交互性

上要明显逊色于 Justinmind。同样，在移动端触屏手势、组件、动态控件、图形和模板的数

量上，Axure RP 也无法和 Justinmind 相比。Justinmind 不仅使用简单易懂，提供了多种规格

的移动端模板，同时也能进行 PC 端的原型设计，其暗黑色的界面风格也很具现代感。除了

Justinmind 自带的图形库外，网络上也有各种各样的组件、模板，如专门针对苹果 iWatch 智

能手表的各种控件，用户可以根据需要选择相应的控件进行使用。因此，Justinmind 是手机

高保真原型设计的利器，是高保真原型开发与操作不可或缺的软件。

图5-5 Justinmind交互原型可以直接在手机中模拟

Jhszw.indd 55 2017.1.20 2:45:06 PM

56

交互与服务设计：创新实践二十课

5.3 Balsamiq Mockups 3

Balsamiq Mockups 是美国 Balsamiq 工作室于 2008 年推出的一款手绘风格的产品原型设

计工具。Balsamiq 软件是交互设计师绘制 Web 产品线框图或产品原型界面的利器。它属于轻

量级的原型设计软件，内置了常用的控件和图标，对于设计师来说，只要拖曳再加上一些简

单的编辑（如输入文本）就可以呈现出媒体设计的低精度原型。使用 Balsamiq 软件画出的原

型图都是手绘风格的图像，看上去类似涂鸦般的简洁。该软件提供了 9 大类共计 50 多个控

件，比如按钮（基本按钮、单选按钮等）、文本框、下拉菜单、树形菜单、进度条、多选项卡、

日历控件、颜色控件、表格、Windows 视窗等。除此以外，它还支持 iPhone 手机和 iPad 平

板电脑元素原型图。虽然这种涂鸦般的手绘风格看上去略显粗糙，但对于“快速原型”来说，

这种“低分辨率”的草图式设计更接近于纸上原型，使得设计师可以快速向用户展示其设计

思想。在原型阶段，手绘风格可以强迫设计者和客户把注意力集中在程序的功能、布局和交

互上，而舍弃不必要的细节内容（图 5-6）。

图5-6 Balsamiq Mockups 3的界面和控件

除了能够导入图片外，Balsamiq Mockups 还可以将图片转换成手绘风格。该软件的其他

优点包括：

① 易用性，其 UI 控件支持自动拖曳并且可以实现自动对齐；

② 丰富性，该软件提供了多样的组件，从按钮到输入框，从导航到页面、表格，甚至包

括了最新的 iPhone 元素（图 5-7）；

③ 便捷性，用户对元素的修改除了工具栏外，还可以使用隐藏编辑框，支持快捷键；

④ 兼容性，该软件可使用 XML 语言保存元素，也可以导出 PNG 图片，还可以插入到

Jhszw.indd 56 2017.1.20 2:45:07 PM

第二篇

57

任何项目；

图5-7 Mockups模拟手机界面的控件

⑤ 跨平台，包括 Windows、Mac OS、Linux 下都可以使用。Balsamiq 不足之处在于：相

对于纸和笔，它不够灵活；而相对于 Axure RP 7 或 Justinmind 7 来说，它精度不够，也不能

制作交互效果，不能将重复区域做成模板，只能做界面布局或 UI 的前期设计。

5.4  思维导图工具

思维导图 (mind map) 又称脑图、心智图，是由英国头脑基金会总裁东尼·博赞（Tony Buzan）在 20 世纪 80 年代创建的一套表达“发散思维”的创意和记忆方法。博赞受到大脑

神经突触结构的启发，用树状或蜘蛛网状的多级分支图形来表达知识结构，特别强调图形化

的联想和创意思维（图 5-8）。思维导图类似于计算机的层级结构，通过主题词汇→二级联想

词汇→三级联想词汇的串联，形成“节点”形式的知识体系，这有些类似于大脑神经突触结构。

思维导图运用图文并重的技巧，把各级主题关系用相互隶属的层级图表现出来，把主题关键

词与图像、颜色等建立逻辑，利用记忆、阅读和思维的规律，协助人们在科学与艺术、逻辑

与想象之间平衡发展，从而成为联想思维和“头脑风暴”的创意辅助工具。

图5-8 发散思维的树状分枝图（右）和大脑神经突触的结构（左）相关

Jhszw.indd 57 2017.1.20 2:45:08 PM

58

交互与服务设计：创新实践二十课

思维导图是一种发散思维的方法。每一种进入大脑的资料，不论是感觉、记忆或是想法，

包括文字、数字、符码、食物、线条、颜色、节奏或音符等，都可以成为一个思考中心，并

由此中心向外发散出更多的二级结构或三级结构，而这些“节点”也就形成了个人的数据库 （图 5-9）。思维导图会把大脑里面混乱的、琐碎的想法贯穿起来，最终形成条理清晰、逻辑

性强的知识结构，如鱼骨图、二维图、树形图、逻辑图、组织结构图等。思维导图遵循一套

简单、基本、自然和易被大脑接受的规则，如颜色分类、突破框架、深入思考、分享创意和

双脑思维等。思维导图通过“自由发散联想”形成触类旁通、头脑激荡的特点，适用于“头

脑风暴”式的创意活动，也成为 IDEO、苹果、百度、腾讯等 IT 企业创新型思维的活动形式

之一。

图5-9 思维导图通过主题词汇建立层级和联想

虽然思维导图可以直接用水彩笔、铅笔或钢笔来手绘制作，但在实践中，为了加快创

意进度，设计师们还是愿意选择思维导图软件来帮助设计（图 5-10）。目前市场上的思维

导图软件可以分为专业类（如 Mindjet MindManager）、开源类（如 XMind）和在线工具类（如

Google Coggle）等十多款。这些软件功能相似，也多是基于分层树状结构，其设计原理和

界面也大同小异。MindManager 是 Mindjet 公司所推出的专业思维导图工具。设计师可以

在视图中组织想法并通过拖曳来整理思维导图，其中还可以添加图像、视频、超链接和附件，

进行项目管理和任务管理（图 5-11）。该软件不仅用于头脑风暴和创意设计，同时也是一

个创造、管理和交流思想的工具，能够很好地提高项目组的工作效率和小组成员之间的协

作性。它可以帮助项目团队有序地组织思维、资源和项目进程。MindManager 不仅可以将

思维的路径图形化、条理化，以非线性的方式整合起来，而且可以使头脑风暴能够最终落

实为有组织、有计划的任务。此外，该软件还提供专业的拼写检查、搜索、加密甚至音频

笔记的功能。

Jhszw.indd 58 2017.1.20 2:45:09 PM

第二篇

59

图5-10 思维导图适合头脑风暴式的创意活动

图5-11 由Mindjet MindManager生成的思维导图

除了上述专业思维导图设计工具外，在线设计工具类如百度脑图、MindMeister 和

Google Coggle 等也成为许多设计师的首选。这些轻量级工具操作简便，图形新颖，可以满

足很多普通用户的需求。对于企业设计师来说，还可以通过注册会员和分期付费的方式得

到更专业的服务，如模板、搜索以及插入数据图表、照片和视频等功能。Google Coggle 采

用了扁平化的树状和发散形的设计风格，路径清晰，简洁美观（图 5-12），更重要的是能

够便捷地同朋友和同事分享和协同，因此成为广受市场欢迎的轻量级脑图创意和设计工具

之一。

Jhszw.indd 59 2017.1.20 2:45:10 PM

60

交互与服务设计：创新实践二十课

图5-12 Google公司的在线脑图设计工具Coggle的思维导图

Jhszw.indd 60 2017.1.20 2:45:11 PM

第二篇

61

思考与实践5

一、思考题

1. Axure RP 的主要用途是什么？

2. 作为手机 App 原型设计软件，Justinmind 有哪些突出的优势？

3. Balsamiq Mockups 原型设计的特点是什么？

4. 什么是思维导图？其主要用途有哪些？

5. 举例说明思维导图在发散思维和创意中的应用。

6. MindManager 设计思维导图的优势有哪些？

7. MindManager 作为项目管理软件的优势有哪些？

8. 举例说明纸原型和原型软件各自的优势和短板。

9. 涂鸦型思维导图工具 Google Coggle 的特点有哪些？

二、实践题

1. 原型设计的主要用途在于设计媒体界面和交互方式。请调研陌陌（图 5-13）的界面设

计（主界面和信息、附近、对话和好友等二级界面）并画出原型图。利用 Justinmind 重新设

计其内容和交互方式，从趣味性、可用性、可爱性和游戏性来重新定位该产品。

图5-13 陌陌的界面设计

2. 思维导图可以通过关键词进行延展和发散思维，如以“服务设计”为关键词，就可以

发散衍生出“服务”“设计”“体验”“交互”“目标用户”“服务模式”和“需求分析”等二

级词汇。请借助 MindManager 软件，对这些二级词汇进一步分类和细化（三级词汇），并构

建“服务设计”的知识体系，构建该领域的树形图或鱼骨图。

Jhszw.indd 61 2017.1.20 2:45:12 PM