本書從用戶研究、交互設計入手，到視覺設計理念的分析，再結合實例對UI 界面設計全過程進行剖析、歸納和演繹，將“理論知識”“軟件技術”與“藝術設計”“美育思政”各項元素充分融合,是一本全面的UI界面設計與制作的基礎教程。本書結構合理、內容翔實、圖文并茂，結合Photoshop、Illustrator 軟件中常用的工具和方法，有針對性地剖析UI 界面設計設計與制作的實施策略與過程，精選了圖標設計、手機主題界面設計、App 界面設計、網頁界面設計、智能電視界面設計、其他類型人機界面設計等典型UI 界面設計項目，將藝術設計與軟件操作技巧融入其中，引導學生進行思考及操作實踐，提升學生的審美、審藝能力。本書適合作為高等職業(yè)院校計算機數字媒體/藝術類相關專業(yè)的教材，也可供平面設計人員、美工和對UI 設計感興趣的讀者閱讀和參考。為了方便教與學，本書提供全套教學資料（案例操作視頻、教綱、考綱、學時安排、課件集、教案、拓展資源等），請掃描書中二維碼或登錄華信教育資源網（http://www.hxedu.com.cn）免費注冊后下載。
張小玲，畢業(yè)于西南大學藝術設計專業(yè)，現就職于重慶工程學院，先后擔任專業(yè)教師、教研室主任等職。兼任正大恒領網絡公司設計總監(jiān)。 參與各類教研科研項目十余項。熱衷于教學科技研究，積極參與各項項目申報，已經順利主持完成結項省部級教改科研項目6項，完成課程建設3門，其中一門為重慶市級精品資源共享課，2門為校級重點課程。近年來已經成功申請作品著作權登記40余項。
第一部分 知識準備
第1章 UI設計相關知識
1.1 UI設計概述 1
1.1.1 UI設計的概念 1
1.1.2 UI設計的流程 2
1.1.3 UI設計的規(guī)范 4
1.2 UI設計與用戶體驗 6
1.2.1 用戶體驗的含義 6
1.2.2 影響用戶體驗的因素 6
1.3 UI設計常見風格 7
1.3.1 扁平化風格 8
1.3.2 擬物化風格 10
1.3.3 卡通化風格 10
1.3.4 立體風格 10
1.3.5 幾何風格 11
1.3.6 漸變風格 11
第2章 UI設計的常用方法
2.1 UI設計中的設計方法 12
2.1.1 方法與方法論 12
2.1.2 設計方法學 12
2.1.3 UI設計中實用的設計方法 13
2.2 UI設計中實用的構成方法 13
2.2.1 什么是構成 13
2.2.2 形式美法則 14
2.2.3 構成的思維方式 17
第3章 UI設計的配色方法
3.1 色彩基礎 21
3.1.1 色彩的基本理論 21
3.1.2 常用顏色模式 23
3.2 色彩搭配 23
3.2.1 界面中不同色彩的象征與聯想 23
3.2.2 色彩搭配方法 27
3.2.3 色彩搭配的其他原則 28
3.3 設計軟件中的色彩調整 31
3.3.1 Photoshop中的色彩調整 31
3.3.2 Illustrator中的色彩調整 31
第4章 UI設計常用工具
4.1 Photoshop 33
4.1.1 初識Photoshop 33
4.1.2 圖像常用基本操作 34
4.1.3 選區(qū)的基本操作 36
4.1.4 矢量繪制類工具的應用 38
4.1.5 畫筆工具的應用 40
4.1.6 圖層相關知識 42
4.1.7 蒙版相關知識 46
4.1.8 擦除類工具的應用 48
4.1.9 外部素材的載入 49
4.1.10 小練手 50
4.2 Illustrator 52
4.2.1 初識Illustrator 52
4.2.2 界面設計常用圖形 53
4.2.3 繪制對象的常用操作 55
4.2.4 填色和描邊 55
4.2.5 直角變圓角 56
4.2.6 路徑查找器與形狀生成器 56
4.2.7 通過擴展路徑描邊讓線變成面 57
4.2.8 Illustrator 工具箱中的比例縮放工具 57
4.2.9 旋轉與鏡像打造對稱圖形 58
4.2.10 圖像描摹 58
4.2.11 小練手 59
4.3 其他輔助工具 62
第5章 UI界面常用壁紙與控件制作
5.1 常用壁紙制作 64
5.1.1 攝影像素壁紙 64
5.1.2 設計構成壁紙 64
5.1.3 綜合圖像壁紙 65
5.1.4 小練手：多種壁紙設計 65
5.2 常見控件制作 70
5.2.1 按鈕 70
5.2.2 下拉選擇框 72
5.2.3 進度條 74
5.2.4 TAB切換塊 78
5.2.5 氣泡對話框 79
5.2.6 步進器 80
5.2.7 開關 80
第6章 圖標設計
6.1 圖標的設計與制作概述 82
6.1.1 圖標設計概述 82
6.1.2 圖標的背板 83
6.1.3 圖標的分類 83
6.1.4 圖標的規(guī)格 87
6.1.5 圖標的統(tǒng)一性 89
6.2 線性圖標 89
6.2.1 利用Illustrator打造線性圖標 89
6.2.2 多種線性圖標風格 98
6.3 面性圖標 102
6.3.1 面性圖標設計制作思路 102
6.3.2 多種面性圖標風格 102
6.4 2.5D圖標 104
6.4.1 利用Illustrator打造2.5D圖標 104
6.4.2 使用Photoshop打造2.5D圖標 107
6.5 MBE圖標 107
6.6 利用Photoshop打造擬物化圖標 108
6.7 延伸閱讀與練習 111
6.7.1 利用Illustrator批量導出圖標 111
6.7.2 拓展練習： 利用Photoshop打造扁平化圖標 114
6.7.3 拓展練習： 利用Photoshop打造單色圖標 116
6.7.4 拓展練習： 利用Photoshop打造線性圖標 117
6.7.5 拓展練習：利用Photoshop打造樣式圖標 118
6.8 獨立實踐 118
第7章 手機主題界面設計
7.1 手機主題界面設計概述 119
7.1.1 手機常用尺寸與圖標格式 119
7.1.2 手機主題界面設計內容 120
7.1.3 手機界面設計的原則 120
7.2 項目實作：卡通小熊手機主題界面設計 121
7.2.1 界面設計任務分析 121
7.2.2 學習目標 122
7.2.3 制作步驟詳解 122
7.3 項目實作：偽扁平手機主題界面設計 136
7.3.1 界面設計任務分析 136
7.3.2 學習目標 136
7.3.3 關鍵步驟提示 136
7.4 獨立實踐 137
7.5 本章小結 137
第8章 App界面設計
8.1 App界面設計概述 138
8.1.1 手機App界面視覺設計 138
8.1.2 手機App界面用戶體驗設計 139
8.1.3 App界面布局設計 139
8.2 項目實作：操作型App—計算器界面設計 140
8.2.1 界面設計任務分析 140
8.2.2 學習目標 141
8.2.3 制作步驟詳解 141
8.3 項目實作：拼拼樂App界面設計 143
8.3.1 界面設計任務分析 143
8.3.2 學習目標 143
8.3.3 制作步驟詳解 144
8.4 項目實做：水平儀App界面設計 148
8.5 獨立實踐 148
8.6 本章小結 148
第9章 網頁界面設計
9.1 網頁界面設計概述 149
9.1.1 網頁界面設計基本原則 149
9.1.2 網站頁面的功能美與形式美 149
9.2 項目實作：一欄式簡單網頁設計與制作 150
9.2.1 界面設計任務分析 150
9.2.2 學習目標 151
9.2.3 制作步驟詳解 151
9.3 項目實作：多欄式電子商務網頁設計與制作 156
9.3.1 界面設計任務分析 156
9.3.2 學習目標 157
9.3.3 制作步驟詳解 157
9.4 項目實作：自由版式專題網頁設計與制作 169
9.4.1 界面設計任務分析 169
9.4.2 學習目標 171
9.4.3 制作步驟詳解 171
9.5 獨立實踐 203
9.6 本章小結 203
第10章 智能電視界面設計
10.1 智能電視界面設計概述 204
10.1.1 智能電視界面設計 204
10.1.2 智能電視界面設計的原則 204
10.2 項目實作：智能電視界面設計 205
10.2.1 界面設計任務分析 205
10.2.2 學習目標 205
10.2.3 制作步驟詳解 206
10.3 獨立實踐 217
10.4 本章小結 217
第11章 其他類型人機界面設計
11.1 人機界面設計概述 218
11.1.1 人機界面概述 218
11.1.2 人機界面設計的要點 220
11.1.3 人機界面設計的原則 221
11.2 項目實作：播放器界面設計 221
11.2.1 界面設計任務分析 221
11.2.2 學習目標 222
11.2.3 制作步驟詳解 222
11.3 獨立實踐 229
11.4 本章小結 229
書單推薦
