品味移動設(shè)計：iOS、Android、Windows Phone用戶體驗設(shè)計最佳實踐

目　錄

第1章　做好準備了嗎——了解移動平臺和移動應(yīng)用　1
1.1　成為用戶體驗設(shè)計師　1
1.1.1　UI、ID、UE和GUI，這些都是什么　2
1.1.2　了解成功的用戶體驗設(shè)計案例　3
1.2　移動設(shè)備的三大主流平臺　7
1.2.1　iOS平臺　7
1.2.2　Android平臺　10
1.2.3　Windows Phone平臺　12
1.3　用戶體驗設(shè)計的基本流程　13
1.3.1　創(chuàng)意和原型草圖階段　14
1.3.2　原型的中保真階段　 16
1.3.3　高保真原型及設(shè)計的完成階段　17

第2章　一切從服務(wù)用戶開始——市場定位和產(chǎn)品目標　19
2.1　是移動產(chǎn)品，不是電腦軟件　19
2.1.1　不為外表華麗　20
2.1.2　不為功能強大　21
2.1.3　別讓它“大而全”　23
2.2　做有價值的應(yīng)用　26
2.2.1　它只是成千上萬個應(yīng)用中的一個　26
2.2.2　是前無古人還是出類拔萃　29
2.2.3　如何才能獨樹一幟　30
2.3　了解應(yīng)用的使用者　32
2.3.1　用戶細分　32
2.3.2　用戶研究　34
2.3.3　用戶測試　36

第3章　討論與初步設(shè)計——完成原型的草圖設(shè)計 37
3.1　會玩“頭腦風(fēng)暴”嗎　37
3.1.1　一項既有益又有趣的游戲　38
3.1.2　有明確的目標　39
3.1.3　有合理的分工　41
3.1.4　安排好合理的環(huán)境和議程　45
3.1.5　暢所欲言和遵守規(guī)則　49
3.1.6　挑選出最有前途的想法　50
3.2　把想法和思路畫成草圖　51
3.2.1　手繪的原型草圖　51
3.2.2　潦草但要認真　53
3.2.3　原型工具和原型設(shè)計軟件　57
3.3　檢驗和分享你的思考結(jié)果　60
3.3.1　有連貫，有情節(jié)，畫出應(yīng)用的故事板　61
3.3.2　利用原型草圖進行可用性測試　62
3.3.3　幾種其他類型的草圖　63

第4章　移動應(yīng)用的交互特點　67
4.1　了解移動設(shè)備　67
4.1.1　移動設(shè)備的種類　68
4.1.2　移動設(shè)備的規(guī)格和像素尺寸　69
4.1.3　移動設(shè)備的使用方法　70
4.2　移動設(shè)備的人體工程學(xué)特點　74
4.2.1　了解你的拇指　74
4.2.2　單手操作還是雙手操作　77
4.2.3　善待你的指尖　80
4.3　移動設(shè)備的視覺體驗　84
4.3.1　視覺的運行軌跡　85
4.3.2　優(yōu)化視覺結(jié)構(gòu)　86
4.3.3　圖片與文字的視覺關(guān)系　90
4.4　屏幕的旋轉(zhuǎn)　92

第5章　應(yīng)用程序?qū)Ш健?5
5.1　iOS應(yīng)用的導(dǎo)航模式　95
5.1.1　平鋪導(dǎo)航　96
5.1.2　iOS的標簽導(dǎo)航　99
5.1.3　iOS的樹形結(jié)構(gòu)導(dǎo)航　101
5.1.4　模態(tài)視圖　104
5.1.5　iOS的組合導(dǎo)航　105
5.2　Android應(yīng)用導(dǎo)航模式　106
5.2.1　Android的標簽導(dǎo)航　107
5.2.2　Android的樹形結(jié)構(gòu)導(dǎo)航　109
5.2.3　手機與平板電腦導(dǎo)航的不同　110
5.2.4　Android的組合導(dǎo)航　111
5.3　Windows Phone應(yīng)用導(dǎo)航模式　112
5.3.1　Windows Phone的標簽導(dǎo)航　112
5.3.2　面板區(qū)域應(yīng)用程序中心導(dǎo)航　114
5.3.3　主面板菜單應(yīng)用程序中心導(dǎo)航　114

第6章　標準控件與設(shè)計規(guī)范　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　狀態(tài)欄　122
6.3.2　iOS中的工具欄、導(dǎo)航欄和標簽欄　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　列表和網(wǎng)格　152
6.8.1　iOS平臺列表和網(wǎng)格　152
6.8.2　Android平臺列表和網(wǎng)格　154
6.8.3　Windows Phone平臺中的列表和網(wǎng)格　155
6.9　原型的可用性測試　157

第7章　視覺體驗的個性化　 159
7.1　做有個性的應(yīng)用　159
7.1.1　從細節(jié)替換入手　160
7.1.2　添加裝飾、紋理和特效　162
7.1.3　純個性化的用戶體驗設(shè)計　164
7.2　圖形元素與構(gòu)成理念　165
7.2.1　圖形元素是界面視覺印象的根本　166
7.2.2　頁面布局與構(gòu)成理念　169
7.2.3　處理好圖形元素和頁面布局間的關(guān)系　175
7.2.4　同一款應(yīng)用在不同的平臺和設(shè)備上　177
7.3　應(yīng)用界面的色彩因素　179
7.3.1　了解色彩的規(guī)律　179
7.3.2　善于把握色調(diào)　181
7.3.3　豐富的色彩，嚴謹?shù)拇钆洹?83
7.3.4　色彩的傾向性　187
7.4　嚴謹?shù)匕盐瘴淖帧?88
7.4.1　選擇合適的字體　189
7.4.2　推敲文字的四個要素　191
7.4.3　處理好字群的位置關(guān)系　193
7.5　界面風(fēng)格和特效　194
7.5.1　擬物化風(fēng)格　194
7.5.2　扁平化設(shè)計　195
7.5.3　手繪體風(fēng)格　196

第8章　做好應(yīng)用的圖標設(shè)計　199
8.1　圖標設(shè)計的原則　199
8.1.1　圖標設(shè)計的“識別性”原則　201
8.1.2　圖標設(shè)計的“一致性”原則　201
8.1.3　圖標設(shè)計的“兼容性”原則　203
8.2　啟動圖標　206
8.2.1　建立完美的第一印象　206
8.2.2　三大平臺啟動圖標設(shè)計規(guī)范　210
8.2.3　幾個簡單的啟動圖標設(shè)計思路　214
8.3　工具欄圖標　217
8.3.1　是符號，不是圖案　217
8.3.2　三大平臺工具欄圖標的規(guī)范和含義　218
8.3.3　幾個有效的簡化圖像的方法　219
8.4　啟動畫面和引導(dǎo)幫助　221
8.4.1　啟動畫面　221
8.4.2　引導(dǎo)幫助　223

第9章　用戶體驗設(shè)計項目實戰(zhàn)——“價格線”　226
9.1　項目概述及工作計劃　226
9.1.1　項目描述　226
9.1.2　工作計劃和流程　227
9.2　項目的準備階段　228
9.2.1　市場定位及產(chǎn)品分析　228
9.2.2　項目的用戶需求分析　229
9.3　項目的創(chuàng)作及草圖階段　230
9.4　項目的中保真原型及可用性測試　232
9.4.1　項目的中保真原型　232
9.4.2　原型的可用性測試及調(diào)整　233
9.5　完善界面的個性化設(shè)計　235
9.5.1　確定風(fēng)格并收集素材　235
9.5.2　隱喻元素的添加及個性化調(diào)整　236
9.6　應(yīng)用圖標和啟動畫面設(shè)計　237
9.6.1　應(yīng)用圖標的創(chuàng)意和設(shè)計　237
9.6.2　應(yīng)用的啟動畫面設(shè)計　239