這是一本系統(tǒng)介紹UI設(shè)計(jì)的書(shū)，可帶領(lǐng)初、中級(jí)讀者快速學(xué)習(xí)UI設(shè)計(jì)知識(shí)、技巧和操作。
本書(shū)從UI設(shè)計(jì)基礎(chǔ)入手，結(jié)合大量的案例分析，深入地講解了UI設(shè)計(jì)的界面類型、界面構(gòu)圖、版面布局、元素、界面用色、設(shè)計(jì)原則與規(guī)范、切圖與標(biāo)注、圖標(biāo)設(shè)計(jì)及藝術(shù)二維 碼設(shè)計(jì)等方面的內(nèi)容。通過(guò)實(shí)戰(zhàn)練習(xí)，幫助讀者輕松地掌握UI設(shè)計(jì)的相關(guān)技術(shù)。
隨書(shū)附帶所有實(shí)戰(zhàn)案例的源文件和素材文件，方便讀者練習(xí)。
本書(shū)適合UI設(shè)計(jì)師、交互設(shè)計(jì)師、準(zhǔn)備轉(zhuǎn)至UI設(shè)計(jì)方向的平面設(shè)計(jì)師，以及相關(guān)專業(yè)的高校學(xué)生閱讀。
UI設(shè)計(jì)界高人氣設(shè)計(jì)師、MICU設(shè)計(jì)G眾號(hào)創(chuàng)辦人王鐸傾力打造！360設(shè)計(jì)總監(jiān)、Boss直聘設(shè)計(jì)總監(jiān)、UI中國(guó)聯(lián)合創(chuàng)辦人、抖音設(shè)計(jì)總監(jiān)聯(lián)袂推。
從UI設(shè)計(jì)的基礎(chǔ)入手，結(jié)合大量的案例分析和針對(duì)性實(shí)戰(zhàn)（界面設(shè)計(jì)、字體設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、Logo設(shè)計(jì)、界面切圖以及二 維碼制作），深入地闡述了UI設(shè)計(jì)的操作技巧。
46大知識(shí)點(diǎn)：9大版塊+25個(gè)設(shè)計(jì)分析+12個(gè)實(shí)戰(zhàn)案例，25大設(shè)計(jì)分析：設(shè)計(jì)思維+用戶體驗(yàn)+設(shè)計(jì)方法，12套實(shí)戰(zhàn)案例：界面設(shè)計(jì)+切圖輸出+圖標(biāo)制作+Logo定制。
豐富的配套學(xué)習(xí)資源及教學(xué)資源：所有實(shí)戰(zhàn)案例的設(shè)計(jì)源文件、PPT教學(xué)課件及教學(xué)大綱。
王鐸，先后服務(wù)于騰訊、奇虎360、今日頭條等公司，人民網(wǎng)特邀講師。 參與項(xiàng)目手機(jī)QQ、360兒童衛(wèi)士、360空氣凈化器及360防丟衛(wèi)士、老虎地圖、內(nèi)涵段子等產(chǎn)品。 第五屆國(guó)際大學(xué)生動(dòng)畫(huà)節(jié)漫畫(huà)插畫(huà)類作品獎(jiǎng) 創(chuàng)意紫峰優(yōu)秀作品獎(jiǎng)中國(guó)包裝創(chuàng)意設(shè)計(jì)大賽 優(yōu)秀獎(jiǎng)中國(guó)之星設(shè)計(jì)藝術(shù)大獎(jiǎng)獲 中國(guó)綠化基金會(huì)“綠色愛(ài)心設(shè)計(jì)師”稱號(hào)。
第 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
新書(shū)資訊