UI設計基礎培訓教程（全彩版 第2版）

任媛媛，毕业于电子科技大学成都学院图形艺术系，4年建筑动画、室内外效果图表现工作经验，参与编写《中文版3ds Max 2014/VRay效果图制作完全自学宝典》 等图书。 王依洪，从事设计相关工作多年，拥有丰富的实战经验。

目錄

第 1 章 UI 設計的常用工具 009

1.1 Photoshop 的界面介紹 010

1.2 Photoshop 中的常用工具 012

1.2.1 課堂案例：用常用工具製作界面 012

1.2.2 移動工具 015

1.2.3 矩形工具 016

1.2.4 橢圓工具 017

1.2.5 鋼筆工具 017

1.2.6 直接選擇工具 018

1.2.7 橫排文字工具 018

1.3 Illustrator 的界面介紹 019

1.4 Illustrator 中的常用工具 020

1.4.1 課堂案例：用常用工具製作手機圖標 021

1.4.2 選擇工具 023

1.4.3 直接選擇工具 023

1.4.4 鋼筆工具 023

1.4.5 矩形工具 024

1.4.6 橢圓工具 025

1.4.7 多邊形工具 026

1.4.8 文字工具 026

1.5 在Photoshop 中導入Illustrator文件的方法 027

課堂練習：在Illustrator 中繪制鬧鐘App 功能圖標 028

課後習題：在Photoshop 中製作鬧鐘App 界面 028

第 2 章 界面構圖、佈局與色彩 029

2.1 界面的常見構圖類型 030

2.1.1 井字形構圖 030

2.1.2 三角形構圖 031

2.1.3 放射形構圖 031

2.1.4 折線形構圖 032

2.1.5 直角形構圖 033

2.2 界面佈局的要素 034

2.2.1 頁面的留白 034

2.2.2 頁面的對齊方式 034

2.2.3 界面的間距 035

2.2.4 界面的層次 035

2.3 界面的色彩搭配 037

2.3.1 色彩心理學 037

2.3.2 配色的方法 039

2.3.3 配色的要素 040

第3 章 UI 設計的原則及規範 041

3.1 iOS 系統的設計原則 042

3.1.1 統一化 042

3.1.2 凸顯內容 042

3.1.3 適應性 043

3.1.4 層級性 045

3.1.5 易操作性 046

3.2 iOS 界面尺寸與控件的設計規範 046

3.2. 1 界面尺寸 046

3.2.2 控件規範 047

3.3 Android 系統的設計原則 050

3.3. 1 核心視覺載體 050

3.3.2 層級空間 050

3.3.3 動畫 050

3.3.4 顏色 053

3.4 Android 界面尺寸與控件的設計規範054

3.4. 1 界面尺寸 054

3.4.2 控件規範 055

3.5 常用字體規範 063

3.5. 1 文字設計的要素 063

3.5.2 常用字體的類型 065

3.5.3 界面字體的規範 066

3.6 UI 設計的整體規範 069

3.6. 1 色彩控件 069

3.6.2 按鈕控件 069

3.6.3 分割線 070

3.6.4 頭像 070

3.6.5 提示框 070

3.6.6 文字 071

3.6.7 間距 072

3.6.8 圖標 072

第4 章 圖標設計 073

4.1 扁平化風格圖標 074

4.1.1 課堂案例：製作扁平化風格的播放器圖標 074

4.1.2 課堂案例：製作扁平化風格的旅游圖標 075

4.1.3 扁平化圖標的概念 077

4.1.4 扁平化圖標的類型 078

4.1.5 設計扁平化圖標的註意事項 078

4.2 線性風格圖標 079

4.2.1 課堂案例：製作線性風格的聊天圖標 079

4.2.2 課堂案例：製作線性風格的功能圖標 082

4.2.3 線性圖標的概念 084

4.2.4 設置線性圖標的註意事項 084

4.3 其他類型的圖標 085

4.3. 1 像素圖標 085

4.3.2 擬物化圖標 085

4.3.3 立體圖標 085

4.3.4 卡通圖標 085

4.3.5 文字圖標 086

4.3.6 功能圖形化圖標 086

課堂練習：在Illustrator 中繪制手機功能圖標 086

課後習題：在Photoshop 中繪制功能圖標 086

第5 章 閃屏頁設計 087

5.1 閃屏頁的概念 088

5.2 閃屏頁的常見類型 088

5.2.1 課堂案例：製作中秋主題的閃屏頁 088

5.2.2 宣傳型 092

5.2.3 關懷型 092

5.2.4 推廣型 093

課堂練習：製作品牌宣傳型閃屏頁 093

課後習題：製作推廣型閃屏頁 094

第6 章 引導頁與浮層引導頁設計095

6.1 引導頁的概念 096

6.2 引導頁的常見類型 096

6.2.1 課堂案例：製作功能介紹型引導頁 096

6.2.2 功能介紹型 100

6.2.3 情感型 101

6.2.4 幽默型 101

6.3 浮層引導頁 102

6.3.1 課堂案例：製作浮層引導頁 102

6.3.2 浮層引導頁的概念 104

課堂練習：製作旅游App 引導頁 105

課後習題：製作文檔App 引導頁 106

第7 章 空白頁設計 107

7.1 空白頁的概念 108

7.2 空白頁的常見類型 108

7.2.1 課堂案例：製作資料審核空白頁 108

7.2.2 首次進入型 112

7.2.3 錯誤提示型 112

課堂練習：製作消息中心空白頁 113

課後習題：製作購物車空白頁 114

第8 章 首頁設計 115

8.1 首頁的概念 116

8.2 首頁的常見類型 116

8.2.1 課堂案例：製作外賣App 首頁 116

8.2.2 列表型 125

8.2.3 圖標型 126

8.2.4 卡片型 126

8.2.5 綜合型 127

課堂練習：製作旅游App 主頁 128

課後習題：製作美食類App 主頁 128

第9 章 個人中心頁設計 129

9.1 個人中心頁的概念 130

9.2 個人中心頁的常見類型 131

9.2.1 課堂案例：製作個人中心頁 131

9.2.2 頭像居中對齊 137

9.2.3 頭像居左對齊 137

課堂練習：製作視頻App 個人中心頁 138

課後習題：製作學習類App 個人中心頁 138

第 10 章 列表頁設計 139

10.1 列表頁的概念 140

10.2 列表頁的常見類型 141

10.2.1 課堂案例：製作圖書折扣列表頁 141

10.2.2 單行列表 145

10.2.3 雙行列表 146

10.2.4 時間軸 146

10.2.5 圖庫列表 147

課堂練習：製作購物App 列表頁 147

課後習題：製作物流信息列表頁 148

第 11 章 播放頁設計 149

11.1 播放頁的概念 150

11.2 播放頁的常見類型 150

11.2.1 課堂案例：製作音樂播放器界面 150

11.2.2 音樂播放頁 155

11.2.3 視頻播放頁 156

11.2.4 音頻播放頁 157

課堂練習：製作音樂播放頁 157

課後習題：製作音頻播放頁 158

第 12 章 詳情頁設計 159

12.1 詳情頁的概念 160

12.2 詳情頁的常見類型 161

12.2.1 課堂案例：製作購物App 詳情頁 161

12.2.2 普通型 170

12.2.3 銷售型 170

課堂練習：製作食譜詳情頁 171

課後習題：製作旅游詳情頁 172

第 13 章 可輸入頁設計 173

13.1 可輸入頁的概念 174

13.2 可輸入頁的常見類型 175

13.2.1 課堂案例：製作軟件登錄頁 175

13.2.2 登錄頁面 180

13.2.3 信息發布頁面 180

13.2.4 聊天頁面 18 1

課堂練習：製作預約信息頁 18 1

課後習題：製作聊天頁 182

第 14 章 切圖與標註 183

14.1 iOS 與Android 的切圖方法 184

14.1.1 課堂案例：對個人中心界面進行切圖 184

14.1.2 Android 的常用單位 187

14.1.3 iOS 與Android 的尺寸關系 188

14.1.4 iOS 與Android 的切圖命名方式 188

14.1.5 通用切圖法 189

14.1.6 Android 的“點九”切圖法 189

14.2 界面標註 190

14.2.1 標註軟件 190

14.2.2 標註規範 190

課堂練習：對播放頁進行切圖 1 91

課後習題：對旅游主頁進行切圖 192

第 15 章 製作藝術二維碼 193

15.1 二維碼的原理結構 194

15.2 製作藝術二維碼 195

15.2.1 課堂案例：製作數藝設藝術二維碼 195

15.2.2 生成二維碼的方法 197

15.2.3 設計藝術二維碼的註意事項 199

課堂練習：製作軟件書藝術二維碼 200

課後習題：製作手繪書藝術二維碼 200