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