Photoshop扁平化平面設(shè)計(jì)手冊（全彩）

CHAPTER　1
認(rèn)識扁平化設(shè)計(jì) 1　
1．1　擬物化設(shè)計(jì)概述 2
1．1．1 　認(rèn)識擬物化設(shè)計(jì) 2
1．1．2 擬物化設(shè)計(jì)的優(yōu)點(diǎn) 2
1．1．3 擬物化設(shè)計(jì)缺點(diǎn) 3
1．2 扁平化設(shè)計(jì)概述 3
1．2．1 認(rèn)識扁平化設(shè)計(jì) 3
1．2．2 扁平化設(shè)計(jì)優(yōu)點(diǎn) 4
1．2．3 扁平化設(shè)計(jì)缺點(diǎn) 5
1．3 扁平化設(shè)計(jì)所帶來的改變 5
1．3．1 全新的設(shè)計(jì)風(fēng)格 5
1．3．2 設(shè)計(jì)變得簡單直接 6
1．3．3 使用更加高效 6
1．4 扁平化設(shè)計(jì)的突出特點(diǎn) 7
1．4．1 強(qiáng)調(diào)簡約 7
1．4．2 快速高效 8
1．4．3 信息突出 8
1．4．4 簡潔清晰 8
1．4．5 修改方便 9
1．5 扁平化與類扁平化 9
1．5．1 扁平化流行的必然性 9
1．5．2 扁平化設(shè)計(jì)的局限性 10
1．5．3 類扁平化設(shè)計(jì) 11
1．6 如何設(shè)計(jì)出色的扁平化作品 12
1．6．1 去除特效 12
1．6．2 簡化提取 12
1．6．3 巧用色彩 13
1．6．4 排版很重要 13
1．7 本章小結(jié) 16
CHAPTER　2
扁平化圖標(biāo)設(shè)計(jì) 17
2．1　了解圖標(biāo)設(shè)計(jì) 18
2．1．1 　什么是圖標(biāo) 18
2．1．2 　圖標(biāo)設(shè)計(jì)的重要性 18
2．1．3 　圖標(biāo)常用尺寸 20
2．1．4 　圖標(biāo)常用格式 21
2．2　4種設(shè)計(jì)風(fēng)格的扁平化圖標(biāo) 22
2．2．1 　基礎(chǔ)風(fēng)格 22
案例分析―簡約基礎(chǔ)風(fēng)格圖標(biāo)設(shè)計(jì)分析 22
實(shí)戰(zhàn)案例―設(shè)計(jì)基礎(chǔ)風(fēng)格手機(jī)圖標(biāo) 23
2．2．2 　陰影風(fēng)格 27
案例分析―復(fù)古陰影風(fēng)格圖標(biāo)設(shè)計(jì)分析 27
實(shí)戰(zhàn)案例―設(shè)計(jì)陰影風(fēng)格日歷圖標(biāo) 28
2．2．3 　長陰影風(fēng)格 31
案例分析―長陰影風(fēng)格相機(jī)圖標(biāo)設(shè)計(jì)分析 31
實(shí)戰(zhàn)案例―設(shè)計(jì)長陰影風(fēng)格勛章圖標(biāo) 32
2．2．4 　微漸變風(fēng)格 40
案例分析―微漸變風(fēng)格圖標(biāo)設(shè)計(jì)分析 40
實(shí)戰(zhàn)案例―設(shè)計(jì)微漸變手機(jī)常用圖標(biāo) 41
2．3　扁平化圖標(biāo)設(shè)計(jì)原則 46
2．3．1 　具有很強(qiáng)的辨識性 46
2．3．2 　簡約實(shí)用 47
2．3．3 　圖標(biāo)之間的差異性 47
2．3．4 　具有很強(qiáng)的創(chuàng)意性 47
2．3．5 　美觀大方的視覺表現(xiàn)效果 48
2．3．6 與使用環(huán)境的協(xié)調(diào)性 48
案例分析―扁平化郵件圖標(biāo)設(shè)計(jì)分析 49
實(shí)戰(zhàn)案例―設(shè)計(jì)唱片音樂圖標(biāo) 49
2．4　扁平化圖標(biāo)設(shè)計(jì)技巧 54
2．4．1 　什么是好的扁平化圖標(biāo) 54
2．4．2 　圖標(biāo)的設(shè)計(jì)表現(xiàn)技巧 54
2．4．3 　扁平化圖標(biāo)的設(shè)計(jì)過程 55
案例分析―扁平化醫(yī)療圖標(biāo)設(shè)計(jì)分析 55
實(shí)戰(zhàn)案例―設(shè)計(jì)扁平化相機(jī)圖標(biāo) 56
2．5　本章小結(jié) 64
CHAPTER?。?br /> iOS系統(tǒng)扁平化設(shè)計(jì) 65
3．1　了解iOS系統(tǒng) 66
3．1．1 　什么是iOS系統(tǒng) 66
3．1．2 　iOS系統(tǒng)的發(fā)展歷史 66
3．1．3 　iOS系統(tǒng)手機(jī)常見屏幕尺寸
標(biāo)準(zhǔn) 67
3．2　iOS系統(tǒng)界面的設(shè)計(jì)原則 68
3．2．1 　美觀性 69
3．2．2 　一致性 69
3．2．3 　操作便捷 70
3．2．4 　及時(shí)反饋 70
3．2．5 　暗喻 71
3．2．6 　用戶控制 71
案例分析―iOS系統(tǒng)通話界面設(shè)計(jì)分析 72
實(shí)戰(zhàn)案例―設(shè)計(jì)iOS系統(tǒng)手機(jī)待機(jī)界面 72
3．3　iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范 77
3．3．1 　確保在iPhone和iPad上通用 78
3．3．2 　重新考慮基于Web的設(shè)計(jì) 78
案例分析―iOS系統(tǒng)城市天氣界面設(shè)計(jì)
分析 79
實(shí)戰(zhàn)案例―設(shè)計(jì)iOS系統(tǒng)手機(jī)天氣界面 79
3．4　iOS界面基本圖形 83
3．4．1 　矩形 83
3．4．2 　圓角矩形 84
3．4．3 　圓形 84
3．4．4 　其他形狀 85
案例分析―iOS系統(tǒng)軟件主界面設(shè)計(jì)分析 85
實(shí)戰(zhàn)案例―設(shè)計(jì)iOS系統(tǒng)手機(jī)主界面 86
3．5　扁平化設(shè)計(jì)要點(diǎn) 91
3．5．1 　精簡 91
3．5．2 　大膽 91
3．5．3 　細(xì)致 91
3．5．4 　精美 92
案例分析―iOS系統(tǒng)收音機(jī)界面設(shè)計(jì)分析 92
實(shí)戰(zhàn)案例―設(shè)計(jì)iOS系統(tǒng)音樂播放界面 93
3．6　本章小結(jié) 100
CHAPTER?。?br /> 了解Android系統(tǒng) 101
4．1　了解Android系統(tǒng) 102
4．1．1 　什么是Android系統(tǒng) 102
4．1．2 　Android系統(tǒng)的發(fā)展歷史 102
4．1．3 　Android系統(tǒng)手機(jī)常見屏幕
尺寸標(biāo)準(zhǔn) 103
4．2　Android系統(tǒng)的設(shè)計(jì)原則 104
4．2．1 　美觀大方的界面 104
4．2．2 　使用戶操作更加簡單 105
4．2．3 　完善的操作流程 107
案例分析―Android系統(tǒng)手機(jī)主界面
設(shè)計(jì)分析 108
實(shí)戰(zhàn)案例―設(shè)計(jì)Android系統(tǒng)手機(jī)待
機(jī)界面 108
4．3　如何實(shí)現(xiàn)扁平化設(shè)計(jì) 113
4．3．1 　簡化設(shè)計(jì)元素 113
4．3．2 　注意字體的應(yīng)用 114
4．3．3 　注意色彩的搭配 114
4．3．4 簡化交互 115
4．3．5 使用類扁平化設(shè)計(jì) 115
案例分析―Android系統(tǒng)平板主界面
設(shè)計(jì)分析 116
實(shí)戰(zhàn)案例―設(shè)計(jì)Android系統(tǒng)手機(jī)主
界面 116
4．4　Android系統(tǒng)界面的特點(diǎn) 121
4．4．1 簡約大方 121
4．4．2 操作便捷 121
4．4．3 通用性強(qiáng) 122
4．4．4 布局合理 122
案例分析―Android系統(tǒng)手機(jī)天氣界面
設(shè)計(jì)分析 122
實(shí)戰(zhàn)案例―設(shè)計(jì)Android系統(tǒng)病毒查殺
界面 123
4．5　本章小結(jié) 128
CHAPTER?。?br /> 扁平化APP界面設(shè)計(jì) 129
5．1　了解APP 129
5．1．1 　什么是APP 129
5．1．2 　APP軟件的類型 129
5．2　APP軟件界面布局 131
5．2．1 　iOS系統(tǒng)APP軟件界面布局
說明 132
案例分析―朋友圈APP界面設(shè)計(jì)分析 132
實(shí)戰(zhàn)案例―設(shè)計(jì)天氣APP界面 133
5．2．2 　Android系統(tǒng)APP軟件界面
布局說明 137
案例分析―網(wǎng)絡(luò)設(shè)備APP軟件界面設(shè)計(jì)
分析 138
實(shí)戰(zhàn)案例―設(shè)計(jì)醫(yī)療APP軟件界面 139
5．3　常見APP軟件引導(dǎo)界面類型 146
5．3．1 　功能介紹類 146
5．3．2 　使用說明類 146
5．3．3 　推廣類 146
5．3．4 　問題解決類 147
案例分析―網(wǎng)絡(luò)軟件APP引導(dǎo)界面設(shè)計(jì)
分析 147
實(shí)戰(zhàn)案例―設(shè)計(jì)APP引導(dǎo)界面 148
5．4　APP軟件界面的設(shè)計(jì)原則 155
5．4．1 　實(shí)用性 155
5．4．2 　統(tǒng)一的色彩與風(fēng)格 155
5．4．3 　合理的配色 156
5．4．4 　規(guī)范的操作流程 156
5．4．5 　視覺元素規(guī)范 156
案例分析―訂餐APP軟件界面設(shè)計(jì)分析 157
實(shí)戰(zhàn)案例―設(shè)計(jì)手機(jī)衛(wèi)士APP界面 157
5．5　APP軟件界面的設(shè)計(jì)要求 165
5．5．1 　APP軟件界面的特點(diǎn) 165
5．5．2 　APP軟件界面設(shè)計(jì)流程 166
5．5．3 　APP軟件界面的色彩搭配 166
5．5．4 　平板電腦軟件界面的特點(diǎn) 167
案例分析―平板電腦旅游APP界面設(shè)計(jì)
分析 167
實(shí)戰(zhàn)案例―設(shè)計(jì)平板電腦音樂APP界面 168
5．6　APP界面設(shè)計(jì)注意事項(xiàng) 176
5．6．1 　APP界面視覺設(shè)計(jì) 176
5．6．2 　APP界面設(shè)計(jì)的用戶體驗(yàn) 177
案例分析―平板電腦訂餐APP界面設(shè)計(jì)
分析 178
實(shí)戰(zhàn)案例―設(shè)計(jì)平板電腦相親APP界面 178
5．7　本章小結(jié) 188
CHAPTER?。?br /> 扁平化網(wǎng)頁界面設(shè)計(jì) 189
6．1　了解扁平化網(wǎng)頁界面設(shè)計(jì) 190
6．1．1 　什么是網(wǎng)頁界面設(shè)計(jì) 190
6．1．2 　網(wǎng)頁界面設(shè)計(jì)的特點(diǎn) 190
6．2　網(wǎng)頁界面構(gòu)成元素 193
6．2．1 　文字 193
6．2．2 　圖像 193
6．2．3 　多媒體 193
6．2．4 　色彩 194
案例分析―餐飲類網(wǎng)站界面設(shè)計(jì)分析 194
實(shí)戰(zhàn)案例―設(shè)計(jì)汽車宣傳網(wǎng)頁界面 195
6．3　扁平化網(wǎng)頁設(shè)計(jì)元素 201
6．3．1 　圖標(biāo) 201
6．3．2 　圓角 201
6．3．3 　折角 202
6．3．4 　標(biāo)簽 202
6．3．5 　徽章 202
6．3．6 條紋 203
6．3．7 　裝飾元素 203
6．3．8 　裝飾背景 203
案例分析―產(chǎn)品宣傳網(wǎng)站界面設(shè)計(jì)分析 204
實(shí)戰(zhàn)案例――設(shè)計(jì)企業(yè)網(wǎng)站界面 204
6．4　扁平化設(shè)計(jì)配色 213
6．4．1 　常見的扁平化配色風(fēng)格 213
6．4．2 　常見扁平化設(shè)計(jì)顏色 215
案例分析―女性時(shí)尚網(wǎng)站界面設(shè)計(jì)分析 215
實(shí)戰(zhàn)案例―設(shè)計(jì)環(huán)保網(wǎng)站界面 216
6．5　扁平化網(wǎng)站界面布局 223
6．5．1 　偏扁平化網(wǎng)站界面布局
結(jié)構(gòu)標(biāo)準(zhǔn) 223
6．5．2 　扁平化網(wǎng)站界面布局的
兩個(gè)要點(diǎn) 224
6．5．3 為用戶考慮原則 224
案例分析―產(chǎn)品專題頁設(shè)計(jì)分析 225
實(shí)戰(zhàn)案例―設(shè)計(jì)手機(jī)宣傳網(wǎng)站界面 225
6．6　本章小結(jié) 232
CHAPTER　7
扁平化軟件界面設(shè)計(jì) 233
7．1　了解軟件界面設(shè)計(jì) 234
7．1．1 　什么是軟件界面設(shè)計(jì) 234
7．1．2 　網(wǎng)站界面設(shè)計(jì)與軟件界面
設(shè)計(jì)的區(qū)別 234
7．2　軟件界面的設(shè)計(jì)法則 235
7．2．1 　以軟件功能操作為基礎(chǔ) 235
7．2．2 　具有清晰的層次結(jié)構(gòu) 235
7．2．3 　一致性和標(biāo)準(zhǔn)化 238
7．2．4 　良好的視覺反饋 239
案例分析―文件分享和管理軟件界面
設(shè)計(jì)分析 240
實(shí)戰(zhàn)案例―設(shè)計(jì)網(wǎng)絡(luò)云盤軟件界面 241
7．3　軟件界面的發(fā)展 246
7．3．1 　傳統(tǒng)軟件界面 246
7．3．2 　扁平化軟件界面趨勢 247
案例分析―圖像處理軟件界面設(shè)計(jì)分析 247
實(shí)戰(zhàn)案例―設(shè)計(jì)視頻轉(zhuǎn)換軟件界面 247
7．4　扁平化軟件界面介紹 257
7．4．1 　軟件界面分類 257
7．4．2 　軟件界面設(shè)計(jì)要點(diǎn) 257
7．4．3 　軟件界面的屏幕顯示 258
7．4．4 　軟件界面的設(shè)計(jì)原則 259
案例分析―企業(yè)管理軟件界面設(shè)計(jì)分析 259
實(shí)戰(zhàn)案例―設(shè)計(jì)手機(jī)管理軟件界面 260
7．5　軟件界面中的色彩搭配 269
7．5．1 　保持色調(diào)的一致 269
7．5．2 　使用柔和的色彩 269
7．5．3 　使用色彩作為功能分界的識別元素 270
7．5．4 　提供可選配色方案 270
7．5．5 　色彩搭配需要具有辨識度 270
7．5．6 　控制色彩的使用數(shù)量 271
案例分析―視頻軟件界面設(shè)計(jì)分析 271
實(shí)戰(zhàn)案例―設(shè)計(jì)音樂播放器軟件界面 272
7．6　本章小結(jié) 282
CHAPTER　8
扁平化在平面設(shè)計(jì)中的應(yīng)用 283
8．1　了解平面媒體設(shè)計(jì) 284
8．1．1 　什么是平面媒體設(shè)計(jì) 284
8．1．2 　扁平化平面媒體設(shè)計(jì) 284
案例分析―兒童活動宣傳廣告設(shè)計(jì)分析 285
實(shí)戰(zhàn)案例―設(shè)計(jì)活動宣傳廣告 285
8．2　扁平化設(shè)計(jì)中的字體 291
8．2．1 　字體應(yīng)用的重要性 291
8．2．2 　扁平化設(shè)計(jì)中常用英文字體 292
8．2．3 　扁平化設(shè)計(jì)中常用中文字體 294
案例分析―電影院活動海報(bào)設(shè)計(jì)分析 295
實(shí)戰(zhàn)案例―設(shè)計(jì)通信宣傳DM單頁 296
8．3　扁平化平面媒體設(shè)計(jì)要求 301
8．3．1 　主題鮮明突出 302
8．3．2 　形式與內(nèi)容統(tǒng)一 302
8．3．3 　強(qiáng)化整體布局 302
案例分析―企業(yè)文化宣傳展板設(shè)計(jì)分析 303
實(shí)戰(zhàn)案例―設(shè)計(jì)房地產(chǎn)圍擋廣告 303
8．4　平面媒體設(shè)計(jì) 307
8．4．1 　平面媒體設(shè)計(jì)的元素有
哪些 308
8．4．2 　平面媒體設(shè)計(jì)的流程 308
案例分析――運(yùn)動宣傳廣告設(shè)計(jì)分析 309
實(shí)戰(zhàn)案例――設(shè)計(jì)樓盤宣傳折頁 309
案例分析――宣傳折頁設(shè)計(jì)分析 318
實(shí)戰(zhàn)案例――設(shè)計(jì)企業(yè)宣傳畫冊 318
8．5　本章小結(jié) 326