Photoshop扁平化平面設計手冊（全彩）

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