第1章(zhāng)  移動UI的(de)設計(jì)原理(lǐ). 1

1.1  移動UI的(de)界面設計(jì)... 2

1.1.1  貫穿生(shēng)活中的(de)連接界面... 2

1.1.2  好(hǎo)的(de)界面提升産品個(gè)性... 2

1.1.3  移動UI設計(jì)的(de)功能(néng)作(zuò)用(yòng)... 3

1.1.4  移動UI設計(jì)的(de)基礎前提... 4

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

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

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

1.2.3  微(wēi)軟Windows Phone系統的(de)特點... 11

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

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

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

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

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

本章(zhāng)小(xiǎo)結... 19

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2.9  磁貼狀态式布局顯示動态信息... 28

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

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

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

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

2.3.1  圖表信息布局增強APP的(de)商務範... 31

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

2.3.3  布局原則提供用(yòng)戶更好(hǎo)的(de)體(tǐ)驗... 33

本章(zhāng)小(xiǎo)結... 36

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

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

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

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

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

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

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

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

3.2.1  保證文(wén)字的(de)可(kě)讀(dú)性•$♠... 41

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

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

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

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

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

3.2.7  體(tǐ)現(xiàn)界面的(de)實用<"(yòng)性... 49

3.3  精修圖像優化(huà)圖案... 50

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

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

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

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

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

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

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

3.3.8  制(zhì)作(zuò)簡易的(de)動态效果... 55

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

本章(zhāng)小(xiǎo)結... 56

第4章(zhāng)  常見(jiàn)UI的(de)設計(jì)方法... 57

4.1  分(fēn)析移動UI界面的(de)設計(jì)技(jì)巧... 58

4.1.1  注重用(yòng)戶的(de)感受... 58

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

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

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

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

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

4.1.7．軟件(jiàn)升級的(de)影(yǐng)響... 63

4.2  添加情感讓設計(jì)更具人(rén)性化(huà)... 64

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

4.2.2  拉近(jìn)距離(lí)感... 65

4.2.3  确保真實性... 66

4.3  移動UI界面的(de)排版布局... 67

4.3.1  常規按鈕的(de)作(zuò)用(yòng)... 67

4.3.2  編輯輸入框的(de)作(zuò)用(yòng)... 67

4.3.3  開(kāi)關按鈕的(de)作(zuò)用(yòng)... 68

4.3.4  浏覽模式的(de)作(zuò)用(yòng)... 68

4.3.5  文(wén)本标簽的(de)作(zuò)用(yòng)... 69

4.3.6  警告框的(de)作(zuò)用(yòng)... 69

4.3.7  導航欄的(de)作(zuò)用(yòng)... 70

4.3.8  頁面切換的(de)作(zuò)用(yòng $)... 71

4.3.9  進度條的(de)作(zuò)用(yòng)... 71

4.3.10  ico圖标的(de)作(zuò)用(yòng)... 72

本章(zhāng)小(xiǎo)結... 72

第5章(zhāng)  Photoshop移動UI的(de)入門(mén)知(zhī)識... 73

5.1  Photoshop的(de)安裝與卸載... 74

5.1.1  Photoshop CC的(de)安裝方法... 74

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

5.2  Photoshop CC界面的(de)組成部分(fēn)... 76

5.2.1  菜單欄命令的(de)位置... 77

5.2.2  狀态欄顯示參數(shù)信息... 78

5.2.3  工(gōng)具屬性欄顯示功能(néng)... 79

5.2.4  工(gōng)具箱收納工(gōng)具按鈕... 80

5.2.5  圖像編輯窗(chuāng)口的(de)作(zuò)用(yòng)... 80

5.2.6  浮動控制(zhì)面闆的(de)作(zuò)用(yòng)... 81

5.3  移動UI圖像處理(lǐ)的(de)技(jì)巧方法... 81

5.3.1  位圖與矢量圖... 82

5.3.2  像素與分(fēn)辨率... 83

5.3.3  圖片顔色模式... 84

5.3.4  存儲文(wén)件(jiàn)格式... 85

5.4  移動UI界面作(zuò)品常用(yòng)操作(zuò)... 87

5.4.1  運用(yòng)“新建”命令... 87

5.4.2  運用(yòng)“打開(kāi)”命令... 87

5.4.3  運用(yòng)“保存”命令... 88

5.4.4  運用(yòng)“關閉”命令... 88

5.4.5  運用(yòng)“還(hái)原”和(hé)“重←∞做(zuò)”命令... 89

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

5.4.7  運用(yòng)“恢複”命令... 90

5.5  管理(lǐ)圖像編輯工(gōng)作(zuò)窗(chuāng)口... 90

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

5.5.2  設置面闆組合... 92

5.5.3  移動面闆位置... 92

5.5.4  排列窗(chuāng)口位置... 94

5.5.5  切換編輯窗(chuāng)口... 95

5.5.6  調整合适位置... 95

5.5.7  選擇合适位置... 96

本章(zhāng)小(xiǎo)結... 96

課後習(xí)題... 97

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

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

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

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

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

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

6.1.5  運用(yòng)“填充”命令填充圖像顔色... 103

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

6.1.7  運用(yòng)油漆桶工(gōng)具填♦‌ ∑充圖像顔色... 106

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

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

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

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

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

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

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

6.3  圖像影(yǐng)調的(de)常用(yòn♠≤g)方法... 115

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

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

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

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

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

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

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

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

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

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

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

本章(zhāng)小(xiǎo)結... 128

課後習(xí)題... 128

第7章(zhāng)  移動UI的(de)摳圖技(jì)巧... 131

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

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

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

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

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

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

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

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

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

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

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

7.2.6  使用(yòng)多(duō)邊形套索工(gōng)具摳↔→•圖... 143

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

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

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

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

本章(zhāng)小(xiǎo)結... 153

課後習(xí)題... 153

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

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

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

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

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

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

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

8.1.6  分(fēn)析圖像添加點狀化(huà)效果方法... 157

8.1.7  分(fēn)析圖像添加彩塊化(huà)效果方法... 158

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

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

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

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

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

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

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

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

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

本章(zhāng)小(xiǎo)結... 169

課後習(xí)題... 169

第9章(zhāng)  UI界面的(de)字體(tǐ)解析與文(wén)字設計(jì)... 170

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

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

9.1.2  字母的(de)主要(yào)功能(néng)... 171

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

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

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

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

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

9.2.3  《今天頭條》資訊APP文(wén)字設計(jì)... 178

本章(zhāng)小(xiǎo)結... 181

課後習(xí)題... 181

第10章(zhāng)  UI界面組件(jiàn)的(de)精美(měi)設計(jì)... 182

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

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

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

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

10.2  設計(jì)移動UI按鈕的(de)功能(néng)界面... 187

10.2.1  制(zhì)作(zuò)搜索框主體(tǐ)<§&效果... 187

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

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

本章(zhāng)小(xiǎo)結... 191

課後習(xí)題... 192

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

11.1  APP圖标的(de)設計(jì)方法... 194

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

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

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

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

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

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

11.2.3  電(diàn)話(huà)圖标的(de)設計(jì)技γ→↕¶(jì)巧... 208

本章(zhāng)小(xiǎo)結... 212

課後習(xí)題... 212

第12章(zhāng)  移動UI界面的(de)創意設計(jì)綜合案例... 213

12.1  APP登錄界面的(de)設計(jì)技(jì)巧... 214

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

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

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

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

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

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

12.2  遊戲UI界面的(de)設計(jì)技(jì)巧... 226

12.2.1  設計(jì)休閑遊戲界面背景效果... 226

12.2.2  設計(jì)休閑遊戲界面主體(tǐ)效果... 228

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

12.2.4  設計(jì)塔防遊戲界面背景效果... 234

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

12.2.6  設計(jì)塔防遊戲界面文(wén)本效果... 238

12.3  程序UI界面的(de)設計(jì)技(jì)巧... 239

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

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

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

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

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

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

12.4  本章(zhāng)小(xiǎo)結... 250