人机交互技术编写组 1
第 9章 移动界面设计
人机交互技术编写组 2
主要内容提要
移动界面的基本概念
移动界面的设计方法
移动界面的实现技术
移动界面设计的实例
人机交互技术编写组 3
9.1移动界面基本概念
互联网和移动通信，作为迈向信息社会的两个
重要标志，分别适应了人们对信息资源的丰富
性以及信息获取方式的灵活性与移动性的需求。
互联网与移动通信已经逐渐形成了信息产业中
潜力巨大、前景可观的两大领域，同时也催生
了结合二者的技术优势，目标在于向用户提供
灵活的、不受信息源和用户访问位置等各种限
制的信息服务的移动互联网（ Mobile Internet）
技术。
人机交互技术编写组 4
9.1.1移动互联简介
移动互联网概念的理解可能因人而异，特别是
与无线互联网（ Wireless Internet）可能会当
成一回事。
从概念上而言，移动与无线是两个不同的概念,
在很多情况下，无线与移动是两个重叠的概念，
但在另外一些情况下，这两者又有明显的区别，
这也使得移动互联网的概念可以从狭义与广义
两个角度来理解。
人机交互技术编写组 5
移动互联网概念
从狭义的角度上来讲，移动互联网指的就是基
于分组交换技术的无线数据通信技术，有时可
能会被称之为无线互联网（ Wireless
Internet）。
从广义的角度上来讲，移动互联网不一定局限
于一般的无线数据通信方式，与无线互联网的
概念有一定的区别，我们可以从设备的移动性
与数据连接方式这两个方面来说明。
人机交互技术编写组 6
移动界面的设计
移动界面的设计成为人机交互技术研究
的一个重要方向。一方面，移动应用的
界面设计符合人机交互设计的一般规律，
可以利用人机交互界面的一般设计方法；
另一方面，由于移动设备的便携性、位
置不固定性和计算能力有限性以及无线
网络的低带宽高延迟等诸多的限制，移
动界面设计又具有自己的特点。
人机交互技术编写组 7
移动与无线概念的外延关系
移动 无线
图 9-1 移动与无线概念的外延关系
人机交互技术编写组 8
9.1.2移动设备与连接方式
目前主要的移动终端设备种类包括手机、
掌上电脑 PDA（ Personal Digital
Assistant）、笔记本电脑以及各种特殊
用途的移动设备如车载电脑。基于可移
动性（ mobility）的考虑，目前移动互联
设备以智能手机与掌上电脑为主 。
人机交互技术编写组 9
Vulcan Inc.公司设计的 FlipStart MiniPC
人机交互技术编写组 10
移动互联网的数据接入方式
移动互联网的数据接入方式目前也是多种标准
并存，没有完全统一。主要形式包括,
? 无线局域网（ Wireless Local Area Network,WLAN）
? 无线城域网（ Wireless Metropolitan Area Network，
WMAN）
? 无线个域网（ Wireless Personal Area Networks，
WPAN）
? 高速无线数据通讯系统以及卫星通讯等
人机交互技术编写组 11
移动互联网的数据接入方式
无线局域网采用无线的方式提供传统有线局域
网的所有功能，具有极大的灵活性。
无线城域网技术的目标是提供类似于有线
Modem,DSL （ Digital Subscriber Line），以
太网以及光纤网等有线方式的高速 Internet接
入，优势是可以在较大的地理区域内无须布线。
继无线局域网 (WLAN)和无线城域网 (WMAN)之
后，各种形式的便携式移动设备的不断涌现，
促进了无线个域网的出现，使移动互联网的接
入方式更为丰富。
人机交互技术编写组 12
高速无线数据通信
是在无线语音通信系统之上发展起来的，分为
三代,
? 第一代是模拟无线网络,20世纪的 80年代，目前在
我国已基本淘汰。
? 第二代是数字语音通讯系统和数字通信系统，常见
的有九十年代出现的欧洲的全球移动通信系统 GSM
（ Global Systems for Mobile Telecommunications，
GSM）、美国的窄带 CDMA（ Code Division Multiple
Access）。
? 第三代，即 3G（ Third Generation）阶段，目标是
采用数字技术实现语音、数据以及多媒体信息的高
速传输。
人机交互技术编写组 13
9.1.3移动界面的输入方式
目前主要的移动设备形式 ——智能手机
与掌上电脑而言，由于尺寸较小、接口
较为简单，全尺寸键盘、鼠标等诸多的
传统的输入输出设备较难在移动界面中
使用，因此需要设计专门的输入输出方
式，以便适应移动界面的特点。
人机交互技术编写组 14
移动界面的输入方式
键盘输入
手机键盘的设计主要还
是从手机的主要功能即语音
通信考虑的。由于每一个按
键都是复用的，如数字键 7和
字母 P,Q,R,S共用一个按
键。
T9输入法就是目前最为著名的一种解决方案。使用 T9
输入法的优越之处在于输入一个字以后，会提示一些可以
合法组合的常见字，用户只需要简单地选择即可输入，大
大降低了手机文字输入的疲劳程度，提高了批量文字信息
的输入效率。
人机交互技术编写组 15
移动界面的输入方式
键盘输入
? 软键盘（ soft keyboard）是解决移动设备输
入问题的又一重要方法。
? 所谓的软键盘就是在移动设备屏幕上显示
QWERTY键盘，用户在屏幕上选择软键盘上
的键完成输入。
? 这种输入形式在桌面计算机的 Windows平台
上的输入法中都可以见到。
人机交互技术编写组 16
T9比软键盘输入法的效率高
T9输入法所支持的手机键盘基于电话键
盘设计的，手机用户群未必熟悉计算机；
手机键盘采用一个按键对应于多个字符，
键的大小自然可以更大，能更快的键入
和更高的准确程度；
手机键盘按键的设计更加紧凑，按键间
距相对较小，手指移动距离短，也可以
提高输入速度 。
人机交互技术编写组 17
移动界面的输入方式
笔输入
? 手写文字识别是一种文本的输入方式，作为键盘输入
的一种替代方式。
? 随着笔输入技术的日益成熟，目前笔输入技术的在包
括平板电脑（ Tablet PC）、智能手机、掌上电脑等多
种移动设备中的得到了广泛应用。
? 近年来微软公司力推 Tablet PC，也在一定程度上对于
笔输入的普及起了推波助澜的作用。
? 笔输入是目前掌上电脑最主要的一种输入方式 。 特别
在中国, 由于汉字书写的复杂性, 手写笔输入成为最
自然, 符合中国人书写习惯的输入方式 。
人机交互技术编写组 18
移动界面的输入方式
? 在微软的 TabletPC系统中称为数字墨水
（ Digital Ink），实际就是将笔迹信息作为
一种新的数据类型做到了操作系统层，并提
供相应的应用程序接口，供软件开发人员用
于开发可以充分利用笔式输入便利的应用软
件。
人机交互技术编写组 19
移动界面的输入方式
语音识别
? 语音是人们在日常生活中进行交流最主要的手段，
因此对于语音技术成为新一代多通道人机界面中的
最重要技术之一的期望也就很容易理解了
? 语音识别技术的研究工作始于 20世纪 50年代目前这
个领域最具代表性的产品是 IBM公司的 Viavoice和
DRAGON公司的 Naturally Speaking。
? 可以通过将掌上设备作为语音门户网站 (Voice
Portal)的访问终端。在这种环境中，用户可以在办
公室、家里或旅行途中随时随地通过手机等具有语
音通信功能的移动设备与具备语音识别与合成技术
的语音门户网站进行对话。
人机交互技术编写组 20
移动界面的输入方式
? 语音识别技术还可以用于人机界面的语音命
令导航，使得用户可以直接用语音发出各种
操作指令。
? 目前的语音识别技术仍然存在着很多的问题,
因此能够实现的应用领域还有一定的局限性,
不会立即给人机交互方式带来本质性的影响 。
? 语音录制, 可以随时在任何可执行屏幕手写
或绘制操作的程序中进行语音录制，可以单
独生成一段录音，还可以将一段录音嵌入文
本便笺中。
人机交互技术编写组 21
9.1.4 移动界面的输出方式
主要是显示屏幕和声音输出
? 显示技术
? 显示屏的关键因素：分辨率、色彩、尺寸、功耗及显示响
应速度。
? 多种显示器,超扭曲阵列 (Super-Twisted Nematic STN）、
DSTN(Dual STN),CSTN（ Color STN）、薄膜式晶体管
（ Thin Film Transistor,TFT）以及薄膜二极管（ Thin
Film Diode,TFD）等。
? 单色 STN液晶屏：用简单的无源矩阵寻址方案，具有性能
可靠、成本低、功耗也极低的特点。
? 一些新的显示技术：有机发光二极管 (Organic Light
Emitting Diode,OLED) 和硅基液晶 (Liquid Crystal On
Silicon,LCOS)。
人机交互技术编写组 22
9.1.4 移动界面的输出方式
? 声音输出
?手机与 PDA等掌上设备的声音输出功能一般较弱。
近年来，逐渐通过引入声音合成技术，使得其可
以播放较为动听的 MIDI（ Musical Instrument
Digital Interface）电子音乐。
?移动设备的音乐合成技术主要包括两种：调频
（ Frequency Modulation,FM）合成与波表
（ Wave Table）合成。
?复音就是俗称的“和弦”，指的是音乐合成系统
中能够同时发出的声音的数目，而并非音乐理论
中的和弦。
人机交互技术编写组 23
9.1.5 移动界面设计的新问题
资源相对匮乏
? 高档手机的显示分辨率也不过 320× 240，而且尺寸
很小，同时无法展示网站丰富的多媒体内容。
? 移动界面并非简单的缩小版的桌面系统的用户界面。
? 桌面系统用户界面中采用的一般是并行展示其中各
种选择可以在一个大小可调的屏幕中同时显示出来。
? 移动界面中，这些选择只能采用顺序展示的方式。
? 移动界面设计的难题就是如何在有限的资源条件下
有效地为用户提供信息服务，提供的选择须根据重
要性排列 。
人机交互技术编写组 24
移动界面设计的新问题
移动设备的种类繁多
? 在开发移动应用时需要专门针对某一型号的一
种设备开发，大大增加了应用开发的复杂度。
? 在移动界面的设计中，各设备的差异是移动应
用开发过程中最需要关注的一个环节。
? 移动界面具有一定的自适应性是解决问题的一
种思路。
人机交互技术编写组 25
移动界面设计的新问题
连接方式复杂
? 移动互联网的数据接入方式形式繁杂，多种标准并
存，并在较长的一段时间内也很难完全统一。
? 而移动设备的位置具有很强的移动性，同一设备可
能在不同的时间段处于不同的网络连接条件下，网
络的性能变化范围可能很大。
? 移动的同时往往需要保持应用执行的连续性。
? 应将网络连接状况视为一种资源，在设计时制订相
应的策略。
人机交互技术编写组 26
移动界面设计的新问题
移动界面设计中的最大问题就是界面的
定制。无论是移动设备各种资源的匮乏、
种类与连接方式的繁复，最终均可以归
结为根据需要定制合适的移动应用界面。
人机交互技术编写组 27
9.2移动界面的设计方法
可用性设计原则
移动界面导航
移动界面设计要素
人机交互技术编写组 28
9.2.1可用性设计原则
了解用户
? 移动应用的用户不一定熟悉桌面计算机的操
作
? 移动证券软件的用户的目的是要了解股票行
情或进行证券交易
? 移动手机游戏的用户是为了打发时间或休闲
娱乐
? ……
人机交互技术编写组 29
可用性设计原则
了解目标平台
? 移动设备的复杂性使得了解目标应用平台
的相关细节显得尤为重要。
? 重要的软硬件厂商往往会提供详细的规范文
档，从中可以获得必要的目标平台信息。
? 根据目标平台信息，开发个性化的版本，通
过充分利用每种设备的优势特性提高移动应
用的可用性。
人机交互技术编写组 30
可用性设计原则
易于检索
? 避免嵌套过深的多级菜单，缩减不必要的功
能。
? 以满足用户的目标需要为准，尽量减少用户
进行信息访问时所要采取的步骤。
? 同时尽可能创建多种信息访问途径。
人机交互技术编写组 31
可用性设计原则
采用一致的界面风格
? 不必要的差异常常会让用户感到不习惯，从
而降低可用性。
? 一致的界面风格对用户来说很直观。
? 应当检查每个布局和每个显示来保证其一致
性。
? 各种移动应用开发平台都提供某种形式的应
用界面的风格指南，仔细研究这些指南对于
移动应用的界面设计非常重要。
人机交互技术编写组 32
可用性设计原则
避免不必要的文本输入
? 尽量使用户避免不必要的文本信息的输入，
而采用选择列表或模糊查询，即输入一部分
查询关键词就可以获得检索目标或包含目标
的列表可供用户选择，这样可以降低对于用
户进行关键字文字输入的麻烦。
人机交互技术编写组 33
可用性设计原则
根据用户的要求使服务个性化
? 允许应用保留用户信息以便能够记录用户的
个性化信息，例如：可以利用 cookie记录，
或存储在该应用所在的服务器中。
? 下一次用户启动应用时可以得到个性化的服
务。
人机交互技术编写组 34
可用性设计原则
最大限度地避免用户出错
? 预测用户可能出现的错误，提供相应的机制
尽可能避免。
? 例如：如果用户要输入日期，可以采用格式
化输入的方法，检查用户输入是否全部是数
字，而且代表日期、月份以及年份的数字的
取值范围是否在合法的范围内。
人机交互技术编写组 35
可用性设计原则
文本信息应当本地化
? 要根据应用所使用的地域特点，使应用本地
化。例如，在美国使用 zipcode （邮政编码）
术语，而在英国和澳大利亚使用 post或
postal code（邮政编码）。有时，用词得当
与否也可以决定某种应用可用性的好坏。词
义表达清楚是关键，要避免使用含混不清的
用语。
人机交互技术编写组 36
可用性设计原则
进行用户测试
? 检验用户界面功能的唯一可靠方法是对实际
的最终用户进行测试。
?专家分析与咨询
?单用户测试
?群组测试
?满意度调查
?最终用户分析
人机交互技术编写组 37
可用性设计原则
? 可用性专家评估
? 从用户的角度对产品进行评估，对一个应用软件的所有功
能进行分析，并对已存在或可能会出现的可用性问题进行
记录。
? 单用户测试
? 将产品交给实际的最终用户使用，并由可用性分析人员观
察其使用情况，以便发现用户在什么环节遇到问题，以及
用户是否使用了所有的功能等。
? 群组测试
? 进行群组测试可以分为七个步骤，分别是：确定产品的目
标用户群；从不同渠道召集测试参加者；设计安排测试情
景、任务、以及需要测试者回答的各种问题；实际测试；
分析结果；撰写报告；反馈结果给开发者。
人机交互技术编写组 38
可用性设计原则
? 满意度调查
?通过标准的统计数据，就可用性问题对用户体验
的影响进行评价。
? 最终用户分析
?最终用户分析包括市场分析、用户群划分等工作。
在开发的初始阶段必须确定用户群组，以便明确
应用开发的要求，这有助于开发者设计出满足市
场需求的产品，并确定设计思路。
人机交互技术编写组 39
9.2.2移动界面导航
一般应该在应用设计完成后，建立导航
流程图表，规划移动应用的导航流程。
? 导航设计的基础是按传统的树结构编排的层
次状态结构 。
? 在层次状态结构中，每一节点代表一个状态，
一般是一个新的显示画面。
? 用户点击按键打开一个可选项，或从菜单中
选中一项，实现状态转换的过程。
? 返回功能一般返回到层次树的上一级，初始
状态下返回功能就是退出，将关闭该应用。
人机交互技术编写组 40
导航流程图表
1
1-1 1-2 1-3
1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3
图 9-6 层次状态结构示意图
人机交互技术编写组 41
加入标签导航的层次状态结构
标签进行导航的视图应遵循的原则,
? 从一个标签视图转到另一个并不影响这些视
图中的返回键功能。
? 它们中的任何一个返回功能指向同一个地方，
即该应用的上一层。
? 当某个状态拥有标签视图时，如果用户从上
一层进入到该状态，打开的将是默认视图。
? 如果用户从某个标签视图进入到其下面一层，
这时的返回功能将导致返回到原先的视图。
人机交互技术编写组 42
加入标签导航的层次状态结构
1
1-1 1-2
1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3
1-
3a
1-
3b
图 9-8 加入标签的层次状态结构示意图
人机交互技术编写组 43
有同层次之间相互访问的导航
1
1-1 1-2 1-3
1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3
图 9-8 加入同层次访问的层次状态结构示意图 —图结构
人机交互技术编写组 44
一个手机游戏的导航流程图表
欢迎界面
主菜单
退出
继续 新游戏 选项 积分榜 帮助
游戏
确认
Game Over
退出
图 9-9 示例导航流程图表
人机交互技术编写组 45
9.2.3移动界面设计要素
移动界面也包含很多种类的设计要素，
主要界面设计元素有,
? 菜单
? 按钮
? 多选列表
? 文字显示
? 数据输入
? 图标与图像
? 报警提示
? 移动多媒体
人机交互技术编写组 46
移动界面设计要素
菜单
? 主要目的用于提供项目选择。
? 设计移动界面可用性好的菜单应遵守的规则 。
? 供选择的项目应根据需要进行逻辑分类，如果没有逻辑顺
序，可以按优先级分类，将被选择频率最高的项目放在列
表的最顶端。
? 每一屏中不宜设计过多的选项，如果一个菜单上的选择项
目太多，应该建立一个“更多”链接，将菜单扩展到多个
屏幕。
? 菜单上的每一选项一般应当简明扼要，不宜超过一行。
人机交互技术编写组 47
图 9-10 菜单模拟显示画面
人机交互技术编写组 48
移动界面设计要素
按钮
? 一般移动界面中的按钮不经常使用图标。
? 在按钮属性的设置上根据所显示的应用类型和信息
类型，使用风格和标注一致的标签。
? 汉字标签则一般需要注意字数的控制 。
? 常见的通用按钮
? OK（确定）：可用于菜单项的选择或表示对某一操作的
认可，如确认删除。
? Done（完成）：可用于结束当前操作，并返回到上一层任
务。
? Back（返回）：使用户回到前一个操作屏幕。
人机交互技术编写组 49
移动界面设计要素
“寻找航班”是根据特定的应用需要设定的按钮。
图 9-11 按钮模拟显示画面
人机交互技术编写组 50
移动界面设计要素
多选列表
? 在移动应用中使用多选列表，可以最大限度地
减少文本输入。
图 9-12 多选列表模拟显示画面
人机交互技术编写组 51
移动界面设计要素
文字显示
? 文字显示控件主要用于显示较多数量的文字信息。
? 根据显示的需要，可能使用以下几种形式的链接。
? View（查看）：如果一个数据列表中每个项目包含额外的
详细信息，可以使用该链接来显示这些数据。
? More（更多）：一般作为数据页末尾的一个链接，使用户
进入下一页的相关数据。
? Skip（跳过）：跳过当前选项，链接到下一个类似的数据，
如下一封电子邮件信息。
人机交互技术编写组 52
移动界面设计要素
文字显示的一般可用性建议,
? 每一屏幕显示内容不宜过多，如果信息较多，
应定义一个 More链接。
? 一般情况下文字信息应当使用换行方式进行
显示。
人机交互技术编写组 53
移动界面设计要素
图 9-13 文字显示模拟显示画面
人机交互技术编写组 54
移动界面设计要素
数据输入
针对数据输入的可用性原则包括,
? 对于数据输入一般应该进行长度、数据类型以及取值范围等
形式的格式化，以指导用户输入合法的可用信息。
? 建立数据输入标题，并根据需要在标题中加入所要求的输入
格式。
? 如果已经可以确定数据的某些输入部分，可以预先填好，且
不允许用户修改。
? 应当具有检错机制，如某些信息必须填写，应当可以设置成
禁止提交空数据。
? 在格式设置中适当地添加分隔符以提示用户输入合法的信息。
人机交互技术编写组 55
移动界面设计要素
?图 9-14 格式化模拟显示画面
人机交互技术编写组 56
移动界面设计要素
图标与图像
? 图像、图标可以增强显示信息的效果。,
? 在移动设备上使用图像，需要注意的问题包括,
?了解目标设备所支持的图象格式 。
?注意调色板的设置使其达到最佳显示效果。
?对于不支持图像的设备，应当提供替换的信息展示
方式。
?进行图像浏览时，图像缺省地应当充满整个可用区
域，如必须滚屏时，尽量使用垂直滚屏。
?尽量使用户在上下文中直接浏览嵌入的图像，而不
必使用独立的显示工具。
人机交互技术编写组 57
移动界面设计要素
图 9-15 图像模拟显示画面
人机交互技术编写组 58
移动界面设计要素
报警提示
? 警报提示，可以将用户所关心的最新信息通知给用
户，或向用户提供有关当前状况的信息。
? 一般使用文字信息，可能加入一定的图标。
? 常用的提示类型有,
? 确认提示
? 信息提示
? 警告提示
? 出错提示
? 持久性提示
? 等待提示
人机交互技术编写组 59
移动界面设计要素
移动多媒体技术
? 目前移动设备的多媒体支持进步很大，已经
可以播放几种类型的音频和视频文件，还可
以使用内置或外接的摄像头来抓取图像。
? 移动应用开发平台开始提供支持多媒体数据
的编程接口。
人机交互技术编写组 60
移动界面设计要素
? 制作能够在移动设备进行播放的多媒体音频或视频
文件，应注意以下问题,
? 尽量使用标准的文件格式。
? 根据平台的计算能力特点，选择合适的格式。
? 不必一味追求动态视频，有的应用场合下静态图像也可以
达到很好的展示效果。
? 根据平台的多媒体回放能力制作相应质量的多媒体数据。
? 视频内容应该精练，没有必要包含太多的特技效果。
? 如果在应用中使用音频增强效果，音频的使用与否应当不
改变程序的运行结果。
? 录制音频时应当尽可能的提高音量，以保证回放时的效果
人机交互技术编写组 61
9.3移动界面实现
开发移动应用
? 考虑各种复杂的网络连接方式。
? 考虑各种不同的硬件设备甚至不同型号的设
备之间的差异。
? 与现有的应用体系尽可能的集成，因此选择
适当的开发平台也很重要。
? 对各种不同的移动应用开发体系结构、移动
设备操作系统和移动应用标准等等，需要在
综合考虑多种因素。
人机交互技术编写组 62
9.3.1移动应用开发技术架构
.Net 精简框架
? 属于微软的,net架构中的一部分，是专用于移动设
备的开发工作的精简版的,Net 开发框架。
? 包括部分,NET 架构类库和部分独有的类库。
?,net精简框架同样包含一个受控的运行时环境，能使
用多种自己熟悉的语言如 C++,Basic,C#等语言。
? 目前仅能运行于微软的 Windows系列操作系统。
人机交互技术编写组 63
移动应用开发技术架构
J2ME架构
? Sun的 J2ME（ Java 2 Micro Edition）是专门针对移
动设备和其他资源受限的设备专门设计的 Java版本，
专门针对屏幕、电能和内存等受限资源进行了优化。
? 采用 J2ME技术开发的移动应用，可以通过无线下载
或数据线传输等方式在移动设备中进行安装。
? J2ME技术的细分主要由配置 (Configuration)、概要
(Profile)两个概念来控制。
人机交互技术编写组 64
移动应用开发技术架构
J2ME架构
? 配置就是不同的规范，规定了相应的设备至少需要
达到的运算能力、供电能力以及存储容量的大小等
要求，同时也定义与设备无关的 Java虚拟机和核心
类库，提供了基本的语言特性
? 概要在一种配置的基础上进一步对设备类型进行细
分，提供针对设备特定功能的 API和扩展类库，能
够更好地适应特定类别的设备，使其充分发挥设备
的功能。
? J2ME的最大优势是优良的跨平台特性，同一个应用
程序采用 J2ME架构可以在多种软硬件平台上使用。
人机交互技术编写组 65
移动应用开发技术架构
CDC
虚拟机 JVM
CLDC
KVM虚拟机
Foundation MIDP
Personal /Basis
配置
概要
图 9-16 J2ME架构
人机交互技术编写组 66
移动应用开发技术架构
BREW
? BREW（ Binary Runtime Environment for Wireless）
是美国高通公司（ QUALCOMM）为无线应用开发和
执行提供的一种平台。
? 能够与可能驻留在设备中的其它应用和软件协调使
用，适用于从多种类型和层次的手机等无线设备；
? 可以支持包括 Java在内的各种编程语言。
? 可以支持 J2ME架构的 CLDC/MIDP组合。
? 开发人员还可以直接在 BREW平台上开发应用程序，
与 J2ME程序相比，具有一定的速度优势。
人机交互技术编写组 67
9.3.2 移动设备操作系统
Palm OS
微软的系列移动操作系统
嵌入式 LINUX
Symbian OS/EPOC OS
其他
人机交互技术编写组 68
移动设备操作系统
Palm OS
? Palm OS是一套专门为掌上电脑编写的操作系统，
充分考虑到了掌上电脑的资源受限等特点，本身所
占的内存很小，其上所编写的应用程序的内存占用
也很小，可以运行众多的应用程序。
? 目前专门为 Palm OS编写的应用程序非常丰富，也
使得 Palm 系统一直受到较多的关注。
? 第一部 Palm系列的掌上电脑是 1996推出的 Palm
Pilot 1000,使用 Palm OS 1.0操作系统, 显示屏幕
为单色 STN,160× 160象素, 2级灰度, 处理器采
用 MOTOROLA Dragonball 16MHz,通过串口通讯,
内存 128KB。
人机交互技术编写组 69
移动设备操作系统
微软的系列移动操作系统
? Windows公司最早推出的掌上设备的操作系统是
Widnows CE。
? 微软公司在 Windows Mobile的概念下, 发展了 Pocket
PC和 SmartPhone两大平台体系, 分别针对手持电脑和
智能手机两个领域 。
? 最大优势是图形用户界面功能强大，开发工具比较完
善，使用者也容易入门，操作起来较为熟悉；同时提
供了较强的多媒体功能，如视频、音频回放等；
? 缺点是本身对内存等资源的消耗较大，需要配置很高
的移动设备加以支持，成本较高，较适合一些高端的
企业应用场合。
人机交互技术编写组 70
移动设备操作系统
嵌入式 LINUX
? 嵌入式 Linux在开放源码的 LINUX系统之上发展而来，
具备了 Linux的诸多优点，如支持多任务等，也可以
对应用软件提供良好的支持。
? 由于开放源码，也比较容易移植,可扩展性和可移
植性是该类系统的最大优势。
? 目前支持嵌入式 Linux的移动设备正在逐渐增多，但
还远未达到成熟的地步，仍然有很大的发展空间。
人机交互技术编写组 71
移动设备操作系统
Symbian OS/EPOC OS
? EPOC OS是一种专门为掌上设备而设计的开
放式操作系统，特别是针对智能手机应用。
? 在其上发展起来的 SymbianOS目前得到了诺
基亚等移动终端厂商的支持，功能日益完善，
在智能手机领域占有较大的份额。
? Symbian OS的设计非常灵活，特别是其用
户界面框架可以支持众多不同配置和输入输
出手段的智能手机，是其最大的优势。
人机交互技术编写组 72
9.3.3 移动浏览标准
采用 J2ME等技术开发的应用软件需要运行程序的用户
终端上进行安装和配置，同时也对终端的性能具有一
定的要求。
移动应用的开发还有一种模式，就是采用类似于 Web
应用的开发，用户端仅需支持一定的移动浏览标准协
议，一般通过移动浏览器的方式，就可以通过网络访
问移动应用服务器，获取信息或完成某些操作。
人机交互技术编写组 73
移动浏览标准
WAP
? WAP（ Wireless Application Protocol）是专门为移
动系统设计的一种通信协议和应用环境，由一个称
为,WAP论坛”的组织负责制订，目前已推出了 2.0
标准，不过全面支持 WAP2.0的设备还需要一定的时
间才能得到普及。
? 在 WAP 2.0版本中增加了对 IP,TCP和 HTTP等标准
协议的支持，而且在支持用户向服务器端发出请求
的 PULL模式之外，还增加了 PUSH模式，可以支持
服务器端的应用程序通过一个 PUSH代理（ Push
Proxy）向客户端发送信息，特别适合向用户发送定
制的新闻等。
人机交互技术编写组 74
移动浏览标准
WML
? WML专为移动设备设计，因而其开发也具有相应的
特点，开发 WML应用需要重新设计其内容，特别是
其用户界面，需要考虑移动设备的屏幕大小以及计
算能力进行特别的设计，因此需要专门的网站加以
支持，如中国移动的移动梦网 WAP网站。
? 目前的问题是这种专门的网站相当少，因为需要重
新制作网站内容，特别是大型网站的成本很高，通
过采用中间件和服务器端生成技术对现有的 HTML
页面内容进行动态的转换是一种有效的解决手段。
人机交互技术编写组 75
移动浏览标准
XHTML Basic 与 XHTML MP
? 2000 年 12月,W3C发布了 XHTML Basic 规范作为
面向移动应用的浏览页面语言的推荐规范。
? 在其上通过增加部分功能模块设计的 XHTML MP
（ XHTML Mobile Profile）目前得到了广泛的支持。
? XHTML Basic和 XHTML MP是在 XHTML的基础上发
展起来的，而 XHTML也将是目前的主流页面语言
HTML的换代技术，因此基于 XHTML MP开发的移动
应用具有良好的兼容性，前景广阔。
人机交互技术编写组 76
9.3.4开发工具
很多开发工具特别是设备厂商提供的开
发包和硬件密切相关，使得互相之间的
兼容性较差。
要有针对性地对各种可能运行的平台进
行测试，以便充分保证移动应用的运行
效果。
人机交互技术编写组 77
模拟器软件
模拟器就是在一种平台上采用软件模拟另外的
软硬件环境。
? 移动设备的模拟器主要由相应的开发商推出。模拟
器有几种不同的形式,
? 单纯的模拟界面，不同的设备的差别就在于采用了不同的
贴图,J2ME环境中的模拟器很多属于此列。
? 硬件与软件环境分别模拟，即使用模拟器引擎模拟硬件环
境，然后再针对特定的设备使用专门的 ROM实现软件环境
的模拟。 Palm,Windows Mobile等模拟器属于这一类。
? 简单的软硬一体式的模拟工具，一般为每一款移动产品设
计一种模拟器，应用分为较窄，国内文曲星的模拟器就是
这种形式。
人机交互技术编写组 78
几种不同形式的模拟器
Openwave WAP SDK提供的模拟器 PALM模拟器 诺基亚的 WAP模拟器
人机交互技术编写组 79
几种不同形式的模拟器
J2ME模拟器
人机交互技术编写组 80
9.3.5应用实例分析
? 是一个航空旅行服务程序，采用 WML编写。
? 提供查询功能帮助用户安排旅行计划，特别是机票
的购买或预订。
? 其设计使用了 Openwave公司的 WAP SDK中的移动
浏览器（ Mobile Browser）所提供的多种用户界面
设计要素。
? 应用中用到的 times.wmls是 WML Script脚本语言编
写的辅助程序，其作用是随机地产生航班号和起飞
时间等模拟数据，需要自己根据程序中使用的情况
编写。
人机交互技术编写组 81
应用实例分析
该应用界面的设计过程包括以下步骤,
? 明确用户群
?经常旅行的用户, 一般旅行的目的是商务事宜,
此类用户对飞行时刻表, 机场代号以及航班非常
熟悉 。
?不常旅行的用户，一般旅行的目的是处于个人原
因，可能几周甚至几个月可能会安排一次旅行，
这些用户可能就不太熟悉具体的航线或航班代号
等信息。
人机交互技术编写组 82
应用实例分析
? 明确用户需求
?确定用户的主要操作是设计用户界面导航流程并
进行优化的基础。
?经常旅行的用户的主要操作包括了解航班情况
（准时或延误）、查找航班时刻以及预定机票等；
?不常旅行的用户的主要操作包括查看某一特定航
线的票价或查找特价机票信息等；
?第一次使用的用户可能需要适当的帮助提示。
人机交互技术编写组 83
应用实例分析
? 确定界面的设计目标
?经常旅行的用户有一个常飞人员号码，可以用于
实现用户使用界面的个性化，包括航班预订情况
的保存和修改等。
?对于不常旅行的用户来说，重点是提供快速的目
标航班、票价以及可能的特价机票信息，在设计
中需要简化这些内容的访问。
人机交互技术编写组 84
应用实例分析
? 建立导航流程
?界面设计的实现需要导航流程的建立。
?应当允许经常旅行的用户用户登录后立刻能够查
看快速访问航班的预订和自己的旅行计划信息，
这一选项需要安排在菜单项的突出位置。
?对于不常旅行的用户来说，需要使其可以迅速查
看和其个人喜好相关的机票优惠等信息。
?从导航流程的设计来说，就是安排这些状态的访
问路径应当尽可能的短，使用户可以在最短的时
间内获得其最重要的信息。
人机交互技术编写组 85
应用实例分析
? 明确可用性设计要点
?界面中各种元素如菜单、标签、文字输入等的风
格样式和操作方式在整个应用中保持一致。
?使文字录入的工作降到最低程度 。
?预防用户可能出现的各种错误操作，一旦用户出
错，应当尽可能地给用户修正错误的余地。
第 9章 移动界面设计
人机交互技术编写组 2
主要内容提要
移动界面的基本概念
移动界面的设计方法
移动界面的实现技术
移动界面设计的实例
人机交互技术编写组 3
9.1移动界面基本概念
互联网和移动通信，作为迈向信息社会的两个
重要标志，分别适应了人们对信息资源的丰富
性以及信息获取方式的灵活性与移动性的需求。
互联网与移动通信已经逐渐形成了信息产业中
潜力巨大、前景可观的两大领域，同时也催生
了结合二者的技术优势，目标在于向用户提供
灵活的、不受信息源和用户访问位置等各种限
制的信息服务的移动互联网（ Mobile Internet）
技术。
人机交互技术编写组 4
9.1.1移动互联简介
移动互联网概念的理解可能因人而异，特别是
与无线互联网（ Wireless Internet）可能会当
成一回事。
从概念上而言，移动与无线是两个不同的概念,
在很多情况下，无线与移动是两个重叠的概念，
但在另外一些情况下，这两者又有明显的区别，
这也使得移动互联网的概念可以从狭义与广义
两个角度来理解。
人机交互技术编写组 5
移动互联网概念
从狭义的角度上来讲，移动互联网指的就是基
于分组交换技术的无线数据通信技术，有时可
能会被称之为无线互联网（ Wireless
Internet）。
从广义的角度上来讲，移动互联网不一定局限
于一般的无线数据通信方式，与无线互联网的
概念有一定的区别，我们可以从设备的移动性
与数据连接方式这两个方面来说明。
人机交互技术编写组 6
移动界面的设计
移动界面的设计成为人机交互技术研究
的一个重要方向。一方面，移动应用的
界面设计符合人机交互设计的一般规律，
可以利用人机交互界面的一般设计方法；
另一方面，由于移动设备的便携性、位
置不固定性和计算能力有限性以及无线
网络的低带宽高延迟等诸多的限制，移
动界面设计又具有自己的特点。
人机交互技术编写组 7
移动与无线概念的外延关系
移动 无线
图 9-1 移动与无线概念的外延关系
人机交互技术编写组 8
9.1.2移动设备与连接方式
目前主要的移动终端设备种类包括手机、
掌上电脑 PDA（ Personal Digital
Assistant）、笔记本电脑以及各种特殊
用途的移动设备如车载电脑。基于可移
动性（ mobility）的考虑，目前移动互联
设备以智能手机与掌上电脑为主 。
人机交互技术编写组 9
Vulcan Inc.公司设计的 FlipStart MiniPC
人机交互技术编写组 10
移动互联网的数据接入方式
移动互联网的数据接入方式目前也是多种标准
并存，没有完全统一。主要形式包括,
? 无线局域网（ Wireless Local Area Network,WLAN）
? 无线城域网（ Wireless Metropolitan Area Network，
WMAN）
? 无线个域网（ Wireless Personal Area Networks，
WPAN）
? 高速无线数据通讯系统以及卫星通讯等
人机交互技术编写组 11
移动互联网的数据接入方式
无线局域网采用无线的方式提供传统有线局域
网的所有功能，具有极大的灵活性。
无线城域网技术的目标是提供类似于有线
Modem,DSL （ Digital Subscriber Line），以
太网以及光纤网等有线方式的高速 Internet接
入，优势是可以在较大的地理区域内无须布线。
继无线局域网 (WLAN)和无线城域网 (WMAN)之
后，各种形式的便携式移动设备的不断涌现，
促进了无线个域网的出现，使移动互联网的接
入方式更为丰富。
人机交互技术编写组 12
高速无线数据通信
是在无线语音通信系统之上发展起来的，分为
三代,
? 第一代是模拟无线网络,20世纪的 80年代，目前在
我国已基本淘汰。
? 第二代是数字语音通讯系统和数字通信系统，常见
的有九十年代出现的欧洲的全球移动通信系统 GSM
（ Global Systems for Mobile Telecommunications，
GSM）、美国的窄带 CDMA（ Code Division Multiple
Access）。
? 第三代，即 3G（ Third Generation）阶段，目标是
采用数字技术实现语音、数据以及多媒体信息的高
速传输。
人机交互技术编写组 13
9.1.3移动界面的输入方式
目前主要的移动设备形式 ——智能手机
与掌上电脑而言，由于尺寸较小、接口
较为简单，全尺寸键盘、鼠标等诸多的
传统的输入输出设备较难在移动界面中
使用，因此需要设计专门的输入输出方
式，以便适应移动界面的特点。
人机交互技术编写组 14
移动界面的输入方式
键盘输入
手机键盘的设计主要还
是从手机的主要功能即语音
通信考虑的。由于每一个按
键都是复用的，如数字键 7和
字母 P,Q,R,S共用一个按
键。
T9输入法就是目前最为著名的一种解决方案。使用 T9
输入法的优越之处在于输入一个字以后，会提示一些可以
合法组合的常见字，用户只需要简单地选择即可输入，大
大降低了手机文字输入的疲劳程度，提高了批量文字信息
的输入效率。
人机交互技术编写组 15
移动界面的输入方式
键盘输入
? 软键盘（ soft keyboard）是解决移动设备输
入问题的又一重要方法。
? 所谓的软键盘就是在移动设备屏幕上显示
QWERTY键盘，用户在屏幕上选择软键盘上
的键完成输入。
? 这种输入形式在桌面计算机的 Windows平台
上的输入法中都可以见到。
人机交互技术编写组 16
T9比软键盘输入法的效率高
T9输入法所支持的手机键盘基于电话键
盘设计的，手机用户群未必熟悉计算机；
手机键盘采用一个按键对应于多个字符，
键的大小自然可以更大，能更快的键入
和更高的准确程度；
手机键盘按键的设计更加紧凑，按键间
距相对较小，手指移动距离短，也可以
提高输入速度 。
人机交互技术编写组 17
移动界面的输入方式
笔输入
? 手写文字识别是一种文本的输入方式，作为键盘输入
的一种替代方式。
? 随着笔输入技术的日益成熟，目前笔输入技术的在包
括平板电脑（ Tablet PC）、智能手机、掌上电脑等多
种移动设备中的得到了广泛应用。
? 近年来微软公司力推 Tablet PC，也在一定程度上对于
笔输入的普及起了推波助澜的作用。
? 笔输入是目前掌上电脑最主要的一种输入方式 。 特别
在中国, 由于汉字书写的复杂性, 手写笔输入成为最
自然, 符合中国人书写习惯的输入方式 。
人机交互技术编写组 18
移动界面的输入方式
? 在微软的 TabletPC系统中称为数字墨水
（ Digital Ink），实际就是将笔迹信息作为
一种新的数据类型做到了操作系统层，并提
供相应的应用程序接口，供软件开发人员用
于开发可以充分利用笔式输入便利的应用软
件。
人机交互技术编写组 19
移动界面的输入方式
语音识别
? 语音是人们在日常生活中进行交流最主要的手段，
因此对于语音技术成为新一代多通道人机界面中的
最重要技术之一的期望也就很容易理解了
? 语音识别技术的研究工作始于 20世纪 50年代目前这
个领域最具代表性的产品是 IBM公司的 Viavoice和
DRAGON公司的 Naturally Speaking。
? 可以通过将掌上设备作为语音门户网站 (Voice
Portal)的访问终端。在这种环境中，用户可以在办
公室、家里或旅行途中随时随地通过手机等具有语
音通信功能的移动设备与具备语音识别与合成技术
的语音门户网站进行对话。
人机交互技术编写组 20
移动界面的输入方式
? 语音识别技术还可以用于人机界面的语音命
令导航，使得用户可以直接用语音发出各种
操作指令。
? 目前的语音识别技术仍然存在着很多的问题,
因此能够实现的应用领域还有一定的局限性,
不会立即给人机交互方式带来本质性的影响 。
? 语音录制, 可以随时在任何可执行屏幕手写
或绘制操作的程序中进行语音录制，可以单
独生成一段录音，还可以将一段录音嵌入文
本便笺中。
人机交互技术编写组 21
9.1.4 移动界面的输出方式
主要是显示屏幕和声音输出
? 显示技术
? 显示屏的关键因素：分辨率、色彩、尺寸、功耗及显示响
应速度。
? 多种显示器,超扭曲阵列 (Super-Twisted Nematic STN）、
DSTN(Dual STN),CSTN（ Color STN）、薄膜式晶体管
（ Thin Film Transistor,TFT）以及薄膜二极管（ Thin
Film Diode,TFD）等。
? 单色 STN液晶屏：用简单的无源矩阵寻址方案，具有性能
可靠、成本低、功耗也极低的特点。
? 一些新的显示技术：有机发光二极管 (Organic Light
Emitting Diode,OLED) 和硅基液晶 (Liquid Crystal On
Silicon,LCOS)。
人机交互技术编写组 22
9.1.4 移动界面的输出方式
? 声音输出
?手机与 PDA等掌上设备的声音输出功能一般较弱。
近年来，逐渐通过引入声音合成技术，使得其可
以播放较为动听的 MIDI（ Musical Instrument
Digital Interface）电子音乐。
?移动设备的音乐合成技术主要包括两种：调频
（ Frequency Modulation,FM）合成与波表
（ Wave Table）合成。
?复音就是俗称的“和弦”，指的是音乐合成系统
中能够同时发出的声音的数目，而并非音乐理论
中的和弦。
人机交互技术编写组 23
9.1.5 移动界面设计的新问题
资源相对匮乏
? 高档手机的显示分辨率也不过 320× 240，而且尺寸
很小，同时无法展示网站丰富的多媒体内容。
? 移动界面并非简单的缩小版的桌面系统的用户界面。
? 桌面系统用户界面中采用的一般是并行展示其中各
种选择可以在一个大小可调的屏幕中同时显示出来。
? 移动界面中，这些选择只能采用顺序展示的方式。
? 移动界面设计的难题就是如何在有限的资源条件下
有效地为用户提供信息服务，提供的选择须根据重
要性排列 。
人机交互技术编写组 24
移动界面设计的新问题
移动设备的种类繁多
? 在开发移动应用时需要专门针对某一型号的一
种设备开发，大大增加了应用开发的复杂度。
? 在移动界面的设计中，各设备的差异是移动应
用开发过程中最需要关注的一个环节。
? 移动界面具有一定的自适应性是解决问题的一
种思路。
人机交互技术编写组 25
移动界面设计的新问题
连接方式复杂
? 移动互联网的数据接入方式形式繁杂，多种标准并
存，并在较长的一段时间内也很难完全统一。
? 而移动设备的位置具有很强的移动性，同一设备可
能在不同的时间段处于不同的网络连接条件下，网
络的性能变化范围可能很大。
? 移动的同时往往需要保持应用执行的连续性。
? 应将网络连接状况视为一种资源，在设计时制订相
应的策略。
人机交互技术编写组 26
移动界面设计的新问题
移动界面设计中的最大问题就是界面的
定制。无论是移动设备各种资源的匮乏、
种类与连接方式的繁复，最终均可以归
结为根据需要定制合适的移动应用界面。
人机交互技术编写组 27
9.2移动界面的设计方法
可用性设计原则
移动界面导航
移动界面设计要素
人机交互技术编写组 28
9.2.1可用性设计原则
了解用户
? 移动应用的用户不一定熟悉桌面计算机的操
作
? 移动证券软件的用户的目的是要了解股票行
情或进行证券交易
? 移动手机游戏的用户是为了打发时间或休闲
娱乐
? ……
人机交互技术编写组 29
可用性设计原则
了解目标平台
? 移动设备的复杂性使得了解目标应用平台
的相关细节显得尤为重要。
? 重要的软硬件厂商往往会提供详细的规范文
档，从中可以获得必要的目标平台信息。
? 根据目标平台信息，开发个性化的版本，通
过充分利用每种设备的优势特性提高移动应
用的可用性。
人机交互技术编写组 30
可用性设计原则
易于检索
? 避免嵌套过深的多级菜单，缩减不必要的功
能。
? 以满足用户的目标需要为准，尽量减少用户
进行信息访问时所要采取的步骤。
? 同时尽可能创建多种信息访问途径。
人机交互技术编写组 31
可用性设计原则
采用一致的界面风格
? 不必要的差异常常会让用户感到不习惯，从
而降低可用性。
? 一致的界面风格对用户来说很直观。
? 应当检查每个布局和每个显示来保证其一致
性。
? 各种移动应用开发平台都提供某种形式的应
用界面的风格指南，仔细研究这些指南对于
移动应用的界面设计非常重要。
人机交互技术编写组 32
可用性设计原则
避免不必要的文本输入
? 尽量使用户避免不必要的文本信息的输入，
而采用选择列表或模糊查询，即输入一部分
查询关键词就可以获得检索目标或包含目标
的列表可供用户选择，这样可以降低对于用
户进行关键字文字输入的麻烦。
人机交互技术编写组 33
可用性设计原则
根据用户的要求使服务个性化
? 允许应用保留用户信息以便能够记录用户的
个性化信息，例如：可以利用 cookie记录，
或存储在该应用所在的服务器中。
? 下一次用户启动应用时可以得到个性化的服
务。
人机交互技术编写组 34
可用性设计原则
最大限度地避免用户出错
? 预测用户可能出现的错误，提供相应的机制
尽可能避免。
? 例如：如果用户要输入日期，可以采用格式
化输入的方法，检查用户输入是否全部是数
字，而且代表日期、月份以及年份的数字的
取值范围是否在合法的范围内。
人机交互技术编写组 35
可用性设计原则
文本信息应当本地化
? 要根据应用所使用的地域特点，使应用本地
化。例如，在美国使用 zipcode （邮政编码）
术语，而在英国和澳大利亚使用 post或
postal code（邮政编码）。有时，用词得当
与否也可以决定某种应用可用性的好坏。词
义表达清楚是关键，要避免使用含混不清的
用语。
人机交互技术编写组 36
可用性设计原则
进行用户测试
? 检验用户界面功能的唯一可靠方法是对实际
的最终用户进行测试。
?专家分析与咨询
?单用户测试
?群组测试
?满意度调查
?最终用户分析
人机交互技术编写组 37
可用性设计原则
? 可用性专家评估
? 从用户的角度对产品进行评估，对一个应用软件的所有功
能进行分析，并对已存在或可能会出现的可用性问题进行
记录。
? 单用户测试
? 将产品交给实际的最终用户使用，并由可用性分析人员观
察其使用情况，以便发现用户在什么环节遇到问题，以及
用户是否使用了所有的功能等。
? 群组测试
? 进行群组测试可以分为七个步骤，分别是：确定产品的目
标用户群；从不同渠道召集测试参加者；设计安排测试情
景、任务、以及需要测试者回答的各种问题；实际测试；
分析结果；撰写报告；反馈结果给开发者。
人机交互技术编写组 38
可用性设计原则
? 满意度调查
?通过标准的统计数据，就可用性问题对用户体验
的影响进行评价。
? 最终用户分析
?最终用户分析包括市场分析、用户群划分等工作。
在开发的初始阶段必须确定用户群组，以便明确
应用开发的要求，这有助于开发者设计出满足市
场需求的产品，并确定设计思路。
人机交互技术编写组 39
9.2.2移动界面导航
一般应该在应用设计完成后，建立导航
流程图表，规划移动应用的导航流程。
? 导航设计的基础是按传统的树结构编排的层
次状态结构 。
? 在层次状态结构中，每一节点代表一个状态，
一般是一个新的显示画面。
? 用户点击按键打开一个可选项，或从菜单中
选中一项，实现状态转换的过程。
? 返回功能一般返回到层次树的上一级，初始
状态下返回功能就是退出，将关闭该应用。
人机交互技术编写组 40
导航流程图表
1
1-1 1-2 1-3
1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3
图 9-6 层次状态结构示意图
人机交互技术编写组 41
加入标签导航的层次状态结构
标签进行导航的视图应遵循的原则,
? 从一个标签视图转到另一个并不影响这些视
图中的返回键功能。
? 它们中的任何一个返回功能指向同一个地方，
即该应用的上一层。
? 当某个状态拥有标签视图时，如果用户从上
一层进入到该状态，打开的将是默认视图。
? 如果用户从某个标签视图进入到其下面一层，
这时的返回功能将导致返回到原先的视图。
人机交互技术编写组 42
加入标签导航的层次状态结构
1
1-1 1-2
1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3
1-
3a
1-
3b
图 9-8 加入标签的层次状态结构示意图
人机交互技术编写组 43
有同层次之间相互访问的导航
1
1-1 1-2 1-3
1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3
图 9-8 加入同层次访问的层次状态结构示意图 —图结构
人机交互技术编写组 44
一个手机游戏的导航流程图表
欢迎界面
主菜单
退出
继续 新游戏 选项 积分榜 帮助
游戏
确认
Game Over
退出
图 9-9 示例导航流程图表
人机交互技术编写组 45
9.2.3移动界面设计要素
移动界面也包含很多种类的设计要素，
主要界面设计元素有,
? 菜单
? 按钮
? 多选列表
? 文字显示
? 数据输入
? 图标与图像
? 报警提示
? 移动多媒体
人机交互技术编写组 46
移动界面设计要素
菜单
? 主要目的用于提供项目选择。
? 设计移动界面可用性好的菜单应遵守的规则 。
? 供选择的项目应根据需要进行逻辑分类，如果没有逻辑顺
序，可以按优先级分类，将被选择频率最高的项目放在列
表的最顶端。
? 每一屏中不宜设计过多的选项，如果一个菜单上的选择项
目太多，应该建立一个“更多”链接，将菜单扩展到多个
屏幕。
? 菜单上的每一选项一般应当简明扼要，不宜超过一行。
人机交互技术编写组 47
图 9-10 菜单模拟显示画面
人机交互技术编写组 48
移动界面设计要素
按钮
? 一般移动界面中的按钮不经常使用图标。
? 在按钮属性的设置上根据所显示的应用类型和信息
类型，使用风格和标注一致的标签。
? 汉字标签则一般需要注意字数的控制 。
? 常见的通用按钮
? OK（确定）：可用于菜单项的选择或表示对某一操作的
认可，如确认删除。
? Done（完成）：可用于结束当前操作，并返回到上一层任
务。
? Back（返回）：使用户回到前一个操作屏幕。
人机交互技术编写组 49
移动界面设计要素
“寻找航班”是根据特定的应用需要设定的按钮。
图 9-11 按钮模拟显示画面
人机交互技术编写组 50
移动界面设计要素
多选列表
? 在移动应用中使用多选列表，可以最大限度地
减少文本输入。
图 9-12 多选列表模拟显示画面
人机交互技术编写组 51
移动界面设计要素
文字显示
? 文字显示控件主要用于显示较多数量的文字信息。
? 根据显示的需要，可能使用以下几种形式的链接。
? View（查看）：如果一个数据列表中每个项目包含额外的
详细信息，可以使用该链接来显示这些数据。
? More（更多）：一般作为数据页末尾的一个链接，使用户
进入下一页的相关数据。
? Skip（跳过）：跳过当前选项，链接到下一个类似的数据，
如下一封电子邮件信息。
人机交互技术编写组 52
移动界面设计要素
文字显示的一般可用性建议,
? 每一屏幕显示内容不宜过多，如果信息较多，
应定义一个 More链接。
? 一般情况下文字信息应当使用换行方式进行
显示。
人机交互技术编写组 53
移动界面设计要素
图 9-13 文字显示模拟显示画面
人机交互技术编写组 54
移动界面设计要素
数据输入
针对数据输入的可用性原则包括,
? 对于数据输入一般应该进行长度、数据类型以及取值范围等
形式的格式化，以指导用户输入合法的可用信息。
? 建立数据输入标题，并根据需要在标题中加入所要求的输入
格式。
? 如果已经可以确定数据的某些输入部分，可以预先填好，且
不允许用户修改。
? 应当具有检错机制，如某些信息必须填写，应当可以设置成
禁止提交空数据。
? 在格式设置中适当地添加分隔符以提示用户输入合法的信息。
人机交互技术编写组 55
移动界面设计要素
?图 9-14 格式化模拟显示画面
人机交互技术编写组 56
移动界面设计要素
图标与图像
? 图像、图标可以增强显示信息的效果。,
? 在移动设备上使用图像，需要注意的问题包括,
?了解目标设备所支持的图象格式 。
?注意调色板的设置使其达到最佳显示效果。
?对于不支持图像的设备，应当提供替换的信息展示
方式。
?进行图像浏览时，图像缺省地应当充满整个可用区
域，如必须滚屏时，尽量使用垂直滚屏。
?尽量使用户在上下文中直接浏览嵌入的图像，而不
必使用独立的显示工具。
人机交互技术编写组 57
移动界面设计要素
图 9-15 图像模拟显示画面
人机交互技术编写组 58
移动界面设计要素
报警提示
? 警报提示，可以将用户所关心的最新信息通知给用
户，或向用户提供有关当前状况的信息。
? 一般使用文字信息，可能加入一定的图标。
? 常用的提示类型有,
? 确认提示
? 信息提示
? 警告提示
? 出错提示
? 持久性提示
? 等待提示
人机交互技术编写组 59
移动界面设计要素
移动多媒体技术
? 目前移动设备的多媒体支持进步很大，已经
可以播放几种类型的音频和视频文件，还可
以使用内置或外接的摄像头来抓取图像。
? 移动应用开发平台开始提供支持多媒体数据
的编程接口。
人机交互技术编写组 60
移动界面设计要素
? 制作能够在移动设备进行播放的多媒体音频或视频
文件，应注意以下问题,
? 尽量使用标准的文件格式。
? 根据平台的计算能力特点，选择合适的格式。
? 不必一味追求动态视频，有的应用场合下静态图像也可以
达到很好的展示效果。
? 根据平台的多媒体回放能力制作相应质量的多媒体数据。
? 视频内容应该精练，没有必要包含太多的特技效果。
? 如果在应用中使用音频增强效果，音频的使用与否应当不
改变程序的运行结果。
? 录制音频时应当尽可能的提高音量，以保证回放时的效果
人机交互技术编写组 61
9.3移动界面实现
开发移动应用
? 考虑各种复杂的网络连接方式。
? 考虑各种不同的硬件设备甚至不同型号的设
备之间的差异。
? 与现有的应用体系尽可能的集成，因此选择
适当的开发平台也很重要。
? 对各种不同的移动应用开发体系结构、移动
设备操作系统和移动应用标准等等，需要在
综合考虑多种因素。
人机交互技术编写组 62
9.3.1移动应用开发技术架构
.Net 精简框架
? 属于微软的,net架构中的一部分，是专用于移动设
备的开发工作的精简版的,Net 开发框架。
? 包括部分,NET 架构类库和部分独有的类库。
?,net精简框架同样包含一个受控的运行时环境，能使
用多种自己熟悉的语言如 C++,Basic,C#等语言。
? 目前仅能运行于微软的 Windows系列操作系统。
人机交互技术编写组 63
移动应用开发技术架构
J2ME架构
? Sun的 J2ME（ Java 2 Micro Edition）是专门针对移
动设备和其他资源受限的设备专门设计的 Java版本，
专门针对屏幕、电能和内存等受限资源进行了优化。
? 采用 J2ME技术开发的移动应用，可以通过无线下载
或数据线传输等方式在移动设备中进行安装。
? J2ME技术的细分主要由配置 (Configuration)、概要
(Profile)两个概念来控制。
人机交互技术编写组 64
移动应用开发技术架构
J2ME架构
? 配置就是不同的规范，规定了相应的设备至少需要
达到的运算能力、供电能力以及存储容量的大小等
要求，同时也定义与设备无关的 Java虚拟机和核心
类库，提供了基本的语言特性
? 概要在一种配置的基础上进一步对设备类型进行细
分，提供针对设备特定功能的 API和扩展类库，能
够更好地适应特定类别的设备，使其充分发挥设备
的功能。
? J2ME的最大优势是优良的跨平台特性，同一个应用
程序采用 J2ME架构可以在多种软硬件平台上使用。
人机交互技术编写组 65
移动应用开发技术架构
CDC
虚拟机 JVM
CLDC
KVM虚拟机
Foundation MIDP
Personal /Basis
配置
概要
图 9-16 J2ME架构
人机交互技术编写组 66
移动应用开发技术架构
BREW
? BREW（ Binary Runtime Environment for Wireless）
是美国高通公司（ QUALCOMM）为无线应用开发和
执行提供的一种平台。
? 能够与可能驻留在设备中的其它应用和软件协调使
用，适用于从多种类型和层次的手机等无线设备；
? 可以支持包括 Java在内的各种编程语言。
? 可以支持 J2ME架构的 CLDC/MIDP组合。
? 开发人员还可以直接在 BREW平台上开发应用程序，
与 J2ME程序相比，具有一定的速度优势。
人机交互技术编写组 67
9.3.2 移动设备操作系统
Palm OS
微软的系列移动操作系统
嵌入式 LINUX
Symbian OS/EPOC OS
其他
人机交互技术编写组 68
移动设备操作系统
Palm OS
? Palm OS是一套专门为掌上电脑编写的操作系统，
充分考虑到了掌上电脑的资源受限等特点，本身所
占的内存很小，其上所编写的应用程序的内存占用
也很小，可以运行众多的应用程序。
? 目前专门为 Palm OS编写的应用程序非常丰富，也
使得 Palm 系统一直受到较多的关注。
? 第一部 Palm系列的掌上电脑是 1996推出的 Palm
Pilot 1000,使用 Palm OS 1.0操作系统, 显示屏幕
为单色 STN,160× 160象素, 2级灰度, 处理器采
用 MOTOROLA Dragonball 16MHz,通过串口通讯,
内存 128KB。
人机交互技术编写组 69
移动设备操作系统
微软的系列移动操作系统
? Windows公司最早推出的掌上设备的操作系统是
Widnows CE。
? 微软公司在 Windows Mobile的概念下, 发展了 Pocket
PC和 SmartPhone两大平台体系, 分别针对手持电脑和
智能手机两个领域 。
? 最大优势是图形用户界面功能强大，开发工具比较完
善，使用者也容易入门，操作起来较为熟悉；同时提
供了较强的多媒体功能，如视频、音频回放等；
? 缺点是本身对内存等资源的消耗较大，需要配置很高
的移动设备加以支持，成本较高，较适合一些高端的
企业应用场合。
人机交互技术编写组 70
移动设备操作系统
嵌入式 LINUX
? 嵌入式 Linux在开放源码的 LINUX系统之上发展而来，
具备了 Linux的诸多优点，如支持多任务等，也可以
对应用软件提供良好的支持。
? 由于开放源码，也比较容易移植,可扩展性和可移
植性是该类系统的最大优势。
? 目前支持嵌入式 Linux的移动设备正在逐渐增多，但
还远未达到成熟的地步，仍然有很大的发展空间。
人机交互技术编写组 71
移动设备操作系统
Symbian OS/EPOC OS
? EPOC OS是一种专门为掌上设备而设计的开
放式操作系统，特别是针对智能手机应用。
? 在其上发展起来的 SymbianOS目前得到了诺
基亚等移动终端厂商的支持，功能日益完善，
在智能手机领域占有较大的份额。
? Symbian OS的设计非常灵活，特别是其用
户界面框架可以支持众多不同配置和输入输
出手段的智能手机，是其最大的优势。
人机交互技术编写组 72
9.3.3 移动浏览标准
采用 J2ME等技术开发的应用软件需要运行程序的用户
终端上进行安装和配置，同时也对终端的性能具有一
定的要求。
移动应用的开发还有一种模式，就是采用类似于 Web
应用的开发，用户端仅需支持一定的移动浏览标准协
议，一般通过移动浏览器的方式，就可以通过网络访
问移动应用服务器，获取信息或完成某些操作。
人机交互技术编写组 73
移动浏览标准
WAP
? WAP（ Wireless Application Protocol）是专门为移
动系统设计的一种通信协议和应用环境，由一个称
为,WAP论坛”的组织负责制订，目前已推出了 2.0
标准，不过全面支持 WAP2.0的设备还需要一定的时
间才能得到普及。
? 在 WAP 2.0版本中增加了对 IP,TCP和 HTTP等标准
协议的支持，而且在支持用户向服务器端发出请求
的 PULL模式之外，还增加了 PUSH模式，可以支持
服务器端的应用程序通过一个 PUSH代理（ Push
Proxy）向客户端发送信息，特别适合向用户发送定
制的新闻等。
人机交互技术编写组 74
移动浏览标准
WML
? WML专为移动设备设计，因而其开发也具有相应的
特点，开发 WML应用需要重新设计其内容，特别是
其用户界面，需要考虑移动设备的屏幕大小以及计
算能力进行特别的设计，因此需要专门的网站加以
支持，如中国移动的移动梦网 WAP网站。
? 目前的问题是这种专门的网站相当少，因为需要重
新制作网站内容，特别是大型网站的成本很高，通
过采用中间件和服务器端生成技术对现有的 HTML
页面内容进行动态的转换是一种有效的解决手段。
人机交互技术编写组 75
移动浏览标准
XHTML Basic 与 XHTML MP
? 2000 年 12月,W3C发布了 XHTML Basic 规范作为
面向移动应用的浏览页面语言的推荐规范。
? 在其上通过增加部分功能模块设计的 XHTML MP
（ XHTML Mobile Profile）目前得到了广泛的支持。
? XHTML Basic和 XHTML MP是在 XHTML的基础上发
展起来的，而 XHTML也将是目前的主流页面语言
HTML的换代技术，因此基于 XHTML MP开发的移动
应用具有良好的兼容性，前景广阔。
人机交互技术编写组 76
9.3.4开发工具
很多开发工具特别是设备厂商提供的开
发包和硬件密切相关，使得互相之间的
兼容性较差。
要有针对性地对各种可能运行的平台进
行测试，以便充分保证移动应用的运行
效果。
人机交互技术编写组 77
模拟器软件
模拟器就是在一种平台上采用软件模拟另外的
软硬件环境。
? 移动设备的模拟器主要由相应的开发商推出。模拟
器有几种不同的形式,
? 单纯的模拟界面，不同的设备的差别就在于采用了不同的
贴图,J2ME环境中的模拟器很多属于此列。
? 硬件与软件环境分别模拟，即使用模拟器引擎模拟硬件环
境，然后再针对特定的设备使用专门的 ROM实现软件环境
的模拟。 Palm,Windows Mobile等模拟器属于这一类。
? 简单的软硬一体式的模拟工具，一般为每一款移动产品设
计一种模拟器，应用分为较窄，国内文曲星的模拟器就是
这种形式。
人机交互技术编写组 78
几种不同形式的模拟器
Openwave WAP SDK提供的模拟器 PALM模拟器 诺基亚的 WAP模拟器
人机交互技术编写组 79
几种不同形式的模拟器
J2ME模拟器
人机交互技术编写组 80
9.3.5应用实例分析
? 是一个航空旅行服务程序，采用 WML编写。
? 提供查询功能帮助用户安排旅行计划，特别是机票
的购买或预订。
? 其设计使用了 Openwave公司的 WAP SDK中的移动
浏览器（ Mobile Browser）所提供的多种用户界面
设计要素。
? 应用中用到的 times.wmls是 WML Script脚本语言编
写的辅助程序，其作用是随机地产生航班号和起飞
时间等模拟数据，需要自己根据程序中使用的情况
编写。
人机交互技术编写组 81
应用实例分析
该应用界面的设计过程包括以下步骤,
? 明确用户群
?经常旅行的用户, 一般旅行的目的是商务事宜,
此类用户对飞行时刻表, 机场代号以及航班非常
熟悉 。
?不常旅行的用户，一般旅行的目的是处于个人原
因，可能几周甚至几个月可能会安排一次旅行，
这些用户可能就不太熟悉具体的航线或航班代号
等信息。
人机交互技术编写组 82
应用实例分析
? 明确用户需求
?确定用户的主要操作是设计用户界面导航流程并
进行优化的基础。
?经常旅行的用户的主要操作包括了解航班情况
（准时或延误）、查找航班时刻以及预定机票等；
?不常旅行的用户的主要操作包括查看某一特定航
线的票价或查找特价机票信息等；
?第一次使用的用户可能需要适当的帮助提示。
人机交互技术编写组 83
应用实例分析
? 确定界面的设计目标
?经常旅行的用户有一个常飞人员号码，可以用于
实现用户使用界面的个性化，包括航班预订情况
的保存和修改等。
?对于不常旅行的用户来说，重点是提供快速的目
标航班、票价以及可能的特价机票信息，在设计
中需要简化这些内容的访问。
人机交互技术编写组 84
应用实例分析
? 建立导航流程
?界面设计的实现需要导航流程的建立。
?应当允许经常旅行的用户用户登录后立刻能够查
看快速访问航班的预订和自己的旅行计划信息，
这一选项需要安排在菜单项的突出位置。
?对于不常旅行的用户来说，需要使其可以迅速查
看和其个人喜好相关的机票优惠等信息。
?从导航流程的设计来说，就是安排这些状态的访
问路径应当尽可能的短，使用户可以在最短的时
间内获得其最重要的信息。
人机交互技术编写组 85
应用实例分析
? 明确可用性设计要点
?界面中各种元素如菜单、标签、文字输入等的风
格样式和操作方式在整个应用中保持一致。
?使文字录入的工作降到最低程度 。
?预防用户可能出现的各种错误操作，一旦用户出
错，应当尽可能地给用户修正错误的余地。
