UI 界面設計, 2/e UI界面设计（第2版）

本書按照高職高專電腦多媒體技術專業教學大綱的要求編寫，是一本全面的UI界面設計與製作的基礎教程。本書以培養學生的UI設計理念、方法為基本，結合Photoshop軟件中常用的各種工具和方法，有針對性地剖析設計製作的實施策略與過程，以訓練和提高學生UI界面設計製作技能。全書共8章，分為3個部分。第一部分是UI界面設計相關知識的介紹，包括什麽是UI界面設計、UI界面設計的常用方法和設計工具、UI設計與用戶體驗的關系等基本知識。第二部分是各種UI界面常用元素的製作。第三部分是UI界面設計典型實戰，通過5個遞進的設計實例，從任務分析、功能定位、製作步驟入手對界面設計製作進行全過程講解。本書適合作為高等院校電腦類專業的教材，也可供平面設計人員、美工人員和對UI設計感興趣的讀者閱讀和參考，還可幫助UI設計師迅速進入職場角色。為方便教學，本書提供電子課件等教學資源，請登錄華信教育資源網（www.hxedu.com.cn）免費下載。

張小玲，2007.12至今就職於重慶正大軟件職業技術學院（現升本改名為重慶工程學院），先後擔任專業教師、教研室主任等職，兼任正大恒領網絡公司設計總監，主要教研方向為藝術學、數字媒體設計。

第一部分知識準備
第1章UI設計相關知識1 
1.1 UI設計1 
1.1.1 UI設計的概念1 
1.1.2 UI設計的流程2 
1.1.3 UI設計的規範4 
1.1.4 UI設計常用工具6 
1.2 UI設計與用戶體驗7 
1.2.1 UI設計與用戶體驗概述7 
1.2.2影響用戶體驗的因素8 
1.3知識拓展9 
1.3.1 Photoshop CC 2017入門9 
1.3.2 Photoshop CC 2017精彩新功能9 
1.3.3圖像常用基本操作12 
1.3.4選區的基本操作15 
1.3.5畫筆工具的應用17 
本章小結19
 
第2章UI設計的常用方法20 
2.1 UI設計中的設計方法20 
2.1.1方法與方法論20 
2.1. 2設計方法學20 
2.1.3 UI設計中實用的設計方法21 
2.2 UI設計中實用的構成方法23 
2.2.1什麼是構成23 
2.2.2形式美法則23 
2.2.3構成的思維方式29 
2.3 UI設計中實用的色彩搭配技巧31 
2.3.1色彩的基本理論31 
2.3.2色彩搭配法則33
2.4知識拓展45 
2.4.1扁平化設計風格45 
2.4.2擬物化設計風格47 
2.4.3卡通化設計風格47 
2.5能力拓展47 
2.5.1圖層類別47 
2.5.2圖層的基礎操作47 
2.5. 3圖層樣式48 
2.5.4混合模式49 
2.5.5 Photoshop中的蒙版50 
2.5.6漸變工具54 
本章小結56 

第二部分牛刀小試
第3章各種UI常用元素製作57 
3.1常用背景製作57 
3.1. 1壁紙57 
3.1.2圖標背板62 
3.2常見控件製作64 
3.2.1按鈕的製作64 
3.2.2下拉選擇框的製作65 
3.2.3滑動條的製作68 
3.2.4 TAB切換塊的製作70 
3.2. 5氣泡對話框的製作72 
3.3創意圖標設計與製作73 
3.3.1圖標設計的基本知識73 
3.3.2利用Photoshop打造擬物化圖標77 
3.3.3利用Photoshop打造扁平化圖標82 
3.3.4利用Photoshop打造單色圖標85 
3.3.5利用Photoshop打造線性圖標87
3.4知識拓展87 
3.4.1圖標設計的趨勢—響應式圖標87 
3.4.2路徑與形狀工具88 
3.4.3擦除類工具90 
3.5能力拓展91 
3.5.1設計製作簡單網頁91 
3.5.2獨立實踐97 
本章小結98 

第三部分UI設計典型實戰
第4章操作型APP—計算器界面設計99 
4.1 UI設計任務分析99 
4.2學習目標100 
4.3製作步驟詳解100 
4.3.1新建文件，確定尺寸規範100 
4.3.2製作背景100 
4.3.3製作狀態欄區域101 
4.3.4製作顯示區細節101 
4.3.5製作功能鍵區和數字鍵區細節101 
4.3.6定稿輸出有效的設計方案102 
4.4知識拓展103 
4.4.1圖層組103 
4.4.2 APP界面設計概述104 
4.4.3 APP界面佈局設計105 
4.4.4 Photoshop外部素材的載入使用105 
4.5能力拓展106 
4.5.1設計製作水平儀UI 106 
4.5.2設計製作拼拼樂APP界面107 
4.5.3獨立實踐111 
本章小結111

第5章實用型軟件—播放器界面設計112 
5.1 UI設計任務分析112 
5.2學習目標112 
5.3製作步驟詳解112 
5.3.1創建播放器112 
5.3.2製作播放器專輯信息部分114 
5.3.3製作播放器播放按鈕部分117 
5.4知識拓展121 
5.4.1色彩的搭配121 
5.4.2 Photoshop中的色彩調整121 
5.5能力拓展122 
5.5.1設計製作DVD光盤圖標122 
5.5.2設計製作金屬按鈕123 
5.5.3為黑白照片調色123 
5.5.4獨立實踐126 
本章小結126 

第6章手機主題UI設計127 
6.1 UI設計任務分析127 
6.2學習目標128 
6.3製作步驟詳解128 
6.3.1製作主題形象128 
6.3.2製作手機壁紙129 
6.3.3製作鎖屏界面130 
6.3.4製作天氣插件131 
6.3.5製作桌面圖標136 
6.4知識拓展142 
6.4.1手機界面設計原則142 
6.4.2手機常用尺寸與圖標格式143 
6.5能力拓展144
6.5.1設計製作ico圖標144 
6.5.2設計製作偽扁平化手機主題界面145 
6.5.3獨立實踐146 
本章小結146 

第7章Web界面設計實例—兒童節專題網頁設計147 
7.1 UI設計任務分析147 
7.2學習目標148 
7.3製作步驟詳解148 
7.3.1製作頭部主圖148 
7.3.2製作裝飾圖形161 
7.3.3製作欄目“書籍系列” 167 
7.3.4製作欄目“服飾系列” 175 
7.3.5製作欄目“玩具系列” 178 
7.3.6製作底部區域181 
7.4知識拓展183 
7.4.1網站界面設計基本原則183 
7.4.2網站界面的功能美與形式美183 
7.5能力拓展184 
7.5.1打造照射在透明玻璃窗上的效果184 
7.5.2打造傾盆大雨效果185 
7.5.3設計製作電子商務網頁界面185 
7.5.4強化全局觀念198 
7.5.5獨立實踐198 
本章小結198 

第8章智能電視界面設計199 
8.1 UI設計任務分析199 
8.2學習目標199 
8.3製作步驟詳解199 
8.3.1製作主界面199
8.3.2製作影視劇列表頁205 
8.3.3製作影視劇詳情頁207 
8.3.4製作播放頁209 
8.4知識拓展211 
8.4.1智能電視界面設計211 
8.4.2智能電視界面設計的原則212 
8.5能力拓展212 
8.5.1設計製作樂視TV界面212 
8.5.2獨立實踐213 
本章小結213 
參考文獻214