本書使用項(xiàng)目教學(xué)的方式進(jìn)行編寫，以智能手機(jī)UI界面為主要設(shè)計(jì)對(duì)象，以用戶體驗(yàn)情感為中心，結(jié)合設(shè)計(jì)關(guān)鍵要素進(jìn)行UI設(shè)計(jì)教學(xué)。通過本書的學(xué)習(xí)，讀者可掌握移動(dòng)終端UI界面設(shè)計(jì)方法，滿足UI設(shè)計(jì)師的崗位需求，是一本理論與實(shí)踐緊密結(jié)合的教材。

本書的教與學(xué)采用“學(xué)中做、做中學(xué)”“任務(wù)驅(qū)動(dòng)”和“行動(dòng)導(dǎo)向”的方式，由淺入深、循序漸進(jìn)地來完成，在完成項(xiàng)目任務(wù)的同時(shí)，實(shí)現(xiàn)對(duì)知識(shí)和技能的掌握，體現(xiàn)真實(shí)的工作過程，培養(yǎng)學(xué)生在實(shí)際工作中的動(dòng)手能力。

在當(dāng)今數(shù)字信息時(shí)代，移動(dòng)終端設(shè)備以其便攜性的特點(diǎn)發(fā)展迅猛，新產(chǎn)品不斷推出，更新速度較快，保有量也不斷增加，移動(dòng)終端包括手機(jī)、平板電腦、車載導(dǎo)航等相關(guān)移動(dòng)設(shè)備。而移動(dòng)終端的界面則是用戶使用移動(dòng)終端設(shè)備的第一平臺(tái)，越來越受到用戶和開發(fā)人員的重視，一套風(fēng)格統(tǒng)一、有親和力的界面系統(tǒng)往往能激發(fā)用戶使用的欲望，獲得滿足感、尊重感和歸屬感。本書的編寫以用戶體驗(yàn)情感為中心，結(jié)合設(shè)計(jì)關(guān)鍵要素進(jìn)行UI設(shè)計(jì)教學(xué)，使學(xué)生通過學(xué)習(xí)掌握移動(dòng)終端UI界面設(shè)計(jì)方法，滿足UI設(shè)計(jì)師的崗位需求，是一本理論與實(shí)踐緊密結(jié)合的教材。

本書采用項(xiàng)目教學(xué)方式進(jìn)行編寫，以智能手機(jī)UI界面為主要設(shè)計(jì)對(duì)象。編寫理念新穎，內(nèi)容選取合理，組織得當(dāng)，體現(xiàn)實(shí)用性。全書共由七個(gè)單元構(gòu)成，以項(xiàng)目為學(xué)習(xí)單元，每個(gè)單元又包含一到三個(gè)任務(wù)，涉及了移動(dòng)終端的常用UI設(shè)計(jì)任務(wù)，具有典型性特征。每個(gè)單元中都有相關(guān)知識(shí)講解和任務(wù)實(shí)施的步驟，并配合相應(yīng)任務(wù)的進(jìn)度，以實(shí)踐案例的形式拓展學(xué)生的設(shè)計(jì)思維。每個(gè)單元后又配合相應(yīng)類型的項(xiàng)目實(shí)訓(xùn)作為習(xí)題，供學(xué)生進(jìn)行實(shí)踐練習(xí)。

本書采用Photoshop作為UI界面的設(shè)計(jì)工具，從藝術(shù)角度和實(shí)用角度出發(fā)，專注于界面的視覺效果及風(fēng)格體現(xiàn)，可較為快捷和形象地將界面的視覺效果呈現(xiàn)出來，更好地與該專業(yè)其他課程進(jìn)行銜接。

本書的教與學(xué)采用“學(xué)中做、做中學(xué)”“任務(wù)驅(qū)動(dòng)”和“行動(dòng)導(dǎo)向”的方式，由淺入深、循序漸進(jìn)地來完成，使學(xué)生在完成項(xiàng)目任務(wù)的同時(shí)，逐步掌握UI界面的設(shè)計(jì)方法和設(shè)計(jì)要求。最終實(shí)現(xiàn)對(duì)知識(shí)和技能的掌握，體現(xiàn)真實(shí)的工作過程，培養(yǎng)學(xué)生在實(shí)際工作中的動(dòng)手能力。

本書由天津電子信息職業(yè)技術(shù)學(xué)院的沈強(qiáng)老師擔(dān)任主編，組織全書的編寫，并負(fù)責(zé)全書的統(tǒng)稿；由天津電子信息職業(yè)技術(shù)學(xué)院的孫新奎老師和王佳老師擔(dān)任副主編。本書中單元1、單元4和單元7由沈強(qiáng)老師負(fù)責(zé)編寫，單元2和單元3由王佳老師負(fù)責(zé)編寫，單元5和單元6由孫新奎老師負(fù)責(zé)編寫。本書可作為高職高專移動(dòng)互聯(lián)應(yīng)用技術(shù)專業(yè)和藝術(shù)設(shè)計(jì)相關(guān)專業(yè)的教學(xué)用書，也可作為UI設(shè)計(jì)人員的入門用書。

由于時(shí)間倉(cāng)促，且作者水平有限，書中疏漏和錯(cuò)誤之處在所難免，敬請(qǐng)讀者批評(píng)指正，如對(duì)本書有疑問，請(qǐng)發(fā)郵件（[email protected]）聯(lián)系詢問。

序
前言

單元1 移動(dòng)終端圖標(biāo)界面設(shè)計(jì) 1
引例描述 1
1.1 相關(guān)知識(shí)與技能 1
1.1.1 界面圖標(biāo)設(shè)計(jì)要點(diǎn) 1
1.1.2 擬物化界面設(shè)計(jì) 3
1.1.3 扁平化界面設(shè)計(jì) 3
1.2 任務(wù)一：圖標(biāo)界面背景和布局設(shè)計(jì) 6
1.2.1 任務(wù)陳述—木質(zhì)界面背景和
布局設(shè)計(jì) 6
1.2.2 任務(wù)實(shí)施 7
1.2.3 任務(wù)拓展—牛仔布效果界面背景
和布局設(shè)計(jì) 15
1.3 任務(wù)二：圖標(biāo)造型效果設(shè)計(jì) 20
1.3.1 任務(wù)陳述—金屬質(zhì)感圖標(biāo)造型
效果設(shè)計(jì) 20
1.3.2 任務(wù)實(shí)施 21
1.3.3 任務(wù)拓展—皮革質(zhì)感圖標(biāo)造型
效果設(shè)計(jì) 27
1.4 任務(wù)三：圖標(biāo)圖形設(shè)計(jì) 32
1.4.1 任務(wù)陳述—擬物化圖標(biāo)圖形設(shè)計(jì) 32
1.4.2 任務(wù)實(shí)施 33
1.4.3 任務(wù)拓展—簡(jiǎn)約圖標(biāo)圖形設(shè)計(jì) 49
1.5 項(xiàng)目實(shí)訓(xùn) 53
單元2 移動(dòng)終端鎖屏界面設(shè)計(jì) 54
引例描述 54
2.1 相關(guān)知識(shí)與技能 54
2.1.1 解鎖開關(guān)界面作品分析 54
2.1.2 時(shí)鐘與日期圖標(biāo)設(shè)計(jì) 56
2.1.3 天氣預(yù)報(bào)圖標(biāo)設(shè)計(jì)的要點(diǎn) 57
2.2 任務(wù)一：解鎖開關(guān)界面設(shè)計(jì) 58
2.2.1 任務(wù)陳述—迷宮解鎖開關(guān)
界面設(shè)計(jì) 58
2.2.2 任務(wù)實(shí)施 59
2.2.3 任務(wù)拓展—撕紙效果解鎖開關(guān)
界面設(shè)計(jì) 70
2.3 任務(wù)二：時(shí)鐘解鎖界面設(shè)計(jì) 76
2.3.1 任務(wù)陳述—指針時(shí)鐘解鎖
界面設(shè)計(jì) 76
2.3.2 任務(wù)實(shí)施 77
2.3.3 任務(wù)拓展—數(shù)字時(shí)鐘界面設(shè)計(jì) 90
2.4 任務(wù)三：天氣預(yù)報(bào)圖標(biāo)設(shè)計(jì) 95
2.4.1 任務(wù)陳述—具象天氣預(yù)報(bào)
圖標(biāo)設(shè)計(jì) 95
2.4.2 任務(wù)實(shí)施 96
2.4.3 任務(wù)拓展—抽象簡(jiǎn)約風(fēng)格天氣
預(yù)報(bào)圖標(biāo)設(shè)計(jì) 104
2.5 項(xiàng)目實(shí)訓(xùn) 107
單元3 手機(jī)通話界面設(shè)計(jì) 108
引例描述 108
3.1 相關(guān)知識(shí)與技能 108
3.1.1 撥號(hào)界面設(shè)計(jì)作品分析 108
3.1.2 通話記錄界面的要點(diǎn) 110
3.1.3 電話簿界面的要點(diǎn) 111
3.2 任務(wù)：手機(jī)通話界面設(shè)計(jì) 112
3.2.1 任務(wù)陳述—懷舊風(fēng)格手機(jī)通話
界面設(shè)計(jì) 112
3.2.2 任務(wù)實(shí)施 113
3.2.3 任務(wù)拓展—透明效果手機(jī)撥號(hào)
界面設(shè)計(jì) 139
3.3 項(xiàng)目實(shí)訓(xùn) 154
單元4 移動(dòng)終端影音媒體界面設(shè)計(jì) 156
引例描述 156
4.1 相關(guān)知識(shí)與技能 156
4.1.1 界面細(xì)節(jié)帶給用戶的心理感受 156
4.1.2 制作金屬質(zhì)感按鈕 159
4.1.3 制作金屬質(zhì)感旋鈕 162
4.2 任務(wù)一：視頻媒體播放器界面設(shè)計(jì) 168
4.2.1 任務(wù)陳述—清新風(fēng)格視頻播放器
界面設(shè)計(jì) 168
4.2.2 任務(wù)實(shí)施 169
4.2.3 任務(wù)拓展—橙色視頻播放器
界面設(shè)計(jì) 181
4.3 任務(wù)二：音頻媒體播放器界面設(shè)計(jì) 185
4.3.1 任務(wù)陳述—流線型音頻媒體
播放器界面設(shè)計(jì) 185
4.3.2 任務(wù)實(shí)施 186
4.3.3 任務(wù)拓展—酷黑音頻播放器
界面設(shè)計(jì) 193
4.4 任務(wù)三：收音機(jī)播放器界面設(shè)計(jì) 201
4.4.1 任務(wù)陳述—旋鈕型收音機(jī)播放器
界面設(shè)計(jì) 201
4.4.2 任務(wù)實(shí)施 202
4.4.3 任務(wù)拓展—滑動(dòng)型收音機(jī)播放器
界面設(shè)計(jì) 216
4.5 項(xiàng)目實(shí)訓(xùn) 224
單元5 移動(dòng)終端游戲界面設(shè)計(jì) 226
引例描述 226
5.1 相關(guān)知識(shí)與技能 226
5.1.1 游戲界面娛樂氛圍的營(yíng)造方法 226
5.1.2 游戲界面字體設(shè)計(jì)的要領(lǐng) 228
5.1.3 游戲界面發(fā)光字體設(shè)計(jì)與制作 230
5.2 任務(wù)一：游戲圖標(biāo)設(shè)計(jì) 235
5.2.1 任務(wù)陳述—手機(jī)桌球游戲
圖標(biāo)設(shè)計(jì) 235
5.2.2 任務(wù)實(shí)施 236
5.2.3 任務(wù)拓展—手機(jī)五子棋游戲
圖標(biāo)設(shè)計(jì) 243
5.3 任務(wù)二：游戲登錄界面設(shè)計(jì) 248
5.3.1 任務(wù)陳述—手機(jī)桌球游戲登錄
界面設(shè)計(jì) 248
5.3.2 任務(wù)實(shí)施 249
5.3.3 任務(wù)拓展—手機(jī)五子棋游戲登錄
界面設(shè)計(jì) 253
5.4 任務(wù)三：游戲操作界面設(shè)計(jì) 260
5.4.1 任務(wù)陳述—手機(jī)桌球游戲操作
界面設(shè)計(jì) 260
5.4.2 任務(wù)實(shí)施 261
5.4.3 任務(wù)拓展—手機(jī)五子棋游戲操作
界面設(shè)計(jì) 271
5.5 項(xiàng)目實(shí)訓(xùn) 278
單元6 移動(dòng)終端軟件界面設(shè)計(jì) 279
引例描述 279
6.1 相關(guān)知識(shí)與技能 279
6.1.1 軟件界面?zhèn)�性的塑造原則 279
6.1.2 軟件色彩設(shè)計(jì) 281
6.1.3 軟件布局設(shè)計(jì) 281
6.2 任務(wù)一：軟件圖標(biāo)設(shè)計(jì) 281
6.2.1 任務(wù)陳述—即時(shí)聊天軟件
圖標(biāo)設(shè)計(jì) 281
6.2.2 任務(wù)實(shí)施 282
6.2.3 任務(wù)拓展—手機(jī)錄音軟件
圖標(biāo)設(shè)計(jì) 285
6.3 任務(wù)二：軟件歡迎（登錄）界面設(shè)計(jì) 288
6.3.1 任務(wù)陳述—即時(shí)聊天軟件登錄
界面設(shè)計(jì) 288
6.3.2 任務(wù)實(shí)施 289
6.4 任務(wù)三：軟件操作界面設(shè)計(jì) 297
6.4.1 任務(wù)陳述—即時(shí)聊天軟件操作
界面設(shè)計(jì) 297
6.4.2 任務(wù)實(shí)施 298
6.4.3 任務(wù)拓展—手機(jī)錄音軟件操作
界面設(shè)計(jì) 311
6.5 項(xiàng)目實(shí)訓(xùn) 322
單元7 移動(dòng)終端UI主題設(shè)計(jì) 323
引例描述 323
7.1 相關(guān)知識(shí)與技能 323
7.2 任務(wù)一：手機(jī)鎖屏界面主題設(shè)計(jì) 327
7.2.1 任務(wù)陳述—教師職業(yè)主題手機(jī)
鎖屏界面設(shè)計(jì) 327
7.2.2 任務(wù)實(shí)施 328
7.2.3 任務(wù)拓展—溫暖夏日主題手機(jī)
鎖屏界面設(shè)計(jì) 338
7.3 任務(wù)二：手機(jī)圖標(biāo)界面主題設(shè)計(jì) 343
7.3.1 任務(wù)陳述—教師職業(yè)主題手機(jī)
圖標(biāo)界面設(shè)計(jì) 343
7.3.2 任務(wù)實(shí)施 344
7.3.3 任務(wù)拓展—溫暖夏日主題手機(jī)
圖標(biāo)界面設(shè)計(jì) 358
7.4 項(xiàng)目實(shí)訓(xùn) 362

1. SwiftUI完全開發(fā) [李智威 著]
2. 深入淺出OpenHarmony——架構(gòu)、內(nèi)核、驅(qū)動(dòng)及應(yīng)用開發(fā)全棧 [李傳釗 著]
3. UI界面設(shè)計(jì)與制作教程 [主 編 黎 婭 任勁松]
4. Android高級(jí)程序設(shè)計(jì) [主編　周雯　舒松]
5. 基于Android平臺(tái)的移動(dòng)開發(fā)技術(shù) [主編 徐碩博 黃衛(wèi)東 賈雁]
6. Android 應(yīng)用開發(fā)項(xiàng)目實(shí)戰(zhàn) [主編 梁 琨 朱冰鴻]
7. Android應(yīng)用開發(fā)基礎(chǔ)教程 [主編 巫湘林]
8. 移動(dòng)終端服務(wù)器管理與開發(fā) [主編 熊偉 曹天人]
9. Android軟件應(yīng)用與實(shí)踐 [主編 梁平 高峰]
10. 移動(dòng)端UI設(shè)計(jì)及規(guī)范——分分鐘搞定App UI設(shè)計(jì) [北京課工場(chǎng)教育科技有限公司Q]
11. 移動(dòng)端UI商業(yè)項(xiàng)目實(shí)戰(zhàn)——讓人愛不釋手的移動(dòng)端UI設(shè)計(jì) [北京課工場(chǎng)教育科技有限公司]
12. Visual C++ & Android程序設(shè)計(jì)綜合實(shí)訓(xùn)（第二版） [主編 梁建武]
13. Android開發(fā)實(shí)用教程 [主編 王建華 張偉]
14. Android基礎(chǔ)教程 [余 平 張建華]
15. Android 4.X手機(jī)/平板電腦程序設(shè)計(jì)入門、應(yīng)用到精通（第二版） [孫宏明 著]
16. Android手機(jī)/平板電腦程序開發(fā)教練 [黃彬華 編著]
17. Android手機(jī)程序設(shè)計(jì)入門、應(yīng)用到精通 [孫宏明 著]