Hi！扁平化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

5.9.1　设