Android应用UI设计模式

第一部分　用户体验原则和Android特色

第1章　向Android迁移（案例）2

1.1 　启动图标2

1.2 　操作栏与信息架构3

1...

第一部分　用户体验原则和Android特色

第1章　向Android迁移（案例）2

1.1 　启动图标2

1.2 　操作栏与信息架构3

1.2.1 　重新设计前3

1.2.2 　重新设计后5

1.3 　选项卡8

1.4 　专用选择页8

1.5 　选择控件9

1.5.1 　重新设计前9

1.5.2 　重新设计后10

1.6 　按钮10

1.7 　搜索结果屏幕11

1.7.1 　重新设计前11

1.7.2 　重新设计后12

1.8 　结果详情屏幕13

1.8.1 　重新设计前13

1.8.2 　重新设计后14

1.9 　最终结果16

第2章　Android的特色19

2.1 　这里是平面国19

2.2 　轻按任何地方21

2.3 　适合各种设备22

2.4 　摆脱空间限制24

2.5 　大局着眼，小处着手27

第3章　Android分散化31

3.1 　何谓分散化31

3.2 　花无百日红31

3.3 　Android设备类型32

3.3.1 　紧凑型手机32

3.3.2 　全尺寸移动手机33

3.3.3 　平板手机34

3.3.4 　小型平板35

3.3.5 　大型平板37

3.4 　为分散化而歌39

第4章　移动设计流程40

4.1 　现场观察用户如何与移动设备交互40

4.2 　原型设计方法必须考虑尺寸因素40

4.3 　用户测试必须涵盖运动、声音和多点触控等方面41

4.4 　触控界面必须既简约又精巧41

4.5 　愉悦不可或缺41

4.6 　讲述完整的故事——为跨界而设计42

4.7 　移动设计案例研究42

4.7.1 　第1步：范围、概念和规划42

4.7.2 　第2步：设计研讨会44

4.7.3 　第3步：使用便利贴做RITE调查45

4.7.4 　第4步：视觉设计48

第二部分　Android 设计模式与反模式

第5章　欢迎体验50

5.1 　最终用户许可协议（反模式）50

5.1.1 　出现的时间和场合50

5.1.2 　示例50

5.1.3 　为何要避免52

5.1.4 　其他考虑因素52

5.2 　联系障碍（反模式）52

5.2.1 　出现的时间和场合52

5.2.2 　示例53

5.2.3 　为何要避免54

5.2.4 　其他考虑因素54

5.3 　注册（反模式）55

5.3.1 　出现的时间和场合55

5.3.2 　示例55

5.3.3 　为何要避免56

5.3.4 　其他考虑因素56

5.4 　欢迎动画57

5.4.1 　工作原理57

5.4.2 　示例57

5.4.3 　使用的时机和场合58

5.4.4 　使用的原因58

5.4.5 　其他用途58

5.4.6 　Pet Shop应用58

5.4.7 　平板应用59

5.5 　使用说明59

5.5.1 　工作原理59

5.5.2 　示例59

5.5.3 　使用的时机和场合61

5.5.4 　使用的原因61

5.5.5 　其他用途61

5.5.6 　Pet Shop应用62

5.5.7 　平板应用62

第6章　主屏幕63

6.1 　链接列表63

6.1.1 　工作原理63

6.1.2 　示例63

6.1.3 　使用的时机和场合65

6.1.4 　使用的原因65

6.1.5 　其他用途65

6.1.6 　Pet Shop应用66

6.1.7 　平板应用66

6.2 　仪表板66

6.2.1 　工作原理67

6.2.2 　示例67

6.2.3 　使用的时机和场合67

6.2.4 　使用的原因68

6.2.5 　Pet Shop应用68

6.2.6 　平板应用69

6.3 　更新69

6.3.1 　工作原理69

6.3.2 　示例69

6.3.3 　使用的时机和场合70

6.3.4 　使用的原因70

6.3.5 　其他用途71

6.3.6 　Pet Shop应用71

6.3.7 　平板应用72

6.4 　浏览72

6.4.1 　工作原理72

6.4.2 　示例73

6.4.3 　使用的时机和场合74

6.4.4 　使用的原因74

6.4.5 　其他用途74

6.4.6 　Pet Shop应用75

6.4.7 　平板应用76

6.5 　地图76

6.5.1 　工作原理76

6.5.2 　示例76

6.5.3 　使用的时机和场合77

6.5.4 　使用的原因77

6.5.5 　其他用途77

6.5.6 　Pet Shop应用78

6.5.7 　平板应用79

6.6 　历史记录80

6.6.1 　工作原理80

6.6.2 　示例80

6.6.3 　使用的时机和场合80

6.6.4 　使用的原因81

6.6.5 　其他用途81

6.6.6 　Pet Shop应用82

6.6.7 　平板应用83

第7章　搜索84

7.1 　语音搜索84

7.1.1 　工作原理84

7.1.2 　示例84

7.1.3 　使用的时机和场合85

7.1.4 　使用的原因86

7.1.5 　其他用途86

7.1.6 　Pet Shop应用87

7.1.7 　平板应用87

7.2 　自动完成与自动建议89

7.2.1 　工作原理89

7.2.2 　示例89

7.2.3 　使用的时机和场合90

7.2.4 　使用的原因90

7.2.5 　其他用途91

7.2.6 　Pet Shop应用91

7.2.7 　平板应用92

7.3 　轻按优先93

7.3.1 　工作原理93

7.3.2 　示例94

7.3.3 　使用的时机和场合94

7.3.4 　使用的原因94

7.3.5 　其他用途95

7.3.6 　Pet Shop应用95

7.3.7 　平板应用95

7.4 　拖动刷新96

7.4.1 　工作原理96

7.4.2 　示例96

7.4.3 　使用的时机和场合97

7.4.4 　使用的原因97

7.4.5 　其他用途97

7.4.6 　Pet Shop应用97

7.4.7 　平板应用97

7.5 　从菜单搜索98

7.5.1 　工作原理98

7.5.2 　示例98

7.5.3 　使用的时机和场合99

7.5.4 　使用的原因99

7.5.5 　其他用途99

7.5.6 　Pet Shop应用99

7.5.7 　平板应用100

7.6 　从操作栏搜索100

7.6.1 　工作原理101

7.6.2 　示例101

7.6.3 　使用的时机和场合102

7.6.4 　使用的原因102

7.6.5 　其他用途102

7.6.6 　Pet Shop应用103

7.6.7 　平板应用103

7.7 　专用搜索104

7.7.1 　工作原理104

7.7.2 　示例104

7.7.3 　使用的时机和场合105

7.7.4 　使用的原因105

7.7.5 　其他用途105

7.7.6 　Pet Shop应用105

7.7.7 　平板应用106

7.8 　在内容页面中搜索106

7.8.1 　工作原理106

7.8.2 　示例106

7.8.3 　使用的时机和场合107

7.8.4 　使用的原因107

7.8.5 　其他用途107

7.8.6 　Pet Shop应用108

7.8.7 　平板应用108

7.9 　搜索与细化分离（反模式）109

7.9.1 　出现的时间和场合109

7.9.2 　示例109

7.9.3 　为何要避免110

7.9.4 　其他考虑因素110

第8章　排序和筛选112

8.1 　残缺的细化（反模式）112

8.1.1 　出现的时机和场合112

8.1.2 　示例112

8.1.3 　为何要避免114

8.2 　细化页面115

8.2.1 　工作原理115

8.2.2 　示例115

8.2.3 　使用的时机和场合118

8.2.4 　使用的原因118

8.2.5 　其他用途118

8.2.6 　Pet Shop应用119

8.2.7 　平板应用119

8.3 　筛选带120

8.3.1 　工作原理120

8.3.2 　示例120

8.3.3 　使用的时机和场合121

8.3.4 　使用的原因121

8.3.5 　其他用途121

8.3.6 　Pet Shop应用122

8.3.7 　平板应用123

8.4 　并行架构123

8.4.1 　工作原理124

8.4.2 　示例124

8.4.3 　使用的时机和场合125

8.4.4 　使用的原因125

8.4.5 　其他用途125

8.4.6 　Pet Shop应用125

8.4.7 　平板应用126

8.5 　选项卡129

8.5.1 　工作原理129

8.5.2 　示例129

8.5.3 　使用的时机和场合131

8.5.4 　使用的原因131

8.5.5 　其他用途131

8.5.6 　Pet Shop应用132

8.5.7 　平板应用133

第9章　避免无结果或无关结果136

9.1 　不指出系统状态（反模式）136

9.1.1 　出现的时机和场合136

9.1.2 　示例136

9.1.3 　为何要避免137

9.1.4 　其他考虑因素138

9.2 　低效界面（反模式）138

9.2.1 　出现的时机和场合138

9.2.2 　示例138

9.2.3 　其他考虑因素139

9.3 　无用控件（反模式）139

9.3.1 　出现的时机和场合139

9.3.2 　示例139

9.3.3 　为何要避免140

9.4 　你要找的是不是……140

9.4.1 　工作原理140

9.4.2 　示例141

9.4.3 　使用的时机和场合141

9.4.4 　使用的原因142

9.4.5 　其他用途142

9.4.6 　Pet Shop应用142

9.4.7 　平板应用142

9.5 　部分匹配143

9.5.1 　工作原理143

9.5.2 　示例143

9.5.3 　使用的时机和场合145

9.5.4 　使用的原因145

9.5.5 　其他用途145

9.5.6 　Pet Shop应用145

9.5.7 　平板应用145

9.6 　本地结果146

9.6.1 　工作原理146

9.6.2 　示例146

9.6.3 　使用的时机和场合147

9.6.4 　使用的原因147

9.6.5 　其他用途147

9.6.6 　Pet Shop应用148

9.6.7 　平板应用149

第10章　数据输入150

10.1 　滑块150

10.1.1 　工作原理150

10.1.2 　示例150

10.1.3 　使用的时机和场合151

10.1.4 　使用的原因151

10.1.5 　其他用途152

10.1.6 　Pet Shop应用152

10.1.7 　平板应用153

10.2 　步进器155

10.2.1 　工作原理155

10.2.2 　示例155

10.2.3 　使用的时机和场合156

10.2.4 　使用的原因156

10.2.5 　其他用途156

10.2.6 　Pet Shop应用157

10.2.7 　平板应用159

10.3 　可滚动的日历159

10.3.1 　工作原理159

10.3.2 　示例159

10.3.3 　使用的时机和场合160

10.3.4 　使用的原因160

10.3.5 　其他用途160

10.3.6 　Pet Shop应用161

10.3.7 　平板应用161

10.4 　日期与时间选择器163

10.4.1 　工作原理163

10.4.2 　示例163

10.4.3 　使用的时机和场合166

10.4.4 　使用的原因166

10.4.5 　其他用途166

10.4.6 　Pet Shop应用167

10.4.7 　平板应用168

10.5 　下拉列表170

10.5.1 　工作原理170

10.5.2 　示例170

10.5.3 　使用的时机和场合172

10.5.4 　使用的原因172

10.5.5 　其他用途172

10.5.6 　Pet Shop应用173

10.5.7 　平板应用173

10.6 　多选174

10.6.1 　工作原理174

10.6.2 　示例174

10.6.3 　使用的时机和场合175

10.6.4 　使用的原因175

10.6.5 　其他用途175

10.6.6 　Pet Shop应用176

10.6.7 　平板应用177

10.7 　自由文本输入与提取177

10.7.1 　工作原理178

10.7.2 　示例178

10.7.3 　使用的时机和场合179

10.7.4 　使用的原因179

10.7.5 　其他用途179

10.7.6 　Pet Shop应用179

10.7.7 　平板应用179

10.8 　带输入掩码的文本框182

10.8.1 　工作原理183

10.8.2 　示例183

10.8.3 　使用的时机和场合185

10.8.4 　使用的原因185

10.8.5 　其他用途185

10.8.6 　Pet Shop应用186

10.8.7 　平板应用186

10.9 　带原子实体的文本框189

10.9.1 　工作原理189

10.9.2 　示例189

10.9.3 　使用的时机和场合189

10.9.4 　使用的原因190

10.9.5 　其他用途191

10.9.6 　Pet Shop应用191

10.9.7 　平板应用192

第11章　表单193

11.1 　内嵌式错误消息193

11.1.1 　工作原理193

11.1.2 　示例193

11.1.3 　使用的时机和场合195

11.1.4 　使用的原因195

11.1.5 　其他用途195

11.1.6 　Pet Shop应用196

11.1.7 　平板应用197

11.2 　提示框198

11.2.1 　工作原理198

11.2.2 　示例198

11.2.3 　使用的时机和场合200

11.2.4 　使用的原因200

11.2.5 　其他用途200

11.2.6 　Pet Shop应用201

11.2.7 　平板应用201

11.3 　弹出框203

11.3.1 　工作原理203

11.3.2 　示例203

11.3.3 　使用的时机和场合205

11.3.4 　使用的原因205

11.3.5 　其他用途205

11.3.6 　Pet Shop应用206

11.3.7 　平板应用207

11.4 　回调验证210

11.4.1 　工作原理210

11.4.2 　示例210

11.4.3 　使用的时机和场合211

11.4.4 　使用的原因211

11.4.5 　其他用途211

11.4.6 　Pet Shop应用211

11.4.7 　平板应用212

11.5 　取消/确定212

11.5.1 　工作原理212

11.5.2 　示例212

11.5.3 　使用的时机和场合214

11.5.4 　使用的原因215

11.5.5 　其他用途215

11.5.6 　Pet Shop应用217

11.5.7 　平板应用217

11.6 　上方标签221

11.6.1 　工作原理221

11.6.2 　示例221

11.6.3 　使用的时机和场合222

11.6.4 　使用的原因222

11.6.5 　其他用途224

11.6.6 　Pet Shop应用224

11.6.7 　平板应用225

11.7 　从环境获取输入227

11.7.1 　工作原理227

11.7.2 　示例227

11.7.3 　使用的时机和场合231

11.7.4 　使用的原因231

11.7.5 　其他用途231

11.7.6 　Pet Shop应用233

11.7.7 　平板应用233

11.8 　输入加速234

11.8.1 　工作原理234

11.8.2 　示例234

11.8.3 　使用的时机和场合235

11.8.4 　使用的原因235

11.8.5 　其他用途235

11.8.6 　Pet Shop应用235

11.8.7 　平板应用236

第12章　移动银行238

12.1 　登录加速器238

12.1.1 　工作原理238

12.1.2 　示例238

12.1.3 　使用的时机和场合241

12.1.4 　使用的原因241

12.1.5 　其他用途242

12.1.6 　Pet Shop应用243

12.1.7 　平板应用244

12.2 　专用选择页面245

12.2.1 　工作原理245

12.2.2 　示例246

12.2.3 　使用的时机和场合246

12.2.4 　使用的原因246

12.2.5 　其他用途247

12.2.6 　Pet Shop应用247

12.2.7 　平板应用248

12.3 　表单至上249

12.3.1 　工作原理249

12.3.2 　示例249

12.3.3 　使用的时机和场合250

12.3.4 　使用的原因250

12.3.5 　其他用途250

12.3.6 　Pet Shop应用250

12.3.7 　平板应用251

12.4 　专用页面向导251

12.4.1 　工作原理251

12.4.2 　示例252

12.4.3 　使用的时机和场合253

12.4.4 　使用的原因253

12.4.5 　其他用途253

12.4.6 　Pet Shop应用254

12.4.7 　平板应用255

12.5 　以表单结尾的向导255

12.5.1 　工作原理255

12.5.2 　示例255

12.5.3 　使用的时机和场合256

12.5.4 　使用的原因256

12.5.5 　其他用途257

12.5.6 　Pet Shop应用257

12.5.7 　平板应用258

12.6 　核对?确认260

12.6.1 　工作原理260

12.6.2 　示例260

12.6.3 　使用的时机和场合261

12.6.4 　使用的原因261

12.6.5 　其他用途261

12.6.6 　Pet Shop应用262

12.6.7 　平板应用262

12.7 　近场通信263

12.7.1 　工作原理263

12.7.2 　示例263

12.7.3 　使用的时机和场合266

12.7.4 　使用的原因266

12.7.5 　其他用途267

12.7.6 　Pet Shop应用267

12.7.7 　平板应用268

第13章　导航270

13.1 　上窜下跳（反模式）270

13.1.1 　出现的时间和场合270

13.1.2 　示例270

13.1.3 　为何要避免271

13.1.4 　其他考虑因素271

13.1.5 　出现的时间和场合271

13.2 　多个推荐区域（反模式）272

13.2.1 　出现的时间和场合272

13.2.2 　示例272

13.2.3 　为何要避免273

13.2.4 　其他考虑因素273

13.3 　轮播274

13.3.1 　工作原理274

13.3.2 　示例274

13.3.3 　使用的时机和场合275

13.3.4 　使用的原因275

13.3.5 　其他用途275

13.3.6 　Pet Shop应用276

13.3.7 　平板应用276

13.4 　弹出式菜单279

13.4.1 　工作原理279

13.4.2 　示例279

13.4.3 　使用的时机和场合281

13.4.4 　使用的原因281

13.4.5 　其他用途281

13.4.6 　Pet Shop应用282

13.4.7 　平板应用283

13.5 　水印285

13.5.1 　工作原理285

13.5.2 　示例286

13.5.3 　使用的时机和场合287

13.5.4 　使用的原因287

13.5.5 　其他用途287

13.5.6 　Pet Shop应用287

13.5.7 　平板应用288

13.6 　瑞士军刀导航290

13.6.1 　工作原理290

13.6.2 　示例290

13.6.3 　使用的时机和场合293

13.6.4 　使用的原因293

13.6.5 　其他用途294

13.6.6 　Pet Shop应用297

13.6.7 　平板应用298

13.7 　集成299

13.7.1 　工作原理300

13.7.2 　示例300

13.7.3 　使用的时机和场合300

13.7.4 　使用的原因301

13.7.5 　其他用途301

13.7.6 　Pet Shop应用303

13.7.7 　平板应用303

第14章　平板模式306

14.1 　片段306

14.1.1 　工作原理306

14.1.2 　示例306

14.1.3 　使用的时机和场合307

14.1.4 　使用的原因308

14.1.5 　其他用途308

14.2 　复合视图308

14.2.1 　工作原理308

14.2.2 　示例308

14.2.3 　使用的时机和场合309

14.2.4 　使用的原因309

14.2.5 　其他用途309

14.3 　侧面导航（试验模式）310

14.3.1 　工作原理310

14.3.2 　示例311

14.3.3 　使用的时机和场合312

14.3.4 　使用的原因313

14.3.5 　其他用途313

14.4 　将内容用作导航元素314

14.4.1 　工作原理314

14.4.2 　示例314

14.4.3 　使用的时机和场合316

14.4.4 　使用的原因316

14.4.5 　其他用途316

14.5 　二维更多类似317

14.5.1 　工作原理317

14.5.2 　示例317

14.5.3 　使用的时机和场合318

14.5.4 　使用的原因318

14.5.5 　其他用途318

14.6 　C形轻扫（试验模式）319

14.6.1 　工作原理320

14.6.2 　示例320

14.6.3 　使用的时机和场合321

14.6.4 　使用的原因321

14.6.5 　其他用途321

一般而言，操作栏及其功能图标是应用的神经中枢，在整个设计中的地位举足轻重。可惜，AutoTrader应用的当前设计在这方面存在很大的改进空间。正因为如此，这个案例研究才令人着迷。 1.2.1　重新设计前 请看默认主屏幕Car Search，其中最显眼的菜单功能是Settings，它位于右上角，显得很突兀，如图1-3所示。在移动UI中，右上角无疑是第二重要而显眼的位置（最显眼的屏幕位置是左上角，...

(查看全部试读)