UI的創(chuàng)作樂趣：創(chuàng)意APP元素設(shè)計實(shí)戰(zhàn)

第1章 初識UI設(shè)計   1
1.1 認(rèn)識UI   2
1.2 UI的分類       3
1.3 UI的色彩基礎(chǔ)      4
1.3.1 顏色的概念         4
1.3.2 色彩三要素         4
1.3.3 色彩的混合         5
1.3.4 色彩的分類         7
1.4 不同色彩給人的心理影響     8
1.5 常用UI設(shè)計單位解析     9
1.6 UI設(shè)計常用的軟件         9
1.7 UI設(shè)計常用的圖像格式       11
1.8 UI的設(shè)計原則    12
1.9 學(xué)習(xí)UI設(shè)計需要具備的5項能力    13
1.10 優(yōu)秀作品欣賞   13
第2章 選取與填充在UI中的應(yīng)用   15
2.1 了解選取與填充     16
2.1.1 選區(qū)的應(yīng)用        16
2.1.2 填充的應(yīng)用        20
2.2 使用矩形選區(qū)制作公司APP圖標(biāo)    25
2.3 使用漸變工具制作金屬旋鈕控件     28
2.4 使用矩形工具和橢圓選區(qū)制作拖動條    32
2.5 使用鋼筆工具繪制卡通圖標(biāo)    36
2.6 使用油漆桶工具制作票據(jù)界面        40
2.7 優(yōu)秀作品欣賞    44
第3章 畫筆與形狀在UI中的應(yīng)用   45
3.1 了解畫筆與形狀     46
3.1.1 畫筆的應(yīng)用        46
3.1.2 畫筆設(shè)置面板     47
3.1.3 鉛筆工具      50
3.1.4 多邊形與星形的創(chuàng)建     50
3.1.5 自定義形狀的創(chuàng)建    51
3.2 設(shè)置畫筆制作郵票圖標(biāo)      51
3.3 通過自定義形狀制作微信圖標(biāo)        54
3.4 使用多邊形工具制作簡易圖標(biāo)        58
3.5 優(yōu)秀作品欣賞    61
第4章 圖層在UI中的應(yīng)用       62
4.1 認(rèn)識圖層      63
4.1.1 什么是圖層        63
4.1.2 圖層的原理        64
4.1.3 快速顯示圖層內(nèi)容    64
4.2 調(diào)整圖層凸顯局部圖標(biāo)       66
4.3 使用圖層樣式制作水晶風(fēng)格圖標(biāo)     70
4.4 使用圖層蒙版制作圖標(biāo)倒影    72
4.5 使用剪貼蒙版合成提示窗口    78
4.6 使用操控變形制作圖形圖標(biāo)    81
4.7 優(yōu)秀作品欣賞    84
第5章 扁平化風(fēng)格案例實(shí)戰(zhàn)       85
5.1 了解扁平化設(shè)計     86
5.1.1 扁平化設(shè)計是什么    86
5.1.2 扁平化風(fēng)格設(shè)計的優(yōu)點(diǎn)和缺點(diǎn)     86
5.1.3 扁平化風(fēng)格的設(shè)計原則         87
5.2 實(shí)戰(zhàn)案例—扁平化風(fēng)格鉛筆圖標(biāo)       89
5.3 實(shí)戰(zhàn)案例—扁平化風(fēng)格鋼筆圖標(biāo)       92
5.4 實(shí)戰(zhàn)案例—扁平化風(fēng)格扳手圖標(biāo)       95
5.5 實(shí)戰(zhàn)案例—扁平化風(fēng)格生肖鼠圖標(biāo)    99
5.6 實(shí)戰(zhàn)案例—扁平化風(fēng)格郵箱界面      103
5.7 實(shí)戰(zhàn)案例—扁平化風(fēng)格音樂播放器界面   106
5.8 實(shí)戰(zhàn)案例—扁平化風(fēng)格天氣預(yù)報控件   112
5.9 實(shí)戰(zhàn)案例—扁平化風(fēng)格超市小票      116
5.10 優(yōu)秀作品欣賞      118
 第6章 精致按鈕的設(shè)計實(shí)戰(zhàn)       119
6.1 了解按鈕設(shè)計   120
6.1.1 移動APP按鈕尺寸分析        120
6.1.2 統(tǒng)一化風(fēng)格      120
6.1.3 懸浮風(fēng)格         121
6.1.4 強(qiáng)化質(zhì)感風(fēng)格   121
6.1.5 圓角風(fēng)格         121
6.1.6 強(qiáng)調(diào)重點(diǎn)         122
6.2 實(shí)戰(zhàn)案例—下單按鈕     122
6.3 實(shí)戰(zhàn)案例—提交按鈕     124
6.4 實(shí)戰(zhàn)案例—圓形開關(guān)按鈕   127
6.5 實(shí)戰(zhàn)案例—金屬旋鈕     131
6.6 實(shí)戰(zhàn)案例—皮革按鈕     137
6.7 實(shí)戰(zhàn)案例—羅盤圖標(biāo)     143
6.8 實(shí)戰(zhàn)案例—溫度計圖標(biāo)      147
6.9 實(shí)戰(zhàn)案例—日歷圖標(biāo)     149
6.10 優(yōu)秀作品欣賞      154
 第7章 寫實(shí)風(fēng)格圖標(biāo)制作實(shí)戰(zhàn)     155
7.1 了解寫實(shí)風(fēng)格設(shè)計      156
7.1.1 寫實(shí)的藝術(shù)表現(xiàn)     156
7.1.2 寫實(shí)風(fēng)格設(shè)計的優(yōu)點(diǎn)和缺點(diǎn)      157
7.1.3 寫實(shí)風(fēng)格的設(shè)計原則   157
7.2 實(shí)戰(zhàn)案例—寫實(shí)火龍果圖標(biāo)       158
7.3 實(shí)戰(zhàn)案例—寫實(shí)開關(guān)圖標(biāo)   162
7.4 實(shí)戰(zhàn)案例—寫實(shí)優(yōu)盤圖標(biāo)   169
7.5 實(shí)戰(zhàn)案例—寫實(shí)鋼琴圖標(biāo)   175
7.6 實(shí)戰(zhàn)案例—寫實(shí)電視圖標(biāo)   181
7.7 優(yōu)秀作品欣賞   186
第8章 控件制作實(shí)戰(zhàn)       187
8.1 了解UI設(shè)計中的控件       188
8.1.1 什么是UI控件   188
8.1.2 UI設(shè)計中的控件     188
8.1.3 UI控件的設(shè)計原則      188
8.2 實(shí)戰(zhàn)案例—簡潔進(jìn)度條      190
8.3 實(shí)戰(zhàn)案例—播放滑動條      193
8.4 實(shí)戰(zhàn)案例—加油站控件      195
8.5 實(shí)戰(zhàn)案例—天氣預(yù)報控件   198
8.6 實(shí)戰(zhàn)案例—音樂播放器控件       203
8.7 優(yōu)秀作品欣賞   205
 第9章 界面設(shè)計實(shí)戰(zhàn)       207
9.1 了解UI設(shè)計中的界面       208
9.1.1 UI設(shè)計中的界面是什么       208
9.1.2 常見的界面      208
9.1.3 屏幕尺寸         208
9.1.4 設(shè)計界面時需要注意的固定元素尺寸      210
9.1.5 什么是好的界面設(shè)計   211
9.2 實(shí)戰(zhàn)案例—扁平化風(fēng)格登錄界面      211
9.3 實(shí)戰(zhàn)案例—會員登錄界面   214
9.4 實(shí)戰(zhàn)案例—數(shù)據(jù)下載界面   221
9.5 實(shí)戰(zhàn)案例—手機(jī)開機(jī)界面   224
9.6 實(shí)戰(zhàn)案例—天氣預(yù)報界面   226
9.7 優(yōu)秀作品欣賞   229