APP UI系統(tǒng)組件設(shè)計

第1 章　初識UI 基礎(chǔ)   1
1.1　認識UI   2
1.2　UI 的分類   3
1.3　UI 的色彩基礎(chǔ)   4
1.3.1　顏色的概念   4
1.3.2　色彩三要素   4
1.3.3　色彩的混合   6
1.3.4　色彩的分類   8
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　優(yōu)秀作品欣賞   13
第2 章　使用基本形狀繪制UI 元素   14
2.1　了解Photoshop 中的基本形狀   15
2.1.1　通過選區(qū)創(chuàng)建幾何圖形   15
2.1.2　繪制工具   15
2.1.3　形狀工具的不同模式   16
2.2　使用矩形選區(qū)制作下單按鈕   17
2.3　使用橢圓選區(qū)制作圓形按鈕   19
2.4　使用矩形工具制作簡潔風(fēng)格導(dǎo)航欄   23
2.5　使用圓角矩形工具和矩形工具制作提示窗口   25
2.6　 使用圓角矩形工具和橢圓工具制作拖動條   30
2.7　使用多邊形工具和橢圓工具制作播放按鈕   32
2.8　使用自定形狀工具和橢圓工具制作供電按鈕   37
2.9　使用橢圓工具結(jié)合圖層樣式制作金屬旋鈕   43
2.10　使用路徑與自定形狀工具制作網(wǎng)頁廣告條   51
2.11　優(yōu)秀作品欣賞   54
第3 章　扁平化設(shè)計風(fēng)格   55
3.1　了解扁平化設(shè)計   56
3.1.1　扁平化設(shè)計是什么   56
3.1.2　扁平化風(fēng)格的優(yōu)缺點   56
3.1.3　扁平化風(fēng)格的設(shè)計原則   57
3.2　扁平相機圖標(biāo)制作   59
3.3　扁平視頻播放圖標(biāo)制作   62
3.4　扁平收音機圖標(biāo)制作   65
3.5　扁平化郵箱界面制作   69
3.6　扁平音樂播放器界面制作   73
3.7　時間APP 界面制作   76
3.8　天氣預(yù)報控件制作   79
3.9　車載扁平UI 制作   83
3.10　扁平卡通生肖圖標(biāo)制作   87
3.11　優(yōu)秀作品欣賞   91
第4 章　寫實風(fēng)格圖標(biāo)設(shè)計與制作   92
4.1　了解寫實風(fēng)格設(shè)計   93
4.1.1　寫實的藝術(shù)表現(xiàn)   93
4.1.2　寫實風(fēng)格的優(yōu)缺點   94
4.1.3　寫實風(fēng)格的設(shè)計原則   94
4.2　寫實麥克風(fēng)圖標(biāo)制作   96
4.3　寫實鋼琴圖標(biāo)制作   104
4.4　寫實電視圖標(biāo)制作   111
4.5　寫實滾動開關(guān)圖標(biāo)制作   118
4.6　寫實日歷圖標(biāo)制作   125
4.7　寫實西瓜圖標(biāo)制作   129
4.8　優(yōu)秀作品欣賞   134
第5 章　UI 小控件元素   135
5.1　了解UI 設(shè)計中的控件   136
5.1.1　UI 控件是什么   136
5.1.2　UI 設(shè)計中的控件   136
5.1.3　UI 控件的設(shè)計原則   137
5.2　重要人物電話簿控件制作   138
5.3　功能性圖標(biāo)控件制作   146
5.4　天氣控件制作   152
5.5　時間控件制作   158
5.6　質(zhì)感開關(guān)控件制作   165
5.7　視頻播放控件制作   173
5.8　音量旋鈕控件制作   175
5.9　優(yōu)秀作品欣賞   180
第6 章　UI 導(dǎo)航設(shè)計與制作   181
6.1　了解UI 設(shè)計中的導(dǎo)航   182
6.1.1　導(dǎo)航是什么   182
6.1.2　導(dǎo)航的分類   182
6.1.3　移動端導(dǎo)航設(shè)計的幾種形式   182
6.1.4　網(wǎng)頁端導(dǎo)航設(shè)計的幾種形式   185
6.2　水晶質(zhì)感網(wǎng)頁導(dǎo)航制作   188
6.3　底部導(dǎo)航制作   193
6.4　頂部導(dǎo)航制作   198
6.5　抽屜式導(dǎo)航制作   200
6.6　帶搜索導(dǎo)航制作   204
6.7　APP 頂部導(dǎo)航制作   208
6.8　APP 網(wǎng)格式導(dǎo)航制作   211
6.9　優(yōu)秀作品欣賞   213
第7 章　登錄框設(shè)計與制作   215
7.1　了解UI 設(shè)計中的登錄框   216
7.1.1　登錄框是什么   216
7.1.2　UI 中登錄框的分類   216
7.1.3　登錄框的幾種形式   216
7.2　傳統(tǒng)登錄框制作   216
7.3　企業(yè)登錄框制作   221
7.4　漂浮感登錄框制作   225
7.5　透明登錄框制作   230
7.6　純凈扁平登錄框制作   236
7.7　橫幅登錄框制作   238
7.8　皮質(zhì)登錄框制作   243
7.9　優(yōu)秀作品欣賞   251
第8 章　UI 設(shè)計與制作   252
8.1　了解UI 設(shè)計中的界面   253
8.1.1　UI 設(shè)計中的界面是什么   253
8.1.2　常見的界面   253
8.1.3　屏幕尺寸   253
8.1.4　設(shè)計界面時需要注意的固定元素尺寸   255
8.1.5　什么是好的界面設(shè)計   256
8.2　手機開機界面制作   256
8.3　鞋子銷售界面制作   259
8.4　扁平下載界面制作   266
8.5　手機界面制作   268
8.6　汽車服務(wù)APP 界面制作   272
8.7　天氣預(yù)報界面制作   274
8.8　照片處理類APP 界面制作   277
8.9　優(yōu)秀作品欣賞   280