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．2　4種設計風格的扁平化圖標 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　３
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　４
瞭解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　５
扁平化APP界麵設計 129
5．1　瞭解APP 129
5．1．1 　什麼是APP 129
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　６
扁平化網頁界麵設計 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
· · · · · · (收起)