第 1章 界面類型/ 009 1.1 閃屏頁 010 1.1.1 品牌宣傳型/ 010 1.1.2 節(jié)假關(guān)懷型/ 011 1.1.3 活動(dòng)推廣型/ 012 1.2 引導(dǎo)頁 013 1.2.1 功能介紹型（基礎(chǔ)型）/ 013 1.2.2 情感帶入型（中級(jí)型）/ 014 1.2.3 搞笑型（高級(jí)型）/ 015 1.3 浮層引導(dǎo)頁/ 016 1.4 空白頁/ 017 1.4.1 首次進(jìn)入型/ 017 1.4.2 錯(cuò)誤提示型/ 018 1.5 首頁/ 019 1.5.1 列表型/ 019 1.5.2 圖標(biāo)型/ 020 1.5.3 卡片型/ 020 1.5.4 綜合型/ 021 1.6 個(gè)人中心頁/ 022 1.7 列表頁/ 024 1.7.1 單行列表/ 024 1.7.2 雙行列表/ 025 1.7.3 時(shí)間軸/ 025 1.7.4 圖庫列表/ 026 1.8 播放頁面/ 027 1.9 詳情頁/ 028 1.10 可輸入頁面/ 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)頁面/ 048 2.6.2 用倒三角形構(gòu)圖設(shè)計(jì)地圖頁面/ 053 2.6.3 用三角形構(gòu)圖設(shè)計(jì)個(gè)人頁面/ 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 小米的登錄頁/ 072 3.5.3 蘋果的登錄頁/ 073 3.6 間距使用/ 074 案例分析/ 074 3.7 視覺層次/ 077 案例分析/ 077 3.8 實(shí)戰(zhàn)：設(shè)計(jì)智能空氣凈化器界面/080 3.8.1 對(duì)頁面進(jìn)行整體布局/ 080 3.8.2 設(shè)計(jì)“較差”頁面/ 082 3.8.3 設(shè)計(jì)“良好”頁面/ 086 第4章 元素之道/ 087 4.1 點(diǎn)線面/ 088 案例分析/ 088 4.2 極簡至上/ 093 案例分析/ 093 4.3 品牌靈魂/ 095 案例分析/ 095 4.4 形象靈魂化/ 096 案例分析/ 096 4.5 運(yùn)動(dòng)賦予生命/ 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 色不過三/ 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)一的界面/123 5.5.1 設(shè)計(jì)頁面圖標(biāo)/ 123 5.5.2 設(shè)計(jì)個(gè)人中心頁/ 128 5.5.3 設(shè)計(jì)聊天頁面/ 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 控件規(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 字不過三/ 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 文字規(guī)范/ 179 6.5.7 間距規(guī)范/ 180 6.5.8 圖標(biāo)規(guī)范/ 181 6.6 實(shí)戰(zhàn)：打造毛筆字風(fēng)格的登錄頁/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)：為一款首頁界面切圖/ 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)繪制過程/ 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ù)二維碼/ 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二維碼——音樂節(jié)/ 240 9.2.3 MICU二維碼——清涼夏日/ 241 9.2.4 MICU二維碼——UI疫苗站/ 241 9.2.5 MICU二維碼——設(shè)計(jì)樂園/ 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