Hi！扁平化Photoshop扁平化用户界面设计教程PDF电子书下载

第1章 扁平化设计趋势 10

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 iOS 7的扁平化设计缺陷 20

1.6.2 太扁平导致的可用性降低 21

1.6.3 解决方案——类扁平化设计 21

第2章 扁平化图标设计 23

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章 扁平化手机界面设计 63

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 Nexus 5手机主题 84

3.6.1 设计思维过程 85

3.6.2 设计关键字：简洁明朗 85

3.6.3 色彩搭配秘籍：蓝绿色、黄色、蓝色 85

3.6.4 实例步骤解析 86

3.6.5 知识扩展 92

3.7 实战4 iOS 7日期界面 93

3.7.1 设计思维过程 93

3.7.2 设计关键字：简约鲜明 94

3.7.3 色彩搭配秘籍：蓝色、红色、白色 94

3.7.4 实例步骤解析 94

3.7.5 知识扩展 99

3.8 实战5 iOS 7天气界面 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设计 116

4.1 关于APP 116

4.1.1 什么是APP 116

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章 扁平化网页界面设计 163

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 设计思维过程 201

5.9.2 设计关键字：图像、纯色背景 201

5.9.3 色彩搭配秘籍：橙色、蓝色、红色 201

5.9.4 实例步骤解析 201

5.9.5 知识扩展 208

5.10 实战6 扁平化电子商务网站界面 210

5.10.1 设计思维过程 210

5.10.2 设计关键字：色块组合、长阴影 210

5.10.3 色彩搭配秘籍：红色、蓝色、黄色 211

5.10.4 实例步骤解析 211

5.10.5 知识扩展 218

5.11 扁平化网页界面精选欣赏 219

第6章 扁平化软件界面设计 222

6.1 关于UI设计师 222

6.1.1 研究界面——图形设计师（Graphic UI Designer） 222

6.1.2 研究人与界面的关系——交互设计师（Interaction Designer） 222

6.1.3 研究人——用户测试／研究工程师（User Experience Engineer） 222

6.2 软件界面的发展 222

6.2.1 传统软件界面 222

6.2.2 扁平化软件界面趋势 223

6.3 扁平化软件界面介绍 223

6.3.1 软件界面的分类 223

6.3.2 软件界面设计原则 224

6.3.3 软件界面设计流程规范 224

6.4 扁平化软件界面设计要求 224

6.5 实战1 网络软件登录界面 225

6.5.1 设计思维过程 225

6.5.2 设计关键字：简洁友好 226

6.5.3 色彩搭配秘籍：绿色、黄色、白色 226

6.5.4 实例步骤解析 226

6.5.5 知识扩展 233

6.6 实战2 简约视频播放器界面 234

6.6.1 设计思维过程 234

6.6.2 设计关键字：简约硬朗 234

6.6.3 色彩搭配秘籍：深灰色、红色、浅灰色 235

6.6.4 实例步骤解析 235

6.6.5 知识扩展 241

6.7 实战3 音乐管理播放软件界面 243

6.7.1 设计思维过程 243

6.7.2 设计关键字：和谐舒适 243

6.7.3 色彩搭配秘籍：深蓝色、蓝色、灰色 244

6.7.4 实例步骤解析 244

6.7.5 知识扩展 252

6.8 实战4 视频转换软件界面 254

6.8.1 设计思维过程 254

6.8.2 设计关键字：清晰易懂 255

6.8.3 色彩搭配秘籍：蓝色、深蓝色、绿色 255

6.8.4 实例步骤解析 255

6.8.5 知识扩展 264

6.9 实战5 聊天软件界面 265

6.9.1 设计思维过程 266

6.9.2 设计关键字：简易大气 266

6.9.3 色彩搭配秘籍：橙色、绿色、黄绿色 266

6.9.4 实例步骤解析 266

6.9.5 知识扩展 274

6.10 扁平化软件界面精选欣赏 275

第7章 扁平化平面媒体设计 277

7.1 了解平面媒体设计 277

7.1.1 什么是平面媒体设计 277

7.1.2 扁平化平面媒体设计 277

7.2 扁平化平面媒体设计要求 277

7.2.1 主题鲜明突出 278

7.2.2 形式与内容统一 278

7.2.3 强化整体布局 278

7.3 扁平化设计中的字体 279

7.3.1 字体在扁平化设计中的重要性 279

7.3.2 扁平化设计中常用字体 279

7.4 实战1 公益宣传广告 281

7.4.1 设计思维过程 281

7.4.2 设计关键字：亲近和谐 281

7.4.3 色彩搭配秘籍：浅绿色、绿色、黄色 282

7.4.4 实例步骤解析 282

7.4.5 知识扩展 285

7.5 实战2 促销宣传广告 285

7.5.1 设计思维过程 286

7.5.2 设计关键字：突出主题 286

7.5.3 色彩搭配秘籍：天蓝色、黄色、洋红色 286

7.5.4 实例步骤解析 286

7.5.5 知识扩展 292

7.6 实战3 楼盘宣传DM广告 294

7.6.1 设计思维过程 294

7.6.2 设计关键字：简洁鲜明 294

7.6.3 色彩搭配秘籍：深蓝色、紫色、土黄色 295

7.6.4 实例步骤解析 295

7.6.5 知识扩展 299

7.7 实战4 企业宣传画册 300

7.7.1 设计思维过程 300

7.7.2 设计关键字：统一严谨 301

7.7.3 色彩搭配秘籍：红色、灰色、黑色 301

7.7.4 实例步骤解析 301

7.7.5 知识扩展 309

7.8 实战5 房地产折页 310

7.8.1 设计思维过程 311

7.8.2 设计关键字：庄重大气 311

7.8.3 色彩搭配秘籍：黄色、棕色、灰色 312

7.8.4 实例步骤解析 312

7.8.5 知识扩展 318

7.9 扁平化平面媒体设计精选欣赏 319

附录1 扁平化学习资源 321

附录2 扁平化设计模板 324

附录3 扁平化设计欣赏 326