Photoshop扁平化平面設計手冊

CHAPTER 1 認識扁平化設計1
1.1 擬物化設計概述2
1.1.1 認識擬物化設計2
1.1.2擬物化設計的優點2
1.1.3擬物化設計缺點3
1.2扁平化設計概述3
1.2.1認識扁平化設計3
1.2.2扁平化設計優點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.24種設計風格的扁平化圖標22
2.2.1 基礎風格22
（案例分析）簡約基礎風格圖標設計分析22
設計基礎風格手機圖標23
2.2.2 陰影風格27
（案例分析）復古陰影風格圖標設計分析27
（實戰案例）設計陰影風格日歷圖標28
2.2.3 長陰影風格31
（案例分析）長陰影風格相機圖標設計分析31
（實戰案例）設計長陰影風格勛章圖標32
2.2.4 微漸變風格40
（案例分析）微漸變風格圖標設計分析40
（實戰案例）設計微漸變手機常用圖標41
2.3 扁平化圖標設計原則46
2.3.1 具有很強的辨識性46
2.3.2 簡約實用47
2.3.3 圖標之間的差異性47
2.3.4 具有很強的創意性47
2.3.5 美觀大方的視覺表現效果48
2.3.6與使用環境的協調性48
（案例分析）扁平化郵件圖標設計分析49
（實戰案例）設計唱片音樂圖標49
2.4 扁平化圖標設計技巧54
2.4.1 什麼是好的扁平化圖標54
2.4.2 圖標的設計表現技巧54
2.4.3 扁平化圖標的設計過程55
（案例分析）扁平化醫療圖標設計分析55
（實戰案例）設計扁平化相機圖標56
2.5 本章小結64

CHAPTER 3 iOS系統扁平化設計65
3.1 了解iOS系統66
3.1.1 什麼是iOS系統66
3.1.2 iOS系統的發展歷史66
3.1.3 iOS系統手機常見屏幕尺寸標准67
3.2 iOS系統界面的設計原則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系統通話界面設計分析72
（實戰案例）設計iOS系統手機待機界面72
3.3 iOS系統界面的設計規范77
3.3.1 確保在iPhone和iPad上通用78
3.3.2 重新考慮基於Web的設計78
（案例分析）iOS系統城市天氣界面設計分析79
（實戰案例）設計iOS系統手機天氣界面79
3.4 iOS界面基本圖形83
3.4.1 矩形83
3.4.2 圓角矩形84
3.4.3 圓形84
3.4.4 其他形狀85
（案例分析）iOS系統軟件主界面設計分析85
（實戰案例）設計iOS系統手機主界面86
3.5 扁平化設計要點91
3.5.1 精簡91
3.5.2 大膽91
3.5.3 細致91
3.5.4 精美92
（案例分析）iOS系統收音機界面設計分析92
（實戰案例）設計iOS系統音樂播放界面93
3.6 本章小結100

CHAPTER 4 了解Android系統101
4.1 了解Android系統102
4.1.1 什麼是Android系統102
4.1.2 Android系統的發展歷史102
4.1.3 Android系統手機常見屏幕尺寸標准103
4.2 Android系統的設計原則104
4.2.1 美觀大方的界面104
4.2.2 使用戶操作更加簡單105
4.2.3 完善的操作流程107
（案例分析）Android系統手機主界面設計分析108
（實戰案例）設計Android系統手機待機界面108
4.3 如何實現扁平化設計113
4.3.1 簡化設計元素113
4.3.2 注意字體的應用114
4.3.3 注意色彩的搭配114
4.3.4簡化交互115
4.3.5使用類扁平化設計115
（案例分析）Android系統平板主界面設計分析116
（實戰案例）設計Android系統手機主界面116
4.4 Android系統界面的特點121
4.4.1簡約大方121
4.4.2操作便捷121
4.4.3通用性強122
4.4.4布局合理122
（案例分析）Android系統手機天氣界面設計分析122
（實戰案例）設計Android系統病毒查殺界面123
4.5 本章小結128

CHAPTER 5 扁平化APP界面設計129
5.1 了解APP129
5.1.1 什麼是APP129
5.1.2 APP軟件的類型129
5.2 APP軟件界面布局131
5.2.1 iOS系統APP軟件界面布局說明132
（案例分析）朋友圈APP界面設計分析132
（實戰案例）設計天氣APP界面133
5.2.2 Android系統APP軟件界面布局說明137
（案例分析）網絡設備APP軟件界面設計分析138
（實戰案例）設計醫療APP軟件界面139
5.3 常見APP軟件引導界面類型146
5.3.1 功能介紹類146
5.3.2 使用說明類146
5.3.3 推廣類146
5.3.4 問題解決類147
（案例分析）網絡軟件APP引導界面設計分析147
（實戰案例）設計APP引導界面148
5.4 APP軟件界面的設計原則155
5.4.1 實用性155
5.4.2 統一的色彩與風格155
5.4.3 合理的配色156
5.4.4 規范的操作流程156
5.4.5 視覺元素規范156
（案例分析）訂餐APP軟件界面設計分析157
（實戰案例）設計手機衛士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
（實戰案例）設計平板電腦音樂APP界面168
5.6 APP界面設計注意事項176
5.6.1 APP界面視覺設計176
5.6.2 APP界面設計的用戶體驗177
（案例分析）平板電腦訂餐APP界面設計分析178
（實戰案例）設計平板電腦相親APP界面178
5.7 本章小結188

CHAPTER 6 扁平化網頁界面設計189
6.1 了解扁平化網頁界面設計190
6.1.1 什麼是網頁界面設計190
6.1.2 網頁界面設計的特點190
6.2 網頁界面構成元素193
6.2.1 文字193
6.2.2 圖像193
6.2.3 多媒體193
6.2.4 色彩194
（案例分析）餐飲類網站界面設計分析194
（實戰案例）設計汽車宣傳網頁界面195
6.3 扁平化網頁設計元素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
（案例分析）產品宣傳網站界面設計分析204
（實戰案例）—設計企業網站界面204
6.4 扁平化設計配色213
6.4.1 常見的扁平化配色風格213
6.4.2 常見扁平化設計顏色215
（案例分析）女性時尚網站界面設計分析215
（實戰案例）設計環保網站界面216
6.5 扁平化網站界面布局223
6.5.1 偏扁平化網站界面布局結構標准223
6.5.2 扁平化網站界面布局的兩個要點224
6.5.3為用戶考慮原則224
（案例分析）產品專題頁設計分析225
（實戰案例）設計手機宣傳網站界面225
6.6 本章小結232

CHAPTER 7 扁平化軟件界面設計233
7.1 了解軟件界面設計234
7.1.1 什麼是軟件界面設計234
7.1.2 網站界面設計與軟件界面設計的區別234
7.2 軟件界面的設計法則235
7.2.1 以軟件功能操作為基礎235
7.2.2 具有清晰的層次結構235
7.2.3 一致性和標准化238
7.2.4 良好的視覺反饋239
（案例分析）文件分享和管理軟件界面設計分析240
（實戰案例）設計網絡雲盤軟件界面241
7.3 軟件界面的發展246
7.3.1 傳統軟件界面246
7.3.2 扁平化軟件界面趨勢247
（案例分析）圖像處理軟件界面設計分析247
（實戰案例）設計視頻轉換軟件界面247
7.4 扁平化軟件界面介紹257
7.4.1 軟件界面分類257
7.4.2 軟件界面設計要點257
7.4.3 軟件界面的屏幕顯示258
7.4.4 軟件界面的設計原則259
（案例分析）企業管理軟件界面設計分析259
（實戰案例）設計手機管理軟件界面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 控制色彩的使用數量271
（案例分析）視頻軟件界面設計分析271
（實戰案例）設計音樂播放器軟件界面272
7.6 本章小結282

CHAPTER 8 扁平化在平面設計中的應用283
8.1 了解平面媒體設計284
8.1.1 什麼是平面媒體設計284
8.1.2 扁平化平面媒體設計284
（案例分析）兒童活動宣傳廣告設計分析285
（實戰案例）設計活動宣傳廣告285
8.2 扁平化設計中的字體291
8.2.1 字體應用的重要性291
8.2.2 扁平化設計中常用英文字體292
8.2.3 扁平化設計中常用中文字體294
（案例分析）電影院活動海報設計分析295
（實戰案例）設計通信宣傳DM單頁296
8.3 扁平化平面媒體設計要求301
8.3.1 主題鮮明突出302
8.3.2 形式與內容統一302
8.3.3 強化整體布局302
（案例分析）企業文化宣傳展板設計分析303
（實戰案例）設計房地產圍擋廣告303
8.4 平面媒體設計307
8.4.1 平面媒體設計的元素有哪些308
8.4.2 平面媒體設計的流程308
（案例分析）運動宣傳廣告設計分析309
（實戰案例）設計樓盤宣傳折頁309
（案例分析）宣傳折頁設計分析318
（實戰案例）設計企業宣傳畫冊318
8.5 本章小結326