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

任媛媛

畢業於電子科技大學成都學院圖形藝術系。
出版圖書：《中文版3ds Max 2014/VRay效果圖製作完全自學寶典》。
工作經歷：2011年起從事建築動畫、室內外效果圖表現工作。
2015年起參與時代印象《中文版3ds Max 2016/VRay效果圖製作完全自學教程（實例版）》等圖書的編寫工作

第1章UI設計的常用工具009
1．1 Photoshop的界面介紹010
1．2 UI在Photoshop中的常用工具012
1．2．1課堂案例：用常用工具製作界面012
1．2．2移動工具015
1．2．3自由變換工具016
1．2．4矩形工具016
1．2．5圓角矩形工具017
1．2．6橢圓工具017
1．2．7鋼筆工具017
1．2．8直接選擇工具018
1．2．9橫排文字工具018
1．3 Illustrator的界面介紹019
1．4 UI在Illustrator中的常用工具021
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橢圓工具025
1．4 ．8多邊形工具026
1．4．9文字工具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聊天頁面181
課堂練習：製作預約信息頁181
課後習題：製作聊天頁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
課堂練習：將播放頁進行切圖191
課後習題：將旅遊主頁進行切圖192

第15章製作藝術二維碼193
15．1二維碼的原理結構194
15．2製作藝術二維碼195
15．2．1課堂案例：製作數藝社藝術二維碼195
15．2．2生成二維碼的方法197
15．2．3設計藝術二維碼的注意事項199
課堂練習：製作軟件書藝術二維碼200
課後習題：製作手繪書藝術二維碼200