新印象 解構(gòu)UI界面設(shè)計(jì)

第 1章 界面類型/ 009
1．1 閃屏頁(yè)\t010
1．1．1 品牌宣傳型/\t010
1．1．2 節(jié)假關(guān)懷型/\t011
1．1．3 活動(dòng)推廣型/\t012
1．2 引導(dǎo)頁(yè)\t013
1．2．1 功能介紹型（基礎(chǔ)型）/\t013
1．2．2 情感帶入型（中級(jí)型）/\t014
1．2．3 搞笑型（高級(jí)型）/\t015
1．3 浮層引導(dǎo)頁(yè)/\t016
1．4 空白頁(yè)/\t017
1．4．1 首次進(jìn)入型/\t017
1．4．2 錯(cuò)誤提示型/\t018
1．5 首頁(yè)/\t019
1．5．1 列表型/\t019
1．5．2 圖標(biāo)型/\t020
1．5．3 卡片型/\t020
1．5．4 綜合型/\t021
1．6 個(gè)人中心頁(yè)/\t022
1．7 列表頁(yè)/\t024
1．7．1 單行列表/\t024
1．7．2 雙行列表/\t025
1．7．3 時(shí)間軸/\t025
1．7．4 圖庫(kù)列表/\t026
1．8 播放頁(yè)面/\t027
1．9 詳情頁(yè)/\t028
1．10 可輸入頁(yè)面/\t029
1．11 實(shí)戰(zhàn)：兩步打造炫酷界面/\t030
1．11．1 繪制基礎(chǔ)圖形/\t030
1．11．2 添加顏色與細(xì)節(jié)/\t032
第 2章 界面構(gòu)圖/ 035
2．1 九宮格構(gòu)圖/\t036
案例分析/\t037
2．2 圓心放射構(gòu)圖/\t038
案例分析/\t039
2．3 三角形構(gòu)圖/\t041
案例分析/\t041
2．4 S形構(gòu)圖/\t043
案例分析/\t044
2．5 F形構(gòu)圖/\t047
案例分析/\t047
2．6 實(shí)戰(zhàn)：用多種構(gòu)圖方式制作運(yùn)動(dòng)App/\t048
2．6．1 用放射構(gòu)圖設(shè)計(jì)運(yùn)動(dòng)頁(yè)面/\t048
2．6．2 用倒三角形構(gòu)圖設(shè)計(jì)地圖頁(yè)面/\t053
2．6．3 用三角形構(gòu)圖設(shè)計(jì)個(gè)人頁(yè)面/\t056
第3章 版面布局/ 059
3．1 界面版率/\t060
3．1．1 單色塊填充/\t061
3．1．2 多色塊組合/\t062
3．1．3 穿插填充/\t062
3．1．4 關(guān)鍵詞圖形化/\t063
3．1．5 放大文字/\t064
3．2 摳圖法/\t065
案例分析/\t065
3．3 破界法/\t066
案例分析/\t066
3．4 局部提取/\t069
案例分析/\t069
3．5 對(duì)齊原則/\t070
3．5．1 界面中常用的對(duì)齊方式/\t070
3．5．2 小米的登錄頁(yè)/\t072
3．5．3 蘋果的登錄頁(yè)/\t073
3．6 間距使用/\t074
案例分析/\t074
3．7 視覺(jué)層次/\t077
案例分析/\t077
3．8 實(shí)戰(zhàn)：設(shè)計(jì)智能空氣凈化器界面/080
3．8．1 對(duì)頁(yè)面進(jìn)行整體布局/\t080
3．8．2 設(shè)計(jì)“較差”頁(yè)面/\t082
3．8．3 設(shè)計(jì)“良好”頁(yè)面/\t086
第4章 元素之道/ 087
4．1 點(diǎn)線面/\t088
案例分析/\t088
4．2 極簡(jiǎn)至上/\t093
案例分析/\t093
4．3 品牌靈魂/\t095
案例分析/\t095
4．4 形象靈魂化/\t096
案例分析/\t096
4．5 運(yùn)動(dòng)賦予生命/\t099
案例分析/\t099
4．6 菜單設(shè)定/\t100
案例分析/\t100
4．7 實(shí)戰(zhàn)：快速制作晶格化界面/\t101
4．7．1 制作圓形頭像/\t101
4．7．2 制作晶格背景/\t102
4．7．3 制作界面細(xì)節(jié)/\t104
第5章 “色誘”用戶/ 107
5．1 感知色彩/\t108
5．1．1 紅色/\t109
5．1．2 橙色/\t110
5．1．3 黃色/\t110
5．1．4 綠色/\t111
5．1．5 藍(lán)色/\t111
5．1．6 粉色/\t112
5．1．7 黑色/\t112
5．2 色不過(guò)三/\t113
案例分析/\t113
5．3 主色、輔助色及點(diǎn)睛色/\t116
5．3．1 主色/\t116
5．3．2 輔助色/\t117
5．3．3 點(diǎn)睛色/\t118
5．4 如何配色/\t119
5．4．1 互補(bǔ)色搭配/\t119
5．4．2 冷暖對(duì)比搭配/\t121
5．5 實(shí)戰(zhàn)：設(shè)計(jì)一款色彩統(tǒng)一的界面/123
5．5．1 設(shè)計(jì)頁(yè)面圖標(biāo)/\t123
5．5．2 設(shè)計(jì)個(gè)人中心頁(yè)/\t128
5．5．3 設(shè)計(jì)聊天頁(yè)面/\t132
第6章 設(shè)計(jì)原則及規(guī)范/135
6．1 iOS的五大設(shè)計(jì)原則/\t136
6．1．1 凸顯內(nèi)容原則/\t137
6．1．2 統(tǒng)一化原則/\t139
6．1．3 適應(yīng)化原則/\t140
6．1．4 層級(jí)性原則/\t144
6．1．5 易操作性原則/\t145
6．2 iOS界面尺寸及控件設(shè)計(jì)規(guī)范/\t147
6．2．1 界面尺寸/\t147
6．2．2 控件規(guī)范/\t149
6．3 Android設(shè)計(jì)原則及規(guī)范/\t154
6．3．1 Android的設(shè)計(jì)原則/\t154
6．3．2 Android的控件設(shè)計(jì)規(guī)范/\t158
6．3．3 Android的設(shè)計(jì)尺寸及單位/\t163
6．4 常用字體規(guī)范/\t165
6．4．1 成也字，敗也字/\t165
6．4．2 字不過(guò)三/\t166
案例分析/\t166
6．4．3 字與背景要分明/\t168
6．4．4 字體與氣氛要匹配/\t168
案例分析/\t168
6．4．5 常用字體類型/\t169
6．4．6 界面字體規(guī)范/\t172
6．4．7 字體常用顏色/\t174
6．5 建立一套設(shè)計(jì)規(guī)范/\t175
6．5．1 色彩控件規(guī)范/\t176
6．5．2 按鈕控件規(guī)范/\t177
6．5．3 分割線規(guī)范/\t177
6．5．4 頭像規(guī)范/\t177
6．5．5 提示框規(guī)范/\t178
6．5．6 文字規(guī)范/\t179
6．5．7 間距規(guī)范/\t180
6．5．8 圖標(biāo)規(guī)范/\t181
6．6 實(shí)戰(zhàn)：打造毛筆字風(fēng)格的登錄頁(yè)/182
6．6．1 制作基礎(chǔ)字體/\t182
6．6．2 用筆刷設(shè)計(jì)細(xì)節(jié)/\t184
第7章 切圖與標(biāo)注/ 189
7．1 高效切圖/\t190
7．1．1 iPhone屏幕與Android手機(jī)屏幕的關(guān)系/\t190
7．1．2 Android的常用單位/\t191
7．1．3 通用切圖法/\t192
7．1．4 Android“點(diǎn)九”切圖法/\t194
7．2 界面標(biāo)注/\t197
7．2．1 標(biāo)注軟件/\t197
7．2．2 標(biāo)注規(guī)范/\t198
7．3 實(shí)戰(zhàn)：為一款首頁(yè)界面切圖/\t201
7．3．1 切圖分析/\t201
7．3．2 iOS切圖/\t203
7．3．3 Android切圖/\t205
第8章 圖標(biāo)設(shè)計(jì)/ 207
8．1 圖標(biāo)創(chuàng)意/\t208
8．1．1 卡通形象化/\t208
8．1．2 關(guān)鍵詞圖形化/\t208
8．1．3 字體直觀化/\t209
案例分析/\t209
8．2 圖標(biāo)類型/\t210
8．2．1 像素圖標(biāo)/\t210
案例分析/\t211
8．2．2 擬物化圖標(biāo)/\t212
8．2．3 扁平化圖標(biāo)/\t212
案例分析/\t214
8．2．4 線性圖標(biāo)/\t215
案例分析/\t215
8．2．5 立體圖標(biāo)/\t217
案例分析/\t217
8．3 實(shí)戰(zhàn)：繪制功能圖標(biāo)/\t219
8．3．1 功能圖標(biāo)設(shè)計(jì)規(guī)范/\t219
8．3．2 功能圖標(biāo)繪制過(guò)程/\t220
8．4 實(shí)戰(zhàn)：制作立體圖標(biāo)/\t227
8．4．1 制作透視網(wǎng)格/\t227
8．4．2 制作立體字/\t228
8．4．3 制作燈泡/\t229
8．4．4 制作光暈/\t230
8．5 實(shí)戰(zhàn)：快速制作線條流暢的Logo/231
8．5．1 制作Logo形狀的輔助線/\t231
8．5．2 生成Logo路徑形狀/\t232
8．5．3 將輔助線設(shè)置為虛線/\t234
第9章 高端藝術(shù)二維碼/ 235
9．1 原理結(jié)構(gòu)/\t236
9．2 動(dòng)態(tài)二維碼的表現(xiàn)/\t239
9．2．1 MICU二維碼——航行/\t239
9．2．2 MICU二維碼——音樂(lè)節(jié)/\t240
9．2．3 MICU二維碼——清涼夏日/\t241
9．2．4 MICU二維碼——UI疫苗站/\t241
9．2．5 MICU二維碼——設(shè)計(jì)樂(lè)園/\t242
案例分析/\t242
9．3 實(shí)戰(zhàn)：制作寶馬春節(jié)藝術(shù)二維碼/245
9．3．1 制作原碼/\t245
9．3．2 設(shè)計(jì)二維碼/\t246
9．3．3 制作動(dòng)效/\t249
9．4 實(shí)戰(zhàn)：快速制作界面動(dòng)態(tài)展示圖/253
9．4．1 導(dǎo)入GIF并轉(zhuǎn)為智能對(duì)象/\t253
9．4．2 制作透視展示圖/\t254