Hi 扁平化Photoshop扁平化用戶界面設(shè)計(jì)教程

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