UI界面設計(第3版)

張小玲,彭贇

商品描述

本書從用戶研究、交互設計入手,到視覺設計理念的分析,再結合實例對UI 界面設計全過程進行剖析、歸納和演繹,將“理論知識”“軟件技術”與“藝術設計”“美育思政”各項元素充分融合,是一本全面的UI界面設計與製作的基礎教程。本書結構合理、內容翔實、圖文並茂,結合Photoshop、Illustrator 軟件中常用的工具和方法,有針對性地剖析UI 界面設計設計與製作的實施策略與過程,精選了圖標設計、手機主題界面設計、App 界面設計、網頁界面設計、智能電視界面設計、其他類型人機界面設計等典型UI 界面設計項目,將藝術設計與軟件操作技巧融入其中,引導學生進行思考及操作實踐,提升學生的審美、審藝能力。本書適合作為高等職業院校電腦數字媒體/藝術類相關專業的教材,也可供平面設計人員、美工和對UI 設計感興趣的讀者閱讀和參考。為了方便教與學,本書提供全套教學資料(案例操作視頻、教綱、考綱、學時安排、課件集、教案、拓展資源等),請掃描書中二維碼或登錄華信教育資源網(http://www.hxedu.com.cn)免費註冊後下載。

目錄大綱

□□部分知識準備
□□章UI設計相關知識
1.1 UI設計概述1
1.1.1 UI設計的概念1
1.1.□ UI設計的流程□
1.1.3 UI設計的規範4
1.□ UI設計與用戶體驗6
1.□.1 用戶體驗的含義6
1.□.□ 影響用戶體驗的因素6
1.3 UI設計常見風格7
1.3.1 扁平化風格8
1.3.□ 擬物化風格10
1.3.3 卡通化風格10
1.3.4 立體風格10
1.3.5 幾何風格11
1.3.6 漸□風格11
第□章UI設計的常用方法
□.1 UI設計中的設計方法1□
□.1.1 方法與方□□1□
□.1.□ 設計方法學1□
□.1.3 UI設計中實用的設計方法13
□.□ UI設計中實用的構成方法13
□.□.1 什麼是構成13
□.□.□ 形式美法則14
□.□.3 構成的思維方式17
第3章UI設計的配色方法
3.1 色彩基礎□1
3.1.1 色彩的基本理論□1
3.1.□ 常用顏色模式□3
3.□ 色彩搭配□3
3.□.1 界面中不同色彩的象徵與聯想□3
3.□.□ 色彩搭配方法□7
3.□.3 色彩搭配的其他原則□8
3.3 設計軟件中的色彩調整31
3.3.1 Photoshop中的色彩調整31
3.3.□ Illustrator中的色彩調整31
第4章UI設計常用工具
4.1 Photoshop33
4.1.1 初識Photoshop33
4.1.□ 圖像常用基本操作34
4.1.3 選區的基本操作36
4.1.4 矢量繪製類工具的應用38
4.1.5 畫筆工具的應用40
4.1.6 圖層相關知識4□
4.1.7 蒙版相關知識46
4.1.8 擦除類工具的應用48
4.1.9 外部素材的載入49
4.1.10 小練手50
4.□ Illustrator5□
4.□.1 初識Illustrator5□
4.□.□ 界面設計常用圖形53
4.□.3 繪製對象的常用操作55
4.□.4 填色和描邊55
4.□.5 直角□圓角56
4.□.6 路徑查找器與形狀生成器56
4.□.7 通過擴展路徑描邊讓線□成面57
4.□.8 Illustrator 工具箱中的比例縮放工具57
4.□.9 旋轉與鏡像打造對稱圖形58
4.□.10 圖像描摹58
4.□.11 小練手59
4.3 其他輔助工具6□
第5章UI界面常用壁紙與控件製作
5.1 常用壁紙製作64
5.1.1 攝影像素壁紙64
5.1.□ 設計構成壁紙64
5.1.3 綜合圖像壁紙65
5.1.4 小練手:多種壁紙設計65
5.□ 常見控件製作70
5.□.1 按鈕70
5.□.□ 下拉選擇框7□
5.□.3 進度條74
5.□.4 TAB切換塊78
5.□.5 氣泡對話框79
5.□.6 步進器80
5.□.7 開關80
第6章圖標設計
6.1 圖標的設計與製作概述8□
6.1.1 圖標設計概述8□
6.1.□ 圖標的背板83
6.1.3 圖標的分類83
6.1.4 圖標的規格87
6.1.5 圖標的統一性89
6.□ 線性圖標89
6.□.1 利用Illustrator打造線性圖標89
6.□.□ 多種線性圖標風格98
6.3 面性圖標10□
6.3.1 面性圖標設計製作思路10□
6.3.□ 多種面性圖標風格10□
6.4 □.5D圖標104
6.4.1 利用Illustrator打造□.5D圖標104
6.4.□ 使用Photoshop打造□.5D圖標107
6.5 MBE圖標107
6.6 利用Photoshop打造擬物化圖標108
6.7 延伸閱讀與練習111
6.7.1 利用Illustrator批量導出圖標111
6.7.□ 拓展練習: 利用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.□ 手機主題界面設計內容1□0
7.1.3 手機界面設計的原則1□0
7.□ 項目實作:卡通小熊手機主題界面設計1□1
7.□.1 界面設計任務分析1□1
7.□.□ 學習目標1□□
7.□.3 製作步驟詳解1□□
7.3 項目實作:偽扁平手機主題界面設計136
7.3.1 界面設計任務分析136
7.3.□ 學習目標136
7.3.3 關鍵步驟提示136
7.4 獨立實踐137
7.5 本章小結137
第8章App界面設計
8.1 App界面設計概述138
8.1.1 手機App界面視覺設計138
8.1.□ 手機App界面用戶體驗設計139
8.1.3 App界面布□設計139
8.□ 項目實作:操作型App―計算器界面設計140
8.□.1 界面設計任務分析140
8.□.□ 學習目標141
8.□.3 製作步驟詳解141
8.3 項目實作:拼拼樂App界面設計143
8.3.1 界面設計任務分析143
8.3.□ 學習目標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.□ 網站頁面的功能美與形式美149
9.□ 項目實作:一欄式簡單網頁設計與製作150
9.□.1 界面設計任務分析150
9.□.□ 學習目標151
9.□.3 製作步驟詳解151
9.3 項目實作:多欄式電子商務網頁設計與製作156
9.3.1 界面設計任務分析156
9.3.□ 學習目標157
9.3.3 製作步驟詳解157
9.4 項目實作:自由版式專題網頁設計與製作169
9.4.1 界面設計任務分析169
9.4.□ 學習目標171
9.4.3 製作步驟詳解171
9.5 獨立實踐□03
9.6 本章小結□03
□□0章智能電視界面設計
10.1 智能電視界面設計概述□04
10.1.1 智能電視界面設計□04
10.1.□ 智能電視界面設計的原則□04
10.□ 項目實作:智能電視界面設計□05
10.□.1 界面設計任務分析□05
10.□.□ 學習目標□05
10.□.3 製作步驟詳解□06
10.3 獨立實踐□17
10.4 本章小結□17
□□1章其他類型人機界面設計
11.1 人機界面設計概述□18
11.1.1 人機界面概述□18
11.1.□ 人機界面設計的要點□□0
11.1.3 人機界面設計的原則□□1
11.□ 項目實作:播放器界面設計□□1
11.□.1 界面設計任務分析□□1
11.□.□ 學習目標□□□
11.□.3 製作步驟詳解□□□
11.3 獨立實踐□□9
11.4 本章小結□□9