品味移动设计

目 　录
第 1 章　做好准备了吗——了解移动平台和移动应用　　1
1.1 　成为用户体验设计师　　1
1.1.1 　UI、ID、UE和GUI，这些都是什么　　2
1.1.2 　了解成功的用户体验设计案例　　3
1.2 　移动设备的三大主流平台　　7
1.2.1 　iOS 平台　　7
1.2.2 　Android 平台　　10
1.2.3 　Windows Phone 平台　　12
1.3 　用户体验设计的基本流程　　13
1.3.1 　创意和原型草图阶段　　14
1.3.2 　原型的中保真阶段　　 16
1.3.3 　高保真原型及设计的完成阶段　　17
第 2 章　一切从服务用户开始——市场定位和产品目标　　19
2.1 　是移动产品，不是电脑软件　　19
2.1.1 　不为外表华丽　　20
2.1.2 　不为功能强大　　21
2.1.3 　别让它“大而全”　　23
2.2 　做有价值的应用　　26
2.2.1 　它只是成千上万个应用中的一个　　26
2.2.2 　是前无古人还是出类拔萃　　29
2.2.3 　如何才能独树一帜　　30
2.3 　了解应用的使用者　　32
2.3.1 　用户细分　　32
2.3.2 　用户研究　　34
2.3.3 　用户测试　　36
第 3 章　讨论与初步设计——完成原型的草图设计 37
3.1 　会玩“头脑风暴”吗　　37
3.1.1 　一项既有益又有趣的游戏　　38
3.1.2 　有明确的目标　　39
3.1.3 　有合理的分工　　41
3.1.4 　安排好合理的环境和议程　　45
3.1.5 　畅所欲言和遵守规则　　49
3.1.6 　挑选出最有前途的想法　　50
3.2 　把想法和思路画成草图　　51
3.2.1 　手绘的原型草图　　51
3.2.2 　潦草但要认真　　53
3.2.3 　原型工具和原型设计软件　　57
3.3 　检验和分享你的思考结果　　60
3.3.1 　有连贯，有情节，画出应用的故事板　　61
3.3.2 　利用原型草图进行可用性测试　　62
3.3.3 　几种其他类型的草图　　63
第 4 章　移动应用的交互特点　　 67
4.1 　了解移动设备　　67
4.1.1 　移动设备的种类　　68
4.1.2 　移动设备的规格和像素尺寸　　69
4.1.3 　移动设备的使用方法　　70
4.2 　移动设备的人体工程学特点　　74
4.2.1 　了解你的拇指　　74
4.2.2 　单手操作还是双手操作　　77
4.2.3 　善待你的指尖　　80
4.3 　移动设备的视觉体验　　84
4.3.1 　视觉的运行轨迹　　85
4.3.2 　优化视觉结构　　86
4.3.3 　图片与文字的视觉关系　　90
4.4 　屏幕的旋转　　92
第 5 章 　应用程序导航　　 95
5.1 　iOS 应用的导航模式　　95
5.1.1 　平铺导航　　96
5.1.2 　iOS 的标签导航　　99
5.1.3 　iOS 的树形结构导航　　101
5.1.4 　模态视图　　104
5.1.5 　iOS 的组合导航　　105
5.2 　Android 应用导航模式　　106
5.2.1 　Android 的标签导航　　107
5.2.2 　Android 的树形结构导航　　109
5.2.3 　手机与平板电脑导航的不同　　110
5.2.4 　Android 的组合导航　　111
5.3 　Windows Phone 应用导航模式　　112
5.3.1 　Windows Phone 的标签导航　　112
5.3.2 　面板区域应用程序中心导航　　114
5.3.3 　主面板菜单应用程序中心导航　　114
第 6 章　标准控件与设计规范　　 116
6.1 　文本输入输出　　116
6.1.1 　文本输出控件　　116
6.1.2 　文本输入控件　　118
6.2 　按钮　　119
6.2.1 　iOS 平台按钮　　119
6.2.2 　Android 平台按钮　　120
6.2.3 　Windows Phone 平台按钮　　121
6.3 　各种“栏”　　122
6.3.1 　状态栏　　122
6.3.2 　iOS 中的工具栏、导航栏和标签栏　　123
6.3.3 　Android 中的菜单栏和操作栏　　125
6.3.4 　Windows Phone 中的菜单栏　　128
6.3.5 　搜索栏　　129
6.4 　滑块控件　　133
6.4.1 　iOS 平台滑块控件　　133
6.4.2 　Android 平台滑块控件　　134
6.4.3 　Windows Phone 平台滑块控件　　135
6.5 　选择控件　　136
6.5.1 　二选一　　136
6.5.2 　单选控件　　137
6.5.3 　多选控件　　138
6.5.4 　拾取器　　138
6.6 　对话框　　143
6.6.1 　iOS 平台中的对话框　　143
6.6.2 　Android 平台中的对话框　　 145
6.6.3 　Windows Phone 平台中的对话框　　147
6.7 　活动指示器和进度条　　148
6.7.1 　iOS 平台中的活动指示器和进度条　　148
6.7.2 　Android 平台的活动指示器和进度条　　150
6.7.3 　Windows Phone 平台中的活动指示器和进度条　　150
6.8 　列表和网格　　152
6.8.1 　iOS 平台列表和网格　　152
6.8.2 　Android 平台列表和网格　　154
6.8.3 　Windows Phone 平台中的列表和网格　　155
6.9 　原型的可用性测试　　157
第 7 章　视觉体验的个性化　　 159
7.1 　做有个性的应用　　159
7.1.1 　从细节替换入手　　160
7.1.2 　添加装饰、纹理和特效　　162
7.1.3 　纯个性化的用户体验设计　　164
7.2 　图形元素与构成理念　　165
7.2.1 　图形元素是界面视觉印象的根本　　166
7.2.2 　页面布局与构成理念　　169
7.2.3 　处理好图形元素和页面布局间的关系　　175
7.2.4 　同一款应用在不同的平台和设备上　　177
7.3 　应用界面的色彩因素　　179
7.3.1 　了解色彩的规律　　179
7.3.2 　善于把握色调　　181
7.3.3 　丰富的色彩，严谨的搭配　　183
7.3.4 　色彩的倾向性　　187
7.4 　严谨地把握文字　　188
7.4.1 　选择合适的字体　　189
7.4.2 　推敲文字的四个要素　　191
7.4.3 　处理好字群的位置关系　　193
7.5 　界面风格和特效　　194
7.5.1 　拟物化风格　　194
7.5.2 　扁平化设计　　195
7.5.3 　手绘体风格　　196
第 8 章　做好应用的图标设计　　 199
8.1 　图标设计的原则　　199
8.1.1 　图标设计的“识别性”原则　　201
8.1.2 　图标设计的“一致性”原则　　201
8.1.3 　图标设计的“兼容性”原则　　203
8.2 　启动图标　　206
8.2.1 　建立完美的第一印象　　206
8.2.2 　三大平台启动图标设计规范　　210
8.2.3 　几个简单的启动图标设计思路　　214
8.3 　工具栏图标　　217
8.3.1 　是符号，不是图案　　217
8.3.2 　三大平台工具栏图标的规范和含义　　218
8.3.3 　几个有效的简化图像的方法　　219
8.4 　启动画面和引导帮助　　221
8.4.1 　启动画面　　221
8.4.2 　引导帮助　　223
第 9 章　用户体验设计项目实战——“价格线”　　226
9.1 　项目概述及工作计划　　226
9.1.1 　项目描述　　226
9.1.2 　工作计划和流程　　227
9.2 　项目的准备阶段　　228
9.2.1 　市场定位及产品分析　　228
9.2.2 　项目的用户需求分析　　229
9.3 　项目的创作及草图阶段　　230
9.4 　项目的中保真原型及可用性测试　　232
9.4.1 　项目的中保真原型　　232
9.4.2 　原型的可用性测试及调整　　233
9.5 　完善界面的个性化设计　　235
9.5.1 　确定风格并收集素材　　235
9.5.2 　隐喻元素的添加及个性化调整　　236
9.6 　应用图标和启动画面设计　　237
9.6.1 　应用图标的创意和设计　　237
9.6.2 　应用的启动画面设计　　239