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　扁平化软件