UI設(shè)計(jì)與開發(fā)

通俗易懂，循序漸進(jìn)，圖文結(jié)合

內(nèi)容全面，實(shí)例豐富，操作性強(qiáng)

淡化理論，突出實(shí)踐，強(qiáng)調(diào)應(yīng)用

隨著計(jì)算機(jī)網(wǎng)絡(luò)的迅速發(fā)展，簡單的軟件程序已經(jīng)無法滿足用戶的需求。在激烈的競爭中，UI設(shè)計(jì)逐漸進(jìn)入人們的視線，并且在快速地發(fā)展和更新。國內(nèi)外眾多IT公司都已經(jīng)成立了專業(yè)的UI設(shè)計(jì)部門，但UI專業(yè)人才稀缺。目前全國高校UI設(shè)計(jì)專業(yè)開設(shè)得比較少，教學(xué)方法也相對比較傳統(tǒng)和落后，無法適應(yīng)UI設(shè)計(jì)這個專業(yè)的教學(xué)特點(diǎn)，這就要求高校教師在講授“UI設(shè)計(jì)”課程時要不斷探索和使用新的教學(xué)方法和手段。

本書所述教學(xué)方法使用多種信息化教學(xué)手段，緊緊圍繞教學(xué)中心，采用分組實(shí)踐、討論方式，以學(xué)生為主體完成了知識、理論、實(shí)踐一體化的教學(xué)。在這個過程中，教師進(jìn)行引領(lǐng)，以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容設(shè)置成一個或多個具體的、可操作性強(qiáng)的任務(wù)或子任務(wù)，學(xué)生緊密圍繞任務(wù)活動，在教師的引導(dǎo)下，通過自主學(xué)習(xí)與合作探究，實(shí)現(xiàn)理論知識的實(shí)踐轉(zhuǎn)換，提高自主學(xué)習(xí)能力和創(chuàng)新能力。

這種教學(xué)方法從人才培養(yǎng)體系整體出發(fā)，教師轉(zhuǎn)變教學(xué)方法，做學(xué)生學(xué)習(xí)的引領(lǐng)者、組織者、參與者和欣賞者；學(xué)生具有學(xué)習(xí)的愿望和能力，學(xué)會交流與合作，具有團(tuán)隊(duì)精神，由原來被動地接受知識變成通過自主、合作、探究方式來體驗(yàn)學(xué)習(xí)過程，感受獲取知識的快樂。這種教學(xué)方法培養(yǎng)學(xué)生的基本技能和綜合分析能力，重視基本技能的綜合和擴(kuò)展，引導(dǎo)學(xué)生獨(dú)立處理復(fù)雜問題，提高學(xué)生解決實(shí)際問題的能力。

教師在教學(xué)的過程中，首先，利用教學(xué)視頻、教學(xué)動畫、虛擬演示等方式，實(shí)現(xiàn)教材中復(fù)雜問題簡單化、抽象問題形象化，化解教學(xué)的難點(diǎn)，突出教學(xué)重點(diǎn)，能夠讓學(xué)生充分理解所學(xué)的理論知識。其次，根據(jù)所教授的理論知識給學(xué)生布置相應(yīng)的實(shí)訓(xùn)練習(xí)，引導(dǎo)學(xué)生帶著“任務(wù)”進(jìn)行實(shí)踐，充分理解所學(xué)知識并運(yùn)用所學(xué)知識完成相應(yīng)的實(shí)訓(xùn)任務(wù)，激發(fā)學(xué)生獨(dú)立學(xué)習(xí)的興趣，提高學(xué)生獨(dú)立學(xué)習(xí)的能力。最后，教師根據(jù)完成任務(wù)的情況，組織學(xué)生討論、思考、相互評價(jià)、提出問題等，然后給予點(diǎn)評。以上這些教學(xué)方法需要教師將“專業(yè)書籍”轉(zhuǎn)變?yōu)椤皩?shí)踐創(chuàng)新”，要打破常規(guī)，運(yùn)用一些具有挑戰(zhàn)性的問題來強(qiáng)化學(xué)生的創(chuàng)新意識和合作意識。此種教學(xué)方法真正踐行了“工作任務(wù)引領(lǐng)、行動導(dǎo)向”的教學(xué)理念。

對應(yīng)于上述思想，我們精心安排課程，將計(jì)算機(jī)技術(shù)和藝術(shù)設(shè)計(jì)融合在一起，將Photoshop和Android Studio作為設(shè)計(jì)和開發(fā)平臺，將最終的設(shè)計(jì)效果真正地應(yīng)用到手機(jī)App中，展現(xiàn)出其真實(shí)的效果，讓學(xué)生體會到設(shè)計(jì)的樂趣。考慮到使用本書的學(xué)生相對來說編程能力較弱，我們“重設(shè)計(jì)，輕代碼”，使用相對簡單的XML文件編碼作為界面實(shí)現(xiàn)的主要方式，使得學(xué)生能快速地掌握編碼的方法，提升學(xué)習(xí)的興趣。在內(nèi)容選取上，強(qiáng)調(diào)技術(shù)性和實(shí)用性，淡化理論，突出實(shí)踐，強(qiáng)調(diào)應(yīng)用。

本書分為8章：第1章對UI設(shè)計(jì)進(jìn)行了總體的概述；第2章講了UI色彩的搭配和應(yīng)用；第3章和第4章分別從藝術(shù)設(shè)計(jì)和手機(jī)編程的角度對UI的界面布局進(jìn)行了介紹；第5～7章詳細(xì)地介紹了如何進(jìn)行UI圖標(biāo)和按鈕的設(shè)計(jì)與編碼；第8章對手機(jī)常用的主題、壁紙、界面的UI設(shè)計(jì)進(jìn)行了詳細(xì)的介紹。這8章理論和實(shí)踐相結(jié)合，每章中都穿插著相應(yīng)的任務(wù)，踐行了“在做中學(xué)、在做中教、教學(xué)做合一”的教學(xué)理念，激發(fā)了學(xué)生學(xué)習(xí)的熱忱和興趣，使學(xué)生主動地使用腦心手進(jìn)行知識的掌握和知識的轉(zhuǎn)化。

本書由安徽工業(yè)經(jīng)濟(jì)職業(yè)技術(shù)學(xué)院的李昀蕓、宋蓓蓓、王悅娟任主編，李昀蕓完成了本書的統(tǒng)稿，并負(fù)責(zé)2.1節(jié)和第5章的編寫，宋蓓蓓負(fù)責(zé)第4章和第7章的編寫，王悅娟負(fù)責(zé)第1章、第3章的編寫；由朱麗進(jìn)和張琳欽任副主編，朱麗進(jìn)負(fù)責(zé)第6章、第8章的編寫，張琳欽負(fù)責(zé)2.2節(jié)和2.3節(jié)的編寫。在此對在本書編書過程中提供幫助的人表示衷心的感謝。由于時間倉促及編者水平有限，書中難免有疏漏之處，懇請讀者批評指正。

編　者

2020年1月

第1章　UI設(shè)計(jì)概述/1
1.1　UI設(shè)計(jì)的概念 2
1.2　UI設(shè)計(jì)的特點(diǎn) 5
1.3　UI設(shè)計(jì)的原則 6
1.4　UI設(shè)計(jì)常用工具 7
課后練習(xí) 14
第2章　UI設(shè)計(jì)的色彩/15
2.1　UI配色原則 16
2.2　UI配色技巧 16
2.2.1　顏色與用戶關(guān)系的搭配技巧 17
2.2.2　顏色與界面結(jié)構(gòu)的搭配技巧 19
2.3　UI文字與圖形搭配 23
2.3.1　文字與圖形的藝術(shù)特征及
　　　表現(xiàn)手法 23
2.3.2　圖形元素的設(shè)計(jì)對App界面
　　　設(shè)計(jì)的影響 23
2.3.3　圖形元素與文字信息在App界面
　　　中的設(shè)計(jì)方式 24
課后練習(xí) 25
第3章　UI界面設(shè)計(jì)/27
3.1　UI界面設(shè)計(jì)的概念 28
3.2　UI界面設(shè)計(jì)的原則 30
3.2.1　UI界面設(shè)計(jì)基本原則 30
3.2.2　UI界面圖形設(shè)計(jì)原則 30
3.3　UI界面設(shè)計(jì)的規(guī)范 36
3.3.1　UI界面設(shè)計(jì)尺寸 36
3.3.2　文本規(guī)范 38
3.3.3　基礎(chǔ)組件 39
3.3.4　常用命名規(guī)范 40
3.4　UI界面設(shè)計(jì)的基本要素 45
3.4.1　界面元素概述 45
3.4.2　用戶界面元素 46
課后練習(xí) 51
第4章　手機(jī)App的設(shè)計(jì)布局/53
4.1　布局概述 54
4.1.1　View類 54
4.1.2　Android中使用XML文件進(jìn)行布局 55
4.1.3　Android中使用代碼進(jìn)行布局 56
4.2　線性布局 56
4.3　相對布局 59
4.4　表格布局 61
4.5　框架布局 63
4.6　嵌套布局 65
課后練習(xí) 67
第5章　UI圖標(biāo)設(shè)計(jì)/69
5.1　UI圖標(biāo)設(shè)計(jì)基礎(chǔ)知識 70
5.1.1　UI圖標(biāo)的概念及特征 70
5.1.2　UI圖標(biāo)的分類 70
5.2　各行業(yè)UI圖標(biāo)設(shè)計(jì) 73
5.2.1　餐飲類圖標(biāo)設(shè)計(jì) 73
5.2.2　醫(yī)療類圖標(biāo)設(shè)計(jì) 76
5.2.3　體育類圖標(biāo)設(shè)計(jì) 82
5.2.4　視聽類圖標(biāo)設(shè)計(jì) 85
5.2.5　時尚類圖標(biāo)設(shè)計(jì) 92
課后練習(xí) 95
第6章　UI按鈕設(shè)計(jì)/97
6.1　基本按鈕制作 98
6.2　下拉選擇 103
6.3　滑動條 107
6.4　切換塊 111
課后練習(xí) 114
第7章　手機(jī)App的組件/115
7.1　TextView組件 116
7.2　Button組件 119
7.3　EditText組件 121
7.4　ImageView組件 123
7.5　GridView組件 125
課后練習(xí) 127
第8章　手機(jī)主題設(shè)計(jì)/129
8.1　制作主題形象 130
8.2　制作手機(jī)壁紙 139
8.3　制作登錄界面 146
8.4　制作鎖屏界面 150
課后練習(xí) 154
參考文獻(xiàn)/157
關(guān)于引用作品的版權(quán)聲明/158

1. 零基礎(chǔ)玩轉(zhuǎn)國產(chǎn)大模型DeepSeek [徐永冰 張帥 編著]
2. 網(wǎng)絡(luò)工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
3. 信息系統(tǒng)項(xiàng)目管理師考試32小時通關(guān)（適用第4版考綱） [薛大龍]
4. 信息系統(tǒng)管理工程師考試32小時通關(guān)（適配第2版考綱） [薛大龍　劉偉]
5. 土木工程材料檢測實(shí)訓(xùn) [洪曉江 達(dá)則曉麗 錢波]
6. 科技信息檢索與論文寫作實(shí)用教程 [李振華]
7. 傳統(tǒng)山水畫論解讀與實(shí)踐 [陳鈉 著]
8. Python數(shù)據(jù)庫編程 [主編 殷樹友 邢 翀]
9. 計(jì)算機(jī)基礎(chǔ)實(shí)訓(xùn)指導(dǎo) [主編 袁春萍 朱妮]
10. 嵌入式人工智能技術(shù)應(yīng)用（數(shù)字教材） [主編 胡娜 楊國勇 晏廷榮]
11. Vienna整流器技術(shù) [桂存兵 著]
12. 變頻器與伺服應(yīng)用 [陳剛 葉云飛]
13. 物聯(lián)網(wǎng)工程設(shè)計(jì)與實(shí)踐 [湯琳 李敏]
14. 爐邊夜話——深入淺出話AI [汪建　著]
15. 電商運(yùn)營與管理 [鐘肖英 陳瀟]
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. 高級辦公應(yīng)用項(xiàng)目教程 [主編 屈晶 趙成麗]
21. 微信小程序開發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版） [主編 黃龍泉 郭峰 朱倩]
22. 企業(yè)檔案工作實(shí)戰(zhàn)寶典百問百答 [華俊 盧秀英 邵甜甜 著]
23. 計(jì)算機(jī)網(wǎng)絡(luò)原理及應(yī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年長沙市會展業(yè)發(fā)展報(bào)告 [主編 周棟良]