UI創(chuàng)意設(shè)計(jì)（活頁(yè)式）

理論與實(shí)踐相結(jié)合，通過(guò)實(shí)際項(xiàng)目突出應(yīng)用

融合課程思政元素，突出立德樹(shù)人根本任務(wù)

配套豐富教學(xué)資源，方便師生線(xiàn)上線(xiàn)下使用

隨著5G信息技術(shù)的飛速發(fā)展，特別是人工智能技術(shù)已深入人們工作生活的各個(gè)領(lǐng)域，人們面對(duì)的智能終端設(shè)備越來(lái)越多。為了更快速而準(zhǔn)確地使用這些智能設(shè)備，UI設(shè)計(jì)成為提升用戶(hù)對(duì)智能設(shè)備直觀體驗(yàn)的決定因素，界面的美觀度、規(guī)范化、交互性直接決定了這款智能產(chǎn)品在用戶(hù)心中的形象。

本書(shū)采用活頁(yè)式裝訂+項(xiàng)目案例編寫(xiě)模式，針對(duì)目前的智能手機(jī)AUI設(shè)計(jì)、網(wǎng)站W(wǎng)UI設(shè)計(jì)及智能穿戴設(shè)備、智能家居、公共場(chǎng)所智能終端等其他智能終端設(shè)備GUI設(shè)計(jì)所涉及的相關(guān)知識(shí)和技術(shù)技能逐一進(jìn)行知識(shí)講解和案例制作過(guò)程的演示，讓讀者深刻理解UI相關(guān)知識(shí)并熟練掌握各種圖標(biāo)、控件和界面的制作技術(shù)。

本書(shū)編寫(xiě)特點(diǎn)如下：

（1）在內(nèi)容選取上，本書(shū)分為基礎(chǔ)設(shè)計(jì)和創(chuàng)意設(shè)計(jì)兩大部分，基礎(chǔ)設(shè)計(jì)包括UI設(shè)計(jì)、圖標(biāo)設(shè)計(jì)和控件設(shè)計(jì)；創(chuàng)意設(shè)計(jì)從不同平臺(tái)的終端設(shè)備入手，分別介紹AUI設(shè)計(jì)、WUI設(shè)計(jì)和GUI設(shè)計(jì)的多個(gè)典型案例的制作技術(shù)和詳細(xì)制作步驟。

（2）在編寫(xiě)體例上，本書(shū)按照活頁(yè)式裝訂+項(xiàng)目案例編寫(xiě)模式，結(jié)合UI設(shè)計(jì)的工作過(guò)程和工作技能展開(kāi)，每個(gè)任務(wù)或案例都是獨(dú)立的，可以單獨(dú)成課，符合活頁(yè)式的編排。

（3）在課程思政上，本書(shū)以“立德樹(shù)人”為根本任務(wù)，在每個(gè)項(xiàng)目的教學(xué)中都融入了課程思政元素，各案例在職業(yè)道德、美育教育、工匠精神、文化自信和行為習(xí)慣上都有所體現(xiàn)。

本書(shū)共兩個(gè)單元：?jiǎn)卧? UI基礎(chǔ)設(shè)計(jì)，主要介紹UI設(shè)計(jì)的相關(guān)知識(shí)、圖標(biāo)的設(shè)計(jì)與制作和UI控件的設(shè)計(jì)與制作；單元2 UI創(chuàng)意設(shè)計(jì)，主要介紹手機(jī)端AUI設(shè)計(jì)、PC端WUI設(shè)計(jì)和其他智能終端設(shè)備的GUI設(shè)計(jì)，共14個(gè)相關(guān)知識(shí)點(diǎn)和50個(gè)案例制作。

本書(shū)的教學(xué)時(shí)數(shù)為64課時(shí)，各單元的參考教學(xué)課時(shí)見(jiàn)下表。

單元 項(xiàng)目 教學(xué)內(nèi)容 課時(shí)分配

理論教學(xué) 實(shí)踐訓(xùn)練

單元1 UI基礎(chǔ)設(shè)計(jì)

項(xiàng)目1 初識(shí)UI設(shè)計(jì)

何謂UI設(shè)計(jì) 4

UI設(shè)計(jì)流程

UI設(shè)計(jì)原則

UI設(shè)計(jì)風(fēng)格

UI設(shè)計(jì)色彩

UI設(shè)計(jì)字體

UI常用工具

項(xiàng)目2 設(shè)計(jì)制作圖標(biāo)

認(rèn)識(shí)圖標(biāo) 2

制作便簽圖標(biāo) 2

制作天氣圖標(biāo) 2

制作鬧鐘圖標(biāo) 2

制作下載圖標(biāo) 2

制作郵箱圖標(biāo) 2

項(xiàng)目3 設(shè)計(jì)制作UI控件

認(rèn)識(shí)UI控件 2

繪制簡(jiǎn)潔音樂(lè)進(jìn)度條 1

繪制質(zhì)感下載進(jìn)度條 1

繪制扁平按鈕 1

繪制質(zhì)感按鈕 1

單元2 UI創(chuàng)意設(shè)計(jì)

項(xiàng)目1 AUI設(shè)計(jì)

認(rèn)識(shí)AUI設(shè)計(jì) 2

手機(jī)鎖屏界面設(shè)計(jì) 2

手機(jī)主題界面設(shè)計(jì) 2

手機(jī)鬧鐘設(shè)置界面設(shè)計(jì) 2

手機(jī)天氣界面設(shè)計(jì) 2

手機(jī)音樂(lè)APP首頁(yè)設(shè)計(jì) 2

手機(jī)音樂(lè)APP播放頁(yè)設(shè)計(jì) 2

項(xiàng)目2 WUI設(shè)計(jì)

認(rèn)識(shí)WUI設(shè)計(jì) 2

Edge瀏覽器圖標(biāo)設(shè)計(jì) 2

網(wǎng)站Logo設(shè)計(jì) 2

網(wǎng)頁(yè)按鈕設(shè)計(jì) 2

網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì) 2

網(wǎng)站Banner設(shè)計(jì) 2

網(wǎng)站首頁(yè)設(shè)計(jì) 2

項(xiàng)目3 GUI設(shè)計(jì)

認(rèn)識(shí)GUI設(shè)計(jì) 2

行車(chē)記錄儀UI設(shè)計(jì) 2

圖書(shū)館自助機(jī)UI設(shè)計(jì) 2

iPad點(diǎn)餐UI設(shè)計(jì) 2

跑步機(jī)UI設(shè)計(jì) 2

VR眼鏡UI設(shè)計(jì) 2

交通違法自助受理機(jī)UI設(shè)計(jì) 2

課時(shí)總計(jì) 14 50

本書(shū)是“影視動(dòng)畫(huà)”國(guó)家職業(yè)教育教學(xué)資源庫(kù)的子項(xiàng)目“UI創(chuàng)意設(shè)計(jì)”的配套教材，在“智慧職教”網(wǎng)站上有配套資源及配套課程。

本書(shū)由趙艷莉任主編，各參編人員分工如下：?jiǎn)卧?項(xiàng)目1和其他每個(gè)項(xiàng)目的任務(wù)1由趙艷莉編寫(xiě)，單元1項(xiàng)目2和項(xiàng)目3的所有案例由范亞飛編寫(xiě)，單元2項(xiàng)目1的所有案例由盧琦編寫(xiě)，單元2項(xiàng)目2的所有案例由張嵐嵐編寫(xiě)，單元2項(xiàng)目3的所有案例由鄭雅文編寫(xiě)。趙艷莉負(fù)責(zé)本書(shū)進(jìn)行了框架設(shè)計(jì)、版式設(shè)計(jì)、統(tǒng)稿和資源整理工作。

本書(shū)配備有教學(xué)資源包，包括微課、動(dòng)畫(huà)、素材、效果圖、課件及習(xí)題等，讀者既可登錄“智慧職教”網(wǎng)站進(jìn)行免費(fèi)下載和課程在線(xiàn)學(xué)習(xí)（鏈接地址：https://www.icve.com.cn/portal/courseinfo?courseid=pvpvanass7dff0dqqf1gsw），也可通過(guò)掃描書(shū)中二維碼進(jìn)行自主學(xué)習(xí)。

由于編者水平有限，書(shū)中難免存在不妥甚至錯(cuò)誤之處，懇請(qǐng)讀者批評(píng)指正。

編 者

2021年11月

單元１　UI基礎(chǔ)設(shè)計(jì)
項(xiàng)目1　初識(shí)UI設(shè)計(jì) 2
任務(wù)1　何謂UI設(shè)計(jì) 2
任務(wù)2　UI設(shè)計(jì)流程 8
任務(wù)3　UI設(shè)計(jì)原則 11
任務(wù)4　UI設(shè)計(jì)風(fēng)格 13
任務(wù)5　UI設(shè)計(jì)色彩 16
任務(wù)6　UI設(shè)計(jì)字體 23
任務(wù)7　UI常用工具 26
項(xiàng)目2　設(shè)計(jì)制作圖標(biāo) 30
任務(wù)1　認(rèn)識(shí)圖標(biāo) 30
任務(wù)2　制作便簽圖標(biāo) 40
步驟一　繪制圖標(biāo)背景 41
步驟二　繪制“筆”造型 42
步驟三　繪制“文字”造型 43
任務(wù)3　制作天氣圖標(biāo) 45
步驟一　繪制圖標(biāo)背景 46
步驟二　繪制云朵造型 47
步驟三　繪制字母C造型 48
步驟四　繪制太陽(yáng)造型 50
任務(wù)4　制作鬧鐘圖標(biāo) 52
步驟一　繪制圖標(biāo)背景 52
步驟二　繪制熊貓頭像 53
步驟三　繪制刻度 54
步驟四　繪制指針 56
任務(wù)5　制作下載圖標(biāo) 59
步驟一　繪制圖標(biāo)背景 60
步驟二　繪制圓形造型 60
步驟三　繪制下載圖形 63
任務(wù)6　制作郵箱圖標(biāo) 66
步驟一　繪制圖標(biāo)背景 67
步驟二　繪制郵件圖形 68
項(xiàng)目3　設(shè)計(jì)制作UI控件 71
任務(wù)1　認(rèn)識(shí)UI控件 71
任務(wù)2　繪制簡(jiǎn)潔音樂(lè)進(jìn)度條 78
步驟一　繪制背景圖像 78
步驟二　添加素材效果 79
步驟三　繪制進(jìn)度條 79
任務(wù)3　繪制質(zhì)感下載進(jìn)度條 82
步驟一　繪制背景圖像 82
步驟二　添加圖文效果 83
步驟三　繪制質(zhì)感進(jìn)度條 84
任務(wù)4　繪制扁平按鈕 87
步驟一　繪制背景圖像 88
步驟二　添加基本文字 88
步驟三　繪制扁平按鈕 90
任務(wù)5　繪制質(zhì)感按鈕 93
步驟一　繪制背景圖像 93
步驟二　添加文字效果 94
步驟三　繪制質(zhì)感按鈕 95
單元2　UI創(chuàng)意設(shè)計(jì)
項(xiàng)目1　AUI設(shè)計(jì) 101
任務(wù)1　認(rèn)識(shí)AUI設(shè)計(jì) 101
任務(wù)2　手機(jī)鎖屏界面設(shè)計(jì) 110
步驟一　繪制背景 111
步驟二　繪制時(shí)間信息及解鎖鍵 112
步驟三　繪制界面主體圖案 112
任務(wù)3　手機(jī)主題界面設(shè)計(jì) 115
步驟一　繪制背景圖案及手機(jī)頂部區(qū)域 116
步驟二　繪制時(shí)間、天氣區(qū)域 117
步驟三　添加界面圖標(biāo)及文字 118
任務(wù)4　手機(jī)鬧鐘設(shè)置界面設(shè)計(jì) 120
步驟一　繪制背景及手機(jī)頂部區(qū)域 121
步驟二　繪制鬧鐘設(shè)置區(qū) 122
步驟三　繪制底部菜單欄 123
任務(wù)5　手機(jī)天氣界面設(shè)計(jì) 125
步驟一　繪制背景及手機(jī)頂部區(qū)域 126
步驟二　繪制當(dāng)日天氣狀況 127
步驟三　繪制一周天氣狀況 128
任務(wù)6　手機(jī)音樂(lè)APP首頁(yè)設(shè)計(jì) 130
步驟一　繪制手機(jī)頂部區(qū)域 131
步驟二　繪制封面推薦區(qū)域 132
步驟三　繪制推薦歌單區(qū)域 133
步驟四　繪制底部菜單欄 135
任務(wù)7　手機(jī)音樂(lè)APP播放頁(yè)設(shè)計(jì) 136
步驟一　繪制背景及手機(jī)頂部區(qū)域 137
步驟二　繪制歌曲信息部分 138
步驟三　繪制播放進(jìn)度條 139
步驟四　添加播放按鈕組件 140
項(xiàng)目2　WUI設(shè)計(jì) 142
任務(wù)1　認(rèn)識(shí)WUI設(shè)計(jì) 142
任務(wù)2　Edge瀏覽器圖標(biāo)設(shè)計(jì) 160
步驟一　繪制圖標(biāo)背景 161
步驟二　繪制六個(gè)不規(guī)則橢圓 161
步驟三　添加圖標(biāo)效果 162
任務(wù)3　網(wǎng)站Logo設(shè)計(jì) 164
步驟一　繪制背景 165
步驟二　繪制草芯 166
步驟三　繪制四片葉 166
步驟四　添加文字信息 167
任務(wù)4　網(wǎng)頁(yè)按鈕設(shè)計(jì) 168
步驟一　創(chuàng)建背景 169
步驟二　繪制綠色水晶按鈕 170
步驟三　繪制其他水晶按鈕 171
任務(wù)5　網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì) 172
步驟一　創(chuàng)建畫(huà)布確定網(wǎng)頁(yè)寬度 173
步驟二　繪制導(dǎo)航背景 173
步驟三　添加導(dǎo)航信息 174
步驟四　繪制搜索欄 175
步驟五　繪制導(dǎo)航水平線(xiàn) 176
任務(wù)6　網(wǎng)站Banner設(shè)計(jì) 177
步驟一　創(chuàng)建畫(huà)布確定Banner寬度 177
步驟二　置入Banner元素 178
步驟三　繪制動(dòng)畫(huà) 178
任務(wù)7　網(wǎng)站首頁(yè)設(shè)計(jì) 182
步驟一　創(chuàng)建畫(huà)布確定網(wǎng)頁(yè)寬度 183
步驟二　添加Logo和導(dǎo)航條 183
步驟三　繪制頁(yè)面背景 184
步驟四　添加圖片元素 185
步驟五　添加按鈕 185
步驟六　添加文字信息 186
項(xiàng)目3　GUI設(shè)計(jì) 189
任務(wù)1　認(rèn)識(shí)GUI設(shè)計(jì) 189
任務(wù)2　行車(chē)記錄儀UI設(shè)計(jì) 193
步驟一　繪制界面背景 193
步驟二　繪制圖標(biāo)背景 194
步驟三　導(dǎo)入圖標(biāo) 195
步驟四　添加文字信息 196
任務(wù)3　圖書(shū)館自助機(jī)UI設(shè)計(jì) 198
步驟一　繪制界面背景 198
步驟二　添加文字信息 199
步驟三　繪制天氣模塊 200
步驟四　繪制功能模塊 202
任務(wù)4　iPad點(diǎn)餐UI設(shè)計(jì) 204
步驟一　繪制界面背景 205
步驟二　繪制水平時(shí)間欄 205
步驟三　繪制側(cè)面導(dǎo)航欄 206
步驟四　繪制內(nèi)容欄 209
任務(wù)5　跑步機(jī)UI設(shè)計(jì) 214
步驟一　繪制界面背景 214
步驟二　繪制宮格功能模塊 215
步驟三　繪制圖標(biāo)并添加文字 216
任務(wù)6　VR眼鏡UI設(shè)計(jì) 219
步驟一　繪制界面背景 220
步驟二　制作內(nèi)容區(qū)域 222
步驟三　繪制功能按鈕 224
任務(wù)7　交通違法自助受理機(jī)UI設(shè)計(jì) 227
步驟一　繪制界面背景 228
步驟二　繪制上邊框和下邊框 229
步驟三　繪制按鈕 231
步驟四　添加文字信息 233

1. 零基礎(chǔ)玩轉(zhuǎn)國(guó)產(chǎn)大模型DeepSeek [徐永冰 張帥 編著]
2. 網(wǎng)絡(luò)工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
3. 信息系統(tǒng)項(xiàng)目管理師考試32小時(shí)通關(guān)（適用第4版考綱） [薛大龍]
4. 信息系統(tǒng)管理工程師考試32小時(shí)通關(guān)（適配第2版考綱） [薛大龍　劉偉]
5. 土木工程材料檢測(cè)實(shí)訓(xùn) [洪曉江 達(dá)則曉麗 錢(qián)波]
6. 科技信息檢索與論文寫(xiě)作實(shí)用教程 [李振華]
7. 傳統(tǒng)山水畫(huà)論解讀與實(shí)踐 [陳鈉 著]
8. Python數(shù)據(jù)庫(kù)編程 [主編 殷樹(shù)友 邢 翀]
9. 計(jì)算機(jī)基礎(chǔ)實(shí)訓(xùn)指導(dǎo) [主編 袁春萍 朱妮]
10. 嵌入式人工智能技術(shù)應(yīng)用（數(shù)字教材） [主編 胡娜 楊國(guó)勇 晏廷榮]
11. Vienna整流器技術(shù) [桂存兵 著]
12. 變頻器與伺服應(yīng)用 [陳剛 葉云飛]
13. 物聯(lián)網(wǎng)工程設(shè)計(jì)與實(shí)踐 [湯琳 李敏]
14. 爐邊夜話(huà)——深入淺出話(huà)AI [汪建　著]
15. 電商運(yùn)營(yíng)與管理 [鐘肖英 陳瀟]
16. Java面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 姜春磊 陳虹潔]
17. 信息技術(shù)基礎(chǔ)（Windows 10+WPS Office）（微課版） [主編　石利平　田輝平　謝盛嘉]
18. 人工智能應(yīng)用 [主編　陳　萍　劉培培　陳孟軍]
19. 大學(xué)生職業(yè)發(fā)展與就業(yè)指導(dǎo) [主編　劉志堅(jiān)]
20. 高級(jí)辦公應(yīng)用項(xiàng)目教程 [主編 屈晶 趙成麗]
21. 微信小程序開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版） [主編 黃龍泉 郭峰 朱倩]
22. 企業(yè)檔案工作實(shí)戰(zhàn)寶典百問(wèn)百答 [華俊 盧秀英 邵甜甜 著]
23. 計(jì)算機(jī)網(wǎng)絡(luò)原理及應(yīng)用 [主編 唐繼勇 葉坤 孫夢(mèng)娜]
24. 大學(xué)生創(chuàng)業(yè)基礎(chǔ) [主編 王麗莉 王 楊]
25. 船舶輔機(jī) [主編 王連海 于洋 姜淑翠]
26. 大學(xué)生就業(yè)指導(dǎo) [主編 王麗莉 董宴廷]
27. 系統(tǒng)架構(gòu)設(shè)計(jì)師章節(jié)習(xí)題與考點(diǎn)特訓(xùn) [主編 薛大龍 鄒月平]
28. 高校學(xué)生工作探索與實(shí)踐 [郭亮 著]
29. 大學(xué)生情商管理 [方雄 著]
30. 2023年長(zhǎng)沙市會(huì)展業(yè)發(fā)展報(bào)告 [主編 周棟良]