移動端UI設計是數字媒體藝術專業(yè)的必須課程。本書通過對數字移動媒體UI設計理論知識與制作規(guī)范,詳實的案例講解使讀者具備一定設計界面與圖標的審美能力與制作能力。能較好的將學習理論知識與實際案例相結合,使讀者更容易理解同時也容易掌握制作軟件的能力。本書共分為11章,第1章對數字移動媒體基礎理論知識進行介紹。第2章介紹UI設計的基礎知識、第3章介紹了圖形創(chuàng)意表達方法。第4章介紹了圖標設計的方法規(guī)范與流程。第5章介紹了圖標設計的風格表達。第6章介紹了數字移動媒體UI設計規(guī)范。第7章介紹了數字媒體UI的板式構成。第8章介紹了數字移動媒體UI的色彩設計。第9章主要介紹了不同風格的UI圖標設計與制作案例。第10章介紹了數字移動媒體的主題式UI整體設計。第11章介紹了優(yōu)秀UI界面設計賞析。
嚴磊有將近二十年大專、本科的一線教學經驗。多年來專注于高等學校數字出版藝術設計領域復合應用型人才培養(yǎng),主要圍繞交互設計、數字出版、數字體驗與文創(chuàng)設計、新媒體藝術等領域的研究。數十篇論文及多件藝術設計作品在國內重要期刊、核心期刊發(fā)表。擔任北京市及校級科研項目研究工作。
第 1 章 UI版式布局與形式美
1.1 導航設計 002
1.1.1 跳板式 002
1.1.2 列表菜單式 003
1.1.3 陳列館式 003
1.1.4 儀表式 004
1.1.5 超級菜單式 004
1.1.6 圖標輪盤式 004
1.1.7 圖片式 005
1.2 界面布局設計 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 手風琴 008
1.2.7 彈出框 008
1.2.8 側邊欄 008
1.2.9 標簽式 009
1.3 界面設計的形式美法則 009
1.3.1 重復與近似 009
1.3.2 漸變與節(jié)奏 010
1.3.3 對比與調和 010
1.3.4 比例與適度 011
1.3.5 變化與統(tǒng)一 011
1.3.6 虛實與留白 012
V
移動端UI設計
第 2 章 UI情感化設計與視知覺原則
2.1 UI中的情感化設計 014
2.1.1 何為情感化設計 014
2.1.2 蘋果公司UI設計的情感化之路 014
2.1.3 情感化設計在UI設計中的作用 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色彩設計與心理效應
3.1 色彩原理 022
3.1.1 色彩的概念 022
3.1.2 色彩的屬性 023
3.1.3 數字色彩 023
3.2 色彩的對比與調和 024
3.2.1 色彩對比 025
3.2.2 色彩對比的種類 026
3.2.3 色彩的調和 028
3.2.4 色彩調和的種類 029
3.3 色彩的心理效應 030
3.4 色彩搭配的技巧 034
3.4.1 主色、副色、點綴色構成原則 034
3.4.2 色彩搭配的原則 034
3.4.3 主體色搭配的技巧 035
3.4.4 色環(huán)搭配指南 036
第 4 章 圖標的創(chuàng)意設計
4.1 圖標色彩搭配與應用 040
4.1.1 經典色系 040
4.1.2 圖標與界面配色注意事項 043
4.2 圖標的基本知識 046
VI
目 錄
4.2.1 圖標概述 046
4.2.2 圖標分類 046
4.2.3 圖標設計流程 049
4.3 圖標風格表達 050
4.3.1 扁平化設計 050
4.3.2 擬物化設計 053
4.3.3 扁平化+擬物化 055
4.4 圖標創(chuàng)意表達 056
4.4.1 圖標創(chuàng)意構想—頭腦風暴 056
4.4.2 圖形輪廓聯想——圖形聯想 057
4.4.3 圖標草圖表達——視覺手繪 058
4.5 圖標制作基礎實訓——時鐘圖標 058
第 5 章 流行元素設計案例
5.1 UI的字體效果 067
案例1:星星字體效果 067
案例2:牛仔布料字體效果 069
案例3:煙霧水墨字體效果 076
案例4:霓虹燈字體效果 080
案例5:斑點字體效果 083
案例6:立體字效果 084
案例7:車燈字體效果 086
5.2 UI圖標的質感表現 089
案例8:瓷器質感效果 089
案例9:木紋質感效果 093
案例10:金屬質感效果 097
案例11:布料質感效果 101
案例12:玻璃質感效果 106
案例13:塑料質感效果 113
案例14:皮質質感效果 118
5.3 立體UI圖標設計 137
案例15:3D字體圖標設計 137
案例16:手機應用圖標設計 140
案例17:面具表情圖標設計 144
VII
移動端UI設計
案例18:企業(yè)Logo圖標設計 148
案例19:VR實驗室Logo設計 154
5.4 功能圖標案例設計與制作 156
案例20:汽車HMI圖標制作 156
案例21:辦公文件管理圖標制作 162
案例22:收音機圖標制作 167
案例23:手電筒圖標制作 173
案例24:天氣預報圖標設計 176
5.5 UI局部功能設計與案例制作 179
案例25:登錄UI設計 179
案例26:導航圖標UI設計 179
案例27:導航欄設計 181
案例28:主題圖標設計 187
第 6 章 主題式UI創(chuàng)作案例研究
6.1 民間工藝主題UI設計 193
案例1:一石磚 193
案例2:民藝 196
6.2 懷舊主題UI設計 200
案例3:老物件 200
案例4:時光π 207
6.3 書卷文化主題UI設計 210
案例5:余音 210
6.4 漢像畫主題UI設計 214
案例6:漢像畫 214
6.5 六一兒童節(jié)主題UI設計 219
案例7:童說童畫 219
案例8:糖友記 223
6.6 親子閱讀主題UI設計 225
案例9:Light·House 225
案例10:檬閱 230
6.7 保護小動物主題UI設計 233
案例11:Pet-life 233
案例12:愛寵 236
VIII
目 錄
6.8 快樂涂鴉主題UI設計 238
案例13:樂涂 238
案例14:萌嘰 241
第 7 章 優(yōu)秀作品展示
作品1 《木活字》 246
作品2 《北京樓燕兒》 248
作品3 《龍龍帶你識九城》 249
作品4 《千年活字VR虛擬體驗館設計》 250
作品5 《收集年味》 251
作品6 《曉紅豆》 253