Hi 扁平化Photoshop扁平化用戶界面設計教程

目錄
第1章 扁平化設計趨勢
1.1 擬物化與扁平化10
1.1.1　什么是擬物化設計.10
1.1.2　擬物化的優(yōu)缺點10
1.1.3　什么是扁平化設計.11
1.1.4　扁平化的優(yōu)缺點11
1.1.5　極簡主義12
1.1.6　扁平化設計的目的.12
1.2　扁平化設計潮流13
1.2.1　緩解審美疲勞.13
1.2.2　設計更加簡單.13
1.2.3　使用更加高效.14
1.3　扁平化設計技巧14
1.3.1　設計元素簡單化14
1.3.2　強調(diào)字體的使用15
1.3.3　色彩應用的重要性.15
1.3.4　交互設計簡化.16
1.3.5　類扁平化設計.16
1.4　為什么要選擇扁平化設計.17
1.4.1　快速而高效17
1.4.2　信息突出17
1.4.3　簡潔清晰18
1.4.4　方便修改18
1.5　扁平化設計要點18
1.5.1　精簡19
1.5.2　大膽19
1.5.3　細致19
1.5.4　酷.19
1.6　扁平化設計所帶來的問題.20
1.6.1　iOS7的扁平化設計缺陷.20
1.6.2　太扁平導致的可用性降低.21
1.6.3　解決方案—類扁平化設計21
第2章 扁平化圖標設計
2.1　圖標設計要求.23
2.1.1　什么是圖標23
2.1.2　圖標設計的作用和意義23
2.2　扁平化圖標設計原則24
2.2.1　可識別性24
2.2.2　差異性.24
2.2.3　與環(huán)境協(xié)調(diào)性.24
2.2.4　視覺效果25
2.2.5　創(chuàng)造性.25
2.3　不同扁平化圖標設計風格.25
2.3.1　基礎26
2.3.2　陰影26
2.3.3　長陰影.26
2.3.4　微漸變.27
2.4　實戰(zhàn)1 制作電話簿圖標.27
2.4.1　設計思維過程.27
2.4.2　設計關鍵字：基礎簡易27
2.4.3　 色彩搭配秘籍：紅色、淺棕色、淺藍色27
2.4.4　實例步驟解析.28
2.4.5　知識擴展31
2.5　實戰(zhàn)2 制作指南針圖標.33
2.5.1　設計思維過程.33
2.5.2　設計關鍵字：陰影.33
2.5.3　色彩搭配秘籍：藍色、白色、紅色33
2.5.4　實例步驟解析.34
2.5.5　知識擴展39
2.6　實戰(zhàn)3 制作記事本圖標.40
2.6.1　設計思維過程.40
2.6.2　設計關鍵字：長陰影40
2.6.3　 色彩搭配秘籍：橙色、淺黃色、藍色.40
2.6.4　實例步驟解析.41
2.6.5　知識擴展49
2.7　實戰(zhàn)4 制作時間圖標50
2.7.1　設計思維過程.51
2.7.2　設計關鍵字：微漸變51
2.7.3　色彩搭配秘籍：黃色、灰色、灰藍色.51
2.7.4　實例步驟解析.51
2.7.5　知識擴展55
2.8　實戰(zhàn)5 制作折紙風格扁平化圖標56
2.8.1　設計思維過程.56
2.8.2　設計關鍵字：多色彩保持統(tǒng)一.56
2.8.3　色彩搭配秘籍：紅色、黃色、藍色57
2.8.4　實例步驟解析.57
2.8.5　知識擴展60
2.9　扁平化圖標精選欣賞61
第3章 扁平化手機界面設計
3.1　手機屏幕尺寸標準63
3.1.1　手機屏幕相關術語.63
3.1.2　Android系統(tǒng)手機常見尺寸標準64
3.1.3　iOS系統(tǒng)手機常見尺寸標準.64
3.1.4　Windows系統(tǒng)手機常見尺寸標準65
3.2　扁平化手機界面設計特點.66
3.2.1　簡約大方66
3.2.2　操作便捷67
3.2.3　通用性強67
3.2.4　合理布局67
3.3　扁平化設計配色68
3.3.1　常見的扁平化配色風格68
3.3.2　常用扁平化設計顏色69
3.3.3　使用Adobe Kuler生成扁平化配色方案70
3.4　實戰(zhàn)1 手機待機界面71
3.4.1　設計思維過程.71
3.4.2　設計關鍵字：簡潔大方72
3.4.3　色彩搭配秘籍：藍色、深藍色、白色.72
3.4.4　實例步驟解析.72
3.4.5　知識擴展75
3.5　實戰(zhàn)2 手機主界面76
3.5.1　設計思維過程.76
3.5.2　設計關鍵字：美觀實用77
3.5.3　色彩搭配秘籍：淺黃色、紫色、綠色.77
3.5.4　實例步驟解析.77
3.5.5　知識擴展83
3.6　實戰(zhàn)3 Nexus5手機主題.84
3.6.1　設計思維過程.85
3.6.2　設計關鍵字：簡潔明朗85
3.6.3　色彩搭配秘籍：藍綠色、黃色、藍色.85
3.6.4　實例步驟解析.86
3.6.5　知識擴展92
3.7　實戰(zhàn)4 iOS7日期界面.93
3.7.1　設計思維過程.93
3.7.2　設計關鍵字：簡約鮮明94
3.7.3　色彩搭配秘籍：藍色、紅色、白色94
3.7.4　實例步驟解析.94
3.7.5　知識擴展99
3.8　實戰(zhàn)5 iOS7天氣界面.99
3.8.1　設計思維過程.100
3.8.2　設計關鍵字：同色系風格 100
3.8.3　色彩搭配秘籍：藍色、天藍色、淺藍色100
3.8.4　實例步驟解析.101
3.8.5　知識擴展105
3.9　實戰(zhàn)6 手機音樂播放界面.106
3.9.1　設計思維過程.106
3.9.2　設計關鍵字：復古風格106
3.9.3　 色彩搭配秘籍：灰色、藍色、灰粉色.107
3.9.4　實例步驟解析.107
3.9.5　知識擴展113
3.10　扁平化手機界面精選欣賞.114
第4章 扁平化平板APP設計
4.1　關于APP116
4.1.1　什么是APP116
4.1.2　平板與智能手機系統(tǒng)116
4.2　APP布局說明.118
4.2.1　Android系統(tǒng)APP布局.118
4.2.2　iOS系統(tǒng)APP布局.118
4.3　實戰(zhàn)1 天氣APP控件皮膚.119
4.3.1　設計思維過程.119
4.3.2　設計關鍵字：緊湊靈活119
4.3.3　色彩搭配秘籍：深藍色、藍色、灰藍色120
4.3.4　實例步驟解析.120
4.3.5　知識擴展124
4.4　實戰(zhàn)2 點餐APP界面125
4.4.1　設計思維過程.126
4.4.2　設計關鍵字：條理清晰126
4.4.3　色彩搭配秘籍：黃色、紅色、藍色126
4.4.4　實例步驟解析.127
4.4.5　知識擴展132
4.5　實戰(zhàn)3 電臺調(diào)頻APP界面.132
4.5.1　設計思維過程.133
4.5.2　設計關鍵字：靈活方便133
4.5.3　色彩搭配秘籍：紫色、灰色、白色133
4.5.4　實例步驟解析.134
4.5.5　知識擴展141
4.6　實戰(zhàn)4 平板音樂APP界面.142
4.6.1　設計思維過程.142
4.6.2　設計關鍵字： 個性舒適142
4.6.3　色彩搭配秘籍：深藍色、黃色、白色.143
4.6.4　實例步驟解析.143
4.6.5　知識擴展150
4.7　實戰(zhàn)5 社交APP界面151
4.7.1　設計思維過程.151
4.7.2　設計關鍵字：舒適簡潔152
4.7.3　色彩搭配秘籍：藍色、棕色、朱紅色.152
4.7.4　實例步驟解析.152
4.7.5　知識擴展160
4.8　扁平化APP設計精選欣賞.161
第5章 扁平化網(wǎng)頁界面設計
5.1　了解扁平化網(wǎng)頁界面設計.163
5.1.1　什么是網(wǎng)頁界面設計163
5.1.2　網(wǎng)頁界面設計要求.163
5.2　網(wǎng)頁界面構(gòu)成元素163
5.2.1　文字163
5.2.2　圖像164
5.2.3　多媒體.164
5.2.4　色彩164
5.3　扁平化網(wǎng)頁設計元素165
5.3.1　圖標165
5.3.2　圓角165
5.3.3　折角165
5.3.4　標簽166
5.3.5　徽章166
5.3.6　條紋166
5.3.7　裝飾元素166
5.3.8　裝飾背景166
5.4　WordPress主題167
5.4.1　了解WordPress主題167
5.4.2　使用WordPress主題167
5.5　實戰(zhàn)1 扁平化導航菜單設計.168
5.5.1　設計思維過程.168
5.5.2　設計關鍵字：重點突出168
5.5.3　色彩搭配秘籍：深灰色、淺灰色、藍色169
5.5.4　實例步驟解析.169
5.5.5　知識擴展173
5.6　實戰(zhàn)2 扁平化登錄頁面.175
5.6.1　設計思維過程.175
5.6.2　設計關鍵字： 簡潔大方175
5.6.3　色彩搭配秘籍：紫色、淺灰色、橙色.176
5.6.4　實例步驟解析.176
5.6.5　知識擴展183
5.7　實戰(zhàn)3 設計產(chǎn)品介紹頁面.184
5.7.1　設計思維過程.184
5.7.2　設計關鍵字：同色系對比、透明輕快.184
5.7.3　色彩搭配秘籍：深藍色、淺藍色、黃色184
5.7.4　實例步驟解析.185
5.7.5　知識擴展190
5.8　實戰(zhàn)4 設計圖形設計網(wǎng)站界面191
5.8.1　設計思維過程.191
5.8.2　設計關鍵字：簡單形象191
5.8.3　色彩搭配秘籍：紅色、灰色、白色192
5.8.4　實例步驟解析.192
5.8.5　知識擴展199
5.9　實戰(zhàn)5 扁平化廣告宣傳網(wǎng)頁界面200
5.9.1　設