Photoshop扁平化平面设计手册（全彩）

CHAPTER　1
认识扁平化设计 1　
1．1　拟物化设计概述 2
1．1．1 　认识拟物化设计 2
1．1．2 拟物化设计的优点 2
1．1．3 拟物化设计缺点 3
1．2 扁平化设计概述 3
1．2．1 认识扁平化设计 3
1．2．2 扁平化设计优点 4
1．2．3 扁平化设计缺点 5
1．3 扁平化设计所带来的改变 5
1．3．1 全新的设计风格 5
1．3．2 设计变得简单直接 6
1．3．3 使用更加高效 6
1．4 扁平化设计的突出特点 7
1．4．1 强调简约 7
1．4．2 快速高效 8
1．4．3 信息突出 8
1．4．4 简洁清晰 8
1．4．5 修改方便 9
1．5 扁平化与类扁平化 9
1．5．1 扁平化流行的必然性 9
1．5．2 扁平化设计的局限性 10
1．5．3 类扁平化设计 11
1．6 如何设计出色的扁平化作品 12
1．6．1 去除特效 12
1．6．2 简化提取 12
1．6．3 巧用色彩 13
1．6．4 排版很重要 13
1．7 本章小结 16
CHAPTER　2
扁平化图标设计 17
2．1　了解图标设计 18
2．1．1 　什么是图标 18
2．1．2 　图标设计的重要性 18
2．1．3 　图标常用尺寸 20
2．1．4 　图标常用格式 21
2．2　4种设计风格的扁平化图标 22
2．2．1 　基础风格 22
案例分析―简约基础风格图标设计分析 22
实战案例―设计基础风格手机图标 23
2．2．2 　阴影风格 27
案例分析―复古阴影风格图标设计分析 27
实战案例―设计阴影风格日历图标 28
2．2．3 　长阴影风格 31
案例分析―长阴影风格相机图标设计分析 31
实战案例―设计长阴影风格勋章图标 32
2．2．4 　微渐变风格 40
案例分析―微渐变风格图标设计分析 40
实战案例―设计微渐变手机常用图标 41
2．3　扁平化图标设计原则 46
2．3．1 　具有很强的辨识性 46
2．3．2 　简约实用 47
2．3．3 　图标之间的差异性 47
2．3．4 　具有很强的创意性 47
2．3．5 　美观大方的视觉表现效果 48
2．3．6 与使用环境的协调性 48
案例分析―扁平化邮件图标设计分析 49
实战案例―设计唱片音乐图标 49
2．4　扁平化图标设计技巧 54
2．4．1 　什么是好的扁平化图标 54
2．4．2 　图标的设计表现技巧 54
2．4．3 　扁平化图标的设计过程 55
案例分析―扁平化医疗图标设计分析 55
实战案例―设计扁平化相机图标 56
2．5　本章小结 64
CHAPTER　３
iOS系统扁平化设计 65
3．1　了解iOS系统 66
3．1．1 　什么是iOS系统 66
3．1．2 　iOS系统的发展历史 66
3．1．3 　iOS系统手机常见屏幕尺寸
标准 67
3．2　iOS系统界面的设计原则 68
3．2．1 　美观性 69
3．2．2 　一致性 69
3．2．3 　操作便捷 70
3．2．4 　及时反馈 70
3．2．5 　暗喻 71
3．2．6 　用户控制 71
案例分析―iOS系统通话界面设计分析 72
实战案例―设计iOS系统手机待机界面 72
3．3　iOS系统界面的设计规范 77
3．3．1 　确保在iPhone和iPad上通用 78
3．3．2 　重新考虑基于Web的设计 78
案例分析―iOS系统城市天气界面设计
分析 79
实战案例―设计iOS系统手机天气界面 79
3．4　iOS界面基本图形 83
3．4．1 　矩形 83
3．4．2 　圆角矩形 84
3．4．3 　圆形 84
3．4．4 　其他形状 85
案例分析―iOS系统软件主界面设计分析 85
实战案例―设计iOS系统手机主界面 86
3．5　扁平化设计要点 91
3．5．1 　精简 91
3．5．2 　大胆 91
3．5．3 　细致 91
3．5．4 　精美 92
案例分析―iOS系统收音机界面设计分析 92
实战案例―设计iOS系统音乐播放界面 93
3．6　本章小结 100
CHAPTER　４
了解Android系统 101
4．1　了解Android系统 102
4．1．1 　什么是Android系统 102
4．1．2 　Android系统的发展历史 102
4．1．3 　Android系统手机常见屏幕
尺寸标准 103
4．2　Android系统的设计原则 104
4．2．1 　美观大方的界面 104
4．2．2 　使用户操作更加简单 105
4．2．3 　完善的操作流程 107
案例分析―Android系统手机主界面
设计分析 108
实战案例―设计Android系统手机待
机界面 108
4．3　如何实现扁平化设计 113
4．3．1 　简化设计元素 113
4．3．2 　注意字体的应用 114
4．3．3 　注意色彩的搭配 114
4．3．4 简化交互 115
4．3．5 使用类扁平化设计 115
案例分析―Android系统平板主界面
设计分析 116
实战案例―设计Android系统手机主
界面 116
4．4　Android系统界面的特点 121
4．4．1 简约大方 121
4．4．2 操作便捷 121
4．4．3 通用性强 122
4．4．4 布局合理 122
案例分析―Android系统手机天气界面
设计分析 122
实战案例―设计Android系统病毒查杀
界面 123
4．5　本章小结 128
CHAPTER　５
扁平化APP界面设计 129
5．1　了解APP 129
5．1．1 　什么是APP 129
5．1．2 　APP软件的类型 129
5．2　APP软件界面布局 131
5．2．1 　iOS系统APP软件界面布局
说明 132
案例分析―朋友圈APP界面设计分析 132
实战案例―设计天气APP界面 133
5．2．2 　Android系统APP软件界面
布局说明 137
案例分析―网络设备APP软件界面设计
分析 138
实战案例―设计医疗APP软件界面 139
5．3　常见APP软件引导界面类型 146
5．3．1 　功能介绍类 146
5．3．2 　使用说明类 146
5．3．3 　推广类 146
5．3．4 　问题解决类 147
案例分析―网络软件APP引导界面设计
分析 147
实战案例―设计APP引导界面 148
5．4　APP软件界面的设计原则 155
5．4．1 　实用性 155
5．4．2 　统一的色彩与风格 155
5．4．3 　合理的配色 156
5．4．4 　规范的操作流程 156
5．4．5 　视觉元素规范 156
案例分析―订餐APP软件界面设计分析 157
实战案例―设计手机卫士APP界面 157
5．5　APP软件界面的设计要求 165
5．5．1 　APP软件界面的特点 165
5．5．2 　APP软件界面设计流程 166
5．5．3 　APP软件界面的色彩搭配 166
5．5．4 　平板电脑软件界面的特点 167
案例分析―平板电脑旅游APP界面设计
分析 167
实战案例―设计平板电脑音乐APP界面 168
5．6　APP界面设计注意事项 176
5．6．1 　APP界面视觉设计 176
5．6．2 　APP界面设计的用户体验 177
案例分析―平板电脑订餐APP界面设计
分析 178
实战案例―设计平板电脑相亲APP界面 178
5．7　本章小结 188
CHAPTER　６
扁平化网页界面设计 189
6．1　了解扁平化网页界面设计 190
6．1．1 　什么是网页界面设计 190
6．1．2 　网页界面设计的特点 190
6．2　网页界面构成元素 193
6．2．1 　文字 193
6．2．2 　图像 193
6．2．3 　多媒体 193
6．2．4 　色彩 194
案例分析―餐饮类网站界面设计分析 194
实战案例―设计汽车宣传网页界面 195
6．3　扁平化网页设计元素 201
6．3．1 　图标 201
6．3．2 　圆角 201
6．3．3 　折角 202
6．3．4 　标签 202
6．3．5 　徽章 202
6．3．6 条纹 203
6．3．7 　装饰元素 203
6．3．8 　装饰背景 203
案例分析―产品宣传网站界面设计分析 204
实战案例――设计企业网站界面 204
6．4　扁平化设计配色 213
6．4．1 　常见的扁平化配色风格 213
6．4．2 　常见扁平化设计颜色 215
案例分析―女性时尚网站界面设计分析 215
实战案例―设计环保网站界面 216
6．5　扁平化网站界面布局 223
6．5．1 　偏扁平化网站界面布局
结构标准 223
6．5．2 　扁平化网站界面布局的
两个要点 224
6．5．3 为用户考虑原则 224
案例分析―产品专题页设计分析 225
实战案例―设计手机宣传网站界面 225
6．6　本章小结 232
CHAPTER　7
扁平化软件界面设计 233
7．1　了解软件界面设计 234
7．1．1 　什么是软件界面设计 234
7．1．2 　网站界面设计与软件界面
设计的区别 234
7．2　软件界面的设计法则 235
7．2．1 　以软件功能操作为基础 235
7．2．2 　具有清晰的层次结构 235
7．2．3 　一致性和标准化 238
7．2．4 　良好的视觉反馈 239
案例分析―文件分享和管理软件界面
设计分析 240
实战案例―设计网络云盘软件界面 241
7．3　软件界面的发展 246
7．3．1 　传统软件界面 246
7．3．2 　扁平化软件界面趋势 247
案例分析―图像处理软件界面设计分析 247
实战案例―设计视频转换软件界面 247
7．4　扁平化软件界面介绍 257
7．4．1 　软件界面分类 257
7．4．2 　软件界面设计要点 257
7．4．3 　软件界面的屏幕显示 258
7．4．4 　软件界面的设计原则 259
案例分析―企业管理软件界面设计分析 259
实战案例―设计手机管理软件界面 260
7．5　软件界面中的色彩搭配 269
7．5．1 　保持色调的一致 269
7．5．2 　使用柔和的色彩 269
7．5．3 　使用色彩作为功能分界的识别元素 270
7．5．4 　提供可选配色方案 270
7．5．5 　色彩搭配需要具有辨识度 270
7．5．6 　控制色彩的使用数量 271
案例分析―视频软件界面设计分析 271
实战案例―设计音乐播放器软件界面 272
7．6　本章小结 282
CHAPTER　8
扁平化在平面设计中的应用 283
8．1　了解平面媒体设计 284
8．1．1 　什么是平面媒体设计 284
8．1．2 　扁平化平面媒体设计 284
案例分析―儿童活动宣传广告设计分析 285
实战案例―设计活动宣传广告 285
8．2　扁平化设计中的字体 291
8．2．1 　字体应用的重要性 291
8．2．2 　扁平化设计中常用英文字体 292
8．2．3 　扁平化设计中常用中文字体 294
案例分析―电影院活动海报设计分析 295
实战案例―设计通信宣传DM单页 296
8．3　扁平化平面媒体设计要求 301
8．3．1 　主题鲜明突出 302
8．3．2 　形式与内容统一 302
8．3．3 　强化整体布局 302
案例分析―企业文化宣传展板设计分析 303
实战案例―设计房地产围挡广告 303
8．4　平面媒体设计 307
8．4．1 　平面媒体设计的元素有
哪些 308
8．4．2 　平面媒体设计的流程 308
案例分析――运动宣传广告设计分析 309
实战案例――设计楼盘宣传折页 309
案例分析――宣传折页设计分析 318
实战案例――设计企业宣传画册 318
8．5　本章小结 326