作者：楚飞
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Photoshop热门手机APP与网页游戏界面设计从入门到精通(光盘内容另行下载，地址见书封底)试读：
前言
关于本系列图书
感谢您翻开本系列图书。在茫茫的书海中，或许您曾经为寻找一本技术全面、案例丰富的计算机图书而苦恼，或许您为担心自己是否能做出书中的案例效果而犹豫，或许您为了自己应该买一本入门教材而仔细挑选，或许您正在为自己进步太慢而缺少信心……
现在，我们就为您奉献一套优秀的学习用书—“从入门到精通”系列，它采用完全适合自学的“教程＋案例”和“完全案例”两种形式编写，兼具技术手册和应用技巧参考手册的特点，随书附带的DVD或CD多媒体教学光盘包含书中所有案例的视频教程、源文件和素材文件。希望通过本系列书能够帮助您解决学习中的难题，提高技术水平，快速成为高手。
■ 自学教程。书中设计了大量案例，由浅入深、从易到难，可以让您在实战中循序渐进地学习到相应的软件知识和操作技巧，同时掌握相应的行业应用知识。
■ 技术手册。一方面，书中的每一章都是一个专题，不仅可以让您充分掌握该专题中提到的知识和技巧，而且举一反三，掌握实现同样效果的更多方法。
■ 应用技巧参考手册。书中把许多大的案例化整为零，让您在不知不觉中学习到专业应用案例的制作方法和流程；书中还设计了许多技巧提示，恰到好处地对您进行点拨，到了一定程度后，您就可以自己动手，自由发挥，制作出相应的专业案例效果。
■ 老师讲解。每本书都附带了CD或DVD多媒体教学光盘，每个案例都有详细的语音视频讲解，就像有一位专业的老师在您旁边一样，您不仅可以通过本系列图书研究每一个操作细节，而且还可以通过多媒体教学领悟到更多的技巧。
本系列图书包括三维与动画设计、平面艺术设计和产品辅助设计三大类，近期已推出以下品种。
■ 内容安排
本书主要内容安排如下。
■ 版权声明
本书及光盘中所采用的图片、模型、音频、视频和赠品等素材，均为所属公司、网站或个人所有，本书引用仅为说明（教学）之用，绝无侵权之意，特此声明。编者2014年2月
基础入门篇
第1章 UI设计快速入行
本章重点 设计的要义 设计的分类 什么是UI设计 设计基本原则 设计流程及方法 了解Photoshop和UI的关系 了解Photoshop的工具箱 管理Photoshop控制面板 填充颜色与图案
什么是设计？什么是UI？在IT界中经常会听到各种专业词汇，跨入这个行业，才知道UI是英文UserInterface的缩写，中文译为用户界面。那么在学习UI设计之前，首先要了解什么是设计、UI设计的一些基本原则和制作流程，并且要熟练Photoshop的基本操作。只有将这几点理解并且掌握了Photoshop的核心知识，读者才能真正开始UI设计之旅。
1.1 UI设计的基础
设计就是把一种计划、规划、设想通过视觉形式传达出来的行为过程。简单地讲就是一种创造行为；一种解决问题的过程，其区别于其他艺术类别的主要特征之一就是设计更具有独创性。
UI设计的相关知识，包括数字化图像基础、UI设计者与产品设计团队、UI设计与产品团队项目流程的关系等，只有认识并且能够了解UI设计的规范和基本原则才能够更好地设计出优秀的产品。1.1.1 设计的要义
以“视觉”作为沟通和表现的方式。透过多种方式来创造和结合符号、图片和文字，借此用来传达想法或讯息的视觉表现。
● 设计之美的第一要义就是“新”。设计要求新、求异、求变及求不同，否则设计将不能称为设计。而这个“新”有着不同的层次，它可以是改良型，也可以是创造型的，但无论如何，只有新颖的设计才会在大浪淘沙中闪现出与众不同的光芒，迈出走向成功的第一步。
● 设计之美的第二要义是“合理”。一个设计之所以被称为“设计”，是因为它解决了问题。设计不可能独立于社会和市场而存在，符合价值规律是设计存在的直接原因。
● 设计之美的第三要义是“人性”。总而言之，设计就是为人服务的，服务于人们的生活需要是设计的最终目的。当然，设计之美也遵循人类基本的审美意趣。对称、韵律、均衡、节奏、形体、色彩、材质，以及工艺等都是能够想到的审美法则，似乎都能够在设计中找到相应的应用。1.1.2 设计的创作思路
在设计的过程中，需要很多工具来配合完成这项任务，首先人们会想到纸笔，其实不尽然，纸笔只是早期所需要的最基本工具之一。设计的主要核心就是创作，所以最重要的就是人的思想，其次才是相关工具。
1．思想
除了技术、设计要求和创造力，关键是观察和分析思维中所需要的布局，再一一将设计呈现。
2．草图
草图就是设计者利用各种形式将自己所需要表达的思想呈现在一个平面上，比如一个图标的设计，可以利用纸笔迅速地表现出设计的大致模式。在设计过程中，这也许是设计师或者艺术总监的一种手绘素描创意过程。
3．电脑
电脑在设计行业被认为是一个不可或缺的工具。电脑和应用软件通常被专业人士认为是比传统方法更有效的生产工具。然而，一些设计师继续使用手册和传统工具做设计，新的想法是通过试验工具和方法不断地探索而来的，所以无论是哪种方法，只要设计工具能够更好地表现想要的效果就行。
4．争议
一些设计上的争议有时候也是必要的，设计者可以使用草图探索多个或复杂的想法，而不需要使用软件来表现灵感，利用传统的手法使用草稿纸就可以快速改进这个想法，在不断的探索与争论中产生最终需要的设计成果。1.1.3 设计的分类
在设计领域，有多种设计行业，大致可以分为技术设计、艺术设计、营销设计、视觉传达设计、工业设计，以及环境设计6大类。下面列举几类历史较久、广为人知的设计种类，如图1-1所示。图1-1 设计分类图表
UI设计是属于视觉传达设计的一种，是机器与用户交流的一种界面设计。1.1.4 什么是UI设计
UI的原意是用户界面，概括成一句话就是人和工具之间的界面。这个界面实际上体现在生活中的每一个细节，例如，操作电脑时鼠标与手就是这个“界面”，开车的时候方向盘和仪表盘就是这个“界面”，看电视的时候遥控器和屏幕就是这个“界面”。
因此，也可以将UI分成两大类：硬件界面和软件界面。本书主要讲述的是软件界面，这是介于用户与电脑之间的一种界面，也可以称为特殊的或者是狭义的UI设计。图1-2所示为数字电视的UI界面。图1-2 数字电视的UI界面1.1.5 UI设计的分类
UI设计从工作内容可分为3部分，分别是用户研究、交互设计，以及界面设计。
1．用户研究——用户测试/研究工程师（User Experience Engineer）
在产品开发前期，通过调查研究，了解用户的工作性质、工作流程、工作环境，以及工作中的使用习惯，挖掘用户对产品功能的需求和希望，为界面设计提供有力的思考方向，设计让用户满意的界面。
用户研究不是软件UI设计者主管的行为，而是站在用户的角度去探讨产品的开发设计。它最终达到的目标是提高产品的可用性，使设计的产品更容易被人接受、适用，并且记忆。
当产品最终被推上市场后，设计者还应主动地收集市场的反馈。因为市场反馈是用户使用后的想法，是检验界面与交互设计是否合理的标准，也是经验积累的重要途径。
2．研究人与界面的关系——交互设计师（Interaction Designer）
交互设计是指人与机器之间的交互工程，一般都是由软件工程师来制作。交互设计师的工作就是设计软件的操作流程、树状结构、软件的结构，以及操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型和交互规范。
人机交互设计的目的就是在于加强软件的易用、易学，以及易理解性，使计算机真正为人类服务。
3．界面设计——图形设计师（Graphic UI Designer）
在国内，目前大部分软件UI设计工作者都是从事这类设计工作，也常被人称为美工，但实际上并不是单纯的美术工作者，而是软件产品信息界面的设计师。
从心理学的意义来分，界面可分为感觉和感情两个层次，用户界面设计是屏幕产品的重要组成部分。界面设计需要了解认知心理学、设计学，以及语言学等，在界面中都扮演着重要的角色。用户界面设计的三大原则：把界面放在用户的控制下、减少用户的记忆负担和保持界面的一致性。1.1.6 UI设计的规范
UI设计规范主要是为了使设计团队朝着一个方向、风格和目的来设计界面效果，以便于团队之间的相互合作和提高产品的质量。
界面是软件与用户交流最直接的层面，界面的好坏决定用户对软件的第一印象。设计良好的界面能够引导用户自己完成相应操作，起到向导作用。界面设计主要是为了达到以下目的。
● 以用户为中心。设计由用户控制的界面，而不是界面控制用户。
● 清楚一致的设计。所有界面的风格保持一致，具有相同含义的术语保持一致，易于理解和使用。
● 拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，帮助用户迅速学会软件的使用。
● 较快的响应速度。
● 界面要简洁、美观。
做UI设计时应该重视下表所示的规则。续表1.1.7 设计基本原则
界面并不仅仅是一个应用程序，它应该能为用户服务，是用户与程序沟通的惟一途径。界面的设计为的是用户而不是程序员。图1-3所示为设计基本原则的流程图。图1-3 设计基本原则的流程图
设计的基本原则有以下几点：
● 简易性：界面的简洁是为了让用户便于使用、便于理解，并降低用户发生错误选择的可能性。
● 用户的语言：在界面中要使用能反应用户自身的语言，而不是游戏设计者的语言。
● 易记性：人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定且有限，24小时内存在25％的遗忘率。所以对用户来说，浏览信息要比记忆更容易。
● 一致性：这是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与内容一致。
● 清楚：在视觉效果上便于理解和使用。
● 用户的观点和熟练度：想他们所想，做他们所做。用户总是按照他们自己的方法理解和使用。
● 排列：一个有序的界面能让用户轻松地使用。
● 安全性：用户能自由地做出选择，并且所有选择都是可逆向的。在用户做出错误的选择时有信息介入系统并提示。
● 灵活性：简单来讲就是要让用户更加方便地使用，但不同于上述原则，即互动多重性，不局限于单一的工具。
● 人性化：高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可根据自己的习惯定制界面，并能保存设置。1.1.8 设计流程及方法
通常一个团队将UI设计流程分为4个阶段：分析、设计、配合，以及验证。下面简要介绍这4个阶段。图1-4所示为UI设计流程图。图1-4 UI设计流程图
1．分析阶段
分析阶段包含需求分析、用户场景模拟，以及竞品分析。简单地讲就是用户检验的一个过程，从用户体验中不断开拓、探索，寻求用户最满意的效果。
2．设计阶段
设计阶段采用面向场景、面向事件驱动和面向对象的设计方法。这个阶段是在设计过程中要考虑到3种不同情况下而制定出来的设计措施，产品的用户定位将对UI设计师起着最重要的引导作用。
3．配合
UI设计师交出产品设计图时，需要更多的开发人员、测试人员进行截图配合。
4．验证
产品出来后，U I设计师需对产品的效果进行验证，是否与当初设计产品时的想法一致，是否可用，用户是否接受，以及与需求是否一致，都需要UI设计师验证。1.1.9 UI设计工作流程
UI设计需经过用户需求、设计方案、讨论确认、页面制作、程序开发，以及用户测试这6项工作流程。
1．设计需求（1）系统设计需求文档。（2）系统结构文档（例如栏目划分、目录结构，以及导航方式等）。（3）较复杂页面表现形式草图。（4）较复杂业务流程文档。（5）如可能，提供参考和示例站点。（6）与程序员沟通部分页面实现方法。
2．页面制作需求（1）经过确认的美术设计方案图。（2）系统设计需求文档等，较复杂业务流程文档。（3）所需页面脚本需求，与程序员沟通部分页面实现方法。
3．提交给程序员的内容（1）静态模板页：首页及二级页面HTM文件、CSS样式单及相关页面Java Script代码，可用于直接嵌入代码。栏目的命名规则与程序员协商，建立统一的规范。（2）所有按键图标统一。（3）部分容易混淆颜色的色值。（4）图片统一放在一个目录下。1.1.10 UI设计者与产品设计团队
UI设计者需要怎样与产品设计团队一起协同合作呢？要建立好一个严格的产品开发过程，设计者必须平等地与工程、市场，以及业务管理部门进行协同工作，这种协同工作需要明确每个方面的责任和权利，企业从设计中获得的收益将会有极大的提升。
下面开始介绍这种责任划分，平衡了每个方面的权利，可以极大地提高设计的成功率，并保证企业在产品开发的整个周期中给予应有的支持，这种责任和权利的平衡关系如下。
● 设计团队负责用户对产品的满意度。
● 工程团队负责产品的实现和制造。
● 市场营销团队负责说服顾客购买产品。
● 管理团队负责产品的利润率。
1.2 Photoshop UI设计快速入门
通过前面对设计概念的认识和对UI设计的了解，下面开始学习UI设计工具——Photoshop软件。本节运用目前最新版本Photoshop CS6进入UI设计的初级阶段，在这个阶段中首先需要学习Photoshop CS6最基本、也是在设计中最常用到的操作。1.2.1 了解Photoshop和UI的关系
在学习UI设计之前，首先要了解UI设计所需要的，也是最重要的一个软件工具——Photoshop。Photoshop是美国Adobe公司开发的一款图形图像软件，目前最新的版本是Photoshop CS6。大多数人对于Photoshop的了解仅限于“一个很好的图像编辑软件”，其应用也是在图像处理的层次上，并不知道它在诸多方面的应用。实际上，Photoshop除了在平面广告设计领域有广泛的应用外，在网页与界面交互设计领域同样有着广泛的应用。
UI界面是由色块和线条构成的，通过不同颜色的变换和制作技巧，可以使UI变得更加逼真。Photoshop是目前使用最为广泛、也是功能最强大的一款UI设计软件，不仅能够提供制作时所需要的工具，还能够利用各种滤镜和命令快速地实现用户所需要的效果，另外还可以利用外挂插件增强Photoshop的许多功能，使设计者能够更好、更方便地设计出想要的效果。1.2.2 启动Photoshop应用程序
下面以在Windows 7中启动Photoshop CS6为例，介绍启动Photoshop CS6应用程序的操作方法。安装好Photoshop CS6应用软件后，单击“开始”|“所有程序”|Adobe Photoshop CS6命令，如图1-5所示。系统开始加载Photoshop CS6应用程序，如图1-6所示。图1-5 单击Adobe Photoshop CS6命令图1-6 启动Photoshop CS6程序提示除了上述启动Photoshop CS6应用程序的方法外，还有以下两种常用的方法。● 图标：双击桌面上的Adobe Photoshop CS6快捷方式图标。● 文件：双击已经存在的任意一个PSD格式的Photoshop文件。应用程序加载完毕后，即可启动Photoshop CS6应用程序，进入Photoshop CS6工作界面，如图1-7所示。图1-7 进入Photoshop CS6工作界面1.2.3 退出Photoshop应用程序
当用户完成图像文件的编辑后，若不再使用Photoshop CS6软件，则可以退出该程序，以提高系统的运行速度。
将鼠标指针移至图像编辑窗口的“关闭”按钮上，如图1-8所示，单击鼠标左键，即可关闭所打开的图像文件。
将鼠标指针移至菜单栏右侧的“关闭”按钮上，如图1-9所示，单击鼠标左键，即可退出Photoshop CS6应用程序。图1-8 关闭图像文件图1-9 退出应用程序1.2.4 了解Photoshop工作界面
运用Photoshop对UI界面进行各种处理前，需要认识并了解该软件的工作界面。Photoshop CS6的工作界面主要由菜单栏、状态栏、工具箱、工具属性栏、图像编辑窗口和浮动面板6个部分组成，如图1-10所示。图1-10 Photoshop CS6工作界面
1．菜单栏
Photoshop CS6将标题栏和菜单栏进行了合并，位于整个窗口的顶端，上面显示了当前应用程序的名称、菜单命令，以及用于控制文件窗口显示大小的最小化、最大化（还原窗口）、关闭窗口等按钮，如图1-11所示。菜单部分由“文件”、“编辑”、“图像”、“图层”、“文字”、“选择”、“滤镜”、“3D”、“视图”、“窗口”和“帮助”11个菜单命令组成，单击任意一个菜单项都会弹出其包含的命令，Photoshop CS6中的绝大部分功能都可以利用菜单命令来实现。在菜单栏左侧的程序图标上单击鼠标左键，在弹出的下拉菜单中可以执行最小化窗口、最大化窗口、还原窗口和关闭窗口等操作。如果菜单中的命令呈现灰色，则表示该命令在当前编辑状态下不可用；如果菜单命令右侧有一个三角符号，则表示此菜单包含有子菜单。图1-11 菜单栏
2．状态栏
状态栏位于图像编辑窗口的底部，主要用于显示当前所编辑图像的各种参数信息。状态栏主要由显示比例、文件信息和提示信息3部分组成。
状态栏右侧显示的是图像文件信息，单击文件信息右侧的小三角形按钮，即可弹出快捷菜单，其中显示了当前图像文件信息的各种显示选项，如图1-12所示。图1-12 状态栏
3．工具箱
工具箱位于工作界面的左侧，如图1-13所示。要使用工具箱中的工具，只要单击工具按钮即可在图像编辑窗口中使用。若在工具按钮的右下角有一个小三角形，表示该工具按钮还有其他工具，在工具按钮上单击鼠标左键并长按左键，可弹出隐藏的工具选项，如图1-14所示。图1-13 工具箱图1-14 显示隐藏的工具
4．工具属性栏
工具属性栏一般位于菜单栏的下方，主要用于对所选取工具的属性进行设置，它提供了控制工具属性的选项，其显示的内容会根据所选工具的不同而发生改变。在工具箱中选取相应的工具后，工具属性栏将显示该工具可使用的功能。例如，选取工具箱中的快速选择工具，相应的工具属性栏如图1-15所示。图1-15 快速选择工具的属性栏
5．图像编辑窗口
在Photoshop CS6工作界面的中间，呈灰色区域显示的即为图像编辑工作区。当打开一个文档时，工作区中将显示该文档的图像编辑窗口，图像编辑窗口是编辑图像的主要工作区域，图形的绘制或图像的编辑都在此区域中进行。在图像编辑窗口中可以实现所有Photoshop CS6中的功能，也可以对图像编辑窗口进行多种操作，如改变窗口大小和位置等。当新建或打开多个文件时，图像标题栏的显示呈灰白色时，即为当前编辑窗口，如图1-16所示。此时所有操作将只针对当前图像编辑窗口，若想对其他图像窗口进行编辑，移动鼠标指针至相应的图像标题栏上，单击鼠标左键即可。图1-16 打开多个文档的图像编辑窗口
6．浮动面板
浮动面板主要用于对当前图像的颜色、图层、样式及相关的操作进行设置。
默认情况下，浮动面板是以面板组的形式出现的，它们位于工作界面的右侧，用户可以根据需要进行分离、移动和组合等操作。
用户若要选择某个浮动面板，可单击浮动面板窗口中相应的标签；若要隐藏某个浮动面板，可单击“窗口”菜单中带标记的命令，或单击浮动面板窗口右上角的“关闭”按钮；若要打开被隐藏的面板，可单击“窗口”菜单中不带标记的命令。图1-17所示为“窗口”菜单与“通道”面板。图1-17 窗口菜单与“通道”面板1.2.5 了解Photoshop的工具箱
在Photoshop CS6的工具箱中，包含了用于创建和编辑图像、图稿、页面元素的各种工具和按钮，灵活地运用工具箱中的各类工具，包括展开工具箱、移动工具箱、隐藏工具箱、选择复合工具，以及预设工具，有助于用户设计出更优秀的作品。本节详细介绍Photoshop CS6工具箱的使用方法。
1．展开工具箱
Photoshop CS6的工具箱是以图标形式显示的，用户从工具的形态可以了解该工具的功能。在工具箱中，单击鼠标左键，可以在工具箱不同位置选取任意工具，进行相应的操作，如图1-18所示。在工具箱工具图表右下角的三角形按钮上，单击鼠标右键，就会显示出其他相似功能的隐藏工具，如图1-19所示。图1-18 工具箱图1-19 展开画笔工具
2．移动工具箱
在Photoshop CS6中，默认情况下，工具箱停放在窗口的左侧，如图1-20所示。将鼠标指针置于工具箱顶部的空白处，单击鼠标左键并向右拖曳，即可将工具箱从停放位置拖出，放在窗口的任意位置，如图1-21所示。图1-20 工具箱放置位置图1-21 移动工具箱
3．隐藏工具箱
在Photoshop CS6中，隐藏工具箱可以最大限度地利用图像编辑窗口，使图像显示的区域更加宽敞，为用户创造更舒适的工作界面。
在Photoshop CS6应用程序中，单击“窗口”|“工具”命令，即可隐藏工具箱，如图1-22所示；再次单击“窗口”|“工具”命令，即可显示工具箱，如图1-23所示。图1-22 隐藏工具箱图1-23 显示工具箱
4．选择复合工具
在Photoshop CS6应用程序中，选取工具箱中的工具只需要单击工具箱内相应的图标即可。如果工具图标右下角带有三角形的图标，就表示此工具下隐藏有复合工具，用户可以按住鼠标左键不放或者单击鼠标右键，即可显示所包含的复合工具。复合工具包含的功能很丰富，灵活运用可以提高处理图片的速度。
选取任意工具下带有三角形图标的复合工具，例如减淡工具，单击鼠标右键，如图1-24所示，弹出复合工具组。将鼠标指针移至加深工具处，单击鼠标左键，即可选取加深工具，如图1-25所示。选取完成后，释放鼠标左键，即可完成工具的选择。图1-24 弹出复合工具组图1-25 选取加深工具
5．设置预设工具
在Photoshop CS6中，用户使用“预设管理器”可以载入各种工具预设、画笔库、形状库、渐变库，以及样式库等外部文件。
选取工具箱中的渐变工具，在工具属性栏中单击“工具预设”右侧的下拉按钮，弹出预设面板，选中“仅限当前工具”复选框，如图1-26所示。单击预设面板右上角的“创建新工具预设”按钮，弹出“新建工具预设”对话框，设置工具名称，如图1-27所示。图1-26 选中“仅限当前工具”复选框图1-27 设置名称
单击“确定”按钮后，预设好的“渐变工具1”即可显示在预设面板中，如图1-28所示。将鼠标指针移至“渐变工具1”选项上，单击鼠标右键，在弹出的快捷菜单中选择“删除工具预设”选项，如图1-29所示，即可删除工具预设。图1-28 显示“渐变工具1”图1-29 选择“删除工具预设”选项提示当保存工具参数设置后，用户下次使用时，参照上述介绍的方法，在弹出的预设面板中选择工具预设名称即可。若要复位当前工具参数或所有工具参数，则在弹出的预设面板中单击右上角的小锯齿形按钮，在弹出的列表框中选择“复位工具”或“复位所有工具”选项即可。1.2.6 管理Photoshop控制面板
Photoshop CS6面板汇集了图像操作中常用的选项和功能。在编辑图像时，选取工具箱中的工具或执行菜单栏中的命令后，使用面板可以进一步细致地调整各个选项，将面板上的功能应用到图像上。本小节主要向读者介绍管理Photoshop面板的操作方法。
1．展开面板
Photoshop CS6中包含了多个面板，用户在“窗口”菜单中可以单击需要的面板命令，将该面板展开，然后对图像进行编辑。
在Photoshop CS6应用程序中打开一个素材文件，默认情况下的面板如图1-30所示。单击“窗口”|“画笔”命令，即可展开“画笔”面板，如图1-31所示。图1-30 默认面板图1-31 “画笔”面板
2．移动面板
Photoshop CS6中包含了多个面板，用户可以根据自己的使用习惯移动面板，这样通过单独的面板操作，可以减少用户许多不必要的麻烦。
在Photoshop CS6软件中打开一个素材文件，移动鼠标指针至控制面板上方的区域，如图1-32所示。单击鼠标左键并拖曳至合适位置后释放鼠标左键，即可移动面板，如图1-33所示。
3．隐藏面板
用户在Photoshop CS6中编辑图像时，可以隐藏不需要的面板，以提供更多的工作空间。单击右上角的“关闭”按钮，如图1-34所示，即可隐藏面板。图1-32 确定光标位置图1-33 移动面板图1-34 单击“关闭”按钮提示除了运用上述方法隐藏控制面板外，用户还可以按【Shift＋Tab】组合键，即可在保留工具箱的情况下，隐藏所有的控制面板。Photoshop CS6一共提供了20多种控制面板，其中最常用的面板是“图层”、“通道”和“路径”面板。运用这些面板对当前图像的图层、通道、路径及色彩等进行相关的设置和控制，使用户在处理图像时更为方便、快捷。1.2.7 管理Photoshop工作窗口
打开Photoshop CS6后，其自动在桌面上创建一个Photoshop CS6的窗口，用户可以根据工作需要，调整窗口的大小与位置。
1．最小化窗口
用户在Photoshop CS6中编辑图像时，可以根据需要对Photoshop CS6的窗口进行最小化操作，单击Photoshop CS6标题栏的“最小化”按钮即可，如图1-35所示；也可以移动鼠标指针至系统桌面的任务栏图标上，单击鼠标左键，即可最小化工作窗口。图1-35 “最小化”按钮提示除了运用上述方法最小化窗口外，还可以在电脑桌面任务栏上的Photoshop CS6图标上，单击鼠标右键，在弹出的快捷菜单中选择“最小化”选项。
2．最大化窗口
Photoshop CS6程序窗口在默认情况下是最大化显示的，单击Photoshop CS6标题栏的“最大化”按钮，如图1-36所示，即可最大化窗口。图1-36 “最大化”按钮
在Photoshop CS6中，用户可以同时打开多个图像文件，因此程序窗口中就包含了多个图像窗口，可分别控制程序窗口和图像编辑窗口的状态，如最小化、最大化、还原窗口和关闭窗口，但由于程序窗口是父窗口，因此对图像窗口的调整受限于程序窗口。
3．还原窗口
用户编辑图像时，可以根据工作需要对Photoshop CS6窗口进行还原操作。单击Photoshop CS6标题栏的“向下还原”按钮，如图1-37所示，即可向下还原窗口。窗口未还原前，标题栏右上角的按钮呈“向下还原”状态；当被向下还原后，按钮则转换成“最大化”按钮状态。图1-37 单击“向下还原”按钮1.2.8 优化Photoshop系统参数
在使用Photoshop CS6的过程中，用户可以根据需要对Photoshop CS6的操作环境进行相应的优化设置，这样有助于提高工作效率。
1．优化界面选项
在Photoshop CS6中，用户可以根据需要优化操作界面，这样不仅可以美化图像编辑窗口，还可以在执行设计操作时更加得心应手。优化界面选项的方法很简单，用户只需单击“编辑”|“首选项”|“界面”命令，弹出“首选项”对话框，设置RGB参数值为110、140、255，如图1-38所示，单击“确定”按钮，返回“首选项”对话框，单击“确定”按钮，标准屏幕模式即可呈自定颜色显示，如图1-39所示。图1-38 设置RGB参数值图1-39 自定义颜色显示
2．优化文件处理选项
用户经常对文件处理选项进行相应优化设置，不仅不会占用计算机内存，而且还能加快浏览图像的速度，更加方便操作。优化文件处理选项的方法很简单，用户只需单击“编辑”|“首选项”|“文件处理”命令，弹出“首选项”对话框，如图1-40所示，单击“图像预览”右侧的下拉按钮，在弹出的列表框中选择“存储时询问”选项，如图1-41所示，单击“确定”按钮，即可优化文件处理。图1-40 “首选项”对话框图1-41 选择“存储时询问”选项
3．优化暂存盘选项
在Photoshop CS6中设置优化暂存盘可以让系统有足够的空间存放数据，防止空间不足，丢失文件数据。优化暂存盘的方法很简单，用户只需单击“编辑”|“首选项”|“性能”命令，弹出“首选项”对话框，如图1-42所示，在“暂存盘”选项区中选中“D驱动器”复选框，如图1-43所示，单击“确定”按钮，即可优化暂存盘。图1-42 “首选项”对话框图1-43 选中“D驱动器”复选框
4．优化内存与图像高速缓存选项
在Photoshop CS6中，用户使用优化内存与图像高速缓存选项，可以改变系统处理图像文件的速度。优化内存与图像高速缓存选项的方法很简单，用户只需单击“编辑”|“首选项”|“性能”命令，弹出“首选项”对话框。在“内存使用情况”选项区的“让Photoshop使用”数值框中输入400，如图1-44所示；在“历史记录与高速缓存”选项区中，分别设置“历史记录状态”为40，“高速缓存级别”为4，如图1-45所示，单击“确定”按钮，即可优化内存与图像高速缓存。图1-44 输入数值图1-45 设置数值提示在“首选项”对话框中设置“让Photoshop使用”的数值时，系统默认数值是50％，适当提高这个百分比可以加快Photoshop处理图像文件的速度，在设置“高速缓存级别”数值时，用户可以根据自己计算机的内存配置与硬件水平设置数值。1.2.9 控制Photoshop图像窗口
在Photoshop CS6中，用户可以同时打开多个图像文件，其中当前图像编辑窗口将会显示在最前面，用户可以根据工作需要移动窗口位置、调整窗口大小、改变窗口排列方式或在各窗口之间切换，让工作变得更加方便。
1．调整窗口位置与大小
在处理图像的过程中，如果需要把一幅图像放在一个方便操作的位置，就需要调整图像编辑窗口的位置和大小。
在处理图像的过程中，如果需要把一幅图像放在一个方便操作的位置，就需要调整图像编辑窗口的位置。调整窗口位置的方法很简单，用户只需将鼠标指针移至图像编辑窗口标题栏上，单击鼠标左键并拖曳至合适位置，即可移动窗口的位置。图1-46所示为调整窗口位置的前后对比效果。图1-46 调整窗口位置的前后对比效果
当图像编辑窗口无法完整显示图像时，可拖曳图像编辑窗口的边框线，进行窗口的缩放。调整窗口大小的方法很简单，用户只需将鼠标指针移至图像编辑窗口的边框线上，单击鼠标左键并拖曳，即可改变窗口的大小。图1-47所示为调整窗口大小的前后对比效果。图1-47 调整窗口大小的前后对比效果提示在改变图像窗口大小时，拖曳鼠标指针至不同的位置，当指针呈各种、、形状时，单击鼠标左键并拖曳，也可以改变图像窗口的大小。
2．调整窗口排列方式
在Photoshop CS6中，当打开多个图像文件时，每次只能显示一个图像编辑窗口内的图像。若用户需要对多个窗口中的内容进行比较，可将各窗口以水平平铺、浮动、层叠和选项卡等方式进行排列。调整窗口排列方式的方法很简单，用户只需单击菜单栏中的“窗口”|“排列”|“平铺”命令，即可将各个窗口平铺排列。图1-48所示为调整窗口排列方式的前后对比效果。图1-48 调整窗口排列方式的前后对比效果
3．切换当前窗口
当图像编辑窗口中同时打开多幅素材图像时，用户可运用鼠标选择需要编辑的窗口。切换当前窗口的方法很简单，用户只需移动鼠标指针至“3．切换当前窗口（1）”素材图像的图像编辑窗口上，单击鼠标左键，即可将“3．切换当前窗口（1）”素材图像置为当前窗口。图1-49所示为切换当前窗口的前后对比效果。图1-49 切换当前窗口后的前后对比效果提示除了运用上述方法可以切换图像编辑窗口外，还有以下3种方法。● 快捷键1：按【Ctrl＋Tab】组合键。● 快捷键2：按【Ctrl＋F6】组合键。● 快捷菜单：单击“窗口”菜单，在弹出的菜单列表最下面的一个工作组中，会列出当前打开的所有素材图像名称，单击某一个图像名称，即可将其切换为当前图像窗口。1.2.10 控制Photoshop图像显示
在Photoshop CS6中，熟练掌握图像的显示方式，可以更加方便地编辑图像。
1．放大/缩小显示图像打开本书配套光盘中的“素材\第1章\播放界面.jpg”文件，如图1-50所示。单击“视图”|“放大”命令，如图1-51所示。图1-50 素材图像图1-51 单击“放大”命令执行操作后，即可放大图像的显示，如图1-52所示。单击两次“视图”|“缩小”命令，使图像显示比例缩小两倍，如图1-53所示。图1-52 放大图像显示图1-53 缩小图像显示
2．按适合屏幕显示图像
用户在编辑图像时，可根据工作需要放大图像进行更精确的操作，当编辑完成后，单击缩放工具属性栏中的“适合屏幕”按钮，即可将图像以最合适的比例完全显示出来。
当选择工具箱中的抓手工具时，其工具属性栏的变化如图1-54所示。图1-54 工具属性栏滚动所有窗口：选中该复选框，在使用手抓工具时将滚动所有打开的文档窗口。实际像素：单击该按钮，当前窗口将缩放为1∶1。适合屏幕：单击该按钮，当前窗口将缩放为屏幕大小。填充屏幕：缩放当前窗口，以适合屏幕。打印尺寸：将当前窗口缩放为打印分辨率。
在Photoshop软件中，打开本书配套光盘中的“素材\第1章\登录界面.jpg”文件，如图1-55所示。选取工具箱中的抓手工具，在工具属性栏中单击“适合屏幕”按钮，执行操作后，图像即可以适合屏幕的方式显示，如图1-56所示。图1-55 素材图像图1-56 以适合屏幕方式显示图像提示除了运用上述方法可以将图像以最合适的比例完全显示外，还有以下两种方法。● 双击：在工具箱中的抓手工具上双击鼠标左键。● 快捷键：按【Ctrl＋0】组合键。
3．移动图像窗口显示区域
当所打开的图像因缩放超出当前显示窗口的范围时，图像编辑窗口的右侧和下方将分别显示垂直和水平的滚动条。此时，用户可以拖曳滚动条或使用抓手工具移动图像窗口的显示区域，以便更好的查看图像。
在Photoshop软件中，打开本书配套光盘中的“素材\第1章\触屏界面.jpg”文件，选取工具箱中的缩放工具，放大图像显示，如图1-57所示。选取工具箱中的抓手工具，将鼠标指针移至图像上，当鼠标指针呈抓手形状时，单击鼠标左键的同时并拖曳，即可移动图像编辑窗口的显示区域，如图1-58所示。图1-57 放大图像显示图1-58 移动图像窗口的显示区域
4．按区域放大显示图像
放大、缩小工具的属性栏如图1-59所示。图1-59 工具属性栏放大/缩小：单击放大按钮，即可放大图片，单击缩小按钮，即可缩小图片。调整窗口大小以满屏显示：自动调整窗口的大小。缩放所有窗口：同时缩放所有打开的文档窗口。细微缩放：用户选中该复选框，在画面中单击并向左或向右拖动鼠标时，能够快速放大或缩小窗口；取消该复选框时，在画面中拖动鼠标，会出现一个矩形框，放开鼠标后，矩形框中的图像会放大至整个窗口。实际像素：图像以实际的像素显示。适合屏幕：在窗口中最大化显示完整的图像。填充屏幕：在整个屏幕内最大化显示完整的图像。打印尺寸：按照实际的打印尺寸显示图像。打开本书配套光盘中的“素材\第1章\视频界面.jpg”文件，如图1-60所示。图1-60 素材图像在工具箱中选取缩放工具，将鼠标指针定位在需要放大的图像位置，单击鼠标左键的同时并拖曳，创建一个虚线矩形框，如图1-61所示。图1-61 创建一个虚线矩形框释放鼠标左键，即可放大显示所需要的区域，如图1-62所示。图1-62 放大显示所需要的区域
5．切换图像显示模式打开本书配套光盘中的“素材\第1章\读书界面.jpg”文件，此时的屏幕显示为“标准屏幕模式”，如图1-63所示，该模式是Photoshop CS6默认的显示模式。图1-63 标准屏幕模式单击“视图”|“屏幕模式”|“带有菜单栏的全屏模式”命令，如图1-64所示。图1-64 单击“带有菜单栏的全屏模式”命令执行上述操作后，图像编辑窗口的标题栏和状态栏即可被隐藏起来，屏幕切换至“带有菜单栏的全屏模式”，如图1-65所示。图1-65 带有菜单栏的全屏模式单击“视图”|“屏幕模式”|“全屏模式”命令，执行操作后，弹出信息提示框，如图1-66所示。单击“全屏”按钮，即可切换至全屏模式，如图1-67所示，在该模式下Photoshop CS6隐藏窗口所有的内容，最大化显示图像。图1-66 弹出信息提示框图1-67 全屏模式提示除了运用上述方法可以切换图像显示模式外，用户在处理图像的过程中还可以通过一种常用的快捷方法切换图像显示模式，用户只需在最大化的Photoshop CS6应用程序窗口中，按【F】键，即可以在上述3种显示模式之间进行切换。1.2.11 控制Photoshop图像画布
在Photoshop CS6中，用户可以根据工作需要对画布进行翻转操作。用户只需单击“图像”|“图像旋转”|“垂直翻转画布”命令，即可垂直翻转画布。图1-68所示为垂直翻转画布的前后对比效果。图1-68 垂直翻转画布的前后对比效果
同上操作，只需单击“图像”|“图像旋转”|“水平翻转画布”命令，即可水平翻转画布。图1-69所示为水平翻转画布的前后对比效果。图1-69 水平翻转画布的前后对比效果1.2.12 应用Photoshop辅助工具
用户在绘制和编辑UI界面图像时，灵活掌握标尺、参考线、网格、计数和注释等辅助工具的使用方法，可以在处理图像的过程中精确地对图像进行定位、对齐、测量等操作，以此更加准确有效地处理图像。
1．显示隐藏标尺打开本书配套光盘中的“素材\第1章\手机课程界面.jpg”文件，如图1-70所示。图1-70 素材图像单击“视图”|“标尺”命令，即可显示标尺，如图1-71所示。图1-71 显示标尺将鼠标指针移动至水平标尺与垂直标尺的相交处，单击鼠标左键并拖曳至图像编辑窗口中的合适位置，如图1-72所示。释放鼠标，即可更改标尺原点，此时图像编辑窗口中的图像显示效果如图1-73所示。图1-72 单击鼠标左键并拖曳图1-73 更改标尺原点移动鼠标指针至水平标尺和垂直标尺的相交处，双击鼠标左键，即可还原标尺的位置，如图1-74所示。单击“视图”|“标尺”命令，即可隐藏标尺，此时图像编辑窗口中的图像如图1-75所示。图1-74 还原标尺位置图1-75 隐藏标尺
2．创建、删除参考线打开本书配套光盘中的“素材\第1章\计时器界面.jpg”文件，此时图像编辑窗口中的图像如图1-76所示。单击“视图”|“新建参考线”命令，弹出“新建参考线”对话框，设置各选项，如图1-77所示，单击“确定”按钮。图1-76 素材图像图1-77 设置各选项执行操作后，即可创建垂直参考线，此时图像编辑窗口中的图像如图1-78所示。单击“视图”|“新建参考线”命令，弹出“新建参考线”对话框，设置各选项，如图1-79所示，单击“确定”按钮。图1-78 创建的垂直参考线图1-79 设置各选项执行操作后即可创建水平参考线，此时图像编辑窗口中的图像如图1-80所示。单击“视图”|“标尺”命令，显示标尺，在水平标尺上单击鼠标左键的同时向下拖曳鼠标指针至图像编辑窗口中的合适位置，即可创建水平参考线，如图1-81所示。在垂直标尺上单击鼠标左键的同时，向右侧拖曳鼠标指针至图像编辑窗口中的合适位置，创建垂直参考线，如图1-82所示。选取工具箱中的移动工具，拖曳鼠标指针至图像编辑窗口中的水平参考线上，鼠标指针呈双向箭头形状，此时图像编辑窗口中的显示如图1-83所示。单击鼠标左键并向上拖曳至合适位置，即可移动参考线，如图1-84所示。单击“视图”|“清除参考线”命令，即可删除全部参考线，如图1-85所示。图1-80 创建的水平参考线1图1-81 创建的水平参考线2图1-82 创建垂直参考线图1-83 鼠标指针呈双向箭头形状图1-84 移动参考线图1-85 删除全部参考线提示与移动参考线有关的快捷键和技巧如下。● 按住【Ctrl】键的同时拖曳鼠标，即可移动参考线。● 按住【Shift】键的同时拖曳鼠标，可使参考线与标尺上的刻度对齐。● 按住【Alt】键的同时拖曳参考线，可切换参考线水平和垂直的方向。
3．应用网格打开本书配套光盘中的“素材\第1章\航班管家界面.jpg”文件，如图1-86所示。单击“视图”|“显示”|“网格”命令，在图像中显示网格，如图1-87所示。图1-86 素材图像图1-87 显示网格单击“视图”|“对齐到”|“网格”命令，可以看到在“网格”命令的左侧出现一个标志√，如图1-88所示。在工具箱中选取矩形选框工具，单击鼠标左键并拖曳，绘制矩形框时，会自动对齐到网格进行绘制，如图1-89所示。图1-88 单击“网格”命令图1-89 自动对齐到网格进行绘制提示除了运用上述方法可以隐藏网格外，用户还可以按【Ctrl＋’】组合键，在图像编辑窗口中隐藏或显示网格。
4．运用计数工具
在Photoshop中，用户可以使用计数工具对图像中的对象计数，也可以自动对图像中的多个选定区域计数。运用计数工具的方法很简单，用户只需选取工具箱中的计数工具，拖曳鼠标指针至图像编辑窗口中，此时鼠标指针呈形状，单击鼠标左键，即可创建计数，用与上面同样的方法，单击鼠标左键，依次创建多个计数。图1-90所示为运用计数工具计数的前后对比效果。图1-90 运用计数工具的前后对比效果提示单击工具属性栏中的“切换计数组的可见性”按钮，即可隐藏计数。
5．运用注释工具
注释工具是用来协助制作图像的，当用户完成一部分图像处理后，需要让其他用户帮忙处理另外一部分的工作时，在图像上需要处理的部分添加注释，内容即是用户所需要的处理效果。当其他用户打开图像时即可看到添加的注释，就知道该如何处理图像。运用注释工具的方法很简单，用户只需选取工具箱中的注释工具，移动鼠标指针至图像编辑窗口中，单击鼠标左键，弹出“注释”面板，在“注释”文本框中输入说明文字，即可创建注释，在素材图像中显示注释标记。
1.3 图像处理基本操作
Photoshop CS6作为一款图像处理软件，绘图和图像处理是它的“看家”本领。在使用Photoshop CS6开始创作之前，需要先了解此软件的一些常用操作，如处理图像的基本操作、修改和调整图像、调整图像的显示、图像的撤销和重复操作等，熟练掌握各种操作，可以更好、更快地设计作品。1.3.1 新建文件
若要在一个空白的文件上绘制或编辑图像，就需要先新建文件。
在Photoshop应用程序中单击“文件”|“新建”命令，弹出“新建”对话框，设置各选项，如图1-91所示。单击“确定”按钮，即可新建一幅空白的图像文件，如图1-92所示。图1-91 设置各选项图1-92 新建空白的图像文件
在“新建”对话框中，各选项的含义如下。
● 名称：设置文件的名称，也可以使用默认的文件名。创建文件后，文件名会自动显示在文档窗口的标题栏中。
● 预设：可以选择不同的文档类别，如Web、A3、A4打印纸、胶片和视频常用的尺寸预设。
● 自动：单击该按钮，可以应用自动颜色校正功能，Photoshop会以0.5％的比例自动调整图像色阶，使图像的亮度分布更加均匀。
● 宽度/高度：用来设置文档的宽度和高度，在各自的下拉列表框中选择单位，如像素、英寸、毫米或厘米等。
● 分辨率：设置文件的分辨率。在右侧的下拉列表框中可以选择分辨率的单位，如“像素/英寸”、“像素/厘米”。
● 颜色模式：用来设置文件的颜色模式，如“位图”、“灰度”、“RGB颜色”或“CMYK颜色”等。
● 背景内容：设置文件背景内容，如“白色”、“背景色”或“透明”。
● 高级：单击“高级”按钮，可以显示出对话框中隐藏的内容，如“颜色配置文件”和“像素长宽比”等。
● 存储预设：单击此按钮，打开“新建文档预设”对话框，可以输入预设名称并选择相应的选项。
● 删除预设：当选择自定义的预设文件以后，单击此按钮，可以将其删除。
● 图像大小：读取使用当前设置的文件大小。1.3.2 存储文件
用户可以保存当前编辑的图像文件，以便于在日后的工作中对该文件进行修改、编辑或输出操作。
在Photoshop应用程序中，单击“文件”|“打开”命令，打开一幅素材图像，此时图像编辑窗口中的显示如图1-93所示。单击“文件”|“存储为”命令，弹出“存储为”对话框，设置各选项，单击“保存”按钮，如图1-94所示，即可保存图像。图1-93 在图像编辑窗口中显示素材图像图1-94 单击“保存”按钮“存储为”对话框中各选项的含义如下。
● 保存在：用户保存图层文件的位置。
● 文件名/格式：用户可以输入文件名，并根据不同的需要选择文件的保存格式。PSD是Photoshop的专用格式，也是新建文件时默认的格式，可以将图像文件的图层、参考线等属性信息一起存储。
● 作为副本：选中该复选框，可以另存一个副本，并且与源文件保存的位置一致。
● 注释：选中该复选框，可以设置注释信息。
● Alpha通道/图层/专色：用来选择是否存储Alpha通道、图层和专色。
● 使用校样设置：当文件的保存格式为EPS或PDF时，用户才可选中该复选框。用于保存打印用的校样设置。
● ICC配置文件：用于保存嵌入文档中的ICC配置文件。
● 缩览图：创建图像缩览图，方便以后在“打开”对话框中的底部显示预览图。
● 存储预设：单击此按钮，打开“新建文档预设”对话框，可以输入预设名称并选择相应的选项。
● 删除预设：当选择自定义的预设文件以后，单击此按钮，可以将其删除。
● 使用小写扩展名：使文件扩展名显示为小写。
Photoshop CS6所支持的图像格式有二十几种，因此它可以作为转换图像格式的工具来使用。在其他软件中导入图像，可能会受到图像格式的限制而不能导入，此时用户可以使用Photoshop CS6将图像格式转换为软件所支持的格式。
● PDF格式：PDF（便携文档）格式是一种通用的文件格式，支持矢量数据和位图数据，具有电子文档搜索和导航功能，是Adobe Illustrator和Adobe Acrobat的主要格式。PDF格式支持RGB、CMYK、索引、灰度、位图和LAB模式，不支持Alpha。
● Raw格式：Raw格式是一种灵活的文件格式，用于在应用程序与计算机平台之间传递图像。改格式支持具有Alpha通道的CMYK/RGB和灰度模式，以及无Alpha信道的多信道、LAB、索引和双色调模式等。
● PCX格式：PCX格式采用GLE无损压缩方式，支持24位、256色的图像，适合保存索引和线画稿模式的图像。该格式支持RGB、索引、灰度和位图模式，以及一个颜色通道。
● Pixar格式：Pixar格式是转为高端图形应用程序设计的文件格式。它支持具有单个Alpha通道的RGB和灰度图像。
● DICOM格式：DICOM格式（医学数字成像和通行）格式通常用于传输和存储医学图像，如超声波DICOM和扫描图像。文件包含图像数据和标头，其中存储了有关病人和医学图像的信息。
● 使用校样设置：当文件的保存格式为EPS或PDF时，用户才可选中该复选框。用于保存打印用的校样设置。
● PNG格式：PNG用于无损压缩和在WEB上显示图像。与GIF不同，PNG支持244位图像，并产生无锯齿状的透明背景，但某些早期的浏览器不支持该格式。
● Scitex格式：Scitex（连续色调）格式用于Scitex计算机上的高端图像处理，该格式支持CMYK、RGB和灰度图像，不支持Alpha通道。
● TAG格式：TAG格式专用于Truevision视频板的系统，它支持一个单独Alpha通道的32位RGB文件，以及无Alpha通道的索引、灰度模式，16位和24位的RGB文件。
● 便携位图格式：便携位图支持单色位图，可用于无损数据传输。因为许多应用程序都支持此格式，甚至可以在简单的文本编辑器中编辑或创建此类文件。1.3.3 关闭文件
对图像进行保存后，用户可以随时关闭当前所打开的图像文件。
在Photoshop应用程序中单击“文件”|“打开”命令，打开一幅素材图像，如图1-95所示。单击“文件”|“关闭”命令，如图1-96所示，即可关闭图像文件。图1-95 打开一幅素材图像图1-96 单击“关闭”命令1.3.4 管理图像
在Photoshop CS6中，移动与删除图像是图像处理的基本操作，下面介绍移动和删除图像的操作方法。
1．移动图像
在Photoshop CS6中，移动工具是最常用的工具之一，移动图层、选区内的图像，以及整个图像编辑窗口中的图像都需要用到它。用户选中移动工具后，其属性栏的变化如图1-97所示。图1-97 工具属性栏自动选择：如果文档中包含多个图层或图层组，可在选中该复选框的同时单击“选择组或图层”按钮，在弹出的下拉列表框中选择要移动的内容选项。选择“组”选项，在图像中单击鼠标左键时，可自动选择工具下面包含像素的最顶层的图层所在的图层组。选择“图层”选项，使用移动工具，在图像中单击鼠标左键时，可自动选择工具下面包含像素的最顶层的图层。显示变换控件：选中该复选框以后，系统会在选中图层内容的周围显示变换框，通过拖动控制点对图像进行变换操作。对齐图层：在选择了两个或两个以上的图层时，可以单击相应按钮，使所选的图层对齐，包括顶对齐、垂直居中对齐、底对齐、左对齐、水平居中对齐，以及右对齐。分布图层：在选择3或3个以上的图层时，可单击相应的按钮，使所选的图层按照一定的规则分布。这些按钮包括按顶分布、垂直居中分布、按底分布、按左分布、水平居中分布，以及按右分布。自动对齐图层：在选择3或3个以上的图层时，可以单击该按钮，弹出“自动对齐图层”对话框，在其中可选择“自动”、“透视”、“拼贴”、“圆柱”、“球面”或“调整位置”单选按钮。
在Photoshop CS6应用程序中，打开两幅素材图像，如图1-98所示。选取移动工具，将鼠标指针移至“横排登录界面”图像编辑窗口中，单击鼠标左键的同时并拖曳至“背景”图像编辑窗口中，释放鼠标左键，即可移动图像，如图1-99所示。图1-98 打开两幅素材图像图1-99 移动图像提示将某幅图像拖入另一个图像编辑窗口时，按住【Shift】键，可以使拖入的图像位于当前文档的中心，如果这两个文档的大小相同，则拖入的图像就会与当前文档的边界对齐。
2．删除图像打开本书配套光盘中的“素材\第1章\常用图标.psd”素材图像，如图1-100所示。选取移动工具，将鼠标指针移至需要删除的图像上，单击鼠标右键，弹出快捷菜单，选择“图层1”，如图1-101所示。图1-100 素材图像图1-101 选择“图层1”选项“图层1”处于被选中的状态，将鼠标指针移至“图层1”上，单击鼠标左键的同时并拖曳至面板下方的“删除图层”按钮上，如图1-102所示。释放鼠标左键，即可删除“图层1”，如图1-103所示。图1-102 拖曳“图层3”图1-103 最终效果1.3.5 自由变换图像
运用Photoshop CS6处理图像时，为了制作出相应的图像效果，使图像与整体画面和谐统一，则需要对某些图像进行斜切、扭曲、透视、变形等变换操作。
1．缩放/旋转图像打开本书配套光盘中的“素材\第1章\时钟.psd”素材图像，如图1-104所示。单击“编辑”|“变换”|“缩放”命令，调出变换控制框，如图1-105所示。图1-104 素材图像图1-105 调出变换控制框将鼠标指针移至变换控制框右上方的控制柄上，当鼠标指针呈双向箭头形状时，按住鼠标左键的同时并向右上方拖曳，缩放并移至合适位置，如图1-106所示。将指针移至变换控制框内单击鼠标右键，在弹出的快捷菜单中选择“旋转”选项，如图1-107所示。图1-106 缩放并移动图像图1-107 选择“旋转”选项将鼠标指针移至变换控制框右上方的控制框外，当鼠标指针呈形状时，按住鼠标左键的同时并向逆时针方向旋转，并移动图像至合适位置，如图1-108所示。执行上述操作后，按【Enter】键确认，即可旋转图像，效果如图1-109所示。图1-108 旋转并移动图像图1-109 最终效果
2．斜切图像打开本书配套光盘中的“素材\第1章\手机UI设计.psd”素材图像，如图1-110所示。展开“图层”面板，选择“图层2”，如图1-111所示。图1-110 素材图像图1-111 选择“图层2”单击“编辑”|“变换”|“斜切”命令，即可调出变换控制框，如图1-112所示。将图像移至合适位置，将鼠标指针移至变换控制框右侧下方的控制柄上，指针呈白色三角形状时，按住鼠标左键并向右拖曳，如图1-113所示。图1-112 调出变换控制框图1-113 拖曳控制柄用与上面同样的方法，将鼠标指针移至其他控制柄上，单击鼠标左键，依次拖曳其他3个控制柄至合适位置，如图1-114所示。执行上述操作后，按【Enter】键确认，斜切图像，效果如图1-115所示。图1-114 拖曳控制柄图1-115 最终效果
3．扭曲图像打开本书配套光盘中的“素材\第1章\手机图片.psd”素材图像，如图1-116所示。在“图层”面板中选择“图层1”，单击“编辑”|“变换”|“扭曲”命令，调出变换控制框，如图1-117所示。图1-116 素材图像图1-117 调出变换控制框将鼠标指针移至变换控制框的控制柄上，鼠标指针呈白色三角形状时，按住鼠标左键的同时并拖曳至合适位置后，释放鼠标左键，依次拖曳其他控制柄，如图1-118所示。执行上述操作后，按【Enter】键确认，即可扭曲图像，效果如图1-119所示。图1-118 拖曳鼠标图1-119 最终效果提示与斜切不同的是，执行扭曲操作时，控制点可以随意拖动，不受调整边框方向的限制，在拖曳鼠标的同时按住【Alt】键，则可以制作出对称扭曲效果，而斜切则会受到调整边框的限制。
4．透视图像打开本书配套光盘中的“素材\第1章\手机图片01.psd”文件，如图1-120所示。在“图层”面板中选择“图层1”，如图1-121所示。图1-120 素材图像图1-121 选择“图层1”单击“编辑”|“变换”|“透视”命令，调出变换控制框，如图1-122所示。将鼠标指针移至变换控制框右上方的控制柄上，鼠标指针呈白色三角形状时，按住鼠标左键并拖曳，如图1-123所示。图1-122 调出变换控制框图1-123 拖曳变换控制柄执行上述操作后，再一次对图像进行微调，如图1-124所示。按【Enter】键确认，即可透视图像，效果如图1-125所示。图1-124 再一次微调图像图1-125 最终效果
5．变形图像打开本书配套光盘中的“素材\第1章\手机外卖.psd”文件，如图1-126所示。在“图层”面板中选择“图层1”，如图1-127所示。单击“编辑”|“变换”|“变形”命令，显示变形网格，如图1-128所示。将鼠标指针移至变形网格的描点上，按住鼠标左键并拖曳描点，依次调整中间的十字交叉点，如图1-129所示。图1-126 素材图像图1-127 选择“图层1”图1-128 显示变形网格图1-129 调整十字交叉点执行上述操作后，按【Enter】键确认，即可变形图像，效果如图1-130所示。图1-130 最终效果提示除了上述方法可以执行变形操作外，还可以按【Ctrl＋T】组合键，调出变换控制框，然后单击鼠标右键，在弹出的快捷菜单中选择“变形”选项，执行变形操作。1.3.6 选取颜色
在绘制图像的过程中，通常会根据整幅图像的设计效果，对每一个图像元素填充不同颜色。使用“拾色器”对话框、“颜色”调板、吸管工具等，都可以对颜色进行设置。
1．使用前景色和背景色工具选取颜色打开本书配套光盘中的“素材\第1章\手机UI设计2.psd”素材，如图1-131所示。单击“窗口”|“图层”命令，调出“图层”面板，选中“背景”图层，单击工具箱下方的“设置前景色”色块，弹出“拾色器（前景色）”对话框，设置RGB的参数值分别为0、0、0，如图1-132所示。图1-131 素材图像图1-132 设置参数值单击“确定”按钮，按【Alt＋Delete】组合键，即可填充前景颜色，如图1-133所示。选取工具箱中的椭圆选框工具，在图像窗口中创建一个大小合适的椭圆选区，单击“选择”|“修改”|“羽化”命令，弹出“羽化选区”对话框，设置“羽化半径”为50，单击“确定”按钮，效果如图1-134所示。单击工具箱下方的“设置背景色”色块，弹出“拾色器（背景色）”对话框，设置RGB参数值分别为255、150和90，如图1-135所示。单击“确定”按钮，按【Ctrl＋Delete】组合键，即可在选区内填充背景颜色，单击“选择”|“取消选择”命令，取消选区，效果如图1-136所示。图1-133 填充前景色图1-134 羽化选区图1-135 设置参数值图1-136 填充背景色提示若需切换前景色与背景色，可以使用以下两种方法。● 快捷键：按【X】键，可以将设置好的前景色和背景色相互切换。● 按钮：单击按钮，可以将前景色和背景色相互切换。
2．使用“颜色”调板选取颜色打开本书配套光盘中的“素材\第1章\手机图标.psd”素材，如图1-137所示。选取工具箱中的魔棒工具，在工具属性栏上单击“添加到选区”按钮，再在图像窗口中数字主体的白色区域上单击鼠标左键，创建选区，如图1-138所示。图1-137 素材图像图1-138 创建选区单击“窗口”|“颜色”命令，弹出“颜色”调板，设置RGB的参数值分别为79、223、235，如图1-139所示，执行操作的同时，工具箱中的前景色色块随之改变。按【Alt＋Delete】组合键，即可在选区内填充前景色，效果如图1-140所示。图1-139 设置颜色调板图1-140 填充颜色后的效果提示除了上述填充颜色的方法外，还有以下两种常用的方法。● 快捷键1：按【Alt＋Delete】组合键填充前景色。● 快捷键2：按【Ctrl＋Delete】组合键填充背景色。
3．使用吸管工具选取颜色打开本书配套光盘中的“素材\第1章\手机图标01.psd”素材，如图1-141所示。选取工具箱中的魔棒工具，在相应的手机图标上多次单击鼠标左键，创建选区，如图1-142所示。图1-141 素材图像图1-142 创建选区选取工具箱中的吸管工具，将鼠标指针移至图像编辑窗口中的玫红色图标上，如图1-143所示，单击鼠标左键即可吸取颜色，执行操作后，前景色的颜色随之改变。按【Alt＋Delete】组合键，即可在选区内填充前景色，取消选区，效果如图1-44所示。图1-143 吸取颜色图1-144 填充前景色1.3.7 填充颜色与图案
使用填充工具可以快速、便捷地对选中的图像区域进行填充，而填充工具都集中在渐变工具组中，渐变工具常用来对图像进行多种渐变色的填充，油漆桶工具则是对图像进行纯色和图案的填充。
1．使用油漆桶工具填充颜色
使用油漆桶工具可快速、便捷地为图像填充颜色，填充的颜色以前景色为准。
在Photoshop软件中，打开本书配套光盘中的“素材\第1章\登录.psd”素材，如图1-145所示。单击“窗口”|“工作区”|“绘画”命令，展开与绘画相关的面板，在“色板”面板中单击“RGB黄”色块，选取工具箱中的油漆桶工具，将鼠标指针移至登录图像上的白色区域，单击鼠标左键，即可填充黄色，效果如图1-146所示。图1-145 素材图像图1-146 填充颜色后的效果提示油漆桶工具主要根据颜色相似程度来进行填充，它可以通过选区对图像进行填充，也可以直接对图像进行填充。
2．使用渐变工具填充颜色打开本书配套光盘中的“素材\第1章\手机图标02.psd”素材，如图1-147所示。选取工具箱中的魔棒工具，在图像编辑窗口中的白色区域，单击鼠标左键，建立选区。选取工具箱中的渐变工具，在工具属性栏中单击“点按可编辑渐变”按钮，在弹出的“渐变编辑器”对话框中的渐变色条上，设置两个色标为绿色（RGB参数值为34、187、71）和深绿色（RGB参数值为12、129、45），单击“确定”按钮，如图1-148所示。图1-147 素材图像图1-148 单击“确定”按钮提示在“渐变编辑器”对话框的“预设”选项区中，前两个渐变色块是系统根据前景色和背景色自动设置的，若用户对当前的渐变色不满意，也可以在该对话框中，通过渐变滑块对渐变色进行调整。将鼠标指针移至图像编辑窗口中的上方，按住鼠标左键并向下拖曳，如图1-149所示。至合适位置后，释放鼠标，即可填充渐变色，并取消选区，效果如图1-150所示。图1-149 拖曳鼠标图1-150 图像效果
第2章 手机APP界面设计入门
本章重点 什么是手机界面设计 界面构成的基本区域 手机界面效果的规范性 手机UI设计基本流程 简约明快型 趣味与独创型 高贵华丽型 安卓系统基础组件 苹果系统基础组件
2.1 手机界面设计的基础
随着科技的不断发展，手机的功能越来越强大，基于手机系统的相关软件应运而生，手机的人性化设计已不仅仅局限于手机硬件的外观，手机的软件系统已成为用户直接操作和应用的主体，它应以美观实用、操作便捷为用户所青睐。用户界面设计的规范性显得尤为重要。下面主要向读者介绍有关手机界面设计所需要了解的知识。2.1.1 什么是手机界面设计
手机界面是软件与用户交互的最直接的层。由于手机是移动便携式产品，所以注定其体积小巧，屏幕面积小。要在这样小巧的手机上实现所需要的功能，并且将功能和界面相结合来使用户对产品感到满意，那么手机的界面设计就显得相当重要。图2-1所示为一些精美的手机界面。
App是英文Application的简称，由于智能手机的流行，现在的APP多指第三方智能手机的应用程序。是未来企业必备的营销手段，作为一种第三方应用的合作形式参与到互联网商业活动中。未来将是移动互联网时代，手机App将是企业移动互联网的身份证，在移动互联网的价值链中具有至关重要的地位。图2-1 精美手机界面提示手机用户界面是用户与手机系统、应用交互的窗口，手机界面必须基于手机设备的物理特性和系统应用的特性进行合理的设计。2.1.2 界面构成的基本区域
手机界面的构成被分为几个标准的信息区域（主要针对于按键手机，触屏手机相对灵活）：状态区、标题区、功能操作区和公共导航区。图2-2所示为手机界面构成的基本区域。图2-2 手机界面构成的基本区域
● 状态区：标示手机目前运行状态及事件的区域，可以包含电池电量、信号强度、运营商名称、未处理事件及数量、时间等。状态区域并不是必须存在的，可依照交互需求进行取舍。
● 标题区：主要是LOGO、名称、版本，以及相关图文信息。
● 功能操作区：它是软件的核心部分，也是版面上面积最大的部分，包含有列表（l i s t）、焦点（highlight）、滚动条（scrollbar）、图标（icon）等很多不同的元素。不同层级的界面包含的元素是不同的，需要依据具体情况合理搭配运用。
● 公共导航区：也称为软键盘区域，它是对软件操作进行宏观操控的区域，随时可见，在这里它可以保存当前操作结果、切换当前操作模块、退出软件系统，或实现对软件的灵活操控。2.1.3 手机界面效果的规范性
手机软件运行于手机操作系统的软件环境，界面设计应该基于这个应用平台的整体风格，这样有利于产品外观的整合。手机界面效果的规范性包括以下两个方面。
1．界面的色彩及风格与系统界面统一
软件界面的总体色彩应该接近和类似系统界面的总体色调，例如，系统色调以蓝色为主，软件界面的默认色彩最好与之吻合，若使用与之大相径庭的色彩，比如大红、柠檬黄，色彩的强烈变化会影响用户的使用情绪。
2．操作流程的系统化
手机用户的操作习惯是基于系统的，我们的界面设计在操作流程的安排上，也要遵循系统的规范性，用户使用手机就会使用我们的手机软件，简化操作流程。2.1.4 手机界面效果的个性化
手机界面的整体性和一致性要基于手机系统视觉效果的和谐统一而考虑，而手机界面效果个性化是基于软件本身的特征和用途而考虑。界面效果的个性化包括如下几个方面。
1．个性化的界面框架
软件的实用性是软件应用的根本，界面设计应该结合软件的应用范畴，合理地安排版式，以求达到美观适用的目的，这一点不一定能与系统达到一致的标准，但它应该具有行业标准，例如，证券交易、地图操作等界面特征，需要分析软件应用的特征和流程，制定相对规范性的界面构架。界面构架的功能操作区、导航控制区等都应该统一规范，不同功能模块的相同操作区域的元素风格应该一致，让用户能够迅速掌握不同模块的操作。从而也使整个界面统一在一个特有的整体之中。
2．专用的界面图标
软件的图标按钮是基于自身应用的命令集，它的每一个图形内容映射的是一个目标动作，因此作为体现目标动作的图标，应该有强烈的表意性，在制作过程中选择具有典型行业特征的图符，有助于用户识别，方便操作。图标的图形制作不能太繁琐，要适应手机屏幕，在制作上尽量使用像素图，确保图形质量清晰，如果针对立体化的界面，可考虑部分像素羽化的效果，以增强图标的层次感。
3．个性化的界面色彩设置
色彩影响一个人的情绪，不同的色彩会让人产生不同的心理效应，反之不同的心理状态所能接受的色彩也是不同的，不断变化的事物才能引起人的注意，界面设计的色彩个性化，目的就是用色彩的变换来协调用户的心理，让用户对软件产品时常保持一种新鲜度，它是通过用户根据自己的需要来改变默认的系统设置，选择一种自己满意的个性化设置，达到软件产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术，在手机的软件界面设计过程中，应用这一个性设置可以更大地提升软件的魅力，满足用户的多方面需要。2.1.5 手机UI设计基本流程
总体上手机UI设计的基本工作流程包括分析阶段、设计阶段、调研阶段，以及改进与验证阶段。下面分别介绍4个阶段的具体内容。
1．分析阶段
分析阶段包括需求分析、用户场景模拟和竞争产品分析3个方面。
● 需求分析：要设计一个产品，依然离不开3W（Who、Where、Why）的考虑，也就是使用者、使用环境和使用方式的需求分析，所以在设计一个产品时，首先应明确什么人用（用户的年龄、性别、爱好、收入、教育程度等）、在什么地方用、如何用，如上任何一个元素改变结构都会有相应的改变。根据对用户需求的分析，设计者可以从MRD（市场需求文档）与PRD（产品需求文档）获得，或者从产品需求评审会议上得到需求分析的内容，当然也可以直接与产品经理交流获得相关产品需求。如果说设计原则是所有设计的出发点，那么用户需求就是本次设计的出发点。
● 用户场景模拟：好的设计建立在对用户深刻的了解之上，因此用户使用场景分析就很重要，了解产品的现有交互及用户使用产品习惯等，但是设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。
● 竞争产品分析：竞争产品能够上市并且被UI设计者知道，必然有其长处。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。当市场上存在竞品时，去听听用户的评论，哪怕是骂声也好，别沉迷于自己的设计中，让真正的用户说话。
2．设计阶段
通过分析上面的需求，接下来则进入设计阶段，采用面向场景、面向事件驱动和面向对象的设计方法。面向场景是针对该产品使用场所，模拟用户在多种情况下产品的使用。面向事件驱动则是对产品响应与触发事件的设计，一个提示框，一个提交按钮……这些都是对事件驱动的设计。产品面向的用户不同对于产品的设计要求也不同，例如，不同年龄层的用户对于产品的要求不同，设计者可以根据实际情况多设计几套不同风格的界面用于备选。
3．调研阶段
对于设计出的方案，可以邀请各方人士（不仅限于产品团队，可以包括技术和运营人员等）来进行评定，几套方案可以做测试，选取用户体验更优的方案。调研阶段可以从如下几个问题出发。
● 用户对各套方案的第一印象。
● 用户对各套方案的综合印象。
● 用户对各套方案的单独评价。
● 选出最喜欢的。
● 选出其次喜欢的。
● 对各方案的色彩、文字、图形等分别打分。
● 结论出来以后请所有用户说出最受欢迎方案的优缺点。
4．改进与验证阶段
经过用户调研，得到目标用户最喜欢的方案，了解用户为什么喜欢，还有什么需要改进的，此时则可以进行方案的改进，如果前期做方案时采用的是原型图的表现形式，那么在方案确定后，就可以以敲定的方案效果图为基准开始进行美化设计。2.1.6 手机界面设计常用的5种布局
在设计手机界面时，合理的布局可以使信息变得井然有序，用户可以很容易地找到自己想要的信息，产品的交互效率和信息的传递效率都得到提升。下面介绍手机界面设计中常用的5种布局。
1．竖排列表布局
竖排列表是最常用的布局之一。手机屏幕一般列表是竖屏显示的，文字是横屏显示的，因此竖排列表可以包含比较多的信息。列表长度可以没有限制，通过上下滑动可以查看更多内容。竖排列表在视觉上整齐美观，用户接受度很高，常用于并列元素的展示，包括目录、分类、内容等。图2-3所示为竖排列表布局。图2-3 竖排列表布局
2．横排列表布局
横排列表是把并列元素横向显示的一种布局，一般常见的工具栏都采用这种布局。受屏幕宽度限制，横排列表中可显示的数量较少，但可通过左右滑动屏幕或点击箭头查看更多内容，不过这需要用户进行主动探索。它比较适合元素数量较少的情形，当需要展示更多的内容时，竖排列表则是更优的选择。图2-4所示为横排列表布局。图2-4 横排列表布局
3．九宫格布局
九宫格是非常经典的设计，展示形式简单明了，用户接受度很广。当元素数量固定不变为8、9、12、16时，则适合采用九宫格。虽然它有时候给人设计老套的感觉，不过它的一些变体目前比较流行，比如METRO风格，一行两格的设计等。图2-5所示为九宫格布局。图2-5 九宫格布局
4．弹出框布局
弹出框很常见，也属于布局设计的一种。弹出框把内容隐藏，仅在需要的时候才弹出，以节省屏幕空间，弹出框可在原有界面上进行操作，不必跳出界面，体验比较连贯。
弹出框在安卓系统上的使用很普遍，比如菜单、单选框、多选框等，在苹果手机系统上使用相对少些。图2-6所示为弹出框布局。图2-6 弹出框布局
5．标签布局
在搜索界面和分类界面时，会采用标签的方式来展现，标签方式比较动感，增加了应用的趣味性。图2-7所示为标签布局。图2-7 标签布局
2.2 手机界面的视觉效果
手机界面的视觉效果，应该遵循给用户舒适、生机与活力的原则，通过视觉感官的刺激，增加用户的亲和力，适应不同用户的不同心理特征。2.2.1 简约明快型
简约明快型的界面适合色彩支持数量较少的彩屏手机。基于大块颜色和线条组合的构成方式，不乏大气、简约。点线面基本元素的形状构成结合色彩的纯净搭配，干净利落，给用户的操作带来轻松的感受。图2-8所示为简约明快型界面。图2-8 简约明快型界面
在视觉效果的设计上需要参考如下方法。
● 结合界面图形设计的隐喻性，图标图形尽量使用简洁的平面图形，尽量使用像素化的表现形式。
● 展现图形界面的精到之处，合理地使用线条和色彩渐变，以确保细节的完美体现。
● 把握界面整体色调的同时注意在图标和线条的色彩配置上下功夫，以活跃整个画面，避免整个界面色彩单一，黯淡无光。2.2.2 趣味与独创型
手机界面设计中的趣味性，主要是指形式的情趣，这是一种活泼性的版面视觉语言。如果版面本无多少精彩的内容，就要靠制造趣味取胜，这也是在构思中调动了艺术手段所起的作用。版面充满趣味性，使传媒信息如虎添翼，起到了画龙点睛的传神功力，从而更吸引人，打动人。在手机界面设计中，可以考虑使用个性的图标或者有趣味性的版面造型等手法去表现界面的趣味性。
独创性原则实质上是突出个性化特征的原则。鲜明的个性，是排版设计的创意灵魂。试想，一个版面多是单一化与概念化的大同小异，人云亦云，可想而知，它的记忆度有多少，更谈不上出奇制胜。因此，要敢于思考，敢于别出心裁，敢于独树一帜，在排版设计中多一点个性而少一些共性，多一点独创性而少一点一般性，才能赢得用户的青睐。图2-9所示为趣味与独创型界面。图2-9 趣味与独创型界面2.2.3 高贵华丽型
高贵华丽型的界面适合支持色彩数量较多的彩屏手机，最好支持带8位Alpha通道的png透明图。
基于饱和的色彩和华丽的质感，塑造超酷、超眩的视觉感受，利用羽化了的像素对图形图像进行仿真设计，不仅塑造界面色彩、形状，还进一步在元素的质感和体积感上下功夫，给用户一种高贵华丽的视觉享受。图2-10所示为高贵华丽型界面。图2-10 高贵华丽型界面
在视觉效果的设计上需要参考如下方法。
● 塑造界面的体积感和质感，根据需要表现透明、半透明、粗糙、光滑等不同的视觉效果。
● 在图标的制作中尽量避免生硬的边缘轮廓，使用渐变、羽化加强图形的仿真性能，使设计更加趋于人性化。
● 考虑界面的整体色调，最好使用邻近色或同类色进行色彩构成，采用色彩的弱对比，因为界面图形本身就结合了体积感和质感的塑造，如果整体色调对比太强，很容易给用户眼睛造成疲劳。
2.3 安卓与苹果手机系统组件介绍
各类手机组件集合在一起，丰富且增强了APP的互动性，UI组件可以根据APP的需要自定义风格。可以说，没有组件的APP就像一个公告牌，没有了互动性的APP也就黯然失色。下面介绍安卓手机系统和苹果手机系统的各个组件。2.3.1 安卓系统基础组件
本节将介绍安卓系统的部分常用UI组件，这些组件在APP中的使用率非常高，为了能顺利地与开发人员沟通，理解和掌握这些组件的功能是很有必要的。
1．常规按钮
常规按钮（Button）的风格可以很不一样，上面可以写文字也可以标上图片，但它们最终都要用于确认、提交等功能的实现，如图2-11所示。图2-11 常规按钮
2．编辑输入框
编辑输入框（EditText），是指能够对文本内容进行编辑修改的文本框，如图2-12所示。图2-12 编辑输入框
3．开关按钮
开关按钮（ToggleButton），可更改APP设置的状态（如网络开关、WIFI开关）。通常情况下打开时显示绿色，关闭则为灰色。同样，开关按钮也可以根据APP进行个性化设置，如图2-13所示。图2-13 开关按钮
4．网格式浏览
网格式浏览（GridView），图标呈网格式排列。在导航菜单过多时推荐使用此种方式，且图标的表现形式较列表显示更为直观，如图2-14所示。图2-14 网格式浏览2.3.2 苹果系统基础组件
本节介绍苹果手机系统的部分常用UI组件，苹果手机的组件名大多以UI开头，如UIButton（按钮）、UISlider（滑动条）。这种命名方法极有可能是为了与其他系统的组件进行区分，避免混淆引起冲突。
1．文本标签
文本标签（UILabel）也是文本显示的一种形式，它是短的只读文本，不能进行文字编辑，但可以通过设置视图属性为标签选择颜色、字体和字号等，如图2-15所示。图2-15 文本标签
2．图片显示
图片显示（UImageViews），主要用于图片的显示，相当于安卓中的Gallery（图片显示组件），如图2-16所示。图2-16 图片显示
3．警告框
警告框（UIAlertView与UIActionSheet）是附带有一组选项按钮，可供用户选择的组合组件。UIAlertView与UIActionSheet都称为警告框，但这两者的区别在于，前者最多只支持3个选项，而后者则支持3个以上的选项，如图2-17所示。
4．导航栏
在苹果手机系统状态栏下方，APP主体的上方这一栏就叫导航栏。导航栏一般由两个操作按钮和APP名称组成。左边的操作按钮一般用于返回、取消，右边的按钮则用于确定、发送、编辑等，如图2-18所示。图2-17 警告框图2-18 导航栏
5．页面切换
页面切换（UItabBarController），在APP页面底部，是用于切换不同页面的组件，如图2-19所示。图2-19 页面切换
手机APP篇
第3章 手机APP常用元素设计
本章重点 手机APP常用图形元素 手机APP常用控件 手机APP启动图标 完成按钮设计 选项框设计 电话图标设计 Windows Phone启动界面设计 iPhone常规设置界面设计
3.1 了解手机APP常用元素
在手机APP的制作过程中，图形、控件、图标等作为手机常用元素被广泛应用。本节主要介绍手机APP常用图形、常用控件，以及启动图标的基础知识。3.1.1 手机APP常用图形元素
手机APP中的常用图形包括圆形、方形、圆角、Squircle、组合图形，以及虚线等。图形的应用范围很广，如图标、自定义控件的制作、界面边框制作等都能运用得到。图3-1所示为手机APP常用图形元素。图3-1 手机APP常用图形元素3.1.2 手机APP常用控件
在制作手机APP的界面时，需要的控件可以通过下载现成的PSD控件模板直接调用，但在没有网络无法下载资源的情况下，掌握几个常用控件的制作是十分必要的，在制作控件之前，首先需要了解控件的类型。下面介绍部分常用的手机控件。
1．按钮
按钮作为最基本的交互组件之一，在APP设计中使用的频率非常高。常规按钮的风格可以很不一样，上面可以写文字，也可以标上图片，但最后都用于实现确认、提交等功能，如图3-2与图3-3所示。
2．复选框
复选框常用于设置管理、资料填写等页面中，用于资料内容选项的选择和状态的确认（如兴趣爱好、声音是否开启等）。复选框对选择数量没有限制。图3-2 带文本的按钮图3-3 删除账号按钮
3．单选按钮
按照APP中的实际需求，在单选组中罗列出几个不同时存在的条件，每个条件旁边放置1个单选按钮。与复选框不同的是，单选按钮对选择数量有限制，在同一单选组里，只能选择一个选项，不能多选，如图3-4所示。
4．一键开关
一键开关常用于状态的切换。1为打开状态，呈蓝色；0为关闭状态，呈灰色，如图3-5所示。图3-4 单选按钮图3-5 一键开关
5．平行按钮
平行按钮常用于各种子功能之间的切换，位置一般在页面主体偏上区域，但最近也常被放在页面底部，如图3-6所示。
6．表格排列显示控件
表格排列显示就像表格一样，将相同级别的选项排列出来，可用于选项分类、新闻分类、邮箱邮件预览等，如图3-7所示。图3-6 平行按钮图3-7 表格排列显示控件
7．滑动条控件
滑动条的作用非常广，常用于参数值的调整、图片大小缩放或屏幕亮度的增减。可以根据APP的需求，更改样式相应的颜色。图3-8所示为滑动条控件。
8．地图显示
地图显示控件主要用来显示地图，如图3-9所示。图3-8 滑动条控件图3-9 地图显示控件3.1.3 手机APP启动图标
启动图标是APP的第一张脸。一个制作精美的启动图标，往往能为APP获得一个不错的印象，从而提高下载量，获得推荐度。图3-10所示为安卓手机启动图标，图3-11所示为苹果手机启动图标。图3-10 安卓手机启动图标图3-11 苹果手机启动图标
试读结束[说明：试读内容隐藏了图片]