第1章(zhāng)  移動UI界面設計(jì)的(de)基本知(zhī)識...... 1

【本章(zhāng)導讀(dú)】.....................................±§...... 1

【本章(zhāng)重點】........................................... 1

1.1  移動UI界面設計(jì)的(de)功能(néng)及前提.........................................'↓. 1

1.1.1  移動UI界面設計(jì)的(de)功能(néng)............ 2

1.1.2  移動UI界面設計(jì)的(de)前提............ 3

1.2  移動UI設計(jì)的(de)基本原則............ 6

1.2.1  谷歌(gē)Android系統的(de)特點........... 6

1.2.2  蘋果iOS系統的(de)特點.................. 8

1.2.3  微(wēi)軟Windows Phone系統的(de)特點................................≠×φ............. 10

1.3  手機(jī)與平闆界面的(de)應用(yòng)特™§₩性..... 12

1.3.1  手機(jī)界面的(de)分(fēn)類......................... 12

1.3.2  平闆電(diàn)腦(nǎo)的(de)便捷之處................. 15

1.3.3  分(fēn)析APP UI的(de)具體(tǐ)流程.......... 16

1.3.4  設計(jì)APP UI的(de)注意事(shì)項.......... 16

本章(zhāng)小(xiǎo)結..............................∞≠ ≠........... 17

習(xí)題1.................................>≈©♠............ 17

第2章(zhāng)  移動UI的(de)設計(jì)原則.................. 18

【本章(zhāng)導讀(dú)】.........................>∑................ 18

【本章(zhāng)重點】......................................... 18

2.1  移動UI界面的(de)簡單布局.......... 18

2.1.1  豎向排列布局模式..................... 18

2.1.2  橫向排列布局模式..................... 19

2.1.3  九宮格排列布局模式................. 19

2.2  移動UI界面的(de)特殊布局.......... 20

2.2.1  彈出框式布局隐藏內(nèi)容............. 20

2.2.2  熱(rè)門(mén)标簽布局充實頁面............. 20

2.2.3  側邊欄式布局排列欄目............. 21

2.2.4  陳列館式布局展現(xiàn)圖文(wén)............. 22

2.2.5  分(fēn)段菜單式布局簡約界面......... 23

2.2.6  點聚式布局開(kāi)闊界面效果......... 23

2.2.7  轉盤式布局方便用(yòng)戶操作(zuò)......... 24

2.2.8  導航欄置底式布局明(míng)确功能(néng)..... 25

2.2.9  磁貼狀态式布局顯示動态信息.................... γ∏......................... 25

2.2.10  超級菜單式布局連續性強....... 26

2.2.11  導航欄置頂式布局實用(yòng)性強... 26

2.2.12  幻燈片式布局并列多(duō)張圖片... 27

2.3  移動UI界面的(de)優化(huà)布局.......... 28

2.3.1  圖表信息布局增強APP的(de)商務範.......................... ♠>‌............... 28

2.3.2  完善APP軟件(jiàn)的(de)關鍵細節設計(jì)........................................<'..... 29

2.3.3  布局原則為(wèi)用(yòng)戶提供更好(hǎo)的(de)體(tǐ)驗.......................................$δ$α.... 30

本章(zhāng)小(xiǎo)結.........................................₽≤€↔ 33

習(xí)題2............................................ ₹★. 33

第3章(zhāng)  移動UI界面視(shì)覺效果的(de)美(měi)化(huà).... 34

【本章(zhāng)導讀(dú)】..........................₩₩............... 34

【本章(zhāng)重點】......................................₩​♦... 34

3.1  UI界面視(shì)覺特色的(de)設計(jì)要(yào)點.... 34

3.1.1  簡約明(míng)快(kuài)突出個(gè)性..................... 34

3.1.2  趣味性激發興趣......................... 35

3.1.3  華麗(lì)型制(zhì)造高(gāo)貴感..................... 36

3.1.4  根據色彩搭配主題..................... 36

3.1.5  圖案設計(jì)主打簡潔..................... 37

3.2  UI界面的(de)文(wén)字設計(jì).................. 37

3.2.1  保證文(wén)字的(de)可(kě)讀(dú)性.....................♥' 37

3.2.2  增強文(wén)字的(de)層次感..................... 39

3.2.3  傳遞文(wén)字的(de)準确性..................... 40

3.2.4  把握文(wén)字的(de)距離(lí)感..................... 42

3.2.5  豐富文(wén)字的(de)色彩感..................... 42

3.2.6  提升界面的(de)觀賞性..................... 45

3.2.7  體(tǐ)現(xiàn)界面的(de)實•‍'用(yòng)性..................... 45

3.3  移動UI界面圖案的(de)優化(huà).......... 46

3.3.1  體(tǐ)現(xiàn)圖片的(de)質感......................... 46

3.3.2  保持圖像的(de)真實感..................... 47

3.3.3  調整圖像的(de)透明(míng)度..................... 48

3.3.4  體(tǐ)驗手勢交互操作(zuò)..................... 49

3.3.5  了(le)解循環動作(zuò)原則..................... 49

3.3.6  掌握元素動作(zuò)的(de)循環................. 50

3.3.7  繪制(zhì)界面的(de)關鍵動作(zuò)................. 51

3.3.8  制(zhì)作(zuò)簡易的(de)動态πλ™效果................. 51

3.3.9  充分(fēn)發揮豐富的(de)想象力............. 52

本章(zhāng)小(xiǎo)結.............................<"≤₩............ 52

習(xí)題3.......................................π≤∏↑...... 52

第4章(zhāng)  移動UI界面設計(jì)的(de)方法........... 53

【本章(zhāng)導讀(dú)】......................................... 53

【本章(zhāng)重點】.....................∏∞↓✘.................... 53

4.1  移動UI界面設計(jì)的(de)技(jì)巧.......... 53

4.1.1  注重用(yòng)戶的(de)感受.........................®•π‍ 53

4.1.2  模糊背景的(de)作(zuò)用(yòng)......................... 54

4.1.3  打破界面的(de)局限......................... 55

4.1.4  設計(jì)的(de)配色技(jì)巧......................... 56

4.1.5  情景感知(zhī)的(de)應用(yòng)......................... 56

4.1.6  拟物(wù)設計(jì)的(de)元素......................... 58

4.1.7  軟件(jiàn)升級的(de)影(yǐng)響☆ε......................... ≥ 59

4.2  設計(jì)人(rén)性化(huà)的(de)移動UI界面....... 60

4.2.1  制(zhì)造歸屬感................................. 60

4.2.2  拉近(jìn)距離(lí)感................................♣★. 61

4.2.3  确保真實性.........................™∏........ 61

4.3  移動UI界面中的(de)常見(jiàn)組件(jiàn)....... 62

4.3.1  常規按鈕..................................... 62

4.3.2  編輯輸入框.............................≠£.... 63

4.3.3  開(kāi)關按鈕.................................♣≠±.... 63

4.3.4  浏覽模式.............................'αφ€........ 64

4.3.5  文(wén)本标簽..................................... 64

4.3.6  警告框...........................₽™.............. 64

4.3.7  導航欄........................................₽γ‌​. 65

4.3.8  頁面切換..................................... ‍‍65

4.3.9  進度條.....................‍↑↔.................... 66

4.3.10  ico圖标..................................... '♠67

本章(zhāng)小(xiǎo)結......................................... 67¥π

習(xí)題4............................................. ε×67

第5章(zhāng)  Photoshop移動UI的(de)
基礎知(zhī)識.................................. 68↕'×

【本章(zhāng)導讀(dú)】..................................≥®< ....... 68

【本章(zhāng)重點】............................>☆≠£............. 68

5.1  Photoshop 的(de)基本操作(zuò)............. 68

5.1.1  Photoshop CC的(de)安裝................ 68

5.1.2  Photoshop CC的(de)卸載方法........ 70

5.1.3  Photoshop CC♠≤→的(de)工(gōng)作(zuò)界面........ 70

5.2  移動UI界面設計(jì)常用(yòng)操作(zuò)....... 75

5.2.1  運用(yòng)“新建”命令..................... 75

5.2.2  運用(yòng)“打開(kāi)”命令.....................≥₩≥ 76

5.2.3  運用(yòng)“保存”命令..................... 76

5.2.4  運用(yòng)“關閉”命令..................... 77

5.2.5  運用(yòng)“還(hái)原”和(hé)“重做(zuò)”
命令........................☆∏..................... 78

5.2.6  運用(yòng)“創建新快(kuài)照(zhào)”命令......... 78

5.2.7  運用(yòng)“恢複”命令....................¶ ₽. 79

5.3  圖像編輯工(gōng)作(zuò)窗(chuāng)口的(de)管理(lǐ< ¶")........ 79

5.3.1  調整窗(chuāng)口大(dà)小(xiǎo)............................. 79

5.3.2  設置面闆組合............................. 80

5.3.3  移動面闆位置............................​'. 81

5.3.4  排列窗(chuāng)口位置.......................✔₩≈★...... 81

5.3.5  切換編輯窗(chuāng)口............................. 82

5.3.6  調整合适位置............................. 83

本章(zhāng)小(xiǎo)結......................................... <‍≈"83

習(xí)題5....................................π®......... 84

第6章(zhāng)  移動UI界面顔色色調的(de)設計(jì).... 85

【本章(zhāng)導讀(dú)】........................................¶∑. 85

【本章(zhāng)重點】......................................... 85

6.1  運用(yòng)顔色修飾移動UI圖像....... 85

6.1.1  調整圖像的(de)前景色與背景色..... 85

6.1.2  運用(yòng)吸管工(gōng)具設置圖像顔色..... 86

6.1.3  運用(yòng)顔色面闆設置圖像顔色..... 87

6.1.4  運用(yòng)色闆面闆設置圖像顔色..... 89

6.1.5  運用(yòng)“填充”命令填充圖像顔色..................................... ®&δ89

6.1.6  運用(yòng)快(kuài)捷菜單選項填充圖像顔色..............................δσ©....... 91

6.1.7  運用(yòng)油漆桶工(gōng)具填充圖像顔色..............................★''←....... 92

6.1.8  運用(yòng)漸變工(gōng)具為(wèi)圖像填充雙色..................................£φ≠... 93

6.1.9  運用(yòng)漸變工(gōng)具為(wèi)圖像填充多(duō)色..................................."≤✘↓.. 95

6.1.10  運用(yòng)“填充”命令為(wèi)圖像填充圖案................................... 96

6.2  移動UI圖像色彩的(de)自(zì)動調整... 99

6.2.1  運用(yòng)“自(zì)動色調”命令調整圖像色調..................................... 99

6.2.2  運用(yòng)“自(zì)動對(duì)比度”命令調整圖像對(duì)比度............................... 100

6.2.3  運用(yòng)“自(zì)動顔色”命令調整圖像顔色....................≈‍‍<............... 100

6.3  移動UI界面圖像影(yǐng)調的(de)常用(yòng)方法..........................<♦..... 101

6.3.1  運用(yòng)“色階”命令調整圖像亮(liàng)度範圍..............................β§★..... 101

6.3.2  運用(yòng)“亮(liàng)度/對(duì)比度”命令調整圖像色彩...............................φ™.... 102

6.3.3  運用(yòng)“曲線”命令調整圖像整體(tǐ)色調..............................≥£..... 103

6.3.4  運用(yòng)“曝光(guāng)度”命令調整圖像曝光(guāng)................................... ♦ ←104

6.3.5  運用(yòng)“自(zì)然飽和(hé)度”命令調整飽和(hé)度....................₹≠<................... 104

6.3.6  運用(yòng)“色相(xiàng)/飽和(hé)度”命令調整色相(xiàng)................................ €®........... 106

6.3.7  運用(yòng)“色彩平衡”命令調整圖像偏色................................... 107

6.3.8  運用(yòng)“匹配顔色”命令匹配圖像色調.................................£∑.. 108

6.3.9  運用(yòng)“替換顔色”命令替換圖像色調................................. 108

6.3.10  運用(yòng)“可(kě)選顔色”命令校(xiào)正圖像色彩.....................↓§............ 109

6.3.11  運用(yòng)“黑(hēi)白(bái)命令”制(zhì)作(zuò)單色圖像效果................................. 110

本章(zhāng)小(xiǎo)結....................................... 110γ‌←

習(xí)題6..........................¶<ε.................. 110

第7章(zhāng)  移動UI的(de)摳圖方法................. 112

【本章(zhāng)導讀(dú)】....................¶™↔&................... 112♣≈

【本章(zhāng)重點】...............................↕∞¥........ 112

7.1  運用(yòng)命令摳取移動UI界面..... 112

7.1.1  使用(yòng)“反向”命令摳圖............. 112

7.1.2  使用(yòng)“色彩範圍”命令摳圖... 113

7.1.3  使用(yòng)“擴大(dà)選取”命令摳圖... 114

7.1.4  使用(yòng)“選取相(xiàng)似”命令摳圖... 116

7.2  運用(yòng)工(gōng)具摳取移動UI界面..... 117

7.2.1  使用(yòng)快(kuài)速選擇工(gōng)具™π↔摳圖........... 117

7.2.2  使用(yòng)魔棒工(gōng)具摳圖................... 119

7.2.3  使用(yòng)矩形選框工(gōng)具摳圖........... 120

7.2.4  使用(yòng)橢圓選框工(gōng)具摳圖........... 122

7.2.5  使用(yòng)套索工(gōng)具摳圖................... 124

7.2.6  使用(yòng)多(duō)邊形套索工(gōng)具摳圖 ‌....... 125

7.2.7  使用(yòng)磁性套索工(gōng)具摳圖........... 127

7.2.8  使用(yòng)魔術(shù)橡皮擦工(gōng)具摳圖....... 128

7.2.9  使用(yòng)鋼筆(bǐ)工(gōng)具摳圖................... 129

7.2.10  使用(yòng)自(zì)由鋼筆(bǐ)工(gōng)具摳圖......... 132

本章(zhāng)小(xiǎo)結....................................... ∑→135

習(xí)題7........................σ≠ .................... 135

第8章(zhāng)  移動UI圖像特效設計(jì)............. 136

【本章(zhāng)導讀(dú)】..............................♥♣......... 136

【本章(zhāng)重點】.................................​♣λε...... 136

8.1  移動UI圖像的(de)基本特效制(zhì)作(zuò)...................................... 136

8.1.1  分(fēn)析圖像添加智能(néng)濾鏡方法... 136

8.1.2  分(fēn)析圖像添加波浪效果方法... 137

8.1.3  分(fēn)析圖像添加玻璃效果方法... 137

8.1.4  分(fēn)析圖像添加水(shuǐ)波效果方法... 138

8.1.5  分(fēn)析圖像添加旋轉扭曲效果方法.................................. 138

8.1.6  分(fēn)析圖像添加點狀化(huà)效果方法...................................↔∏∞≤ 139

8.1.7  分(fēn)析圖像添加彩塊化(huà)效果方法................................... 1Ω&★39

8.2  移動UI圖像的(de)複雜(zá)特效制(zhì)作(zuò)...................................... 140

8.2.1  添加彩色半調放(fàng)大(dà)網屏........... 140

8.2.2  添加液化(huà)模拟流動效果........... 141

8.2.3  編輯濾鏡庫實現(xiàn)特殊效果....... 142

8.2.4  添加切變扭曲曲線形狀........... 144

8.2.5  添加波紋移動圖像大(dà)小(xiǎo)........... 145

8.2.6  添加海(hǎi)洋波紋分(fēn)隔圖像表面... 146

8.2.7  添加擴散亮(liàng)光(guāng)産生(shēng)漫射效果... 147

8.2.8  創建智能(néng)濾鏡轉化(huà)智能(n÷$₩éng)對(duì)象... 148

本章(zhāng)小(xiǎo)結.....................................±β✘.. 150

習(xí)題8............................................ 1£→γ↔50

第9章(zhāng)  移動UI界面字體(tǐ)應用(yòng)與設計(jì)..........................×→×≈............. 151

【本章(zhāng)導讀(dú)】....................................... 1 €£÷51

【本章(zhāng)重點】............................₹↑∏•........... 151

9.1  移動UI界面的(de)字體(tǐ)應用(yòng)........ 151

9.1.1  漢字的(de)主要(yào)作(zuò)用(yòng)....................... 151

9.1.2  字母的(de)主要(yào)功能(néng)....................... 1>×52

9.1.3  數(shù)字的(de)神奇魔力....................... 152

9.1.4  符号的(de)實際作(zuò)用(yòng)....................... 153

9.2  移動UI界面的(de)字體(tǐ)設計(jì)........ 154

9.2.1  《花(huā)生(shēng)日(rì)記》APP文(wén)字設計(jì).. 154

9.2.2  《拯救喪青年(nián)》遊戲APP文(wén)字設計(jì)........................♥‍∑........... 155

9.2.3  《今天頭條》資訊APP文(wén)字設計(jì)...........................α♣γ​........ 158

本章(zhāng)小(xiǎo)結...................................€®α>.... 160

習(xí)題9...................................$‌¶......... 160

第10章(zhāng)  移動UI界面組件(jiàn)設計(jì)........... 161

【本章(zhāng)導讀(dú)】........................ €............... 161

【本章(zhāng)重點】...................................δ¶.... 161

10.1  移動UI圖形常見(jiàn)控件(jiàn)設計(jì)... 161

10.1.1  設計(jì)切換條背景效果............. 161

10.1.2  設計(jì)切換條主體(tǐ)效果............. 162

10.1.3  設計(jì)切換條細節效果............. 164

10.2  設計(jì)移動UI按鈕的(de)功能(néng)界面.................................£♦♣↔.. 165

10.2.1  制(zhì)作(zuò)搜索框主體(tǐ)效果............. 166

10.2.2  制(zhì)作(zuò)搜索框搜索圖标............. 167

10.2.3  制(zhì)作(zuò)搜索框二維碼圖标......... 169

本章(zhāng)小(xiǎo)結...................... δ≥₩................. 170

習(xí)題10........................​§.................. 170

第11章(zhāng)  APP與系統圖标設計(jì)............. 171

【本章(zhāng)導讀(dú)】......................©§................. 171

【本章(zhāng)重點】....................................... $β171

11.1  APP圖标的(de)設計(jì)................... 171

11.1.1  卡通(tōng)圖标增強視(shì)覺效果......... 171

11.1.2  符号圖标體(tǐ)現(xiàn)功能(néng)特色......... 175

11.1.3  拟物(wù)化(huà)圖标還(hái)原真實細節..... 178

11.2  系統自(zì)帶圖标的(de)設計(jì)............ 180

11.2.1  日(rì)曆圖标的(de)設計(jì)形式............. 180

11.2.2  信息圖标的(de)設計(jì)方法............. 183

11.2.3  電(diàn)話(huà)圖标的(de)設計(jì↔©)技(jì)巧............. 185

本章(zhāng)小(xiǎo)結........................♥×↑β............... 188

習(xí)題11.......................π≥±¶................... 188

第12章(zhāng)  移動UI界面設計(jì)綜合實例.... 189

【本章(zhāng)導讀(dú)】....................................... 1•α∑Ω89

【本章(zhāng)重點】................................±β"....... 189

12.1  APP登錄界面的(de)設計(jì)............ 189

12.1.1  制(zhì)作(zuò)雲服務APP界面背景... 189

12.1.2  制(zhì)作(zuò)雲服務APP界面登錄框.....................................↕♦ 190

12.1.3  制(zhì)作(zuò)雲服務APP界面文(wén)本效果..........................‍∞≈....... 192

12.1.4  制(zhì)作(zuò)社交APP界面主體(tǐ)效果................................. 194✔φ≈

12.1.5  制(zhì)作(zuò)社交APP界面表單控件(jiàn)......................™σ♦........... 196

12.1.6  制(zhì)作(zuò)社交APP界面倒影(yǐng)效果................................. 198

12.2  遊戲UI界面的(de)設計(jì).............. 200

12.2.1  設計(jì)休閑遊戲界面背景效果............................×±<☆..... 200

12.2.2  設計(jì)休閑遊戲界面主體(tǐ)效果................................. 2☆±™02

12.2.3  設計(jì)休閑遊戲界面文(wén)本效果................................$ ↕. 204

12.2.4  設計(jì)塔防遊戲界面背景效果.........................>≥£........ 208

12.2.5  設計(jì)塔防遊戲界面主體(tǐ)效果................................. 209

12.2.6  設計(jì)塔防遊戲界面文(wén)本效果...........................¥₹αδ...... 211

12.3  程序UI界面的(de)設計(jì).............. 212

12.3.1  設計(jì)外(wài)賣小(xiǎo)程序界面主體(tǐ)效果................................. 212

12.3.2  設計(jì)外(wài)賣小(xiǎo)程序界面細節效果................................. 214

12.3.3  設計(jì)外(wài)賣小(xiǎo)程序界面文(wén)字效果......................® ∑♥........... 215

12.3.4  設計(jì)購(gòu)物(wù)APP界面背景效果...............................‌₽™ .. 217

12.3.5  設計(jì)購(gòu)物(wù)APP界面主體(tǐ)效果............................×€₩↓..... 219

12.3.6  設計(jì)購(gòu)物(wù)APP界面文(wén)本效果................................. 221‌&≥

12.4  本章(zhāng)小(xiǎo)結........................<→..... 222