內容簡介
UI設計是藝術設計類專業學生的必修課程,是指對軟體的人機互動、操作邏輯、界面美觀的整體設計。本書以理論知識為基礎,通過對實踐案例的分析,串聯起UI設計的整個流程和設計體系,為UI設計的學習和訓練提供了重要的內容體系。 全書共分8章,內容涉及UI設計的基礎知識和基本原理,UI設計中的圖示設計、版式設計、色彩設計、字型設計,以及Banner設計和動效的製作。本書從概念到實踐,深入淺出地呈現了UI設計的各個階段、步驟和要素,讓讀者能夠全面了解UI設計的整體流程,掌握更好的表現方式和技法。 本書適合作為高等院校藝術設計類專業的教材,也可作為UI設計、App界面設計從業者的參考用書。 |
圖書目錄
第1章 UI設計概述
1.1 什麼是UI設計··················1
1.1.1 UI設計不單純是視覺設計····1
1.1.2 UI設計的範疇·············2
1.1.3 互動設計的概念···········3
1.1.4 用戶體驗的概念···········4
1.1.5 界面設計的概念···········4
1.2 UI與UE的關係·················5
1.3 UI設計的發展歷程···············5
1.4 UI設計的分類··················7
1.4.1 以終端為標準的分類········7
1.4.2 以作業系統為標準的分類·····9
1.4.3 以內容為標準的分類·······11
1.5 UI設計的現狀·················13
1.6 UI設計的發展趨勢··············16
第2章 UI設計的基本原理
2.1 UI的構成·····················18
2.2 UI設計的基本工作流程···········19
2.3 UI設計規範···················21
2.3.1 iOS設計規範············21
2.3.2 安卓設計規範············27
2.4 UI設計中的視覺原則············30
2.4.1 顏色一致性··············30
2.4.2 版式一致性··············31
2.4.3 字型一致性··············33
2.4.4 圖示控制項一致性··········34
2.4.5 互動操作一致性···········35
2.4.6 對比原則···············35
2.5 UI設計的風格演變··············37
2.6 UI設計與產品的關係············37
2.7 套用案例·····················38
2.7.1 產品介紹················38
2.7.2 規範選用················39
2.7.3 字型選用················39
2.7.4 配色設計················39
2.7.5 標誌設計················39
2.7.6 圖示設計················40
2.7.7 頁面高保真原型圖·········40
2.7.8 頁面效果圖··············41
第3章 UI設計中圖示的套用與實踐案例
3.1 UI設計中圖示的分類············44
3.1.1 功能性圖示··············44
3.1.2 裝飾性圖示··············46
3.2 UI設計中圖示的風格············47
3.2.1 擬物化圖示··············47
3.2.2 線性圖示················48
3.2.3 面性圖示················50
3.2.4 輕質感圖示··············51
3.2.5 2.5D圖示···············51
3.2.6 插畫風圖示··············52
3.3 UI設計中圖示設計原理···········52
3.3.1 圖示設計的基本知識·······52
3.3.2 圖示的設計規範···········54
3.3.3 設計方法················61
3.4 實踐案例·····················63
3.4.1 線性圖示案例············63
3.4.2 面性圖示案例············64
3.4.3 扁平化圖示案例··········66
3.4.4 其他風格的圖示案例·······67
第4章 UI設計中版式的套用與實踐案例
第5章 UI設計中色彩的套用與實踐案例
4.1 UI設計中的版式對齊原則·········70
4.1.1 對齊原則的概念··········70
4.1.2 案例分析···············71
4.2 UI設計中的版式對比原則·········73
4.2.1 對比原則的概念··········73
4.2.2 案例分析················74
4.3 UI設計中的版式重複性原則·······76
4.3.1 重複性原則的概念·········76
4.3.2 案例分析················76
4.4 UI設計中的版式親密性原則·······77
4.4.1 親密性原則的概念·········78
4.4.2 案例分析···············78
4.5 UI設計中版式設計的視覺引導性····79
4.6 UI設計中的柵格系統············81
4.6.1 什麼是柵格系統··········81
4.6.2 柵格系統在UI設計中的使用
規範···················81
4.6.3 如何製作柵格系統·········82
4.6.4 案例分析···············88
4.7 實踐案例·····················91
5.1 UI設計中色彩的基本原理·········95
5.1.1 色彩的色相··············96
5.1.2 色彩的純度·············100
5.1.3 色彩的明度·············102
5.2 UI設計中色彩的情感···········102
5.2.1 冷色··················103
5.2.2 暖色··················106
5.2.3 中性色················109
5.3 UI設計中色彩的搭配技巧········110
5.4 UI設計中的配色規範···········113
5.5 實踐案例····················115
5.5.1 暖色風格··············115
5.5.2 灰色風格···············116
5.5.3 果色風格···············116
5.5.4 淺糖果色風格···········117
5.5.5 深糖果色風格···········117
5.5.6 白色風格··············117
5.5.7 深色風格···············118
5.5.8 炫彩風格··············119
第6章 UI設計中字型的套用與實踐案例
6.1 UI設計中的字型分類···········121
6.1.1 西文字型的分類·········121
6.1.2 中文字型的分類·········124
6.2 UI設計中的字型推薦···········125
6.2.1 UI設計中的系統字型······125
6.2.2 UI設計中的美工字型······127
6.2.3 UI設計中的免費字型······128
6.3 UI設計中字型的設計方法········128
6.3.1 UI設計中字型的設計原則··128
6.3.2 UI設計中字型的設計流程··129
6.4 UI設計中字型的排版原理········132
6.4.1 對齊方式··············132
6.4.2 字間距················134
6.4.3 行間距················134
6.4.4 辨識度················135
6.4.5 差異性················136
6.5 實踐案例····················137
6.5.1 書法字型··············137
6.5.2 手寫字型···············138
6.5.3 變體字型··············139
6.5.4 格線字型··············140
6.5.5 線性字型··············141
6.5.6 裝飾字型··············142
6.5.7 釋義字型··············142
6.5.8 字型設計過程···········145
第7章 Banner設計原理與實踐案例
7.1 Banner的構圖原理············148
7.1.1 文字··················148
7.1.2 圖片··················150
7.1.3 文字與圖片的組合········151
7.2 Banner的配色技巧············152
7.2.1 鄰近色················153
7.2.2 互補色················154
7.3 Banner的字型選擇············156
7.4 Banner的裝飾搭配············158
7.4.1 點、線、面·············158
7.4.2 元素的選擇·············161
7.5 Banner的設計規範············161
7.5.1 構圖規範··············162
7.5.2 切換樣式···············164
7.5.3 功能規範···············170
7.6 實踐案例····················174
7.6.1 主字型Banner設計······175
7.6.2 主產品Banner設計······176
7.6.3 主版式Banner設計······177
7.6.4 主插畫Banner設計······178
7.6.5 主配色Banner設計······179
7.6.6 Banner的製作流程······180
第8章 動效製作原理與實踐案例
8.1 動效的分類···················183
8.2 動效的原理···················187
8.3 動效的動畫運動分類············188
8.3.1 緩動··················188
8.3.2 線性運動··············190
8.3.3 緩入和緩出·············191
8.3.4 懸停··················191
8.3.5 點擊··················191
8.4 動效在界面中的編排············192
8.4.1 均等互動··············192
8.4.2 從屬互動··············193
8.5 動效製作規範·················198
8.5.1 動效製作原則···········199
8.5.2 動效製作流程···········199
8.6 實踐案例····················202
8.6.1 圖片詳情頁動效·········202
8.6.2 圖片信息跳轉動效········204