Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

圖形語言與圖形思考的重要性

~~ 摘自 “Graphic Thinking for Architects & Designers” 一書

一般的語言侷限於文字，而圖形語言則涵蓋影像、符號、數字和文字。而且，文
字語言是線性順序的排列，有頭、有中間、有結尾。圖形語言則是多維度、全面
性的，所有的符號和關係都可同時思考。在面對複雜問題時，需要全面性思考，
圖形語言就顯得特別重要了。
(The difference between verbal and graphic languages is both in the symbols used and in the
ways in which the symbols are related. The symbols for verbal languages are largely
restricted to words, whereas graphic languages include images, signs, numbers, and words.
Much more significant, verbal language is sequential—it has a beginning, a middle, and an
end. Graphic language is simultaneous—all symbols and their relationships are considered at
the same time. The simultaneity and complex interrelationship of reality accounts for the
special strength of graphic language in addressing complex problems.)

欲領會達芬奇(da Vinci)的思想是離不開繪圖的，因為他的圖形和思考是一體的。
細瞧他的設計圖稿，對於圖形思考者，能獲得高度的啟發性。
(It is impossible to really understand or appreciate da Vinci’s thinking apart from his
drawings because the graphic images and the thinking are one, a unity. A closer look at these
sketches reveals certain features that are instructive for anyone interested in graphic thinking.)

131
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

http://www.android1.net/?Forum32/thread-22965-1-1
還有更多免費的書籍(PDF)可下載 …

第 7 章
用例图与架构师创意

7.1 用例图呈现些什么?
z 用户的观点
传统上，软件开发者非常重视用户(User)的观点，甚至把用户的观点奉如圣旨般
的崇敬，并称之为「需求」(Requirements)。英文字：Require 是含有强制的意思，例
如在学校里，「必修」课意味着强制人人都必须修习该课程。

132
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

把用户观点视为「必需」，基本上是合理的。问题是：这项「必需」到底是限制
了开发软件的目标(Goal)；还是限制了开发行为(How-to)呢? 如果是限制了开发目标，
就常扼杀了开发者的创意，难以创造 Android 手机或电视机(如 Google TV)等嵌入式
产品的差异化，对于手机或电视机(如 Google TV)等嵌入式产品的企业是非常不利的。

z 架构师的创意
因此，有许多人将用户观点视为开发工作的限制条件(Constraints)，而不是目标，
而是开发者所极力想摆脱开来的枷锁束缚。俗语说：山不转路转，路不转人转。当
我们的创意目标是：要去北极。此时，用户观点(需求)就是常常挡住我去路的一系列
冰山。而我们身为 Android 手机或电视机(如 Google TV)等移动互联网或软硬件整合
产品的开发者，就必须发挥我的一切想象和创意，绕过重重的冰山，寻觅出一条通
往我的创意目标的康庄大道。
当用户观点不再是我们的目标，而是我们的限制条件时，用例(Use Case)就不再
仅仅表达用户观点了。当我们深深体会出，开发者的创意才是我们的目标时，用例
就应该充分呈现开发者的想象、创意和设计了。透过创意和设计，创造出移动互联
网、或软硬整合产品的与众不同，才能吸引客户的目光、打开客户的心扉。

用例(Use Case)是让开发者创意与用户需求的心心相印的那片秋枫红叶…
如猛虎细嗅着蔷薇般，力与美组合浑然天成…

因此，用例图也是架构师表达创意的重要工具。它是让开发者创意与用户需求
的心心相印的那片秋枫红叶。尤其珍贵的是，这片红叶不仅传达着用户惦念在心的
期望，更能表达开发者透过精心设计来触发用户潜藏已久的心灵深处而不自知的欲
求。所以 UML 用例图能轻易让创意和需求进行亲密接触；当创意不再受限于用户心
中的期望(又称为明需求)时，开发者面对用户的情境，就犹如<一只猛虎正细嗅着蔷
薇>般，呈现出力与美融合的景象，唯美的力量激发用户内心深处的重新探索。于是，
过去许许多多无力实现的梦想(又称为潜需求)，如今一一变成可能；过去的郁闷，变
成今天的心花朵朵开、澎湃不已。

7.2 用例图与创意表达
例如，我们想让用户随意触摸手机屏幕的任何位置，点选位置之后，手机就在
该处画出一个三角形。这是一项创意，可以将它呈现于 UML 用例图，如下：

133
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

反之，如果我们想先画出一个三角形，然后让用户随意触摸手机屏幕的任何位
置，来改变三角形的位置。我们就能巧妙地将上图加以修改，精致地表达我们的新
创意，如下：

上述绘出的三角形是固定角度的，不会旋转的。现在，如果我们想先在特定位
置上画出一个持续旋转的三角形；然后让用户可以随意触摸手机屏幕来改变三角形
的位置。我们就能巧妙地将上图加以修改，精致地表达我们的新创意，如下：

134
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

当我们能够不再让用户需求局限了自己的创意时，就能大胆去创造 Android 手机
或电视机等嵌入式、或其它移动互联网产品的差异化，强化产品的市场竞争力。

7. 3 以 Android 的 App 为例
传统用法：表达用户观点

首先看看大家已经熟悉的用例图：

135
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

新潮用法：表达开发者创意

用例本意上就是要表达出客户想掏钱购买的产品特性。用例(Use Case)概念的创
始人 Ivar Jacobson 就特别强调：“Use cases are what users want to buy.”
既然 Android 手机或电视机(如 Google TV)等移动互联网、或软硬件合产品的独
特化是吸引顾客的焦点，也是提升利润的关键；那么，用例图就应该表达来自架构
师(或开发者)心里深处的创意和设计，如下图：

既然是表达创意，而创意经常是百花齐放的，所以不会只有一种形式，而是形

136
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

形色色的，例如也可以特别凸显出 Android 环境下的跨进程(IPC：Inter-Process

Communication)接口：IBinder 接口。如下图：

创意管理：如何分解用例图

一个大型系统常常含有许多模块(Module)或套件(Package)。这些模块可能由多个
团队负责开发。所以只有整体系统的架构师需要观看整个用例图，至于各个团队都
只需要看到他所负责的开发模块的用例图即可。
即使是架构师，遇到由数十个或数百个模块所构成的大型复杂系统设计图时，
如何切分用例图是个重要的管理技能。例如上图里的 Android 应用程序，内含两个模
块如下：Ex06_Activity 和 Ex06_Service。 此时，架构师可以切出 Ex06_Activity 模
块的用例图如下：

137
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

然后，将这图交给负责开发 Ex06_Activity 模块的团队。接着，可以切出

Ex06_Service 模块的用例图如下：

然后，将这图交给负责开发 Ex06_Service 模块的团队。

上图也相当于：

138
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

上 图 里 的 「 小 人 」 图 像 (Icon) 可 代 表 人 ( 如 User) ， 也 可 代 表 系 统 模 块 ( 如
Ex06_Service)，都通称为用例启动者(Actor)，可代表任何模块之外而会来与模块互动
的元素。透过它的串接，就能顺利将复杂的用例图分而治之了。
综上所述，UML 用例图应该多多应用于：
z 表达架构师(或开发者)的创意；
z 激发用户潜在而不自知的潜需求；
z 创造 Android 移动互联网、或软硬整合产品的与众不同。

如此，一旦用例图表达了架构师(或开发者)的创意，则用例图就像一首诗、或一
曲乐谱。大家可以互相传颂、演唱，激发出更多创意和设计，让 Android 平台的各种
软、硬件产品更新颖、更与众不同，也能开创更多商机和利润。◆

~~ Continued ~~

139
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

第 8章
用例图的演练：从需求到设计

8.1 从用户需求到通信设计
z 用例图表达明需求
一般的系统分析人员都擅长于拿用例图来捕捉和记载用户的需求。例如，
下述 UML 用例图记载了用户的期望：

140
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

这图表达了用户的明需求，代表着对设计者的限制条件(Constraint)。

z 用例图表达设计，触发潜需求

基于上图，设计师必须从限制条件丛林中，寻觅出一条康庄大道，提升
产品的差异化和创造多样化。试图提出对用户更具有价值的服务来取代上图
里的功能，并修改上图去表达新的服务，争取用户的支持与购买。例如，设
计师添增了 MMS 服务，如下图：

如此，呈现了产品与竞争对手的差异化，只要成本在控制之中，些为提
高成本，来取得更大的市场占有率，经常是成功的商业策略，也是产品进步
的动力来源。接着，设计师继续进行细部设计，如下图：

141
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

进行分工开发时，可以将 Ex07_Service 模块的 Use Cases 独立出来，如下

图：

而 Ex07_Activity 模块的用例图可绘制如下：

142
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

于是 UML 用例图，既能衔接需求分析，也能创造产品的独特性，又能支
持项目(项目)的分工开发管理。发挥了用例图的多元功能，非常有益于像
Android 手机或电视机等移动互联网、或软硬整合产品的开发。

8.2 从用户需求到画面布局(Layout)设计
8.2.1 范例之一

z 表达需求的用例图
一般的用例图是用来表达用户的需求。例如，一般用例图如下：

143
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

这表达了用户先选择欲播放的 MP4 视频或歌曲；然后开始播放视频或歌

曲。

z 表达画面布局的设计
画面布局(Layout)是用户操作的视觉接口(UI)，架构师将其布局创意与用
例图联结在一起，是有意义的。如此，能够从用例图连结到布局的设计图，
也就是藉由用例图将用户需求与架构师的创意连结起来，这是用例图极具价
值的用法。如下述的新潮用例图：

这说明了，设计 Layout_01 来提供「选曲」时的互动画面。设计 Layout_02

来提供播放画面。设计 Layout_03 来提供播完时，寻问是否回放的互动画面。
除了画面布局设计之外，也可以将负责处理布局讯息的应用子类别标示
出来，如下图：

144
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

z 衍生出类别图
于是，上述 UML 用例图就能连结到如下的 UML 类别图了，如下：

只拿 UML 用例图来表达用户需求，是有一点浪费的。用例图的高度价值
是：从需求、创意到设计。对于 Android 架构师而言，这项用例图的新潮用法，
是非常有帮助的。

145
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

8.2.2 范例之二
在刚才的范例里， 从用例图延伸到画面布局的规划，并且衍生刚才所看到的类
别图(含 ac01 和 VideoView 类别)。此外，也能在衍生出状态图，可大幅提升 UI 画面
操作幕后事件处理机制的稳定性和未来维护的容易性。

z 表达需求的用例图
一般的用例图是用来表达用户的需求。例如，一般用例图如下：

这表达了用户先选择欲播放的 MP4 视频(或称影片)；然后开始播放视频。

z 表达画面布局的设计
依循上图的需求，架构师规划出三个画面布局，如下：

146
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

Layout_#1 支援「 UC:选择 MP4 影片」 Layout_#2 支援「 UC:下载 MP4 影片」

Layout_#3 支援「 UC:播放 MP4 影片」

z 延伸到画面布局设计
在上一节已经提过了， 画面布局(Layout)是用户操作的视觉接口(UI)，架构
师将其布局创意与用例图联结在一起，是有意义的。如此，能够从用例图连
结到布局的设计图，也就是藉由用例图将用户需求与架构师的创意连结起来，
这是用例图极具价值的用法。如下述的新潮用例图：

147
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

这说明了，设计 Layout_#1 来提供「选曲」时的互动画面。设计 Layout_#2 来提

供下载画面。设计 Layout_#3 来提供播放和播完时寻问是否回放的互动画面。

z 衍生出状态图
刚才已经说明过，从用例图不仅能延伸到画面布局设计，还可以进一步衍生出
状态图。如下图：

148
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

于是，上述 UML 用例图就能连结到如下的 UML 状态图了，如下：

(state_選擇) (state_下載)

(state_播放)

在上一章里，曾经说过，只拿用例图来表达用户需求，是一种浪费。用例图的
高度价值是从需求联结到设计师的创意。本章以 MP4 影片(视频)播放为例，说明如
何继续发挥用例图的新潮用法。上一节是从用例图衍生出类别图；而本节则从用例
图衍生出状态图。 ◆

149
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

高煥堂 老師 即將(6 月下旬)在 北京、深圳各講授

<Android 架構師、軟硬整合與應用框架開發> 公開課：

慶祝新開班，搶鮮特惠價，請勿錯過良機
詳細說明，請看<Android 論壇技術教育中心>網頁：
http://www.android1.net/?Forum32/thread-22965-1-1
或詢問：
AndroidEdu520@gmail.com (劉智勇收)

150
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

第 9 章
类别图&顺序图的演练：
如何表达接口( Interface)?

9.1 从抽象类别说起
z 接口：特殊的抽象类别
如果一个类别，它的某些函数是抽象函数的话，就称之为「抽象函数」
(Abstract Class)。如果一个抽象类别，它的所有的函数全部都是抽象函数的话，
就称之为「纯粹抽象类别」(Pure Abstract Class)；这种类别又称为「接口」
(Interface)。所以，接口是一种特殊的抽象类别。

z 类别图：表达抽象类别
请看下述的 UML 类别图：

151
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

此图表达了一个抽象类别：Counter，它含有一个 getN()抽象函数。

z 顺序图：表达抽象类别(的互动行为)
UML 顺 序 图 也 可 以 表 达 抽 象 类 别 ， 呈 现 它 与 其 它 类 别 的 互 动 行 为
(Behavior)，如下图：

152
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

这呈现了 Counter 抽象类别与其它类别之间的讯息传递情境。

9.2 接口：就是纯粹抽象类别
如果上述的 Counter 类别只含有抽象函数的话，就成为纯粹抽象类别(Pure
Abstract Class)，如下图：

153
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

此图里的 AbstractCounter 就是一个纯粹抽象类别。由于「纯粹抽象类别」

就 是 「 接 口 」， 所 以 我 们 可 以 使 用 UML 的 接 口 图 素 来 代 替 上 图 里 的
AbstractCounter 纯粹抽象类别，并取名为 ICounter 接口，就得到比较清晰、
美观的 UML 类别图，如下：

154
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

于是，在这类别图里，原来的纯粹抽象类别，已经就转化为 ICounter 接口了。

这项转变，也能呈现于顺序图，使得上述的顺序图，也转变成为新的顺序图，
如下：

9.3 多接口的情境
上述各图里，都只含有一个接口。请继续看含有较多个接口的情形，如
下图：

155
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

兹以顺序图来呈现出小框架与应用程序之间的互动顺序，例如下图：

156
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

此图里的 ICoubter 和 IA 接口是定义于小框架里，有些其它的接口可能会

定义于应用程序里，如下图：

这个 IB 接口就定义于应用程序里了。此时，可以绘制顺序图，如下：

157
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

在 Android 平台里，框架 API(即接口)扮演着关键的角色。对于架构师来

说，如何在 UML 图表里呈现接口，变得极为重要。

9.4 Android 框架接口(API)

z 区别 UI 与 API
应用框架只要是提供 API 给应用程序开发者去撰写应用子类别。然后应
用子类别提供 UI 给用户(User)使用。例如，下图所示的 UI 画面就是由应用子
类别 myActivity 所提供的。

158
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

而背后是由应用框架里的父类别(又称基类)来支持，而这父、子类别之间
的沟通接口，就是大家熟悉的 API(Application Programming Interface)了。如下
图所示：

z 用例比较不适合表达 API
一般而言，用例(Use Case)可以表达一个模块(包括类别、链接库或框架)
的外观功能或服务。对于 API 的详细互动，用例比较无法呈现其精确的细节。

159
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

z 以类别图表达框架 API
首先使用 Class 图表现 Android 大框架、小框架和应用子类别之间的层级
关系，如下图所示：

这图是基于小框架开发者的角度来绘制的，其凸显小框架与大框架之间
的关联，也凸显小框架期待应用子类别的行为。

z API 呈现于顺序图里
在 Android 环境里，框架与 App 之间的 API 不仅是模块之间的衔接处，
而且是全球 App 开发者与 Android 平台开发者(即 Google Android 开发团队)
之间分工的界线。所以必须对它有很精确的呈现，才能确保分工开发之后而
能顺利整合起来。例如下图：

160
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

这图凸显分工开发的模块之间如何无隙缝地衔接，并顺畅地执行，属于
行为(Behavior)层面的呈现。对于小框架的开发团队而言，如何呈现框架的 API
给众多应用开发者，让开发者能迅速理解，是一项关键的任务。由于 API 不
像 UI 可以可视化的画面呈现，于是透过 UML 图表来呈现，是一项可行之路。
综上所述，Android 架构师能从本章里得到一个新的体验，由于能让你自
由自在的表达创意和设计你将不会再仅满足于「适度的设计」；而会极力追求
气象万千、瑞气千条的高度设计了。◆

~~ Continued ~~

161
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

第 10 章
顺序图的创意设计：
框架与 App 的互动

10.1 呈现框架 API

z 类别图、顺序图与框架 API
在上一章里介绍过，从用例图延伸到画面布局(Layout)设计，也延伸到画
面(UI))事件处理类别(如 ac01 和 VideoView)的设计上。由于 UI 事件的处理工
作分散于 Android 框架的基类(如 Activity)和应用子类别(如 ac01)上，所以会触
发框架与 App 之间的讯息传递(或函数调用)。
在 Android 框架上开发 App 时，善用 UML 图表来呈现框架与 App 之间
的沟通与是一项重要事情，因为这是框架开发者与 App 开发者之间的分工接
口，也是框架与 App 两个模块之间的 API。凸显这个 API 是非常重要的，可
以在类别图上呈现之，也可以在顺序图里呈现之。顾名思义，顺序图可以呈
现详细的讯息传递顺序；而类别图则能呈现模块与接口之关系，也就是呈现
系统的架构性意义，而不是执行(Execution)的行为意义。

z 表达需求的用例图
一般的用例图是用来表达用户的需求。例如，一般用例图如下：

162
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

这表达了用户在 Layout_01 画面上，按下<Play>按钮(Button)，就可以播

放 MP3 歌曲了。

z 框架传送事件给 App
依循上述用例图的需求，架构师设计了事件讯息的处理类别，如下：

z 以顺序图呈现互动设计
在启动 App 时，Android 框架就送出 onCreate()给 ac01 子类别。这子类别

163
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

就准备 Layout_01 画面布局，并调用 Android 框架的 setContentView()去要求

框架显示出 UI 画面。当用户在 Layout_01 画面布局上，按下<Play>按钮时，
框架就送出 onClick()讯息给 ac01 类别。这类别就调用 MediaPlayer 的 play()
函数，在幕后进行播放 MP3 音乐的工作。
于是，可以拿 UML 的顺序图来呈现上述的设计思维。由于每位架构师想
要凸显的焦点会有些不同，所以会设计出各种不同造型的顺序图。

10.2 顺序图的创意造型
z 造型(一)
這裡特别凸显：用戶觸摸畫面的事件是由 Android 框架先接到，然后才传
送到 ac01 类别；而且由框架来显示出画面佈局，如下图：

z 造型(二)
這裡就不特別強調是由 Android 框架来显示出画面佈局，如下图：

164
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

z 造型(三)
這裡不凸显由 Android 框架先接收及显示出画面佈局，如下图：

165
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

z 造型(四)
這裡凸显团队分工：Android 框架和 MediaPlayer 类别都是 Google 团队所
开发的。而且呈现出：从 App 看框架的观点，如下图：

z 造型(五)
這裡呈现出：从框架看 App 的观点，如下图：

166
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

z 造型(六)
這裡則隐藏了 Android 框架，只呈现 App，如下图：

167
Android 架構師手冊_建模與圖形思考 By 高煥堂 2012

雖然以上 6 張圖都是 UML 順序圖，但取決於架構師的設計觀點，而會

創造出各種不同的造型。無論是以状态图来呈现「控制角度」的系统行为；
或者以順序图来呈现「执行角度」的系统行为。架構師都能盡情地呈現其創
意思維，以及設計造型。
於此，再一次說明，Android 架构师能从本書里得到一个新的体验，由于
能让你自由自在的表达创意和设计你将不会再仅满足于「适度的设计」；而会
极力追求气象万千、瑞气千条的高度设计了。◆

~~ END ~~

http://www.android1.net/?Forum32/thread-22965-1-1
還有更多免費的書籍(PDF)可下載 …

168