第讲移动界面设计79页PPT
合集下载
移动UI交互设计-03-界面设计
31
1. 九宫格式
这种布局方式泛指对界面进行横纵等 分的布局类型，如图所示。所有的核心功 能井然有序、间隔合理、清晰呈现，用户 能够快速查看和选择，视觉效果稳定。
3.2.1 主界面
32
1. 九宫格式
最早的九宫格是指横纵各3个格，但 是慢慢地这种布局方式也发生了改变，不 再绝对地控制格子的数量。如果App的功 能个数少于或多于9个，也可以改变横纵 的格子数量，让布局更加合理，如图所示。
手机的界面空间有限，在有限的界面中要想将所有控件表现出最佳效果，每一个像素都是 关键，所以需要细致、耐心、考虑周到。
3.1.2 界面设计的注意要点
19
1. 适用性
界面设计首先要关注的就是 目标平台，也就是说，做界面设 计 要 明 确 手 机 、 Pad 、 电 脑 等 设 备的特性，要明确iOS、Android、 Windows 等不同系统的设计规 范。如图所示，左侧为该应用程 序 在 Pad 上 的 界 面 ， 右 侧 为 其 在 手机上的界面。同一款应用程序 在不同设备上布局一样并不合适， 而是要因设备的不同，适当修改 布局方式。
对于手机界面来说，其基本的结构可以分 为4 个部分，状态栏、标题栏、标签栏和内容 区域，如图所示。界面中的状态栏主要用于显 示手机信号、电池容量、时间等信息，标题栏 用于显示标题信息和放置返回、设置等按钮， 标签栏用于显示选项信息。
3.1.1 界面设计的内容
10
2. 框架设计
界面中除了状态栏、标题栏、标签栏之外的区域就是内容区域，所以我们这里说的框架设计， 主要是指内容区域的架构设计。
3.1.3 界面设计的表现手法
25
4.内容至上
（1）在界面设计时，可以将不同 的内容信息放置于不同的卡片上， 使用空白间隔将不同的内容块划分 开，如图所示，这样的设计使得各 部分内容清晰，没有多余的元素影 响视觉，界面简洁。
UI界面设计ppt课件
5
6
7
平衡原则
预期原则
经济原则
顺序原则
规则化
8
平衡原则 注意屏幕上下左右平衡。不要堆挤数据，过 分拥挤的显示会产生视觉疲和接收错误。
9
预期原则 屏幕上所有对象，如窗口、按钮、菜单等处 理应一致化，使对象的动作可预期。
10
顺序原则 对象显示的顺序应依需要排列。通常应最先 出现对话，然后通过对话将系统分段实现。
19
20
软件界面设计是为了满足软件专业化标准化 的需求而产生的对软件的使用界面进行美化、 优化、规范化的设计分支。
21
22
23
24
25
具体包括：
软件启动封面设计/软件框架设计 / 按钮设计/面板设计/菜单设计/ 标签设计/图标设计/滚动条及状态栏设计/ 安装过程设计 /包装及商品化
14
格式
在屏幕显示设计中，一幅画面不要文字太 多，若必须有较多文字时，尽量分组分页， 在关键词处进行加粗、变字体等处理，但 同行文字尽量字型统一。英文词除标语外， 尽量采用小写和易认的字体。
15
16
17
信息内容
信息内容显示不仅采用简洁、清楚的表达， 还应采用用户熟悉的简单句子，尽量不用 左右滚屏。当内容较多时，应以空白分段 或以小窗口分块，以便记忆和理解。重要 字段可用粗体和闪烁吸引注意力和强化效 果，强化效果有多样，针对实际进行选择。
28
29
软件按钮设计应该具有交互性，即应该有3到6 种状态效果：点击时状态；鼠标放在上面但未 点击的状态；点击前鼠标未放在上面时的状态； 点击后鼠标未放在上面时的状态；不能点击时 状态；独立自动变化的状态。按钮应具备简洁 的图示效果，应能够让使用者产生功能关联反 应，群组内按钮应该风格统一，功能差异大的 按钮应该有所区别。
移动产品设计基础教材(PPT 59页)
界面布局
工具栏（tool bar)
实际应用上： 家居杂志和太平洋电脑网客户端内页工具栏展示
界面布局
点击区域
规范里的话： 在设计任何可点击的部件时，设计师应该首先考虑设计区域是否易于让用 户点击，因此在设计规范里，任何可点击的部件，大小都不应小于44*44pt。 因此，按钮不应小于44*44pt;app的banner广告图高度也不应小于44pt；列 表的高度也不应小于44pt等等。
字体
iOS里的中文字体
苹果默认的中文字体是Heiti SC（黑体-简，黑体-简的英文名称为Heiti SC。 Heiti为黑体的拼音，SC代表简体中文（Simplified Chinese）），是Mac OS X Snow Leopard（版本10.6）包含的简体中文字型，也是iPhone OS 3.0（版本 4.0后改名为iOS）及iPod nano第五代以来的预设简体中文字型。
字体
字体 实际应用
中文应用在界面上面 时，一般我们用方正 黑体简体做设计。而 且不能带有任何的设 计效果和样式（只能 是纯色，可以带有阴 影，由技术来实现）
但也有例外，例如是 写在图片上的文字； 一些比较特殊的不会 更改的词句这时可以 用其他字体和使用样 式，由切图来实现。
字体
我们在设计时，重要 的视觉部分可以做文 字的样式（前提是这 部分不会改变）例如 首页的标题，底部标 签栏的文字（它们一 般都是固定不会更改 的）改变的文字切图 实现。但二级页面及 之后的标题就会由技 术来实现了。
尺寸与分辨率
移动产品使用特点
Apple为了防止在交流过程中（尤其对于编程实现）分辨率对思维的迷惑， 统一使用点（Point）对界面元素的大小进行描述，例如： iPhone/iPod Touch界面描述 320点 x 480点 iPhone/iPad界面描述 768点 x 1024点 换算关系 普屏 1点（1pt) = 1像素 Retina屏 1点(1pt) = 2像素 这样，不管我们是在为普屏还是Retina屏进行设计与开发，我们都可以清楚 地，并且统一地使用点对界面元素的大小进行描述了。
移动界面设计
移动界面设计——移动设备APP的特点以智能手机为例，通常在使用智能手机的时候是以竖屏并且更多是以单手进行操作。
那么对于的智能手机屏幕来说的话，通常会以屏幕上半部分为眼部热区，下半部分为手部操作热区这两个区域来进行区分。
所以，会通常把展示类型的信息，例如banner图，logo等视觉元素放在上半部分的眼部热区进行展示，对于一些重要的操作和点击按钮会放在手机的中下部分，方便用户的手指点击。
例如在有些APP当中，已经开始逐步将返回到上一级的“返回键”以及部分重要操作放在屏幕下方来进行展示。
（如图1-31 a所示）以及也会经常发现手机移动产品的登录页面其输入框和按钮也会放置在屏幕中线以下来进行展示。
（如图1-31 b所示）图1-31 a返回键及重要操作图1-31 b登录页面另外还有一些特点总结如下:a）操作界面精致、界面操作性高，所以这也就需要设计师能够在手机屏幕大小，信息合理完整的传递和用户阅读，界面视觉效果的美观留白以及功能区域划分之间寻求平衡。
b）记忆负担尽量减少、尊重用户操作习惯,在使用移动端设备进行操作的时候，要求在使用产品的时候尽量减少用户的操作时间成本。
以及增加产品的易学习型，并且能够尊重用户所形成的操作习惯，能够保证快速，智能，高效的完成用户需求。
c）设计风格和版本的一致性,在设计应用视觉效果的时候，不同的应用以及不同的系统要区别使用的视觉元素的风格，不要混合使用。
同时也要注意版本更新过程当中视觉风格的延续以及重要功能操作图标要保持其一致性，保留产品核心功能以及遵循用户之前的操作习惯，所以当产品界面的视觉设计接近尾声时，通常要根据产品的视觉来总结”产品视觉规范性说明文档"来保证产品视觉风格的一致性。
手机应用通常以页面刷新的方式为主，由于屏幕较小，所以对于手机应用的信息展示来说，通常都要以新的页面展示为主。
那么列表页跳转到详情页就是一个很典型的例子。
例如，社交平台中从好友列表进入到好友详情页面的时候，由于手机屏幕较小以及竖屏使用的情况，这两个功能页面通常会分别在两张页面进行展示，如果这两层信息放在一个屏幕中显示又势必会遮盖当前页面住更多的有效信息,所以把这种方式称为"页面刷新"或者"页面跳转（如图1-32）图1-32页面刷新/页面跳转页面用桀过于频繁的话，会无形中增加产品的点击深度，耗费用户更多的时间成本。
移动界面交互设计PPT课件
Android手机图标尺寸
.
11
1.移动设备界面尺寸和基本组成元素
Android手机系统分辨率占有率
.
12
1.移动设备界面尺寸和基本组成元素
Android
1、尺寸及分辨率 Android 界面尺寸：480x800、720x1280、1080x1920...
Android 比 iPhone 的尺寸多了很多套，建议取用 720x1280 这个尺寸， 这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰； 切图后的图片文件大小也适中，应用的内存消耗也不会过高。
WEB端界面元素的布局
F式布局-
从上到下 从左到右
•按照逻辑，我们得出以下结论：
•品牌标志和导航应该放在页面 的顶部，这是用户对网站的第 一印象。
•在内容结构中，图片更容易获 得关注。
•用户浏览完图片后，下一个关 注点便是标题。
•用户会大致的浏览文本，但是
往往不会通读。
.
20
2.移动设备小屏幕与终端特殊性对界面与交互设计的影响
P.S. 在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，
将状态栏和导航栏合在了一起
.
4
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
iphone6 plus UI物理版是iphone6 plus实际的屏幕像素。 iphone6 plus UI设计版是我们截屏iphone6 plus的界面在ps中去量，发现的尺寸。 iphone6 plus UI放大版是iphone6 plus的尺寸等比放大1.5倍得出的分辨率。
.
3
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
.
11
1.移动设备界面尺寸和基本组成元素
Android手机系统分辨率占有率
.
12
1.移动设备界面尺寸和基本组成元素
Android
1、尺寸及分辨率 Android 界面尺寸：480x800、720x1280、1080x1920...
Android 比 iPhone 的尺寸多了很多套，建议取用 720x1280 这个尺寸， 这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰； 切图后的图片文件大小也适中，应用的内存消耗也不会过高。
WEB端界面元素的布局
F式布局-
从上到下 从左到右
•按照逻辑，我们得出以下结论：
•品牌标志和导航应该放在页面 的顶部，这是用户对网站的第 一印象。
•在内容结构中，图片更容易获 得关注。
•用户浏览完图片后，下一个关 注点便是标题。
•用户会大致的浏览文本，但是
往往不会通读。
.
20
2.移动设备小屏幕与终端特殊性对界面与交互设计的影响
P.S. 在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，
将状态栏和导航栏合在了一起
.
4
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
iphone6 plus UI物理版是iphone6 plus实际的屏幕像素。 iphone6 plus UI设计版是我们截屏iphone6 plus的界面在ps中去量，发现的尺寸。 iphone6 plus UI放大版是iphone6 plus的尺寸等比放大1.5倍得出的分辨率。
.
3
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
01 移动UI设计基础
1440×2960px
华为Mate10系列 三星Galaxy S7、S6
1440×2560px
OPPO R15、VIVO X21 iPhone X
iPhone 8/7/6 Plus iPhone 8/7/6
1080×2280px 1125×2436px 1080×1920px 750×1334px
屏幕密度 568ppi/532ppi
优势 1. 采用无损压缩，可以保证图像的品质 2. 支持256种真彩色 3. 支持透明存储，失真小，无锯齿 4. 体积教小，被广泛的应用于网络传输
缺点
1. 不支持动画
2. 在存储无透明区域，颜色极其复杂的图像时，文件体积 会变得很大，不如JPEG
3. IE 6不支持PNG的透明属性
常见的图片格式
JPG
UI设计概论
什么是APP
APP即手机软件，也就是安装在手 机上的软件，完善原始系统的不足与个 性化。
不同系统下载的APP其文件格式也 各不相同。iOS系统和Android系统是 目前主流的两大手机APP平台。
UI设计概论
移动APP UI与平面UI的区别
移动UI的平台主要是手机的APP 客户端上。而平面UI的范围则非常广 泛，包括了绝大部分UI的领域。手机 UI的独特性，比如尺寸要求、控件和 组件类型是的很多平面设计师要重新 调整审美基础。
优势 1. 支持高级别无损耗压缩 2. 支持Alpha通道透明度 3. 支持伽玛校正 4. 支持交错 5. Web浏览器支持
缺点 1. 较老的程序或浏览器不支持 2. PNG提供的压缩量较小 3. 对多图像文件或动画文件不提供支持
常见的图片格式
Gif
图形交换格式简称GIF，是CompuServe公司在 1987年开发的图像 文件格式。GIF文件的数据是一种基于LZW算法的连续色调的无损 压缩格式。其压缩率一般在50%左右，它不属于任何应用程序。几 乎所有相关软件都支持，公共领域有大量的软件在使用GIF图像文件。
界面设计规范ppt课件
响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响 应时间上坚持如下原则：
0-5秒鼠标显示成为沙漏； 5秒以上显示处理窗口，或显示进度条； 一个长时间的处理完成时应给予完成警告信息。
► 应该遵循的基本原则
出错信息和警告原则
出错信息和警告是指出现问题时系统给出的坏消息，对于出错信息和 警告应该遵循以下原则：
面
GUI设计
设
经PM确认
主要界面高保真
界 面
计
计 主要模板页
制
GUI设计
作
界 框架、页面模板
GUI设计图
经PM确认
设 计 开
面 HTML+CSS实现 实
模板页html+css
发
现 根据模板填充制 （ 作各HTML页面 编 码 部分DHTML组件
各原型页面html 组件html+css
流 程
） 的HTML+CSS提供
► 应该遵循的基本原则
显示信息一致性的原则 以用户为主导原则 易用性原则 鼠标与键盘一致性原则 系统响应时间原则 出错信息和警告原则 信息显示原则 数据输入原则 合理性原则 美观与协调性原则
► 应该遵循的基本原则
显示信息一致性的原则
无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一 的标准，做到真正的一致。界面直观、对用户透明：用户接触软件后对界面 上对应的功能一目了然、不需要多少培训就可以方便使用应用系统。 这样得到的好处： 用户使用起来能够建立起精确的心里模型，使用熟练了一个系统界面后， 切换到另外一个系统界面能够很轻松的推测出各种功能。 降低培训、支持成本，支持人员不用费力逐个指导。 给用户统一感觉，不觉得混乱，心情愉快，支持度增加。
0-5秒鼠标显示成为沙漏； 5秒以上显示处理窗口，或显示进度条； 一个长时间的处理完成时应给予完成警告信息。
► 应该遵循的基本原则
出错信息和警告原则
出错信息和警告是指出现问题时系统给出的坏消息，对于出错信息和 警告应该遵循以下原则：
面
GUI设计
设
经PM确认
主要界面高保真
界 面
计
计 主要模板页
制
GUI设计
作
界 框架、页面模板
GUI设计图
经PM确认
设 计 开
面 HTML+CSS实现 实
模板页html+css
发
现 根据模板填充制 （ 作各HTML页面 编 码 部分DHTML组件
各原型页面html 组件html+css
流 程
） 的HTML+CSS提供
► 应该遵循的基本原则
显示信息一致性的原则 以用户为主导原则 易用性原则 鼠标与键盘一致性原则 系统响应时间原则 出错信息和警告原则 信息显示原则 数据输入原则 合理性原则 美观与协调性原则
► 应该遵循的基本原则
显示信息一致性的原则
无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一 的标准，做到真正的一致。界面直观、对用户透明：用户接触软件后对界面 上对应的功能一目了然、不需要多少培训就可以方便使用应用系统。 这样得到的好处： 用户使用起来能够建立起精确的心里模型，使用熟练了一个系统界面后， 切换到另外一个系统界面能够很轻松的推测出各种功能。 降低培训、支持成本，支持人员不用费力逐个指导。 给用户统一感觉，不觉得混乱，心情愉快，支持度增加。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
继无线局域网(WLAN)和无线城域网(WMAN)之 后，各种形式的便携式移动设备的不断涌现， 促进了无线个域网的出现，使移动互联网的接 入方式更为丰富。
6
高速无线数据通信
是在无线语音通信系统之上发展起来的，分为 三代:
第一代是模拟无线网络，20世纪的80年代，目前在 我国已基本淘汰。
第二代是数字语音通讯系统和数字通信系统，常见 的有九十年代出现的欧洲的全球移动通信系统GSM （Global Systems for Mobile Telecommunications， GSM）、美国的窄带CDMA（Code Division Multiple Access）。
T9输入法所支持的手机键盘基于电话键 盘设计的，手机用户群未必熟悉计算机；
手机键盘采用一个按键对应于多个字符， 键的大小自然可以更大，能更快的键入 和更高的准确程度；
手机键盘按键的设计更加紧凑，按键间 距相对较小，手指移动距离短，也可以 提高输入速度 。
11
移动界面的输入方式
笔输入
手写文字识别是一种文本的输入方式，作为键盘输入 的一种替代方式。
2
移动界面的设计
移动界面的设计成为人机交互技术研究 的一个重要方向。一方面，移动应用的 界面设计符合人机交互设计的一般规律， 可以利用人机交互界面的一般设计方法； 另一方面，由于移动设备的便携性、位 置不固定性和计算能力有限性以及无线 网络的低带宽高延迟等诸多的限制，移 动界面设计又具有自己的特点。
WPAN） 高速无线数据通讯系统以及卫星通讯等
5
移动互联网的数据接入方式
无线局域网采用无线的方式提供传统有线局域 网的所有功能，具有极大的灵活性。
无线城域网技术的目标是提供类似于有线 Modem、DSL （Digital Subscriber Line），以 太网以及光纤网等有线方式的高速Internet接 入，优势是可以在较大的地理区域内无须布线。
主要内容提要
移动界面的基本概念 移动界面的设计方法 移动界面的实现技术 移动界面设计的实例
1
10.1移动界面基本概念
互联网和移动通信，作为迈向信息社会的两个 重要标志，分别适应了人们对信息资源的丰富 性以及信息获取方式的灵活性与移动性的需求。
互联网与移动通信已经逐渐形成了信息产业中 潜力巨大、前景可观的两大领域，同时也催生 了结合二者的技术优势，目标在于向用户提供 灵活的、不受信息源和用户访问位置等各种限 制的信息服务的移动互联网（Mobile Internet） 技术。
可以通过将掌上设备作为语音门户网站(Voice Portal)的访问终端。在这种环境中，用户可以在办 公室、家里或旅行途中随时随地通过手机等具有语 音通信功能的移动设备与具备语音识别与合成技术 的语音门户网站进行对话。
13
移动界面的输入方式
语音识别技术还可以用于人机界面的语音命 令导航，使得用户可以直接用语音发出各种 操作指令。
移动互联网的数据接入方式目前也是多种标准 并存，没有完全统一。主要形式包括:
无线局域网（Wireless Local Area Network，WLAN） 无线城域网（Wireless Metropolitan Area Network，
WMAN） 无线个域网（Wireless Personal Area Networks，
3
10.1.2移动设备与连接方式
目前主要的移动终端设备种类包括手机、 掌上电脑PDA（Personal Digital Assistant）、笔记本电脑以及各种特殊 用途的移动设备如车载电脑。基于可移 动性（mobility）的考虑，目前移动互联 设备以智能手机与掌上电脑为主 。
4
移动互联网的数据接入方式
12
移动界面的输入方式
语音识别
语音是人们在日常生活中进行交流最主要的手段， 因此对于语音技术成为新一代多通道人机界面中的 最重要技术之一的期望也就很容易理解了
语音识别技术的研究工作始于20世纪50年代目前这Байду номын сангаас个领域最具代表性的产品是IBM公司的Viavoice和 DRAGON公司的Naturally Speaking。
第三代，即3G（Third Generation）阶段，目标是 采用数字技术实现语音、数据以及多媒体信息的高 速传输。
7
10.1.3移动界面的输入方式
目前主要的移动设备形式——智能手机 与掌上电脑而言，由于尺寸较小、接口 较为简单，全尺寸键盘、鼠标等诸多的 传统的输入输出设备较难在移动界面中 使用，因此需要设计专门的输入输出方 式，以便适应移动界面的特点。
随着笔输入技术的日益成熟，目前笔输入技术的在包 括平板电脑（Tablet PC）、智能手机、掌上电脑等多 种移动设备中的得到了广泛应用。
近年来微软公司力推Tablet PC，也在一定程度上对于 笔输入的普及起了推波助澜的作用。
笔输入是目前掌上电脑最主要的一种输入方式。特别 在中国，由于汉字书写的复杂性，手写笔输入成为最 自然、符合中国人书写习惯的输入方式。
目前的语音识别技术仍然存在着很多的问题， 因此能够实现的应用领域还有一定的局限性， 不会立即给人机交互方式带来本质性的影响。
语音录制: 可以随时在任何可执行屏幕手写 或绘制操作的程序中进行语音录制，可以单 独生成一段录音，还可以将一段录音嵌入文 本便笺中。
8
移动界面的输入方式
键盘输入
手机键盘的设计主要还 是从手机的主要功能即语音 通信考虑的。由于每一个按 键都是复用的，如数字键7和 字母P、Q、R、S共用一个按 键。
T9输入法就是目前最为著名的一种解决方案。使用T9 输入法的优越之处在于输入一个字以后，会提示一些可以 合法组合的常见字，用户只需要简单地选择即可输入，大 大降低了手机文字输入的疲劳程度，提高了批量文字信息 的输入效率。
9
移动界面的输入方式
键盘输入
软键盘（soft keyboard）是解决移动设备输 入问题的又一重要方法。
所谓的软键盘就是在移动设备屏幕上显示 QWERTY键盘，用户在屏幕上选择软键盘上 的键完成输入。
这种输入形式在桌面计算机的Windows平台 上的输入法中都可以见到。
10
T9比软键盘输入法的效率高
6
高速无线数据通信
是在无线语音通信系统之上发展起来的，分为 三代:
第一代是模拟无线网络，20世纪的80年代，目前在 我国已基本淘汰。
第二代是数字语音通讯系统和数字通信系统，常见 的有九十年代出现的欧洲的全球移动通信系统GSM （Global Systems for Mobile Telecommunications， GSM）、美国的窄带CDMA（Code Division Multiple Access）。
T9输入法所支持的手机键盘基于电话键 盘设计的，手机用户群未必熟悉计算机；
手机键盘采用一个按键对应于多个字符， 键的大小自然可以更大，能更快的键入 和更高的准确程度；
手机键盘按键的设计更加紧凑，按键间 距相对较小，手指移动距离短，也可以 提高输入速度 。
11
移动界面的输入方式
笔输入
手写文字识别是一种文本的输入方式，作为键盘输入 的一种替代方式。
2
移动界面的设计
移动界面的设计成为人机交互技术研究 的一个重要方向。一方面，移动应用的 界面设计符合人机交互设计的一般规律， 可以利用人机交互界面的一般设计方法； 另一方面，由于移动设备的便携性、位 置不固定性和计算能力有限性以及无线 网络的低带宽高延迟等诸多的限制，移 动界面设计又具有自己的特点。
WPAN） 高速无线数据通讯系统以及卫星通讯等
5
移动互联网的数据接入方式
无线局域网采用无线的方式提供传统有线局域 网的所有功能，具有极大的灵活性。
无线城域网技术的目标是提供类似于有线 Modem、DSL （Digital Subscriber Line），以 太网以及光纤网等有线方式的高速Internet接 入，优势是可以在较大的地理区域内无须布线。
主要内容提要
移动界面的基本概念 移动界面的设计方法 移动界面的实现技术 移动界面设计的实例
1
10.1移动界面基本概念
互联网和移动通信，作为迈向信息社会的两个 重要标志，分别适应了人们对信息资源的丰富 性以及信息获取方式的灵活性与移动性的需求。
互联网与移动通信已经逐渐形成了信息产业中 潜力巨大、前景可观的两大领域，同时也催生 了结合二者的技术优势，目标在于向用户提供 灵活的、不受信息源和用户访问位置等各种限 制的信息服务的移动互联网（Mobile Internet） 技术。
可以通过将掌上设备作为语音门户网站(Voice Portal)的访问终端。在这种环境中，用户可以在办 公室、家里或旅行途中随时随地通过手机等具有语 音通信功能的移动设备与具备语音识别与合成技术 的语音门户网站进行对话。
13
移动界面的输入方式
语音识别技术还可以用于人机界面的语音命 令导航，使得用户可以直接用语音发出各种 操作指令。
移动互联网的数据接入方式目前也是多种标准 并存，没有完全统一。主要形式包括:
无线局域网（Wireless Local Area Network，WLAN） 无线城域网（Wireless Metropolitan Area Network，
WMAN） 无线个域网（Wireless Personal Area Networks，
3
10.1.2移动设备与连接方式
目前主要的移动终端设备种类包括手机、 掌上电脑PDA（Personal Digital Assistant）、笔记本电脑以及各种特殊 用途的移动设备如车载电脑。基于可移 动性（mobility）的考虑，目前移动互联 设备以智能手机与掌上电脑为主 。
4
移动互联网的数据接入方式
12
移动界面的输入方式
语音识别
语音是人们在日常生活中进行交流最主要的手段， 因此对于语音技术成为新一代多通道人机界面中的 最重要技术之一的期望也就很容易理解了
语音识别技术的研究工作始于20世纪50年代目前这Байду номын сангаас个领域最具代表性的产品是IBM公司的Viavoice和 DRAGON公司的Naturally Speaking。
第三代，即3G（Third Generation）阶段，目标是 采用数字技术实现语音、数据以及多媒体信息的高 速传输。
7
10.1.3移动界面的输入方式
目前主要的移动设备形式——智能手机 与掌上电脑而言，由于尺寸较小、接口 较为简单，全尺寸键盘、鼠标等诸多的 传统的输入输出设备较难在移动界面中 使用，因此需要设计专门的输入输出方 式，以便适应移动界面的特点。
随着笔输入技术的日益成熟，目前笔输入技术的在包 括平板电脑（Tablet PC）、智能手机、掌上电脑等多 种移动设备中的得到了广泛应用。
近年来微软公司力推Tablet PC，也在一定程度上对于 笔输入的普及起了推波助澜的作用。
笔输入是目前掌上电脑最主要的一种输入方式。特别 在中国，由于汉字书写的复杂性，手写笔输入成为最 自然、符合中国人书写习惯的输入方式。
目前的语音识别技术仍然存在着很多的问题， 因此能够实现的应用领域还有一定的局限性， 不会立即给人机交互方式带来本质性的影响。
语音录制: 可以随时在任何可执行屏幕手写 或绘制操作的程序中进行语音录制，可以单 独生成一段录音，还可以将一段录音嵌入文 本便笺中。
8
移动界面的输入方式
键盘输入
手机键盘的设计主要还 是从手机的主要功能即语音 通信考虑的。由于每一个按 键都是复用的，如数字键7和 字母P、Q、R、S共用一个按 键。
T9输入法就是目前最为著名的一种解决方案。使用T9 输入法的优越之处在于输入一个字以后，会提示一些可以 合法组合的常见字，用户只需要简单地选择即可输入，大 大降低了手机文字输入的疲劳程度，提高了批量文字信息 的输入效率。
9
移动界面的输入方式
键盘输入
软键盘（soft keyboard）是解决移动设备输 入问题的又一重要方法。
所谓的软键盘就是在移动设备屏幕上显示 QWERTY键盘，用户在屏幕上选择软键盘上 的键完成输入。
这种输入形式在桌面计算机的Windows平台 上的输入法中都可以见到。
10
T9比软键盘输入法的效率高