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