這是一本全面介紹UI設(shè)計的書，是幫助初級和中級讀者快速學(xué)習(xí)UI設(shè)計知識、技巧和操作的參考書。
本書從UI設(shè)計基礎(chǔ)入手，結(jié)合大量的案例分析和針對性實戰(zhàn)，全面深入地闡述了UI設(shè)計的界面類型、界面構(gòu)圖、版面布局、元素運用、界面用色、設(shè)計原則與規(guī)范、切圖與標注、圖標設(shè)計及藝術(shù)二維碼設(shè)計等方面的內(nèi)容。
本書共9章，每章分別介紹一個板塊的內(nèi)容，講解細致，案例分析與實戰(zhàn)數(shù)量豐富。通過豐富的實戰(zhàn)練習(xí)，讀者可以輕松而高效地掌握UI設(shè)計的相關(guān)技術(shù)。
本書講解模式新穎，非常符合讀者學(xué)習(xí)新知識的思維習(xí)慣。書中附帶所有實戰(zhàn)的源文件（完成文件）和素材文件，以方便讀者練習(xí)。
本書適合UI設(shè)計師、準備轉(zhuǎn)入UI設(shè)計方向的平面設(shè)計師，以及相關(guān)專業(yè)的高校學(xué)生閱讀。
UI設(shè)計界高人氣設(shè)計師、MICU設(shè)計公眾號創(chuàng)辦人王鐸傾力打造！360設(shè)計總監(jiān)、Boss直聘設(shè)計總監(jiān)、UI中國聯(lián)合創(chuàng)始人、抖音設(shè)計總監(jiān)聯(lián)袂推。
本書從UI設(shè)計的基礎(chǔ)入手，結(jié)合大量的案例分析和針對性實戰(zhàn)（界面設(shè)計、字體設(shè)計、圖標設(shè)計、Logo設(shè)計、界面切圖以及二維碼制作），全面而深入地闡述了UI設(shè)計的界面類型、界面構(gòu)圖、版面布局、元素運用、界面用色、設(shè)計原則與規(guī)范、切圖與標注、圖標設(shè)計以及藝術(shù)二維碼設(shè)計等方面的內(nèi)容。
王鐸，先后服務(wù)于騰訊、奇虎360、jin日頭條等知名公司，人民網(wǎng)特邀講師。 參與項目手機QQ、360兒童衛(wèi)士、360空氣凈化器及360防丟衛(wèi)士、老虎地圖、內(nèi)涵段子等產(chǎn)品。 第五屆國際大學(xué)生動畫節(jié)漫畫插畫類作品獎 創(chuàng)意紫峰優(yōu)秀作品獎中國包裝創(chuàng)意設(shè)計大賽 優(yōu)秀獎中國之星設(shè)計藝術(shù)大獎獲 中國綠化基金會“綠色愛心設(shè)計師”稱號。
第 1章 界面類型/ 009
1.1 閃屏頁 010
1.1.1 品牌宣傳型/ 010
1.1.2 節(jié)假關(guān)懷型/ 011
1.1.3 活動推廣型/ 012
1.2 引導(dǎo)頁 013
1.2.1 功能介紹型（基礎(chǔ)型）/ 013
1.2.2 情感帶入型（中級型）/ 014
1.2.3 搞笑型（高級型）/ 015
1.3 浮層引導(dǎo)頁/ 016
1.4 空白頁/ 017
1.4.1 首次進入型/ 017
1.4.2 錯誤提示型/ 018
1.5 首頁/ 019
1.5.1 列表型/ 019
1.5.2 圖標型/ 020
1.5.3 卡片型/ 020
1.5.4 綜合型/ 021
1.6 個人中心頁/ 022
1.7 列表頁/ 024
1.7.1 單行列表/ 024
1.7.2 雙行列表/ 025
1.7.3 時間軸/ 025
1.7.4 圖庫列表/ 026
1.8 播放頁面/ 027
1.9 詳情頁/ 028
1.10 可輸入頁面/ 029
1.11 實戰(zhàn)：兩步打造炫酷界面/ 030
1.11.1 繪制基礎(chǔ)圖形/ 030
1.11.2 添加顏色與細節(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 實戰(zhàn)：用多種構(gòu)圖方式制作運動App/ 048
2.6.1 用放射構(gòu)圖設(shè)計運動頁面/ 048
2.6.2 用倒三角形構(gòu)圖設(shè)計地圖頁面/ 053
2.6.3 用三角形構(gòu)圖設(shè)計個人頁面/ 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 對齊原則/ 070
3.5.1 界面中常用的對齊方式/ 070
3.5.2 小米的登錄頁/ 072
3.5.3 蘋果的登錄頁/ 073
3.6 間距使用/ 074
案例分析/ 074
3.7 視覺層次/ 077
案例分析/ 077
3.8 實戰(zhàn)：設(shè)計智能空氣凈化器界面/080
3.8.1 對頁面進行整體布局/ 080
3.8.2 設(shè)計“較差”頁面/ 082
3.8.3 設(shè)計“良好”頁面/ 086
第4章 元素之道/ 087
4.1 點線面/ 088
案例分析/ 088
4.2 極簡至上/ 093
案例分析/ 093
4.3 品牌靈魂/ 095
案例分析/ 095
4.4 形象靈魂化/ 096
案例分析/ 096
4.5 運動賦予生命/ 099
案例分析/ 099
4.6 菜單設(shè)定/ 100
案例分析/ 100
4.7 實戰(zhàn)：快速制作晶格化界面/ 101
4.7.1 制作圓形頭像/ 101
4.7.2 制作晶格背景/ 102
4.7.3 制作界面細節(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 藍色/ 111
5.1.6 粉色/ 112
5.1.7 黑色/ 112
5.2 色不過三/ 113
案例分析/ 113
5.3 主色、輔助色及點睛色/ 116
5.3.1 主色/ 116
5.3.2 輔助色/ 117
5.3.3 點睛色/ 118
5.4 如何配色/ 119
5.4.1 互補色搭配/ 119
5.4.2 冷暖對比搭配/ 121
5.5 實戰(zhàn)：設(shè)計一款色彩統(tǒng)一的界面/123
5.5.1 設(shè)計頁面圖標/ 123
5.5.2 設(shè)計個人中心頁/ 128
5.5.3 設(shè)計聊天頁面/ 132
第6章 設(shè)計原則及規(guī)范/135
6.1 iOS的五大設(shè)計原則/ 136
6.1.1 凸顯內(nèi)容原則/ 137
6.1.2 統(tǒng)一化原則/ 139
6.1.3 適應(yīng)化原則/ 140
6.1.4 層級性原則/ 144
6.1.5 易操作性原則/ 145
6.2 iOS界面尺寸及控件設(shè)計規(guī)范/ 147
6.2.1 界面尺寸/ 147
6.2.2 控件規(guī)范/ 149
6.3 Android設(shè)計原則及規(guī)范/ 154
6.3.1 Android的設(shè)計原則/ 154
6.3.2 Android的控件設(shè)計規(guī)范/ 158
6.3.3 Android的設(shè)計尺寸及單位/ 163
6.4 常用字體規(guī)范/ 165
6.4.1 成也字，敗也字/ 165
6.4.2 字不過三/ 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è)計規(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 文字規(guī)范/ 179
6.5.7 間距規(guī)范/ 180
6.5.8 圖標規(guī)范/ 181
6.6 實戰(zhàn)：打造毛筆字風(fēng)格的登錄頁/182
6.6.1 制作基礎(chǔ)字體/ 182
6.6.2 用筆刷設(shè)計細節(jié)/ 184
第7章 切圖與標注/ 189
7.1 高效切圖/ 190
7.1.1 iPhone屏幕與Android手機屏幕的關(guān)系/ 190
7.1.2 Android的常用單位/ 191
7.1.3 通用切圖法/ 192
7.1.4 Android“點九”切圖法/ 194
7.2 界面標注/ 197
7.2.1 標注軟件/ 197
7.2.2 標注規(guī)范/ 198
7.3 實戰(zhàn)：為一款首頁界面切圖/ 201
7.3.1 切圖分析/ 201
7.3.2 iOS切圖/ 203
7.3.3 Android切圖/ 205
第8章 圖標設(shè)計/ 207
8.1 圖標創(chuàng)意/ 208
8.1.1 卡通形象化/ 208
8.1.2 關(guān)鍵詞圖形化/ 208
8.1.3 字體直觀化/ 209
案例分析/ 209
8.2 圖標類型/ 210
8.2.1 像素圖標/ 210
案例分析/ 211
8.2.2 擬物化圖標/ 212
8.2.3 扁平化圖標/ 212
案例分析/ 214
8.2.4 線性圖標/ 215
案例分析/ 215
8.2.5 立體圖標/ 217
案例分析/ 217
8.3 實戰(zhàn)：繪制功能圖標/ 219
8.3.1 功能圖標設(shè)計規(guī)范/ 219
8.3.2 功能圖標繪制過程/ 220
8.4 實戰(zhàn)：制作立體圖標/ 227
8.4.1 制作透視網(wǎng)格/ 227
8.4.2 制作立體字/ 228
8.4.3 制作燈泡/ 229
8.4.4 制作光暈/ 230
8.5 實戰(zhàn)：快速制作線條流暢的Logo/231
8.5.1 制作Logo形狀的輔助線/ 231
8.5.2 生成Logo路徑形狀/ 232
8.5.3 將輔助線設(shè)置為虛線/ 234
第9章 高端藝術(shù)二維碼/ 235
9.1 原理結(jié)構(gòu)/ 236
9.2 動態(tài)二維碼的表現(xiàn)/ 239
9.2.1 MICU二維碼——航行/ 239
9.2.2 MICU二維碼——音樂節(jié)/ 240
9.2.3 MICU二維碼——清涼夏日/ 241
9.2.4 MICU二維碼——UI疫苗站/ 241
9.2.5 MICU二維碼——設(shè)計樂園/ 242
案例分析/ 242
9.3 實戰(zhàn)：制作寶馬春節(jié)藝術(shù)二維碼/245
9.3.1 制作原碼/ 245
9.3.2 設(shè)計二維碼/ 246
9.3.3 制作動效/ 249
9.4 實戰(zhàn)：快速制作界面動態(tài)展示圖/253
9.4.1 導(dǎo)入GIF并轉(zhuǎn)為智能對象/ 253
9.4.2 制作透視展示圖/ 254
書單推薦
