理論與實踐相結合，通過實際項目突出應用

融合課程思政元素，突出立德樹人根本任務

配套豐富教學資源，方便師生線上線下使用

隨著5G信息技術的飛速發展，特別是人工智能技術已深入人們工作生活的各個領域，人們面對的智能終端設備越來越多。為了更快速而準確地使用這些智能設備，UI設計成為提升用戶對智能設備直觀體驗的決定因素，界面的美觀度、規范化、交互性直接決定了這款智能產品在用戶心中的形象。

本書采用活頁式裝訂+項目案例編寫模式，針對目前的智能手機AUI設計、網站WUI設計及智能穿戴設備、智能家居、公共場所智能終端等其他智能終端設備GUI設計所涉及的相關知識和技術技能逐一進行知識講解和案例制作過程的演示，讓讀者深刻理解UI相關知識并熟練掌握各種圖標、控件和界面的制作技術。

本書編寫特點如下：

（1）在內容選取上，本書分為基礎設計和創意設計兩大部分，基礎設計包括UI設計、圖標設計和控件設計；創意設計從不同平臺的終端設備入手，分別介紹AUI設計、WUI設計和GUI設計的多個典型案例的制作技術和詳細制作步驟。

（2）在編寫體例上，本書按照活頁式裝訂+項目案例編寫模式，結合UI設計的工作過程和工作技能展開，每個任務或案例都是獨立的，可以單獨成課，符合活頁式的編排。

（3）在課程思政上，本書以“立德樹人”為根本任務，在每個項目的教學中都融入了課程思政元素，各案例在職業道德、美育教育、工匠精神、文化自信和行為習慣上都有所體現。

本書共兩個單元：單元1 UI基礎設計，主要介紹UI設計的相關知識、圖標的設計與制作和UI控件的設計與制作；單元2 UI創意設計，主要介紹手機端AUI設計、PC端WUI設計和其他智能終端設備的GUI設計，共14個相關知識點和50個案例制作。

本書的教學時數為64課時，各單元的參考教學課時見下表。

單元 項目 教學內容 課時分配

理論教學 實踐訓練

單元1 UI基礎設計

項目1 初識UI設計

何謂UI設計 4

UI設計流程

UI設計原則

UI設計風格

UI設計色彩

UI設計字體

UI常用工具

項目2 設計制作圖標

認識圖標 2

制作便簽圖標 2

制作天氣圖標 2

制作鬧鐘圖標 2

制作下載圖標 2

制作郵箱圖標 2

項目3 設計制作UI控件

認識UI控件 2

繪制簡潔音樂進度條 1

繪制質感下載進度條 1

繪制扁平按鈕 1

繪制質感按鈕 1

單元2 UI創意設計

項目1 AUI設計

認識AUI設計 2

手機鎖屏界面設計 2

手機主題界面設計 2

手機鬧鐘設置界面設計 2

手機天氣界面設計 2

手機音樂APP首頁設計 2

手機音樂APP播放頁設計 2

項目2 WUI設計

認識WUI設計 2

Edge瀏覽器圖標設計 2

網站Logo設計 2

網頁按鈕設計 2

網頁導航設計 2

網站Banner設計 2

網站首頁設計 2

項目3 GUI設計

認識GUI設計 2

行車記錄儀UI設計 2

圖書館自助機UI設計 2

iPad點餐UI設計 2

跑步機UI設計 2

VR眼鏡UI設計 2

交通違法自助受理機UI設計 2

課時總計 14 50

本書是“影視動畫”國家職業教育教學資源庫的子項目“UI創意設計”的配套教材，在“智慧職教”網站上有配套資源及配套課程。

本書由趙艷莉任主編，各參編人員分工如下：單元1項目1和其他每個項目的任務1由趙艷莉編寫，單元1項目2和項目3的所有案例由范亞飛編寫，單元2項目1的所有案例由盧琦編寫，單元2項目2的所有案例由張嵐嵐編寫，單元2項目3的所有案例由鄭雅文編寫。趙艷莉負責本書進行了框架設計、版式設計、統稿和資源整理工作。

本書配備有教學資源包，包括微課、動畫、素材、效果圖、課件及習題等，讀者既可登錄“智慧職教”網站進行免費下載和課程在線學習（鏈接地址：https://www.icve.com.cn/portal/courseinfo?courseid=pvpvanass7dff0dqqf1gsw），也可通過掃描書中二維碼進行自主學習。

由于編者水平有限，書中難免存在不妥甚至錯誤之處，懇請讀者批評指正。

編 者

2021年11月

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

1. 輸水管線工程風險管理 [張勇 黨亥生 著]
2. 民用航空飛機標準線路施工 [主編　王志敏　陳明]
3. 不息的水脈—大運河講談錄 [趙珩　著]
4. 實用運籌學 [主編　邢育紅　于晉臣]
5. 三峽梯級電站水資源決策支持系統研究與開發 [姚華明 潘紅忠 湯正]
6. 海南黎族民俗文化鑒賞 [龐國華　著]
7. 石墨烯在太赫茲及中紅外頻段電磁器件設計中的應用 [李艷秀 莊華偉 著]
8. 電子技術（第二版） [主編 覃愛娜 李飛]
9. 辦公自動化高級應用 [陳萍 朱曉玉]
10. 信息處理技術員考試32小時通關 [薛大龍]
11. 電子產品設計案例教程（微課版）—基于嘉立創EDA（專業版） [王靜 莫志宏 陳學昌 丁紅]
12. C程序設計實踐教程 [劉衛國]
13. C程序設計（慕課版） [劉衛國]
14. Web技術開發教程（基于.NET開源MVC框架） [王合闖 韓紅玲 王青正 陳海蕊]
15. 商務英語翻譯教程（筆譯）（第四版） [主編 王軍平]
16. 智慧零售技術與應用 [洪旭 著]
17. 建設工程法規實務 [主編 余瀅]
18. 商務秘書理論與實務（第三版） [主編 張同欽]
19. 程序設計基礎實踐教程（C/C++語言版） [張桂芬 葛麗娜]
20. C++案例項目精講 [主編 楊國興]
21. 勞動爭議處理實務 [主編 王秀卿 羅靜]
22. 工程數學 [主編 郭立娟 王海]
23. 語音識別理論與實踐 [主編　莫宏偉]
24. 信息系統項目管理師章節習題與考點特訓（第二版） [主編 薛大龍]
25. 武術基礎教程 [主編 李代勇 謝志民]
26. 計算機網絡實訓教程 [主編 張浩軍 趙玉娟]
27. 畫法幾何與機械制圖習題集（多學時） [主編 趙軍]
28. HCIA-Datacom認證題庫分類精講 [主 編 韓立剛]
29. SwiftUI完全開發 [李智威 著]
30. 網絡規劃設計師備考一本通 [夏杰 編著]