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.1iOS7的扁平化设计缺陷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.2Android系统手机常见尺寸标准64

3.1.3iOS系统手机常见尺寸标准64

3.1.4Windows系统手机常见尺寸标准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使用AdobeKuler生成扁平化配色方案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实战3Nexus5手机主题84

3.6.1设计思维过程85

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

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

3.6.4实例步骤解析86

3.6.5知识扩展92

3.7实战4iOS7日期界面93

3.7.1设计思维过程93

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

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

3.7.4实例步骤解析94

3.7.5知识扩展99

3.8实战5iOS7天气界面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.2APP布局说明118

4.2.1Android系统APP布局118

4.2.2iOS系统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.4WordPress主题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.95知识扩展208

5加实战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章扁平化软件界面设计

6.1关于UI设计师222

6.1.1研究界面——图形设计师（Graphic UI Deslgner）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章扁平化平面媒体设计

作者简介

《Hi 扁平化Photoshop扁平化用户界面设计教程》针对扁平化设计风格，从扁平化的设计思想出发，详细讲解了扁平化风格的图标设计、手机界面设计、平板APP设计、网页界面设计和平面媒体设计的设计思路和方法，以及使用Photoshop进行扁平化设计制作的方法和技巧。

全书共分为7章，全面介绍了扁平化设计中的理论知识，以及具体案例的制作方法。精选实际工作案例，通过设计思维过程、设计关键字、色彩搭配秘籍、实例步骤解析、知识扩展5大讲述环节提升读者的实际操作能力。

随书附赠所有案例制作过程的教学视频，以及所有案例的源文件和素材文件，方便读者借鉴和使用。

《Hi 扁平化Photoshop扁平化用户界面设计教程》适合有一定Photoshop软件操作基础的设计初学者及设计爱好者阅读，也可以为一些设计制作人员及相关专业的学习者提供参考。

 Hi!扁平化photoshop扁平化用户界面设计教程下载