第 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 蘋果官網(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)畫賦予設(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