Photoshop CC UI設計案例教程(全彩慕課版)(第2版)
王京晶
相關主題
商品描述
本書全面、系統地介紹UI設計的相關知識點和基本設計技巧,包括初識UI設計、圖標設計、App界面設計、網頁界面設計、軟件界面設計和游戲界面設計等內容。
本書除第1章外,其他章的內容均以知識點講解加課堂案例為主線。知識點講解部分可以使讀者系統地瞭解UI設計的各類規範,課堂案例部分可以使讀者快速掌握UI設計流程並完成案例製作。第2章至第6章的最後還安排課堂練習和課後習題,可以提高讀者在UI設計方面的實際應用能力。
作者簡介
王京晶,北京印刷学院新媒体学院任教17年,主要教学课程视觉表现软件基础、数字媒体软件基础、视听语言、影视广告设计等;组织学生参加中国大学生广告艺术学院奖、北京科普新媒体创新大赛等各种比赛,通过比赛提高学生的实践经验。
目錄大綱
第 1 章 初識UI 設計
1.1 UI 設計的相關概念………………… 2
1.1.1 UI 設計的基本概念… ………… 2
1.1.2 UI 與WUI 和GUI 的關系… … 2
1.1.3 UI 設計常用術語中英文對照… ………………………… 3
1.2 UI 設計的常用軟件………………… 3
1.3 UI 設計的項目流程………………… 4
1.3.1 產品設計流程… ……………… 4
1.3.2 UI 設計流程…………………… 4
1.4 UI 設計的風格表現………………… 5
1.5 UI 設計的行業發展………………… 6
1.5.1 UI 設計行業現狀… …………… 6
1.5.2 UI 設計發展趨勢… …………… 9
1.6 UI 設計的學習方法……………… 10
第 2 章 圖標設計
2.1 圖標的基礎知識… ……………… 13
2.1.1 圖標的概念… ……………… 13
2.1.2 圖標設計的流程… ………… 13
2.1.3 圖標設計的原則… ………… 15
2.2 圖標的設計規範………………… 18
2.2.1 圖標的尺寸及單位… ……… 18
2.2.2 圖標的視覺統一… ………… 21
2.2.3 圖標的清晰度… …………… 21
2.3 圖標的風格類型………………… 22
2.3.1 擬物化風格… ……………… 22
2.3.2 扁平化風格… ……………… 22
2.3.3 3D 風格…………………… 23
2.3.4 2.5D 風格…………………… 23
2.4 課堂案例——繪制扁平化風格的單色面性圖標……………………24
2.5 課堂練習………………………… 29
2.5.1 課堂練習——繪制扁平化風格的不透明色塊面性圖標… … 29
2.5.2 課堂練習——繪制扁平化風格的微漸變面性圖標… ……… 29
2.6 課後習題………………………… 30
2.6.1 課後習題——繪制扁平化風格的光影效果圖標… ………… 30
2.6.2 課後習題——繪制扁平化風格的折紙投影圖標… ………… 30
第3 章 App 界面設計
3.1 App 界面的基礎知識…………… 32
3.1.1 App的概念…………………32
3.1.2 App界面設計的流程………32
3.1.3 App界面設計的原則………34
3.2 App界面的設計規範……………36
3.2.1 iOS系統界面的設計規範…36
3.2.2 Android系統界面的設計規範…………………………41
3.3 App常用的界面類型……………44
3.3.1 閃屏頁………………………44
3.3.2 引導頁………………………46
3.3.3 首頁…………………………47
3.3.4 個人中心頁…………………49
3.3.5 詳情頁………………………50
3.3.6 註冊登錄頁…………………50
3.4 課堂案例——製作暢游旅游App………………………………51
3.4.1 課堂案例——製作暢游旅游App閃屏頁……………51
3.4.2 課堂案例——製作暢游旅游App引導頁……………53
3.4.3 課堂案例——製作暢游旅游App首頁……………………58
3.4.4 課堂案例——製作暢游旅游App個人中心頁……………70
3.4.5 課堂案例——製作暢游旅游App酒店詳情頁……………80
3.4.6 課堂案例——製作暢游旅游App登錄頁…………………103
3.5 課堂練習——製作潮貨電商App………………………………112
3.6 課後習題——製作三餐美食類App………………………113
第4章 網頁界面設計
4.1 網頁界面設計的基礎知識………116
4.1.1 網頁界面設計的概念………116
4.1.2 網頁界面設計的流程………116
4.1.3 網頁界面設計的原則………118
4.2 網頁界面的設計規範……………120
4.2.1 網頁界面設計的尺寸及單位…………………………120
4.2.2 網頁界面設計的界面結構……122
4.2.3 網頁界面設計的佈局………123
4.2.4 網頁界面設計的文字………125
4.2.5 網頁界面設計的圖標………128
4.3 網頁常用的界面類型……………130
4.4 課堂案例——製作東方木品家居電商網站…………………………133
4.4.1 課堂案例——製作東方木品家居電商網站首頁…………133
4.4.2 課堂案例——製作東方木品家居電商網站產品列表頁……157
4.4.3 課堂案例——製作東方木品家居電商網站產品詳情頁……166
4.5 課堂練習——製作一點生活家居電商網站……………………175
4.6 課後習題——製作臻藝裝飾家居電商網站……………………175
第5章 軟件界面設計
5.1 軟件界面設計的基礎知識………178
5.1.1 軟件界面設計的概念………178
5.1.2 軟件界面設計的流程………178
5.1.3 軟件界面設計的原則………180
5.2 軟件界面的設計規範……………181
5.2.1 軟件界面設計的尺寸及單位………………………182
5.2.2 軟件界面設計的界面結構…………………………183
5.2.3 軟件界面設計的佈局………183
5.2.4 軟件界面設計的文字………186
5.2.5 軟件界面設計的圖標………188
5.3 軟件常用的界面類型……………192
5.4 課堂案例——製作天籟音樂播放器軟件界面…………………195
5.4.1 課堂案例——製作天籟音樂播放器軟件首頁……………195
5.4.2 課堂案例——製作天籟音樂播放器軟件歌單頁…………211
5.4.3 課堂案例——製作天籟音樂播放器軟件歌曲列表頁……217
5.5 課堂練習——製作不凡音樂播放器軟件界面…………………225
5.6 課後習題——製作酷聽音樂播放器軟件界面…………………226
第6章 游戲界面設計
6.1 游戲界面設計的基礎知識………228
6.1.1 游戲界面設計的概念………228
6.1.2 游戲界面設計的流程………228
6.1.3 游戲界面設計的原則………230
6.2 游戲界面的設計規範……………232
6.2.1 游戲界面設計的尺寸及單位…………………………232
6.2.2 游戲界面設計的界面結構…232
6.2.3 游戲界面設計的類型和佈局…………………………232
6.2.4 游戲界面設計的文字………236
6.2.5 游戲界面設計的圖標………236
6.3 課堂案例——製作果蔬消消消游戲界面…………………………237
6.4 課堂練習——製作糖果消消樂游戲界面…………………………247
6.5 課後習題——製作開心連連看游戲界面…………………………247