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

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