第 1章

UI設(shè)計基本概念

　1.1 UI設(shè)計分類　13

1.1.1　GUI　13

1.1.2　WUI　14

1.1.3　IXD　15

1.1.4　UE/UX　16

　1.2 UI設(shè)計理論常識　17

　1.3 UI設(shè)計注意事項　17

1.3.1　清晰　17

1.3.2　簡潔　17

1.3.3　易用　17

1.3.4　適應(yīng)　17

1.3.5　統(tǒng)一　18

1.3.6　視覺　18

1.3.7　識別　18

　1.4 UI設(shè)計中的Photoshop設(shè)置技巧　18



第　2章

復(fù)古像素圖標設(shè)計

　2.1 像素圖標在手游及網(wǎng)頁UI設(shè)計中的應(yīng)用場景　21

　2.2 像素圖標設(shè)計注意事項　22

　2.3 像素設(shè)計中不出現(xiàn)虛邊的原理及技法　22

　2.4 像素圖標操作實例　23

　2.5 拓展練習(xí)　28



第3章

App產(chǎn)品界面中的重要元素功能圖標設(shè)計

　3.1 功能圖標在App中的應(yīng)用場景　30

　3.2 功能圖標設(shè)計注意事項　32

　3.3 功能圖標設(shè)計的描邊法　32

　3.4 3636尺寸功能圖標操作實例　33



第4章

產(chǎn)品界面中的天氣圖標設(shè)計

　4.1 天氣圖標在產(chǎn)品中的應(yīng)用場景　38

　4.2 一層流圖層樣式設(shè)計注意事項　39

　4.3 復(fù)數(shù)圖層樣式設(shè)計實用技巧　39

　4.4 天氣圖標操作實例　40

　4.5 拓展練習(xí)　44



第5章

界面中的卡通風(fēng)格元素設(shè)計

　5.1 卡通風(fēng)格設(shè)計的應(yīng)用場景　46

　5.2 卡通風(fēng)格設(shè)計中的配色注意事項　48

　5.3 128x128尺寸卡通筆記本操作實例　48

　5.4 拓展練習(xí)　52



第6章

輕擬物設(shè)計

　6.1 輕擬物風(fēng)格的應(yīng)用場景　54

　6.2 輕擬物風(fēng)格設(shè)計中的色彩注意事項　55

　6.3 白色質(zhì)感的控制技巧　56

　6.4 256x256尺寸輕擬物水果盤操作實例　56

　6.5 拓展練習(xí)　62



第7章

國際流行卡通斷線風(fēng)格設(shè)計

　7.1 引導(dǎo)頁中的卡通斷線風(fēng)格　64

　7.2 卡通斷線風(fēng)格設(shè)計注意事項　65

　7.3 卡通斷線風(fēng)格設(shè)計色彩選擇　66

　7.4 繪制卡通斷線氣球　66

　7.5 拓展練習(xí)　73

第8章

扁平純色風(fēng)格圖標設(shè)計

　8.1 扁平化風(fēng)格圖標的含義及特點　75

　8.2 扁平化風(fēng)格圖標設(shè)計注意事項　75

　8.3 手機主題圖標顏色選擇　76

　8.4 文本圖標操作實例　76

　8.5 拓展練習(xí)　78



第9章

擬物風(fēng)格圖標設(shè)計

　9.1 擬物風(fēng)格圖標的特點　80

　9.2 擬物圖標設(shè)計注意事項　80

　9.3 擬物風(fēng)格圖標的色彩選擇和樣式設(shè)計　81

　9.4 擬物膠囊圖標操作實例　81

　9.5 拓展練習(xí)　89



第　10章

畫板圖標設(shè)計

　10.1 木板與紙張質(zhì)感分析　91

　10.2 畫板圖標設(shè)計注意事項　91

　10.3 金屬元素設(shè)計技巧　92

　10.4 畫板圖標操作實例　92



第　11章

瀏覽器圖標設(shè)計

　11.1 不同風(fēng)格瀏覽器圖標分析　99

　11.2 瀏覽器圖標設(shè)計注意事項　99

　11.3 瀏覽器圖標設(shè)計要點　100

　11.4 瀏覽器圖標設(shè)計操作實例　100

　11.5 拓展練習(xí)　108



第　13章

高級擬物設(shè)計（美工刀）

　13.1 美工刀手繪草稿　119

　13.2 美工刀材質(zhì)繪制注意事項　119

　13.3 美工刀操作實例　120

13.3.1　制作背景　121

13.3.2　繪制整體輪廓　122

13.3.3　繪制美工刀的陰影　125

13.3.4　細致刻畫推手　127

13.3.5　細致刻畫刀槽　131

13.3.6　細致刻畫美工刀的上部結(jié)構(gòu)　139

13.3.7　細致刻畫美工刀的下部結(jié)構(gòu)　145

13.3.8　細致刻畫美工刀的右部結(jié)構(gòu)　158

13.3.9　細致刻畫美工刀刀片　160

　13.4 拓展練習(xí)　164



第　14章

高級擬物設(shè)計（手表）

　14.1 手表手繪概念稿　166

　14.2 手表材質(zhì)繪制注意事項　166

　14.3 手表操作實例　167

14.3.1　繪制手表鏈上部　168

14.3.2　繪制手表鏈下部　173

14.3.3　繪制手表鏈左右兩側(cè)連接處材質(zhì)　178

14.3.4　繪制手表表冠　181

14.3.5　繪制手表外殼　182

14.3.6　繪制表盤外圈　186

14.3.7　繪制手表表盤　187

14.3.8　繪制刻度和指針　190

14.3.9　繪制表盤標記　195

　14.4 拓展練習(xí)　200



第　15章

高級擬物設(shè)計（直刀）

　15.1 手繪草稿　202

　15.2 直刀材質(zhì)繪制注意事項　202

　15.3 刀具操作實例　203

15.3.1　制作背景　204

15.3.2　繪制刀具輪廓　205

15.3.3　繪制直刀投影　206

15.3.4　細化刀身　207

15.3.5　細化護手　210

15.3.6　細化刀柄　212

15.3.7　繪制刀柄金屬　215

　15.4 拓展練習(xí)　220



第　16章

高級擬物設(shè)計（自動鉛筆）

　16.1 自動鉛筆材質(zhì)分析　222

　16.2 自動鉛筆材質(zhì)繪制注意事項　222

　16.3 自動鉛筆操作實例　223

16.3.1　繪制自動鉛筆基本外形　223

16.3.2　繪制影子　227

16.3.3　繪制護芯　229

16.3.4　制作筆桿　231

16.3.5　制作按桿　247

　16.4 拓展練習(xí)　253



第　17章

移動端撥號界面設(shè)計

　17.1 撥號界面　255

　17.2 撥號界面設(shè)計注意事項　255

　17.3 撥號界面設(shè)計宗旨　256

　17.4 撥號界面制作　256

　17.5 拓展練習(xí)　258



第　18章

App登錄和注冊頁面設(shè)計

　18.1 登錄、注冊頁面設(shè)計規(guī)范　260

　18.2 設(shè)計注意事項　261

　18.3 iPhone 8 App注冊頁面操作實例　261

　18.4 正確輸出清晰設(shè)計效果圖流程　266

　18.5 拓展練習(xí)　267



第　19章

App卡券列表界面設(shè)計

　19.1 卡券界面設(shè)計　269

　19.2 設(shè)計注意事項　269

　19.3 卡券列表　270

　19.4 卡券列表界面操作實例　270

　19.5 拓展練習(xí)　272



第　20章

PS動效設(shè)計

　20.1 PS設(shè)計動畫的優(yōu)勢　274

　20.2 用時間軸制作加載動畫　275



第　21章

工作必備的切圖技能

　21.1 圓角矩形按鈕操作實例　280

　21.2 皮卡丘信息氣泡按鈕操作實例　283