APP UI元素设计

    《APP UI元素设计》是一本专门介绍使用Photoshop设计制作APP元素的图书。全书共分为6章，包括APP UI元素设计基础、APP图标设计、按钮设计、导航设计、其他界面元素设计和APP完整应用界面设计等内容，通过案例的逐一讲解，使读者由浅入深、逐步地了解使用Photoshop设计制作APP元素的整体设计思路和制作过程。本书将APP UI元素设计的相关理论与实例操作相结合，不仅能使读者学到专业知识，也能使读者掌握实际应用，全面掌握APP UI的元素设计。
    《APP UI元素设计》不仅适合APP UI设计爱好者，以及准备从事APP UI设计的人员，也适合Photoshop的使用者，包括平面设计师、网页设计师等相关人员参考使用；同时也可作为相关培训中心及学校的辅助教材。

    张洁，毕业于湖南工学院平面设计专业，从事UI设计多年，对APP UI设计有着丰富的实战经验，一直专注于iOS和Android两大系统的界面设计研究。

第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

第2章  APP 图标设计
图标是指具有明确指代含义的图形，其中桌面图标是软件标识，界面中的图标是功能标识。本章将从理论知识和具体的案例实践对图标设计进行基础的讲解，并搭配不同风格的案例让读者进行深入的学习。
2.1　APP图标设计基础
本节主要从APP 图标的分类、标准尺寸、设计原则以及设计流程四个方面来进行讲解。通过学习，读者会对图标有一定的了解，对之后的图标设计会更有方向，同时能更准确地对其进行设计思考。
2.1.1　图标的分类
广泛地讲，图标大致可以分为三大类：电脑桌面图标( 见图2-1)、移动图标( 见图2-2) 以及生活图标( 见图2-3)。从功能上来分，图标包括程序图标和系统图标。下面就欣赏一下这些图标，看看它们究竟有哪些不同和特点。
图2?1　电脑桌面图标
图2?2　移动图标
图2?3　生活图标
2.1.2　图标的标准尺寸
在设计图标的时候，一定要根据设计对象来选择图标的尺寸大小。现在市场中移动端的系统分辨率尺寸占有的比例如表2-1 所示。
表2-1　系统分辨率占有比例
从表2-1 中可以看出，在市场中有很多种移动端尺寸设计，因此根据对象所设定的图标也有很多种规格尺寸，常用的有：16px×16px、24px×24px、32px×32px、48px×48px、256px×256px。接下来就来看一下常用的移动操作系统的图标标准尺寸是怎么设定的。
1. Android
安卓手机系统的屏幕尺寸以及分辨率尺寸相对于苹果系统会多出很多尺寸大小，因此Android 的图标尺寸也会有多重大小，如表2-2 所示，我们要谨慎地选择好图标的尺寸，一定要考虑到实际的屏幕大小等对象尺寸。
表2-2　Android 的图标尺寸( 单位为px)
2. iPhone
iPhone 手机的界面尺寸就像之前所说的，会比安卓手机的尺寸种类少很多，如图2-4 所示。
由于iPhone 手机的界面尺寸范围较小，尺寸大小有限，其图标尺寸也更加规范
一些，如图2-5 所示为根据几类手机的屏幕界面尺寸和与之对应的固定的图标尺寸。
图2?4　iPhone 手机的界面尺寸
图2?4　iPhone 手机的界面尺寸( 续)
图2?5　iPhone 手机的图标尺寸
3. iPad
平板电脑在近几年很受消费者青睐，尤其是iPad，为什么呢？这是因为平板电脑相对于台式电脑和笔记本电脑更方便携带，以灵敏的触摸屏作为基本的输入设备。它拥有的触摸屏（也称为数位板技术）允许用户通过数字笔或触控笔来进行作业而不是传统的鼠标或者键盘。
2.1.3　图标的设计原则
所有的设计都要遵循一定的设计原则，这样设计出的对象才有合理性与实用美观性，本小节将对图标设计的基本原则进行总结和讲解。
谈到设计原则，首先要说一下图标设计的目的。
相比文字，设计上要增强软件的直观实用性。
相比文字，在表现形式方面要更加形象，以提升视觉效果。
图标设计的核心就是要让图形的优点最大化，缺点最小化。以下是图标设计过程中应当遵守的几个设计原则。
1. 可识别性原则
可识别性原则的意思是要始终让图标在设计的过程中保证其图形能够准确地表达其对应的相关操作的含义，也就是说在用户看到图标的第一眼时，就能明白它所代表的含义。这是图标设计的第一原则。
在日常生活中，我们所见到的道路标识设计是表达最直接、准确的图标设计，即使人们不识字也可以通过路标准确地理解其含义，如图2-6 所示。
同样的道理，APP 图标设计也是一样，我们要保证其图标一定要简单明了，要具有非常直接的可识别性和高辨识度，这样用户才能迅速且准确地理解其含义。
图2?6　道路标识
图2?6　道路标识（续）
2. 差异性原则
差异性原则是指我们在看到一组图标的时候能在第一时间内看出它们之间的差异性。
这条原则是图标设计中很重要的原则，但也是在设计中最容易被忽略的一条原则。图标和文字相比，其优越性在于它更直观一些，但是如果图标设计失去了这一点，那么图标设计就没了象征性，也就失去了意义，如图2-7 和图2-8 所示是一些现实中的例子。
图2?7　图标设计案例(1)
图2?8　图标设计案例(2)
在这两个界面中可以看到其中的图一眼望去几乎是一模一样的，图2-7 中的图形形状都采用了以蓝色为背景的立体圆球，图2-8 中图标的分布在界面中显得较为满溢，并且图标中的图形虽然有颜色和形状上的区别，但是在整个界面中被图标外形和数量抢去风头，所以看起来辨识度低，视觉效果差。
针对这种情况应该怎么办呢？
在图标系列的设计中，如果各个图标需要使用相同的元素来统一整体的风格，那么可以夸张它们之间的差异性，减弱它们之间的相似性。如果大多图标都含有同一元素，那么应该考虑是否放弃使用同一元素而选择相类似的元素，同时在图标的颜色上加以区分，如图2-9 所示。
图2?9　实际图标设计案例
下面看一下Adobe Photoshop 的各个图标，如图2-10 所示，不但完全符合差异性的原则，而且每个图标看一眼便能发现其图形的差异性。形状设计的识别性很高，能够生动形象地代表所需要的操作，可谓望图知其意。