移動端UI設(shè)計是數(shù)字媒體藝術(shù)專業(yè)的必須課程。本書通過對數(shù)字移動媒體UI設(shè)計理論知識與制作規(guī)范，詳實的案例講解使讀者具備一定設(shè)計界面與圖標(biāo)的審美能力與制作能力。能較好的將學(xué)習(xí)理論知識與實際案例相結(jié)合，使讀者更容易理解同時也容易掌握制作軟件的能力。本書共分為11章，第1章對數(shù)字移動媒體基礎(chǔ)理論知識進行介紹。第2章介紹UI設(shè)計的基礎(chǔ)知識、第3章介紹了圖形創(chuàng)意表達方法。第4章介紹了圖標(biāo)設(shè)計的方法規(guī)范與流程。第5章介紹了圖標(biāo)設(shè)計的風(fēng)格表達。第6章介紹了數(shù)字移動媒體UI設(shè)計規(guī)范。第7章介紹了數(shù)字媒體UI的板式構(gòu)成。第8章介紹了數(shù)字移動媒體UI的色彩設(shè)計。第9章主要介紹了不同風(fēng)格的UI圖標(biāo)設(shè)計與制作案例。第10章介紹了數(shù)字移動媒體的主題式UI整體設(shè)計。第11章介紹了優(yōu)秀UI界面設(shè)計賞析。
嚴(yán)磊有將近二十年大專、本科的一線教學(xué)經(jīng)驗。多年來專注于高等學(xué)校數(shù)字出版藝術(shù)設(shè)計領(lǐng)域復(fù)合應(yīng)用型人才培養(yǎng)，主要圍繞交互設(shè)計、數(shù)字出版、數(shù)字體驗與文創(chuàng)設(shè)計、新媒體藝術(shù)等領(lǐng)域的研究。數(shù)十篇論文及多件藝術(shù)設(shè)計作品在國內(nèi)重要期刊、核心期刊發(fā)表。擔(dān)任北京市及校級科研項目研究工作。
第 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)格表達 050
4.3.1 扁平化設(shè)計 050
4.3.2 擬物化設(shè)計 053
4.3.3 扁平化+擬物化 055
4.4 圖標(biāo)創(chuàng)意表達 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)草圖表達——視覺手繪 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
書單推薦
