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

《Hi!扁平化Photoshop扁平化用戶界面設計教程》是2015年5月人民郵電出版社出版的圖書，作者是金景文化。

基本介紹

• 中文名：Hi!扁平化Photoshop扁平化用戶界面設計教程
• 作者：金景文化
• 出版時間：2015年5月
• 出版社：人民郵電出版社
• 頁數：328 頁
• ISBN：9787115359940
• 定價：69.8 元
• 開本：16 開
• 裝幀：平裝

內容簡介

《Hi 扁平化Photoshop扁平化用戶界面設計教程》針對扁平化設計風格，從扁平化的設計思想出發，詳細講解了扁平化風格的圖示設計、手機界面設計、平板APP設計、網頁界面設計和平面媒體設計的設計思路和方法，以及使用Photoshop進行扁平化設計製作的方法和技巧。

全書共分為7章，全面介紹了扁平化設計中的理論知識，以及具體案例的製作方法。精選實際工作案例，通過設計思維過程、設計關鍵字、色彩搭配秘籍、實例步驟解析、知識擴展5大講述環節提升讀者的實際操作能力。

隨書附贈所有案例製作過程的教學視頻，以及所有案例的源檔案和素材檔案，方便讀者借鑑和使用。

《Hi 扁平化Photoshop扁平化用戶界面設計教程》適合有一定Photoshop軟體操作基礎的設計初學者及設計愛好者閱讀，也可以為一些設計製作人員及相關專業的學習者提供參考。

圖書目錄

第 1章 扁平化設計趨勢

1.1 擬物化與扁平化10

1.1.1　什麼是擬物化設計.10

1.1.2　擬物化的優缺點10

1.1.3　什麼是扁平化設計.11

1.1.4　扁平化的優缺點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　強調字型的使用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　與環境協調性.24

2.2.4　視覺效果25

2.2.5　創造性.25

2.3　不同扁平化圖示設計風格.25

2.3.1　基礎26

2.3.2　陰影26

2.3.3　長陰影.26

2.3.4　微漸變.27

2.4　實戰1 製作電話簿圖示.27

2.4.1　設計思維過程.27

2.4.2　設計關鍵字：基礎簡易27

2.4.3　 色彩搭配秘籍：紅色、淺棕色、淺藍色27

2.4.4　實例步驟解析.28

2.4.5　知識擴展31

2.5　實戰2 製作指南針圖示.33

2.5.1　設計思維過程.33

2.5.2　設計關鍵字：陰影.33

2.5.3　色彩搭配秘籍：藍色、白色、紅色33

2.5.4　實例步驟解析.34

2.5.5　知識擴展39

2.6　實戰3 製作記事本圖示.40

2.6.1　設計思維過程.40

2.6.2　設計關鍵字：長陰影40

2.6.3　 色彩搭配秘籍：橙色、淺黃色、藍色.40

2.6.4　實例步驟解析.41

2.6.5　知識擴展49

2.7　實戰4 製作時間圖示50

2.7.1　設計思維過程.51

2.7.2　設計關鍵字：微漸變51

2.7.3　色彩搭配秘籍：黃色、灰色、灰藍色.51

2.7.4　實例步驟解析.51

2.7.5　知識擴展55

2.8　實戰5 製作摺紙風格扁平化圖示56

2.8.1　設計思維過程.56

2.8.2　設計關鍵字：多色彩保持統一.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系統手機常見尺寸標準64

3.1.3　iOS系統手機常見尺寸標準.64

3.1.4　Windows系統手機常見尺寸標準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　實戰1 手機待機界面71

3.4.1　設計思維過程.71

3.4.2　設計關鍵字：簡潔大方72

3.4.3　色彩搭配秘籍：藍色、深藍色、白色.72

3.4.4　實例步驟解析.72

3.4.5　知識擴展75

3.5　實戰2 手機主界面76

3.5.1　設計思維過程.76

3.5.2　設計關鍵字：美觀實用77

3.5.3　色彩搭配秘籍：淺黃色、紫色、綠色.77

3.5.4　實例步驟解析.77

3.5.5　知識擴展83

3.6　實戰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　實戰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　實戰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　實戰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　平板與智慧型手機系統116

4.2　APP布局說明.118

4.2.1　Android系統APP布局.118

4.2.2　iOS系統APP布局.118

4.3　實戰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　實戰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　實戰3 電台調頻APP界面.132

4.5.1　設計思維過程.133

4.5.2　設計關鍵字：靈活方便133

4.5.3　色彩搭配秘籍：紫色、灰色、白色133

4.5.4　實例步驟解析.134

4.5.5　知識擴展141

4.6　實戰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　實戰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章 扁平化網頁界面設計

5.1　了解扁平化網頁界面設計.163

5.1.1　什麼是網頁界面設計163

5.1.2　網頁界面設計要求.163

5.2　網頁界面構成元素163

5.2.1　文字163

5.2.2　圖像164

5.2.3　多媒體.164

5.2.4　色彩164

5.3　扁平化網頁設計元素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　實戰1 扁平化導航選單設計.168

5.5.1　設計思維過程.168

5.5.2　設計關鍵字：重點突出168

5.5.3　色彩搭配秘籍：深灰色、淺灰色、藍色169

5.5.4　實例步驟解析.169

5.5.5　知識擴展173

5.6　實戰2 扁平化登錄頁面.175

5.6.1　設計思維過程.175

5.6.2　設計關鍵字： 簡潔大方175

5.6.3　色彩搭配秘籍：紫色、淺灰色、橙色.176

5.6.4　實例步驟解析.176

5.6.5　知識擴展183

5.7　實戰3 設計產品介紹頁面.184

5.7.1　設計思維過程.184

5.7.2　設計關鍵字：同色系對比、透明輕快.184

5.7.3　色彩搭配秘籍：深藍色、淺藍色、黃色184

5.7.4　實例步驟解析.185

5.7.5　知識擴展190

5.8　實戰4 設計圖形設計網站界面191

5.8.1　設計思維過程.191

5.8.2　設計關鍵字：簡單形象191

5.8.3　色彩搭配秘籍：紅色、灰色、白色192

5.8.4　實例步驟解析.192

5.8.5　知識擴展199

5.9　實戰5 扁平化廣告宣傳網頁界面200