移動端UI設(shè)計

第 1 章 UI版式布局與形式美
1.1 導(dǎo)航設(shè)計 002
1.1.1 跳板式 002
1.1.2 列表菜單式 003
1.1.3 陳列館式 003
1.1.4 儀表式 004
1.1.5 超級菜單式 004
1.1.6 圖標(biāo)輪盤式 004
1.1.7 圖片式 005
1.2 界面布局設(shè)計 006
1.2.1 豎排列表 006
1.2.2 橫排方塊 006
1.2.3 九宮格 007
1.2.4 Tab 007
1.2.5 多面板 007
1.2.6 手風(fēng)琴 008
1.2.7 彈出框 008
1.2.8 側(cè)邊欄 008
1.2.9 標(biāo)簽式 009
1.3 界面設(shè)計的形式美法則 009
1.3.1 重復(fù)與近似 009
1.3.2 漸變與節(jié)奏 010
1.3.3 對比與調(diào)和 010
1.3.4 比例與適度 011
1.3.5 變化與統(tǒng)一 011
1.3.6 虛實與留白 012
V

移動端UI設(shè)計
第 2 章 UI情感化設(shè)計與視知覺原則
2.1 UI中的情感化設(shè)計 014
2.1.1 何為情感化設(shè)計 014
2.1.2 蘋果公司UI設(shè)計的情感化之路 014
2.1.3 情感化設(shè)計在UI設(shè)計中的作用 016
2.2 格式塔視知覺原則 018
2.2.1 相似性 018
2.2.2 接近性 018
2.2.3 連續(xù)性 019
2.2.4 閉合性 019
2.2.5 圖形與背景 019
第 3 章 UI色彩設(shè)計與心理效應(yīng)
3.1 色彩原理 022
3.1.1 色彩的概念 022
3.1.2 色彩的屬性 023
3.1.3 數(shù)字色彩 023
3.2 色彩的對比與調(diào)和 024
3.2.1 色彩對比 025
3.2.2 色彩對比的種類 026
3.2.3 色彩的調(diào)和 028
3.2.4 色彩調(diào)和的種類 029
3.3 色彩的心理效應(yīng) 030
3.4 色彩搭配的技巧 034
3.4.1 主色、副色、點綴色構(gòu)成原則 034
3.4.2 色彩搭配的原則 034
3.4.3 主體色搭配的技巧 035
3.4.4 色環(huán)搭配指南 036
第 4 章 圖標(biāo)的創(chuàng)意設(shè)計
4.1 圖標(biāo)色彩搭配與應(yīng)用 040
4.1.1 經(jīng)典色系 040
4.1.2 圖標(biāo)與界面配色注意事項 043
4.2 圖標(biāo)的基本知識 046
VI

目 錄
4.2.1 圖標(biāo)概述 046
4.2.2 圖標(biāo)分類 046
4.2.3 圖標(biāo)設(shè)計流程 049
4.3 圖標(biāo)風(fēng)格表達(dá) 050
4.3.1 扁平化設(shè)計 050
4.3.2 擬物化設(shè)計 053
4.3.3 扁平化+擬物化 055
4.4 圖標(biāo)創(chuàng)意表達(dá) 056
4.4.1 圖標(biāo)創(chuàng)意構(gòu)想—頭腦風(fēng)暴 056
4.4.2 圖形輪廓聯(lián)想——圖形聯(lián)想 057
4.4.3 圖標(biāo)草圖表達(dá)——視覺手繪 058
4.5 圖標(biāo)制作基礎(chǔ)實訓(xùn)——時鐘圖標(biāo) 058
第 5 章 流行元素設(shè)計案例
5.1 UI的字體效果 067
案例1：星星字體效果 067
案例2：牛仔布料字體效果 069
案例3：煙霧水墨字體效果 076
案例4：霓虹燈字體效果 080
案例5：斑點字體效果 083
案例6：立體字效果 084
案例7：車燈字體效果 086
5.2 UI圖標(biāo)的質(zhì)感表現(xiàn) 089
案例8：瓷器質(zhì)感效果 089
案例9：木紋質(zhì)感效果 093
案例10：金屬質(zhì)感效果 097
案例11：布料質(zhì)感效果 101
案例12：玻璃質(zhì)感效果 106
案例13：塑料質(zhì)感效果 113
案例14：皮質(zhì)質(zhì)感效果 118
5.3 立體UI圖標(biāo)設(shè)計 137
案例15：3D字體圖標(biāo)設(shè)計 137
案例16：手機應(yīng)用圖標(biāo)設(shè)計 140
案例17：面具表情圖標(biāo)設(shè)計 144
VII

移動端UI設(shè)計
案例18：企業(yè)Logo圖標(biāo)設(shè)計 148
案例19：VR實驗室Logo設(shè)計 154
5.4 功能圖標(biāo)案例設(shè)計與制作 156
案例20：汽車HMI圖標(biāo)制作 156
案例21：辦公文件管理圖標(biāo)制作 162
案例22：收音機圖標(biāo)制作 167
案例23：手電筒圖標(biāo)制作 173
案例24：天氣預(yù)報圖標(biāo)設(shè)計 176
5.5 UI局部功能設(shè)計與案例制作 179
案例25：登錄UI設(shè)計 179
案例26：導(dǎo)航圖標(biāo)UI設(shè)計 179
案例27：導(dǎo)航欄設(shè)計 181
案例28：主題圖標(biāo)設(shè)計 187
第 6 章 主題式UI創(chuàng)作案例研究
6.1 民間工藝主題UI設(shè)計 193
案例1：一石磚 193
案例2：民藝 196
6.2 懷舊主題UI設(shè)計 200
案例3：老物件 200
案例4：時光π 207
6.3 書卷文化主題UI設(shè)計 210
案例5：余音 210
6.4 漢像畫主題UI設(shè)計 214
案例6：漢像畫 214
6.5 六一兒童節(jié)主題UI設(shè)計 219
案例7：童說童畫 219
案例8：糖友記 223
6.6 親子閱讀主題UI設(shè)計 225
案例9：Light·House 225
案例10：檬閱 230
6.7 保護小動物主題UI設(shè)計 233
案例11：Pet-life 233
案例12：愛寵 236
VIII

目 錄
6.8 快樂涂鴉主題UI設(shè)計 238
案例13：樂涂 238
案例14：萌嘰 241
第 7 章 優(yōu)秀作品展示
作品1 《木活字》 246
作品2 《北京樓燕兒》 248
作品3 《龍龍帶你識九城》 249
作品4 《千年活字VR虛擬體驗館設(shè)計》 250
作品5 《收集年味》 251
作品6 《曉紅豆》 253