移動(dòng)端UI設(shè)計(jì)是數(shù)字媒體藝術(shù)專業(yè)的必須課程。本書通過對數(shù)字移動(dòng)媒體UI設(shè)計(jì)理論知識與制作規(guī)范，詳實(shí)的案例講解使讀者具備一定設(shè)計(jì)界面與圖標(biāo)的審美能力與制作能力。能較好的將學(xué)習(xí)理論知識與實(shí)際案例相結(jié)合，使讀者更容易理解同時(shí)也容易掌握制作軟件的能力。本書共分為11章，第1章對數(shù)字移動(dòng)媒體基礎(chǔ)理論知識進(jìn)行介紹。第2章介紹UI設(shè)計(jì)的基礎(chǔ)知識、第3章介紹了圖形創(chuàng)意表達(dá)方法。第4章介紹了圖標(biāo)設(shè)計(jì)的方法規(guī)范與流程。第5章介紹了圖標(biāo)設(shè)計(jì)的風(fēng)格表達(dá)。第6章介紹了數(shù)字移動(dòng)媒體UI設(shè)計(jì)規(guī)范。第7章介紹了數(shù)字媒體UI的板式構(gòu)成。第8章介紹了數(shù)字移動(dòng)媒體UI的色彩設(shè)計(jì)。第9章主要介紹了不同風(fēng)格的UI圖標(biāo)設(shè)計(jì)與制作案例。第10章介紹了數(shù)字移動(dòng)媒體的主題式UI整體設(shè)計(jì)。第11章介紹了優(yōu)秀UI界面設(shè)計(jì)賞析。
嚴(yán)磊有將近二十年大專、本科的一線教學(xué)經(jīng)驗(yàn)。多年來專注于高等學(xué)校數(shù)字出版藝術(shù)設(shè)計(jì)領(lǐng)域復(fù)合應(yīng)用型人才培養(yǎng)，主要圍繞交互設(shè)計(jì)、數(shù)字出版、數(shù)字體驗(yàn)與文創(chuàng)設(shè)計(jì)、新媒體藝術(shù)等領(lǐng)域的研究。數(shù)十篇論文及多件藝術(shù)設(shè)計(jì)作品在國內(nèi)重要期刊、核心期刊發(fā)表。擔(dān)任北京市及校級科研項(xiàng)目研究工作。
第 1 章 UI版式布局與形式美
1.1 導(dǎo)航設(shè)計(jì) 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è)計(jì) 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è)計(jì)的形式美法則 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 虛實(shí)與留白 012
V
移動(dòng)端UI設(shè)計(jì)
第 2 章 UI情感化設(shè)計(jì)與視知覺原則
2.1 UI中的情感化設(shè)計(jì) 014
2.1.1 何為情感化設(shè)計(jì) 014
2.1.2 蘋果公司UI設(shè)計(jì)的情感化之路 014
2.1.3 情感化設(shè)計(jì)在UI設(shè)計(jì)中的作用 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è)計(jì)與心理效應(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 主色、副色、點(diǎn)綴色構(gòu)成原則 034
3.4.2 色彩搭配的原則 034
3.4.3 主體色搭配的技巧 035
3.4.4 色環(huán)搭配指南 036
第 4 章 圖標(biāo)的創(chuàng)意設(shè)計(jì)
4.1 圖標(biāo)色彩搭配與應(yīng)用 040
4.1.1 經(jīng)典色系 040
4.1.2 圖標(biāo)與界面配色注意事項(xiàng) 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è)計(jì)流程 049
4.3 圖標(biāo)風(fēng)格表達(dá) 050
4.3.1 扁平化設(shè)計(jì) 050
4.3.2 擬物化設(shè)計(jì) 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ǔ)實(shí)訓(xùn)——時(shí)鐘圖標(biāo) 058
第 5 章 流行元素設(shè)計(jì)案例
5.1 UI的字體效果 067
案例1：星星字體效果 067
案例2：牛仔布料字體效果 069
案例3：煙霧水墨字體效果 076
案例4：霓虹燈字體效果 080
案例5：斑點(diǎn)字體效果 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è)計(jì) 137
案例15：3D字體圖標(biāo)設(shè)計(jì) 137
案例16：手機(jī)應(yīng)用圖標(biāo)設(shè)計(jì) 140
案例17：面具表情圖標(biāo)設(shè)計(jì) 144
VII
移動(dòng)端UI設(shè)計(jì)
案例18：企業(yè)Logo圖標(biāo)設(shè)計(jì) 148
案例19：VR實(shí)驗(yàn)室Logo設(shè)計(jì) 154
5.4 功能圖標(biāo)案例設(shè)計(jì)與制作 156
案例20：汽車HMI圖標(biāo)制作 156
案例21：辦公文件管理圖標(biāo)制作 162
案例22：收音機(jī)圖標(biāo)制作 167
案例23：手電筒圖標(biāo)制作 173
案例24：天氣預(yù)報(bào)圖標(biāo)設(shè)計(jì) 176
5.5 UI局部功能設(shè)計(jì)與案例制作 179
案例25：登錄UI設(shè)計(jì) 179
案例26：導(dǎo)航圖標(biāo)UI設(shè)計(jì) 179
案例27：導(dǎo)航欄設(shè)計(jì) 181
案例28：主題圖標(biāo)設(shè)計(jì) 187
第 6 章 主題式UI創(chuàng)作案例研究
6.1 民間工藝主題UI設(shè)計(jì) 193
案例1：一石磚 193
案例2：民藝 196
6.2 懷舊主題UI設(shè)計(jì) 200
案例3：老物件 200
案例4：時(shí)光π 207
6.3 書卷文化主題UI設(shè)計(jì) 210
案例5：余音 210
6.4 漢像畫主題UI設(shè)計(jì) 214
案例6：漢像畫 214
6.5 六一兒童節(jié)主題UI設(shè)計(jì) 219
案例7：童說童畫 219
案例8：糖友記 223
6.6 親子閱讀主題UI設(shè)計(jì) 225
案例9：Light·House 225
案例10：檬閱 230
6.7 保護(hù)小動(dòng)物主題UI設(shè)計(jì) 233
案例11：Pet-life 233
案例12：愛寵 236
VIII
目 錄
6.8 快樂涂鴉主題UI設(shè)計(jì) 238
案例13：樂涂 238
案例14：萌嘰 241
第 7 章 優(yōu)秀作品展示
作品1 《木活字》 246
作品2 《北京樓燕兒》 248
作品3 《龍龍帶你識九城》 249
作品4 《千年活字VR虛擬體驗(yàn)館設(shè)計(jì)》 250
作品5 《收集年味》 251
作品6 《曉紅豆》 253
書單推薦
