新印象：解構(gòu)UI設(shè)計(jì)（第2版）

第 1章 界面類型 009
1.1 閃屏頁(yè) 010
1.1.1 品牌宣傳型 010
1.1.2 節(jié)日關(guān)懷型 011
1.1.3 活動(dòng)推廣型 012
1.2 引導(dǎo)頁(yè) 013
1.2.1 功能介紹型（初級(jí)） 013
1.2.2 情感帶入型（中級(jí)） 014
1.2.3 搞笑型（高級(jí)） 015
1.3 浮層引導(dǎo)頁(yè) 016
1.4 空白頁(yè) 017
1.4.1 首次進(jìn)入型 017
1.4.2 錯(cuò)誤提示型 018
1.5 首頁(yè) 019
1.5.1 列表型 019
1.5.2 圖標(biāo)型 020
1.5.3 卡片型 020
1.5.4 綜合型 021
1.6 個(gè)人中心頁(yè) 022
1.7 列表頁(yè) 024
1.7.1 單行列表頁(yè) 024
1.7.2 雙行列表頁(yè) 025
1.7.3 時(shí)間軸列表頁(yè) 025
1.7.4 圖庫(kù)列表頁(yè) 026
1.8 播放頁(yè)面 027
1.9 詳情頁(yè) 028
1.10 可輸入頁(yè)面 029
1.11 實(shí)戰(zhàn)：兩步打造炫酷界面 030
1.11.1 繪制基礎(chǔ)圖形 030
1.11.2 添加顏色與細(xì)節(jié) 032
第 2章 界面構(gòu)圖 035
2.1 九宮格構(gòu)圖 036
案例分析 037
2.2 圓心放射構(gòu)圖 038
案例分析 039
2.3 三角形構(gòu)圖 041
案例分析 041
2.4 S形構(gòu)圖 043
案例分析 044
2.5 F形構(gòu)圖 047
案例分析 047
2.6 實(shí)戰(zhàn)：用多種構(gòu)圖方式
制作運(yùn)動(dòng)App界面 048
2.6.1 用放射構(gòu)圖設(shè)計(jì)運(yùn)動(dòng)頁(yè)面 048
2.6.2 用倒三角形構(gòu)圖設(shè)計(jì)地圖頁(yè)面 053
2.6.3 用三角形構(gòu)圖設(shè)計(jì)個(gè)人頁(yè)面 056
第3章 版面布局 059
3.1 界面版率 060
3.1.1 單色塊填充 061
3.1.2 多色塊組合 062
3.1.3 穿插填充 062
3.1.4 關(guān)鍵詞圖形化 063
3.1.5 放大文字 064
3.2 摳圖法 065
案例分析 065
3.3 破界法 066
案例分析 066
3.4 局部提取 069
案例分析 069
3.5 對(duì)齊方式 070
3.5.1 界面中常用的對(duì)齊方式 070
3.5.2 小米官網(wǎng)的登錄頁(yè) 072
3.5.3 蘋(píng)果官網(wǎng)的登錄頁(yè) 073
3.6 間距 074
案例分析 074
3.7 視覺(jué)層次 077
案例分析 077
3.8 實(shí)戰(zhàn)：設(shè)計(jì)空氣凈化器App界面 080
3.8.1 對(duì)頁(yè)面進(jìn)行整體布局 080
3.8.2 設(shè)計(jì)“較差”頁(yè)面 082
3.8.3 設(shè)計(jì)“良好”頁(yè)面 086
第4章 元素 087
點(diǎn)線面 088
案例分析 088
4.2 極簡(jiǎn)至上 093
案例分析 093
4.3 品牌靈魂 095
案例分析 095
4.4 形象靈魂化 096
案例分析 096
4.5 動(dòng)畫(huà)賦予設(shè)計(jì)生命 099
案例分析 099
4.6 菜單設(shè)定 100
案例分析 100
4.7 實(shí)戰(zhàn)：快速制作晶格化界面 101
4.7.1 制作圓形頭像 101
4.7.2 制作晶格背景 102
4.7.3 制作界面細(xì)節(jié) 104
第5章 界面用色 107
5.1 感知色彩 108
5.1.1 紅色 109
5.1.2 橙色 110
5.1.3 黃色 110
5.1.4 綠色 111
5.1.5 藍(lán)色 111
5.1.6 粉色 112
5.1.7 黑色 112
5.2 色不過(guò)三 113
案例分析 113
5.3 主色、輔助色及點(diǎn)睛色 116
5.3.1 主色 116
5.3.2 輔助色 117
5.3.3 點(diǎn)睛色 118
5.4 配色 119
5.4.1 互補(bǔ)色搭配 119
5.4.2 冷暖對(duì)比色搭配 121
5.5 實(shí)戰(zhàn)：設(shè)計(jì)色彩統(tǒng)一的頁(yè)面 123
5.5.1 設(shè)計(jì)頁(yè)面圖標(biāo) 123
5.5.2 設(shè)計(jì)個(gè)人中心頁(yè) 128
5.5.3 設(shè)計(jì)聊天頁(yè) 132
第6章 設(shè)計(jì)原則與規(guī)范 135
6.1 iOS的五大設(shè)計(jì)原則 136
6.1.1 突顯內(nèi)容原則 137
6.1.2 統(tǒng)一化原則 139
6.1.3 適應(yīng)化原則 140
6.1.4 層級(jí)性原則 144
6.1.5 易操作性原則 145
6.2 iOS界面尺寸及控件設(shè)計(jì)規(guī)范 147
6.2.1 界面尺寸 147
6.2.2 控件設(shè)計(jì)規(guī)范 149
6.3 Android設(shè)計(jì)原則及規(guī)范 154
6.3.1 Android的設(shè)計(jì)原則 154
6.3.2 Android的控件設(shè)計(jì)規(guī)范 158
6.3.3 Android的設(shè)計(jì)尺寸及單位 163
6.4 常用字體規(guī)范 165
6.4.1 成也字，敗也字 165
6.4.2 字不過(guò)三 166
案例分析 166
6.4.3 文字與背景要分明 168
6.4.4 字體與氣氛要匹配 168
案例分析 168
6.4.5 常用字體類型 169
6.4.6 界面字體規(guī)范 172
6.4.7 常用字體顏色 174
6.5 制定一套設(shè)計(jì)規(guī)范 175
6.5.1 色彩規(guī)范 176
6.5.2 按鈕控件規(guī)范 177
6.5.3 分割線規(guī)范 177
6.5.4 頭像規(guī)范 177
6.5.5 其他控件與聊天氣泡規(guī)范 178
6.5.6 文字字號(hào)規(guī)范 179
6.5.7 間距規(guī)范 180
6.5.8 圖標(biāo)規(guī)范 181
6.6 實(shí)戰(zhàn)：設(shè)計(jì)毛筆字風(fēng)格的登錄頁(yè) 182
6.6.1 制作基礎(chǔ)字體 182
6.6.2 用筆刷設(shè)計(jì)細(xì)節(jié) 184
第7章 切圖與標(biāo)注 189
7.1 高效切圖 190
7.1.1 iPhone屏幕與Android手機(jī)屏幕的關(guān)系 190
7.1.2 Android的常用單位 191
7.1.3 通用切圖法 192
7.1.4 Android的“點(diǎn)九”切圖法 194
7.2 界面標(biāo)注 197
7.2.1 標(biāo)注軟件 197
7.2.2 標(biāo)注規(guī)范 198
7.3 實(shí)戰(zhàn)：為一款首頁(yè)界面切圖 201
7.3.1 切圖分析 201
7.3.2 iOS切圖 203
7.3.3 Android切圖 205
第8章 圖標(biāo)設(shè)計(jì) 207
8.1 圖標(biāo)創(chuàng)意 208
8.1.1 卡通形象化 208
8.1.2 關(guān)鍵詞圖形化 208
8.1.3 文字直觀化 209
案例分析 209
8.2 圖標(biāo)類型 210
8.2.1 像素圖標(biāo) 210
案例分析 211
8.2.2 擬物化圖標(biāo) 212
8.2.3 扁平化圖標(biāo) 212
案例分析 214
8.2.4 線性圖標(biāo) 215
案例分析 215
8.2.5 立體圖標(biāo) 217
案例分析 217
8.3 實(shí)戰(zhàn)：繪制功能圖標(biāo) 219
8.3.1 功能圖標(biāo)的設(shè)計(jì)規(guī)范 219
8.3.2 功能圖標(biāo)的繪制過(guò)程 220
8.4 實(shí)戰(zhàn)：制作立體圖標(biāo) 227
8.4.1 制作透視網(wǎng)格 227
8.4.2 制作立體字 228
8.4.3 制作燈泡 229
8.4.4 制作光暈 230
8.5 實(shí)戰(zhàn)：快速制作線條流暢的Logo 231
8.5.1 制作Logo形狀的輔助線 231
8.5.2 生成Logo路徑形狀 232
8.5.3 將輔助線設(shè)置為虛線 234
第9章 藝術(shù)二維碼設(shè)計(jì) 235
9.1 二維碼的原理與結(jié)構(gòu) 236
9.2 動(dòng)態(tài)二維碼的表現(xiàn) 239
9.2.1 MICU二維碼——航行 239
9.2.2 MICU二維碼——音樂(lè)節(jié) 240
9.2.3 MICU二維碼——清涼夏日 241
9.2.4 MICU二維碼——UI疫苗站 241
9.2.5 MICU二維碼——設(shè)計(jì)樂(lè)園 242
案例分析 242
9.3 實(shí)戰(zhàn)：制作寶馬春節(jié)藝術(shù)二維碼 245
9.3.1 制作原碼 245
9.3.2 設(shè)計(jì)二維碼 246
9.3.3 制作動(dòng)效 249
9.4 實(shí)戰(zhàn)：快速制作動(dòng)態(tài)界面 253
9.4.1 導(dǎo)入GIF圖片并轉(zhuǎn)換為智能對(duì)象 253
9.4.2 制作透視展示圖 254