品味移動(dòng)設(shè)計(jì)：iOS、Android、Windows Phone用戶體驗(yàn)設(shè)計(jì)最佳實(shí)踐

目　錄

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

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

第3章　討論與初步設(shè)計(jì)——完成原型的草圖設(shè)計(jì) 37
3.1　會玩“頭腦風(fēng)暴”嗎　37
3.1.1　一項(xiàng)既有益又有趣的游戲　38
3.1.2　有明確的目標(biāo)　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　潦草但要認(rèn)真　53
3.2.3　原型工具和原型設(shè)計(jì)軟件　57
3.3　檢驗(yàn)和分享你的思考結(jié)果　60
3.3.1　有連貫，有情節(jié)，畫出應(yīng)用的故事板　61
3.3.2　利用原型草圖進(jìn)行可用性測試　62
3.3.3　幾種其他類型的草圖　63

第4章　移動(dòng)應(yīng)用的交互特點(diǎn)　67
4.1　了解移動(dòng)設(shè)備　67
4.1.1　移動(dòng)設(shè)備的種類　68
4.1.2　移動(dòng)設(shè)備的規(guī)格和像素尺寸　69
4.1.3　移動(dòng)設(shè)備的使用方法　70
4.2　移動(dòng)設(shè)備的人體工程學(xué)特點(diǎn)　74
4.2.1　了解你的拇指　74
4.2.2　單手操作還是雙手操作　77
4.2.3　善待你的指尖　80
4.3　移動(dòng)設(shè)備的視覺體驗(yàn)　84
4.3.1　視覺的運(yùn)行軌跡　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的標(biāo)簽導(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的標(biāo)簽導(dǎo)航　107
5.2.2　Android的樹形結(jié)構(gòu)導(dǎo)航　109
5.2.3　手機(jī)與平板電腦導(dǎo)航的不同　110
5.2.4　Android的組合導(dǎo)航　111
5.3　Windows Phone應(yīng)用導(dǎo)航模式　112
5.3.1　Windows Phone的標(biāo)簽導(dǎo)航　112
5.3.2　面板區(qū)域應(yīng)用程序中心導(dǎo)航　114
5.3.3　主面板菜單應(yīng)用程序中心導(dǎo)航　114

第6章　標(biāo)準(zhǔn)控件與設(shè)計(jì)規(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)航欄和標(biā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　活動(dòng)指示器和進(jìn)度條　148
6.7.1　iOS平臺中的活動(dòng)指示器和進(jìn)度條　148
6.7.2　Android平臺的活動(dòng)指示器和進(jìn)度條　150
6.7.3　Windows Phone平臺中的活動(dòng)指示器和進(jìn)度條　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章　視覺體驗(yàn)的個(gè)性化　 159
7.1　做有個(gè)性的應(yīng)用　159
7.1.1　從細(xì)節(jié)替換入手　160
7.1.2　添加裝飾、紋理和特效　162
7.1.3　純個(gè)性化的用戶體驗(yàn)設(shè)計(jì)　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　豐富的色彩，嚴(yán)謹(jǐn)?shù)拇钆洹?83
7.3.4　色彩的傾向性　187
7.4　嚴(yán)謹(jǐn)?shù)匕盐瘴淖帧?88
7.4.1　選擇合適的字體　189
7.4.2　推敲文字的四個(gè)要素　191
7.4.3　處理好字群的位置關(guān)系　193
7.5　界面風(fēng)格和特效　194
7.5.1　擬物化風(fēng)格　194
7.5.2　扁平化設(shè)計(jì)　195
7.5.3　手繪體風(fēng)格　196

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

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