内容简介

《APP UI元素设计》是一本专门介绍使用Photoshop设计制作APP元素的图书。全书共分为6章，包括APP UI元素设计基础、APP图标设计、按钮设计、导航设计、其他界面元素设计和APP完整应用界面设计等内容，通过案例的逐一讲解，使读者由浅入深、逐步地了解使用Photoshop设计制作APP元素的整体设计思路和制作过程。本书将APP UI元素设计的相关理论与实例操作相结合，不仅能使读者学到专业知识，也能使读者掌握实际应用，全面掌握APP UI的元素设计。

《APP UI元素设计》不仅适合APP UI设计爱好者，以及准备从事APP UI设计的人员，也适合Photoshop的使用者，包括平面设计师、网页设计师等相关人员参考使用；同时也可作为相关培训中心及学校的辅助教材。

 

前言

随着苹果公司的引领、安卓系统的崛起，APP 市场发展迅速。目前，各种APP 应用层出不穷，APP UI 设计师也成为人才市场上炙手可热的职业。

本书内容

本书是一本专门介绍使用Photoshop 设计制作APP 元素的图书。全书共分为6 章，第1 章介绍APP UI 元素设计基础，帮助读者了解APP UI 的基础知识以及使用Photoshop 绘制基础图形；第2 ～ 4 章介绍APP 图标设计、按钮设计和导航设计，通过理论知识与案例制作的结合，逐一讲解这些APP 中最常见的元素设计；第5 章介绍APP 其他界面元素设计，包括表单设计、视觉吸引元素和反馈信息设计。前面章节的安排使读者由浅入深、逐步地了解使用Photoshop 设计制作APP 元素的设计思路和制作过程。第6 章介绍APP 完整界面的设计，包括界面设计基础知识，以及不同风格界面设计的制作，通过完整界面的制作来综合前面各章知识，帮助读者巩固所学知识，并能将理论应用到实际工作中。

本书特色

1. 理论结合实际，全面掌握专业知识

本书将APP UI 元素设计的相关理论与实例操作相结合，不仅能使读者学到专业知识，也能使读者掌握实际应用，全面掌握APP UI 的元素设计。

2. 案例全面丰富，实际操作灵活应用

书中案例涉及APP 中的界面元素设计，如图标设计、按钮设计、导航设计等，最后一章介绍了完整的APP 界面设计，将前面所学应用到实际中。

3. 设计师心得，扩展行业知识

每章设置了“设计师心得”模块，讲解了APP UI 设计中的行业知识，知识更全面，可帮助读者拓展APP UI 的相关知识。

4. 视频教学，轻松快速学习

本书配备资源包括书中所有案例的素材、源文件以及视频教学，读者可以通过扫描右侧的二维码，轻松掌握书中知识。

本书创建团队

本书由张洁、杨明辉编著，其他参与编写的人员还有江凡、张洁、马梅桂、戴京京、骆天、胡丹、彭斌全、林小群、刘清平、钟睦、刘里锋、朱海涛、廖博、喻文明、易盛、陈晶、张绍华、陈文轶、杨少波、杨芳、刘有良、刘珊、赵祖欣、毛琼健、江涛、张范、田燕等。

由于编者水平有限，书中疏漏与不妥之处在所难免。在感谢您选择本书的同时，也希望您能够把对本书的意见和建议告诉我们，联系信箱：lushanbook@qq.com，读者QQ 群：327209040。

　　 编　者

 

目　录

第1 章　APP UI 元素设计基础   1

1.1　什么是APP UI 元素   2

1.1.1　认识UI   2

1.1.2　APP UI 元素的重要性   5

1.2　元素设计要点   6

1.2.1　风格   6

1.2.2　颜色   7

1.2.3　透视关系   9

1.2.4　阴影与投影   10

1.3　使用Photoshop 绘制基础图形   11

1.3.1　矩形和圆角矩形   11

1.3.2　椭圆   13

1.3.3　组合图形   15

1.4　设计师心得   20

1.4.1　APP UI 设计师到底应该掌握些什么   20

1.4.2　APP UI 设计师有多大的就业前景   21

1.4.3　关于APP UI 设计的那些事儿   21

第2 章　APP 图标设计   25

2.1　APP 图标设计基础   26

2.1.1　图标的分类   26

2.1.2　图标的标准尺寸   27

2.1.3　图标的设计原则   30

2.1.4　图标的设计流程   36

2.2　不同风格的图标设计   36

2.2.1　线性图标的设计   36

2.2.2　扁平化图标的设计   38

2.2.3　立体图标的设计   40

2.2.4　逼真写实图标的设计   51

2.3　不同质感纹理与效果的图标设计   57

2.3.1　金属质感   57

2.3.2　玻璃质感   61

2.3.3　皮质质感   67

2.3.4　木头纹理   71

2.3.5　发光效果   79

2.4　应用图标设计   90

2.4.1　日历图标   90

2.4.2　邮件图标   92

2.4.3　计算器图标   95

2.5　功能图标设计   99

2.6　设计师心得   101

2.6.1　图标设计的重要细节   101

2.6.2　什么样的图标才更加吸引用户   103

第3 章　按钮设计   105

3.1　按钮设计技巧   106

3.1.1　按钮的尺寸   106

3.1.2　关联分组   107

3.1.3　善用阴影   107

3.1.4　圆角边界   108

3.1.5　强调重点   108

3.2　按钮设计案例   110

3.2.1　开关按钮   110

3.2.2　电源按钮   114

3.2.3　滑块按钮   120

3.3　设计师心得   126

3.3.1　APP UI 设计为什么这么受欢迎   126

3.3.2　如何将iOS 的UI 设计换成安卓的UI 设计   127

第4 章　导航设计   129

4.1　常见的UI 设计模式   130

4.1.1　主体  细节模式   130

4.1.2　分栏浏览模式   131

4.1.3　搜索  结果模式   132

4.1.4　过滤数据组模式   133

4.1.5　表单模式   134

4.1.6　向导模式   135

4.2　标签式导航   136

4.2.1　底部标签式导航   136

4.2.2　顶部标签式导航   138

4.2.3　底部标签的扩展导航   139

4.2.4　设计实例   140

4.3　抽屉式导航   145

4.3.1　关于抽屉式导航   145

4.3.2　设计实例   147

4.4　列表式导航   156

4.4.1　关于列表式导航   157

4.4.2　设计实例   158

4.5　平铺式导航   164

4.6　宫格式导航   166

4.7　悬浮式导航   167

4.8　设计师心得   169

第5 章　其他界面元素设计   173

5.1　表单设计   174

5.1.1　登录表单   174

5.1.2　注册表单   178

5.1.3　计算表单   186

5.1.4　搜索表单   187

5.1.5　长表单   188

5.2　视觉吸引元素   204

5.2.1　对话框设计   204

5.2.2　提示设计   205

5.2.3　使用向导设计   205

5.2.4　幻灯片设计   206

5.2.5　首次使用引导设计   207

5.2.6　持续视觉吸引设计   207

5.2.7　可发现的视觉吸引设计   207

5.3　反馈信息设计   208

5.3.1　操作反馈设计   209

5.3.2　出错信息设计   209

5.3.3　确认信息设计   210

5.4　设计师心得   211

第6 章　APP 完整应用界面设计   217

6.1　界面设计基础   218

6.1.1　界面的构图   218

6.1.2　常见的界面   219

6.1.3　界面切图与导出   225

6.2　不同风格的界面设计   229

6.2.1　游戏类APP 界面设计（安卓系统）   230

6.2.2　音乐类APP 界面设计（iOS 系统）   231

6.2.3　新闻类APP 界面设计   239

6.2.4　旅游类APP 界面设计   240

6.2.5　交友类APP 界面设计   245

6.2.6　购物类APP 界面设计   255

6.2.7　摄影图像类APP 界面设计   255

6.3　设计师心得   265

6.3.1　什么是好的设计   265

6.3.2　关于安卓屏幕   265