作者：吴丰
出版社：人民邮电出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
移动端APP UI设计与交互基础教程(微课版)试读：
前言
随着移动端设备的快速发展，基于移动端设备的APP也层出不穷，这也使得针对移动端APP的UI设计和交互设计成为这几年的热门设计方向和就业热点。本书面向行业发展需要，聚焦岗位工作流程，将设计原理、设计规范、实现方法和经验技巧融入整个知识体系，让读者对UI设计师这一岗位和整个行业有清晰的认识和判断，并掌握UI设计师岗位所需的操作技能。本书概览
本书共分6章，根据UI设计的工作流程将所需知识无缝衔接，每章目标明确，使读者的理论知识和实践能力同步提高。
第1章：APP UI设计与交互概述。主要从全局层面介绍UI设计与交互的基本概念和工作流程，使读者对UI设计和交互设计有初步认识。
第2章：UI图标设计。分类讲解线性图标、剪影类图标、扁平化图标、长阴影图标和拟物类图标的制作要点，着重巩固Photoshop软件在UI设计岗位中常用的操作方法。
第3章：常见APP组件的设计与实现。主要讲解移动端界面中除图标外，其他使用频率高、操作性强的组件。通过对按钮、滑动条、表单和数据图表等组件的设计和制作，进一步提高Photoshop软件的熟练程度，掌握常见组件的设计要点和注意事项，为后续整个APP产品各界面的设计做铺垫。
第4章：交互设计与原型图绘制。依托原型图绘制软件Axure，使读者从产品经理的角度出发，从零开始对产品进行构思设计，并对工作流程中联系紧密的多个岗位之间的衔接有全局的认识。最终，使读者可使用Axure完成诸如页面跳转、左右滑动、上下滚动、菜单、表单验证等常见交互效果的操作。
第5章：APP界面设计与实战。在讲解APP设计规范的基础上，选取“UI社”APP虚拟项目，按照真实的产品开发流程，从产品前期的市场背景调研开始，经过确立产品用户群体、对同类产品进行竞品分析、确定“UI社”功能需求、完成原型图绘制、设计产品视觉规范，以及完成首页和各页面效果图制作等一系列工作流程。
第6章：标注与切图。主要讲解在效果图制作完成的基础上，后续标注与切图环节的基本知识、操作方法和工作经验。通过学习本章的内容，使读者掌握标注和切图的规范操作，完成设计图稿的交付工作，为后续程序开发还原效果图奠定基础。本书特色
本书可作为应用型本科、高职高专，以及其他各类院校计算机相关专业的教材，也可供希望从事UI设计和交互设计的读者自学使用。本书理论内容讲解清晰，语言通俗易懂，实践性案例讲解到位，工作流程拆解明晰。主要具有以下特点。
▷ 专注技能知识：本书所涉及的内容均是UI设计工程师岗位必不可少的知识，通过学习，读者能够达到岗位需求的基本要求，为读者节省学习时间和成本。
▷ 案例贴近生活：本书选用的小型案例贴近年轻人的日常生活，大型案例贴近真实的工作场景，递进的案例不仅能提高读者的学习兴趣，而且还能为读者积累工作经验。
▷ 共享工作经验：本书在讲解容易出错的内容时，均有工作经验分享，使读者不仅学会实现方法，而且能学习借鉴他人思路。
▷ 配套资源方便：本书提供全套源文件、PPT课件、课时授课计划和学期授课计划，读者可以从人邮教育社区（http://www.ryjiaoyu.com/）下载。
▷ 视频资源精致：本书配套课程授课视频与本书相辅相成，读者可以通过扫描书中二维码直接在线观看，以便提高学习效率。教学安排
本书的参考学时为60学时，为了方便教师组织教学，这里列出各章拟完成的学习任务，仅供参考。致谢一反馈
本书由吴丰编著，在整个编写过程中，感谢家人的理解和支持，感谢出版社的所有编审人员为本书的出版所付出的辛勤劳动。由于水平有限，书中难免存在疏漏和不妥之处，敬请广大读者批评指正，以便于修订使之更加完善，诚挚希望与读者共同交流，共同成长。
吴丰联系方式：413101130@qq.com。编者：第1章 APP UI设计与交互概述【本章导读】
随着技术的不断发展，产品生产领域中人性化意识得到不断增强，越来越多的企业开始注重用户界面和用户体验，这使得兼具艺术设计、程序开发、市场调查、心理学分析等诸多综合能力的“UI设计师”映入人们眼帘，并具有十分广阔的职业前景。本章从职业发展角度出发，立足岗位需求，向读者介绍有关UI设计与交互所涉及的入门知识。【学习目标】
¤ 认识UI设计的相关概念，及其行业发展前景。
¤ 了解如何学习UI设计。
¤ 掌握UI设计的理论知识。
¤ 了解APP产品开发的项目流程，并了解“UI设计师”在工作过程中的岗位职能。1.1 UI设计行业的发展前景
UI（User Interface，用户界面）设计是近几年热门的新兴设计方向，它所涵盖的领域也十分广泛，鉴于涉及的内容很多，本书所讲授的内容均限定为移动端APP的UI设计。1.1.1 认识相关概念
1. UI
UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。而UI设计师并不是单纯从事美工工作，还需要定位软件的使用对象、使用环境、使用方式并且最终为用户服务。就工作过程而言，UI设计师需要完成的是一个不断为用户设计视觉效果并使之满意的过程。
目前，手机、网页、游戏、汽车中控和家电等各类产品中都能见到UI，UI设计工作也越来越被重视，如图1-1所示。图1-1 多种APP的不同UI
2. ID（Interaction Design，交互设计）
交互是指人和机器互动的过程，交互设计通过了解人的心理、目标和期望，使用有效的交互方式来让整个过程可用、易用。交互设计的主要对象是人机界面。
3. UE（User Experience，用户体验）
UE是指用户使用一个产品时的全部体验，这种体验主要来自用户和人机界面的交互过程。由于个体差异决定了这种主观的体验无法通过其他途径完全模拟或再现，因此对于特定的人群，其用户体验的共性内容是可以通过良好的设计来获取的。
现在的产品设计都注重“以用户为中心”的设计理念，用户体验设计从产品开发初期就介入整个流程，并贯穿始终。其目的就是确保对用户体验有正确的评估，确保用户的真实期望能正确表达，确保产品核心功能需要修正时能控制成本，以及确保产品功能与用户交互时的协调性。
4. 移动端UI的操作系统
UI设计师的主要工作就是设计并制作出符合用户需求的APP界面。由于APP软件适用的操作系统不同，其设计规范也不同，所以首先需要了解市面上已有的移动操作系统。
据消费调研机构凯度消费者指数（Kantar Worldpanel）统计，目前移动操作系统份额占比为：Android占77.1%，iOS占22.1%，Windows占0.3%，其他操作系统占0.5%。为此，本书后续课程将重点围绕Android和iOS两个系统进行讲解。（1）Android
Android是一个以Linux为基础的半开源操作系统，主要用于移动设备，其系统界面如图1-2（a）所示。由于Android设备具有开源特性，市面上Android移动设备的屏幕尺寸多种多样，这也给UI设计师带来适配各类机型的困扰。（2）iOS
iOS是由苹果公司开发的移动操作系统，应用于iPhone、iPod Touch、iPad及Apple TV等产品上，其系统界面如图1-2（b）所示。（3）Windows
Windows 10是美国微软公司研发的新一代跨平台和设备应用的操作系统，其系统界面如图1-2（c）所示。图1-2 移动端UI的操作系统1.1.2 就业前景
在了解了UI的相关知识后，如果想成为一名优秀的UI设计师，需要具备怎样的知识背景呢？怎样才能拥有较好的发展规划和薪酬呢？下面从主流招聘网站上检索“UI设计师”关键词，查看检索出的职位数量和岗位要求并加以分析，具体见表1-1。表1-1 主流招聘网站职位需求量对比
从表1-1中可以看出对UI设计师这一岗位的需求量很大，且主要工作内容分为三大部分，即研究工具（通过Photoshop和Illustrator等软件设计外观）、研究人与界面的关系（即产品的交互设计），以及研究人（通过各种用户测试，反馈设计的合理性和美观性）。此外，如果求职者拥有HTML5和CSS3等Web前端知识储备，还会在应聘时得到优先考虑。
综上所述，可以初步了解UI设计师是一个涵盖诸多领域的职位，也越来越要求从业人员同时具备跨学科、综合性的理论素养和实际操作能力。
在了解了职业发展方向后，要想真正成为一名合格的UI设计师，应该首先学习哪些知识呢？下面从全局角度向读者介绍如何学习UI设计。1.2 如何学习UI设计1.2.1 UI设计师的常用软件介绍
移动端UI设计师常用的软件有Photoshop、Illustrator、Axure、Cutterman和Markman等，如图1-3所示。这里仅对工作中常见的软件做简单介绍，而在实际工作中同类型的工具可以协同使用，并非只局限于上述几款软件。图1-3 UI设计师的常用软件
1. Photoshop
Photoshop是Adobe公司旗下最为出名的图像处理软件之一，目前Photoshop CC系列有多个版本，具有全新的智能型锐利化、可编辑的圆角矩形，以及改善的文字样式等诸多功能，能使UI设计师事半功倍。工作中，UI设计师主要使用Photoshop制作各个页面的效果图和图标。
2. Illustrator
Illustrator是Adobe公司出品的一款多媒体标准矢量软件，广泛应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面制作等领域。工作中，UI设计师可以使用Illustrator制作矢量图标。
3. Axure
Axure是美国Axure Software Solution公司的旗舰产品，是一个专业的快速原型设计工具。它的主要功能是能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。工作中，UI设计师主要使用Axure绘制低保真原型图和高保真交互原型图。
4. MockingBot（墨刀）
MockingBot是一款在线的原型工具，旨在帮助产品经理和UI设计师快速构建移动应用产品原型，具有云端保存、实时手机预览、支持iOS和Android、多种手势和页面切换特效等特点。
墨刀与Axure是两种用户体验不同的原型工具，前者操作方便适用于刚刚入门的初学者，后者则显得更加专业，在具体工作中两款软件均可使用。
5. Sketch
Sketch是一款适用于Mac操作系统的矢量绘图工具，主要用于图标设计和界面设计。它是一个有着出色UI的一站式应用，所有需要的工具都触手可及。在Sketch中，画布将是无限大小的，每个图层都支持多种填充模式，且有丰富的文字渲染和文本式样。
6. Cutterman
Cutterman是一款运行在Photoshop中的插件，能够自动将用户需要的图层进行输出，以替代传统的手工切图的烦琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便用户在PC、iOS、Android等设备上使用。
7. PxCook（像素大厨）
PxCook是面向设计师的一款免费、交互流畅、全平台支持的标注切图工具软件。它支持对Photoshop和Sketch中的元素尺寸、元素距离、文本样式和颜色的智能标注，还能智能切图。
8. Ps Play
Ps Play是一款方便UI设计师实时预览效果的APP软件。在Photoshop的菜单栏中执行“编辑”→“远程连接”命令，在弹出的对话框中进行简单设置，如图1-4所示，即可实现Photoshop中的制作效果实时在手机端预览，从而更便于UI设计师进行设计与修改。需要特别说明的是，若要Ps Play远程连接成功，PC端与手机端必须在同一网段的局域网内才能实现实时预览。图1-4 开启远程连接1.2.2 UI设计师的设计理论知识储备
成为一名“会制作”的UI设计师很容易，但要成为一名“有思想”的UI设计师除了要熟练操作多种软件外，在设计理论层面也应该有多方面的涉猎。由于篇幅所限，这里仅对学习方向进行简单介绍，更多知识请读者阅读其他相关书籍，查漏补缺。
1. 色彩理论知识储备
色彩是一种涉及光、物与视觉的综合现象，而对色彩的研究，千余年前的中外先驱者们就已有所关注。无论哪种设计都离不开色彩，色彩和形象是用户视觉感知中最快也是最直接的元素，无需语言和文字，色彩会在第一时间通过眼球反馈到大脑，触发感受，影响情绪。工作中做配色方案时，色彩理论知识可能会非常有用。这里推荐读者几本有关色彩的课外书籍，仅供参考。【1】《超越平凡的平面设计——配色设计原理与应用》，[美]Jim Krause（作者），黄海枫（译者），人民邮电出版社。【2】《写给大家看的色彩书:设计配色基础》，梁景红（作者），人民邮电出版社。
2. 心理学与交互理论知识储备
在做产品设计和交互设计时，通常从人的感知、注意、记忆、思维、动机等方面出发，直接剖析认知心理，这样才能全面深入地了解目标用户。这里推荐读者几本有关心理学和交互设计理论的课外书籍，仅供参考。【1】《设计师要懂心理学》，魏因申克（Susan Weinschenk）（作者），徐佳、马迪、余盈亿（译者），人民邮电出版社。【2】《交互设计：原理与方法》，顾振宇（作者），清华大学出版社。【3】《交互设计：设计思维与实践》，由芳、王建民、肖静如（作者），电子工业出版社。1.3 UI设计理论基础
前文已经对UI设计师的工作内容和岗位要求做了简单介绍，也对将要学习的软件和提升自己内在水平的知识储备做了铺垫。接下来，就带领读者从夯实基础做起，逐步讲解UI设计师在工作岗位中的工作流程，以及每个工作环节中应该做什么和如何做。1.3.1 色彩三要素
色彩可用色相、明度和饱和度来描述。人们看到的任一彩色光都是这3个特性的综合效果，这3个特性即是色彩三要素。
1. 色相
色相是指色彩的品相。日常生活中所看到的红、橙、黄、绿、蓝、紫等都代表一种具体的色相。之所以人们能看到五颜六色的物体，是因为光照到物体上时，一部分光被物体反射，一部分光被物体吸收，不同物体对光反射、吸收的效果不同，故呈现不同的色彩。
常见的色相环如图1-5所示，色相环的最大的作用，并不是把颜色一一罗列出来，而是它直观地把邻近色和互补色有机结合到了一起。
2. 明度
明度是指色彩的“明亮程度”，如图1-6所示。对于同一颜色来讲，在强光照射下显得明亮，弱光照射下显得灰暗；对于不同颜色来讲，每一种纯色都有与其相对应的明度，黄色明度最高，蓝紫色明度最低，红、绿色为中间明度；对于无彩色来讲，最高明度为白，最低明度为黑。图1-5 色相环图1-6 明度表
3. 饱和度
饱和度是指色彩的鲜艳程度，也称色彩的纯度。要理解饱和度的概念，用一句通俗的话总结最为直观“颜色越纯，饱和度越高”，这里“纯”字可以理解为“颜色的色相可识别性高”。
饱和度通常使用百分比来表示，对于某个图像来讲，饱和度为0%表示当前图像为灰色，饱和度为200%则会增加图像的彩度，如图1-7所示。图1-7 不同饱和度效果1.3.2 UI设计配色基础
在APP中，色彩元素扮演的角色仅次于产品功能。人与移动端设备的互动主要基于与图形用户界面元素的交互，而色彩在该交互中起着关键作用。它可以帮助用户理解APP内容，引导用户与正确的元素进行互动。在每个APP产品设计初期，都会有一套配色方案，并在主要区域使用其基础色彩。
1. APP中一般包含的颜色数量
在为一个新的APP创建配色方案时，需要考虑很多因素，包括品牌色彩，以及色彩针对目标客户群体是否存在特殊意义。
简洁的配色方案有助于改善用户体验，并且使产品内容更容易被理解。相反，运用太多的色彩会使人眼花缭乱。经研究，大多数人更倾向于仅依赖2～3种色彩的简单色彩组合。
2. 配色方案——单色
单色是单一色系的搭配，它在色彩的深浅、明暗或饱和度上进行调整而形成明暗的层次关系。对于初学者而言，单色方案是最易于创建的配色方案，因为每种色彩取自相同的基色。单色的色彩可以很好地结合在一起，产生和谐的效果。单色配色效果如图1-8所示。图1-8 单色配色效果
3. 配色方案——相近色
相近色的配色方案是选取相互不冲突的相关色彩，一种色彩用作主色，而其他色彩用于辅色以丰富该方案。相近色配色效果如图1-9所示。图1-9 相近色配色效果
4. 配色方案——补色
在色环中，两个对立的颜色称为补色。在使用补色配色方案时，一种颜色的面积大于另一种颜色的面积，就可以增强画面的对比，使画面能够很醒目。补色配色效果如图1-10所示。图1-10 补色配色效果
5. 配色方案——自定义配色
创建自定义配色方案最简单的方法是将一个明亮的主色添加到一组中性色中，这种处理方法最能够引起视觉冲击。例如，向灰度设计中添加一种色彩可以很轻易地吸引眼球，如图1-11所示。图1-11 自定义配色效果1.4 APP页面分类及其作品欣赏
要想亲自设计APP UI界面，还需要看看优秀的设计作品是什么效果，通过学习他人作品，从中吸取精华。市场上的APP有许多类型：购物类、影音类、图像类、系统工具类、通信社交类、阅读咨询类、办公类和交通位置类等。无论何种APP类型，用户在使用APP时都会访问到各种页面，主要包括引导页、主页、注册登录、菜单导航、列表、评论、下载、详情页、设置页和数据展示等页面。这里挑选了几类常见的APP界面向读者进行展示。
1. 引导页
APP在启动时会有一小段时间的初始化过程，开发者可以利用这个初始化过程使用引导页的方式传递给用户一些品牌信息内容，如图1-12所示。反之，不需要引导页则可以精简APP，同时也让开发者更追求APP的性能。图1-12 引导页
2. 主页
APP的主页可根据APP类型进行不同的版式设计，主要包括以下3种类型。（1）浏览引导为主型
此种类型的页面在布局上会有一个明确的主线，会对用户产生潜在的引导提示，版式的外在表现主要有上下分割型、左右分割型、中轴型、曲线型等类型。图1-13所示的APP主页界面采用中轴型布局，模块布局垂直方向上纵向排列，引导用户从上往下浏览，结构层次非常清晰。图1-13 浏览引导为主型（2）提高浏览效率为主型
此种类型的页面比较典型的应用有资讯、新闻和图库类APP，通过图文的混合编排呈现理性而严谨的感觉，使信息的传递更为快速、清晰，如图1-14所示。图1-14 提高浏览效率为主型（3）信息展示为主型
此种类型的页面主要应用于记录型和天气类等APP。此类页面受界面的信息量和功能特性因素的影响，多数采用满屏型布局，如图1-15所示。图1-15 信息展示为主型
3. 菜单导航
受手机屏幕大小限制，通常APP的菜单导航会采用滑动页面或者隐藏在其他按钮中的设计方法，如图1-16所示。图1-16 菜单导航
4. 详情页
详情页是APP必不可少的页面，在该页面内展示的是APP具体的信息，如图1-17所示。图1-17 详情页
5. 注册登录
注册登录页面也是APP的必备界面，为了给用户带来良好的体验，某些登录界面在设计时会采取授权第三方应用一键登录的入口，如图1-18所示。图1-18 注册登录1.5 浅析APP产品开发流程
如今市场上的整套APP设计项目都是由一个设计团队共同完成的，一般由产品经理进行市场需求分析后给出一定的方案，然后交给设计团队进行原型设计和UI视觉设计，设计完成后交付开发团队进行产品软件的开发，开发完成后再进行测试和上市。要想成为一个称职的UI设计师，要从了解自己，了解团队开始。下面简单介绍APP产品开发的团队成员岗位职责和开发流程，后续章节（第5章）将以实际开发过程为例详细讲述。
1. 团队成员及其作用（1）产品经理
产品经理（Product Manager，PM）在企业中专门负责产品管理，负责调查并根据用户的需求，确定开发何种产品，以及采用何种技术、商业模式等。产品经理还要根据产品的生命周期，协调研发、营销、运营，确定和组织实施相应的产品策略，以及其他一系列相关的产品管理活动。（2）设计师团队
设计师团队包括产品设计师、用户体验设计师和图形界面设计师，其实在中小型公司运营中，这些岗位的工作可能会简化为1~2人，并没有那么明确的岗位分工。
◎ 产品设计师（PD）：通过线条、符号、数字、色彩等把产品展现在人们面前。在产品设计阶段要全面确定整个产品策略、外观、结构、功能，从而确定整个生产系统的布局。
◎ 用户体验设计师（UE）：负责产品的概念原型设计和细化的交互设计，配合进行用户测试和分析，对产品与用户交互方面进行改良。
◎ 图形界面设计师（GUI）：根据原型图的规划设计出一套能够满足客户需求的界面。
对于整个设计环节，一般APP项目都遵循以下设计流程，这里仅需要读者了解其工作过程，为后期各个模块的学习有一个全局认识。
①绘制草图
绘制草图是指使用纸和笔去手绘界面草图，以便快速地与产品经理和其他同事进行讨论，再将想法具体化。
②制作低保真原型图
在草图的基础上，借助第三方软件（Axure），用线框和文字绘制草图界面。在完成低保真原型图时，不能只是简单绘制，还要进行一些简单的交互操作，并简单地体验一下这个设计，尽可能地发现一些问题。图1-19所示的是某APP设计环节的低保真原型图。图1-19 某APP低保真原型图节选
③制作高保真原型图
在此环节中，要基于低保真原型图进行视觉设计，并将这个视觉设计稿制作成可进行交互操作的原型。这时，高保真原型图的效果已经与最后的产品相差无几，并且能在手机上进行模拟操作，图1-20所示的是某APP的高保真原型图。
高保真原型一般交付给开发工程师与测试工程师。开发人员将根据高保真原型开发出产品。测试人员将以高保真原型为基准，对开发人员交付的产品进行测试。（3）开发工程师
开发工程师将根据产品经理和设计师团队的最终方案编写代码，把这个方案实现成可用的产品。图1-20 某APP高保真原型图节选（4）测试工程师
测试工程师的工作内容就是从用户角度出发，检测开发工程师做的东西是不是符合产品的需求，或是用户体验是否良好。
2. 开发流程
通过对上述各团队成员工作内容的了解，从整个APP产品大局来看，产品开发流程可总结为4个步骤：产品定义、交互设计、开发和测试，具体的开发流程图如图1-21所示。图1-21 APP产品开发流程图1.6 职场经验分享
对于初入职场的UI设计师，面对与学校迥然相异的环境，这里总结几条有用的职场经验，帮助读者迅速转变为一名成熟的设计师。
1. 别让设计成为“井底之蛙”
当设计师完成对产品的设计时，需要说服别人来接受你的设计，这个过程讲究以理服人，可以事先让队友提提意见，用一些理论或者是一些说得通的理由来支撑你的设计方案，而忌用类似“我觉得这样好”的语言来说服客户。
2. 尽量快速融入团队
新成员加入团队中是需要磨合一段时间的，要融入团队中除了要知道自己是做什么的之外，还需要知道应该怎么去做。新成员可以从帮助同事提高整个团队效率出发，改变自己的节奏来融入团队。
3. 负责到底
UI设计师最后的工作环节是将APP效果图标注和输出，但请勿将各类图片交付给后续程序员进行开发后就不管不问。作为有担当的UI设计师，要将内测的APP各个流程都看一遍，看看是否一切都与预定的一样，把不一样的地方记录下来，整理后及时反馈。
4. 不要过于追求完美
应该提前明白的是，后期的程序开发不可能100%按照UI设计师的想法实现产品。对于那些能够暂时接受的瑕疵，可以尝试着选择接受，保留精力去解决更加亟待解决的问题才能更有效的工作，这也能锻炼自己对项目进度的把控能力。
5. 适当补充程序开发基本知识
对于UI设计师来说，在交互设计环节有API limitation（API限制）意识是非常重要的。如果设计出来的功能后期开发根本不能实现，那么不仅浪费自己的时间，而且会降低整个团队的效率。
反观有经验的设计师，能够设计出交互逻辑清晰且开发成本相对低的产品，这样不仅让团队更有效率，更能大幅提升产品的稳定性。1.7 学习反思【思考】
1. 什么是UI？什么是UE？
2. UI设计师常用的软件有哪些？
3. 请写出色彩三要素，并加以解释。
4. 产品经理的主要工作是什么？
5. 简述APP产品开发流程。【动手】
1. 访问自己手机中的“应用市场”，安装一款你喜欢的小众APP软件，并说出喜欢的原因。
2. 在互联网上查找有关“UI设计”的资料，欣赏优秀的设计作品，将其保存在收藏夹中，作为以后学习的素材。第2章 UI图标设计【本章导读】
APP产品在项目开发时，除了版式布局的设计外，图标的设计与制作是产品UI设计的重头戏。随着设计潮流的更迭，目前越来越注重图标的简洁与寓意表达，扁平化设计风格凸显。本章依托UI设计中常见图标的制作方法与质感表现，在介绍图标制作规范的基础上，巩固和加强Photoshop软件在UI设计中的核心操作，目的是为后期读者能够独立完成整个项目的各类设计奠定基础。【学习目标】
¤ 认识图标设计的相关概念。
¤ 了解图标分类与常见尺寸。
¤ 熟练掌握Photoshop中布尔运算的操作方法。
¤ 掌握主流图标设计的方法。2.1 初识移动设备尺寸及其相关概念
在现有市场中，移动设备的操作系统大致可以分为iOS和Android，然而由于Android设备屏幕尺寸碎片化严重，所以APP UI设计师一般基于iPhone机型进行效果图设计，然后再适配到其他机型上。而在工作过程中，经常听到“@1x、@2x和@3x”这种描述语言，那么这些行业术语到底是什么含义，读者怎么才能够快速融入设计团队呢？下面对即将使用到的初级浅显概念加以概述，更多详细的描述将在APP实战开发阶段（第5章）进行讲解。2.1.1 px、pt和ppi等相关概念
1. px
px（pixel，像素）是指电子屏幕上显示数据的最基本的点。
2. pt
pt（point）是一种长度单位，等于1/72英寸，也称为“绝对长度”。
3. 分辨率（1）物理分辨率
物理分辨率是指硬件所支持的分辨率，其含义是指显示屏最高可显示的像素数，例如iPhone X的屏幕分辨率为1125px×2436px，其含义为iPhone X的屏幕是由横向1125个像素纵向2436个像素点排列而成的。（2）逻辑分辨率
逻辑分辨率是指软件可以达到的分辨率，其含义是页面上抽象的像素点的个数。
4. 缩放倍率
物理分辨率与逻辑分辨率之间的缩放比例，即用@1x、@2x和@3x表示。这是由于随着硬件技术的提高，物理分辨率可以达到逻辑分辨率的多倍以上，那么就意味着在原有画布大小的设计图稿中，一个UI设计里的像素点在屏幕里对应着多个像素点，从而显示得更加细腻，也就是所谓的Retina屏（视网膜屏）。
5. ppi
ppi（Pixel Per Inch）是指每英寸像素数，该数值越高，画面看起来越细腻。例如某图像分辨率为72ppi，是指屏幕以每英寸72像素的方式来显示画面。
6. dpi
dpi（Dots Per Inch）用于衡量印刷品的打印精度，是指每英寸能够打印的点数。2.1.2 iPhone机型屏幕尺寸规格
当前市面上，常见的具有代表性的屏幕尺寸规格见表2-1，这里仅做了解即可。表2-1 常见移动设备屏幕尺寸规格2.2 UI图标设计
在APP UI设计中最重要的工作就是图标设计。这里图标（Icon）是指具有标识性质的图形，它具有高度浓缩并快捷传达信息、便于记忆的特性。
作为UI设计师不仅要了解操作系统（Android和iOS）的特性，还要详细了解不同操作系统下图标的网格绘制标准，例如方形图标和圆形图标。只有按照设计标准来执行，才能避免在适配的时候出现不必要的麻烦。2.2.1 图标的分类
手机APP中的图标各式各样，按照不同的分类标准能够划分出许多类别。下面向读者介绍常见的图标分类。
1. 系统图标（按属性分类）
系统图标是指系统功能或APP应用程序的启动图标，如图2-1所示。此类图标是整个APP核心功能的缩影，也是APP品牌形象的重要组成部分。
2. 功能图标（按属性分类）
功能图标是指承担着某种功能的图标，如图2-2所示。此类图标通常出现在APP应用程序的标签栏、菜单栏和导航栏等区域。图2-1 系统图标图2-2 功能图标
3. 线性图标和剪影图标（按设计风格分类）
线性图标的外观由线条组成，而剪影图标采用填充轮廓的方式进行表现，该类图标一般使用在APP应用程序内部某些组件中。其实，线性图标和剪影图标在APP图标设计方案中归为一套图标，可以说剪影图标是线性图标在不同状态下的另一种存在形式，如图2-3所示。
4. 扁平化图标（按设计风格分类）
扁平化的设计理念已经成为当今的一种潮流趋势，而扁平化图标是指那些去掉装饰效果（投影、高光、纹理和渐变等）的图标，如图2-4所示。
此类图标虽然看起来很“扁”、很“薄”，从视觉角度来看，图标没有任何厚度，但能直接地将信息和事物本身的特性展示出来，再搭配上柔和的色彩组合，将之放在简洁的布局界面中，能呈现出完美的平衡。图2-3 线性图标和剪影图标图2-4 扁平化图标设计
5. 拟物化图标（按设计风格分类）
拟物化图标是指模拟现实物品的造型和质感的图标，如图2-5所示。此类图标细节特别丰富，质感强烈，在制作时主要通过叠加高光、纹理、材质、阴影等效果对实物进行再现，也可以适当运用变形和夸张的手法，以提高视觉冲击力。图2-5 拟物化图标
上述图标分类及其对应图标展示是目前较为常见的图标类型，此外还有一些其他类型的图标，如手绘风格图标、3D立体风格图标、动态图标和游戏风格图标等，这些图标只是设计风格手法不同，不再一一赘述。2.2.2 常见存储格式与图标尺寸
1. 存储格式（1）JPEG
JPEG是第一个国际图像压缩标准，用于连续色调静态图像。在Photoshop软件中以JPEG格式存储时，提供11级压缩级别，以0～10级表示。其中，0级压缩比最高，图像品质最差。即使采用细节几乎无损的10级质量保存时，压缩比也达到5∶1。（2）PNG
PNG是一种无损压缩的位图图形文件格式，有8位、24位、32位三种形式。例如PNG8和PNG24后面的数字表示最多可以索引和存储824的颜色值，8代表2，也就是256色，而24则代表2，大概有1600多万色。
试读结束[说明：试读内容隐藏了图片]