本書針對有一定Photoshop設(shè)計軟件操作基礎(chǔ)的人群，以既定的編寫體例梳理知識結(jié)構(gòu)，通過實(shí)際的任務(wù)案例讓讀者掌握UI設(shè)計的基本技巧。在內(nèi)容編排上，本書以手機(jī)APP開發(fā)模塊為主線，結(jié)合任務(wù)的描述和分析讓讀者更好地體驗(yàn)設(shè)計思路、技巧和理念；在內(nèi)容選擇、結(jié)構(gòu)安排上，更加符合從業(yè)人員職業(yè)技能水平要求，從而達(dá)到老師易教、學(xué)生易學(xué)的目的。
隨著移動互聯(lián)網(wǎng)行業(yè)的迅猛發(fā)展，越來越多形式新穎、功能強(qiáng)大的APP出現(xiàn)在人們生活中。面對競爭日趨激烈的APP市場，UI設(shè)計成為提升用戶對產(chǎn)品直觀體驗(yàn)的決定因素，它的美觀度、規(guī)范化、交互性直接決定了人們對該軟件的第一印象。眾多公司對用戶界面設(shè)計的需求讓UI設(shè)計成為一個熱門崗位。
為什么要學(xué)習(xí)本書
盡管UI行業(yè)發(fā)展迅速，UI設(shè)計師需求量激增，但在國內(nèi)真正高水平的、能充分滿足市場需要的UI設(shè)計師卻為數(shù)甚少。由于缺乏對UI設(shè)計規(guī)范的深入了解和專業(yè)技能訓(xùn)練，缺乏開發(fā)經(jīng)驗(yàn)，一些UI設(shè)計師很難適應(yīng)企業(yè)對UI人才的需求。因此，UI設(shè)計行業(yè)雖然市場前景看似一片光明，但是若不解決人才問題，未來將岌岌可危。因此，我們認(rèn)為有必要推出一本以任務(wù)實(shí)踐為主線的UI設(shè)計教材，為UI設(shè)計師提供一個良好的學(xué)習(xí)與交流的資源，幫助初學(xué)者快速入門。
如何使用本書
本書針對的是已掌握Photoshop軟件操作工具的人群，以既定的編寫體例（案例式）鞏固對理論知識點(diǎn)的學(xué)習(xí)。通過案例式的教學(xué)模式寓教于樂，讓學(xué)生輕松掌握案例中的知識點(diǎn)（任務(wù)描述思路剖析任務(wù)實(shí)現(xiàn)）。在內(nèi)容編排上，本書以手機(jī)APP開發(fā)模塊為主線，結(jié)合案例的描述和分析，讓讀者更好地體驗(yàn)到設(shè)計思路、技巧和理念；在內(nèi)容選擇、結(jié)構(gòu)安排上，更加符合從業(yè)人員職業(yè)技能水平的提高，從而達(dá)到老師易教、學(xué)生易學(xué)的目的。
全書共分8章，以Photoshop CC作為基礎(chǔ)操作軟件，提供了16個精選案例和1個綜合項(xiàng)目。每個精選案例均配備相應(yīng)的基礎(chǔ)練習(xí)，以幫助讀者全面、快速吸收知識。各章節(jié)講解內(nèi)容介紹如下：
（1）第1章介紹APP界面設(shè)計的基礎(chǔ)知識，包括UI設(shè)計概述、APP設(shè)計流程和要素、移動設(shè)備尺寸、UI設(shè)計風(fēng)格、手機(jī)操作系統(tǒng)等內(nèi)容。
（2）第2章介紹圖標(biāo)設(shè)計技巧，包括扁平圖標(biāo)、微扁平圖標(biāo)和擬物圖標(biāo)的設(shè)計。
（3）第3章介紹滑塊設(shè)計技巧，主要包括滑塊構(gòu)成要素、滑塊類型和設(shè)計要點(diǎn)。
（4）第4章介紹按鈕設(shè)計技巧，包括色塊按鈕、漸變質(zhì)感按鈕及水晶按鈕等設(shè)計。
（5）第5章介紹表單控件設(shè)計技巧，包括單選按鈕和復(fù)選框設(shè)計、下拉列表框設(shè)計、按鈕設(shè)計。
（6）第6章介紹表單APP導(dǎo)航繪制技巧，包括導(dǎo)航分類介紹，以及標(biāo)簽式導(dǎo)航設(shè)計和宮格式導(dǎo)航設(shè)計。
（7）第7章介紹圖片設(shè)計技巧，包括常用的鏡面效果、倒影效果、毛玻璃效果等。
（8）第8章介紹優(yōu)選網(wǎng)APP項(xiàng)目設(shè)計，包括產(chǎn)品定位、草圖繪制、頁面定位和剖析。
本書以案例驅(qū)動為導(dǎo)向引出所學(xué)知識，涉及圖標(biāo)、滑塊、按鈕、導(dǎo)航、布局等UI設(shè)計相關(guān)技巧，案例豐富。讀者需要多上機(jī)實(shí)踐，以便熟練掌握UI設(shè)計技巧。同時，本書的第2～7章的每個章節(jié)中均包含2～3個任務(wù)，教師在使用本書時，可以結(jié)合教學(xué)設(shè)計，采用任務(wù)式的教學(xué)模式，通過不同類型的任務(wù)案例，提升學(xué)生對知識點(diǎn)的掌握與理解。
致謝
本書的編寫和整理工作由傳智播客教育科技股份有限公司完成，主要參與人員有呂春林、王哲、連蕊蕊、張鵬、李鳳輝、陳亞坤、恩意等，全體人員在近一年的編寫過程中付出了很多辛勤的汗水，在此一并表示衷心的
感謝。
意見反饋
盡管我們盡了最大的努力，但教材中仍難免會有疏漏與不妥之處，歡迎各界專家和讀者朋友來信來函提出寶貴意見，我們將不勝感激。在閱讀本書時，如發(fā)現(xiàn)任何問題或有不認(rèn)同之處，可以通過電子郵件與我們?nèi)〉寐?lián)系。
請發(fā)送電子郵件至：itcast_book@vip.sina.com
黑馬程序員
2017年3月
中關(guān)村黑馬程序員訓(xùn)練營是由傳智播客教育科技有限公司（簡稱傳智播客）聯(lián)合中關(guān)村軟件園、CSDN，并委托傳智播客進(jìn)行教學(xué)實(shí)施的軟件開發(fā)高端培訓(xùn)機(jī)構(gòu)，致力于服務(wù)各大軟件企業(yè)，解決當(dāng)前軟件開發(fā)技術(shù)飛速發(fā)展，而企業(yè)招不到優(yōu)秀人才的困擾。 目前，中關(guān)村黑馬程序員訓(xùn)練營已成長為行業(yè)學(xué)員質(zhì)量好、課程內(nèi)容深、企業(yè)滿意的移動開發(fā)高端訓(xùn)練基地，并被評為中關(guān)村軟件園重點(diǎn)扶持人才企業(yè)。
1.1 UI設(shè)計概述2
1.1.1 UI設(shè)計的概念2
1.1.2 UI發(fā)展史3
1.1.3 UI設(shè)計分類7
1.1.4 UI設(shè)計師標(biāo)準(zhǔn)9
1.2?認(rèn)識APP設(shè)計9
1.2.1 APP設(shè)計的
概念10
1.2.2 APP的優(yōu)勢10
1.2.3 APP設(shè)計分類10
1.2.4 APP構(gòu)成元素11
1.3?APP設(shè)計流程14
1.4?移動設(shè)備尺寸16
1.4.1 英寸16
1.4.2 像素16
1.4.3 分辨率16
1.4.4 網(wǎng)點(diǎn)密度16
1.4.5 像素密度17
1.4.6 常見手機(jī)屏幕
規(guī)格17
1.5?APP設(shè)計軟件17
1.5.1 Photoshop CC17
1.5.2 Illustrator CC18
1.6?APP設(shè)計要素19
1.6.1 色彩19
1.6.2 界面布局22
1.7?UI設(shè)計風(fēng)格22
1.7.1 扁平化風(fēng)格23
1.7.2 擬物化風(fēng)格25
1.8?智能手機(jī)操作系統(tǒng)26
1.8.1 iOS系統(tǒng)26
1.8.2 Android系統(tǒng)27
基礎(chǔ)操練29
2.1?圖標(biāo)設(shè)計基礎(chǔ)知識31
2.1.1 認(rèn)識圖標(biāo)31
2.1.2 圖標(biāo)設(shè)計流程31
2.1.3 圖標(biāo)設(shè)計原則34
2.1.4 圖標(biāo)設(shè)計技巧35
2.1.5 圖標(biāo)設(shè)計規(guī)范36
2.2?【任務(wù)1】扁平化照相機(jī)
?? 圖標(biāo)設(shè)計39
2.2.1 任務(wù)描述39
2.2.2 思路剖析39
2.2.3 任務(wù)實(shí)現(xiàn)40
2.3?【任務(wù)2】微扁平照相機(jī)
? 圖標(biāo)設(shè)計42
2.3.1 任務(wù)描述42
2.3.2 思路剖析42
2.3.3 任務(wù)實(shí)現(xiàn)43
2.4?【任務(wù)3】照相機(jī)寫實(shí)
?? 圖標(biāo)設(shè)計45
2.4.1 任務(wù)描述46
2.4.2 思路剖析46
2.4.3 任務(wù)實(shí)現(xiàn)46
基礎(chǔ)操練62
3.1?滑塊設(shè)計基礎(chǔ)知識64
3.1.1 滑塊的構(gòu)成要素64
3.1.2 滑塊類型64
3.1.3 滑塊的設(shè)計
要點(diǎn)66
3.2?【任務(wù)4】音量調(diào)節(jié)滑塊
???設(shè)計67
3.2.1 任務(wù)描述67
3.2.2 思路剖析67
3.2.3 任務(wù)實(shí)現(xiàn)68
3.3?【任務(wù)5】金屬質(zhì)感旋鈕
? 滑塊設(shè)計72
3.3.1 任務(wù)描述72
3.3.2 思路剖析73
3.3.3 任務(wù)實(shí)現(xiàn)73
3.4?【任務(wù)6】極簡風(fēng)格滑塊
? 設(shè)計85
3.4.1 任務(wù)描述85
3.4.2 思路剖析85
3.4.3 任務(wù)實(shí)現(xiàn)86
基礎(chǔ)操練88
4.1?按鈕設(shè)計基礎(chǔ)知識91
4.1.1 按鈕的不同
狀態(tài)91
4.1.2 按鈕設(shè)計技巧91
4.2?【任務(wù)7】色塊按鈕
? 設(shè)計93
4.2.1 任務(wù)描述93
4.2.2 思路剖析93
4.2.3 任務(wù)實(shí)現(xiàn)93
4.3?【任務(wù)8】漸變質(zhì)感按鈕
? 設(shè)計94
4.3.1 任務(wù)描述94
4.3.2 思路剖析95
4.3.3 任務(wù)實(shí)現(xiàn)95
4.4?【任務(wù)9】水晶按鈕
? 設(shè)計99
4.4.1 任務(wù)描述99
4.4.2 思路剖析99
4.4.3 任務(wù)實(shí)現(xiàn)99
基礎(chǔ)操練105
5.1?表單控件設(shè)計基礎(chǔ)知識108
5.1.1 認(rèn)識表單控件108
5.1.2 表單控件設(shè)計
原則109
5.2?【任務(wù)10】單選按鈕和
? 復(fù)選框設(shè)計110
5.2.1 任務(wù)描述110
5.2.2 思路剖析110
5.2.3 任務(wù)實(shí)現(xiàn)111
5.3?【任務(wù)11】下拉列表框
? 設(shè)計114
5.3.1 任務(wù)描述114
5.3.2 思路剖析114
5.3.3 任務(wù)實(shí)現(xiàn)114
5.4?【任務(wù)12】搜索框
? 設(shè)計117
5.4.1 任務(wù)描述117
5.4.2 思路剖析117
5.4.3 任務(wù)實(shí)現(xiàn)118
基礎(chǔ)操練121
6.1?認(rèn)識APP導(dǎo)航123
6.2?【任務(wù)13】標(biāo)簽式
? 導(dǎo)航設(shè)計126
6.2.1 任務(wù)描述127
6.2.2 思路剖析127
6.2.3 任務(wù)實(shí)現(xiàn)127
6.3?【任務(wù)14】宮格式導(dǎo)航
? 設(shè)計130
6.3.1 任務(wù)描述130
6.3.2 思路剖析131
6.3.3 任務(wù)實(shí)現(xiàn)132
基礎(chǔ)操練138
7.1?圖片效果設(shè)計技巧140
7.2?【任務(wù)15】音樂播放
? 界面設(shè)計142
7.2.1 任務(wù)描述142
7.2.2 思路剖析142
7.2.3 任務(wù)實(shí)現(xiàn)143
7.3?【任務(wù)16】APP引導(dǎo)頁
? 設(shè)計147
7.3.1?任務(wù)描述147
7.3.2?思路剖析148
7.3.3?任務(wù)實(shí)現(xiàn)148
基礎(chǔ)操練151
8.1?產(chǎn)品定位及優(yōu)勢154
8.2?繪制草圖和原型圖154
8.3?項(xiàng)目設(shè)計定位164
8.4?項(xiàng)目設(shè)計剖析165
8.4.1 啟動圖標(biāo)165
8.4.2 加載頁166
8.4.3 引導(dǎo)頁166
8.4.4 首頁167
8.4.5 搜索頁172
8.4.6 搜索結(jié)果頁174
8.4.7 商品分類頁175
8.4.8 商品詳情頁177
8.4.9 登錄頁178
8.4.10 購物車頁180
8.4.11 訂單結(jié)算頁182
8.4.12 用戶中心頁183
基礎(chǔ)操練186
書單推薦
