Photoshop智能手机APP界面设计(txt+pdf+epub+mobi电子书下载)

作者：狸雅人

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

Photoshop智能手机APP界面设计试读：

第1章 APP用户界面基础

1.1 手机UI设计相关基本概念

本节介绍手机UI设计的相关概念，包括什么是UI设计、手机UI与平面UI的区别、什么是APP/客户端、什么是智能手机的操作系统、什么是手机UI设计工具以及UI设计的重要性。

1.1.1 什么是UI设计

UI（User's Interface）直译为用户界面。传统意义上的UI设计是指界面美化设计，但从文字意义上能看出UI不仅指“用户的界面”这种从属关系，还有“用户与界面”的交互关系。所以，UI设计不仅仅是美化界面，还需要研究用户，让界面变得更友好、简洁、舒适、易用。

用户界面无处不在。它可以是登录界面，也可以是软件界面，不论是手机上还是PC上都充斥着它的身影，如图1-1至图1-6所示。图1-1 QQ登录界面UI图1-2 淘宝登录界面UI图1-3 音乐播放器UI图1-4 视频播放器UI图1-5 文件浏览器UI图1-6 手机UI

1.1.2 手机UI与平面UI有何不同

手机UI将范围基本锁定在手机的APP/客户端上。而平面UI范围则非常广，包括了绝大部分UI的领域。手机UI的独特性（如尺寸要求、控件和组件类型）使得很多平面UI设计者对手机UI设计不是很了解。

通过图1-7和图1-9、图1-8和图1-10之间的比较，我们就可以了解手机UI与一般网页UI的区别，相同功能的页面，内容也相差甚远。图1-7 手机端新浪微博主页图1-8 手机端新浪微博资料页图1-9 PC端新浪微博主页图1-10 PC端新浪微博资料页

1.1.3 什么是APP/客户端

在智能手机领域中，APP（application）指的是应用程序。客户端是APP的另一种叫法，也可以连在一起，称作APP客户端。图1-11和图1-12分别是Android与iPhone客户端在应用市场上的图标展示。每一个图标代表着一个APP（客户端）。这些APP都是为了达到一个特定的用途而创造出来的，如美化桌面的Go桌面，页面浏览的手机QQ浏览器，手机中文输入的搜狗手机输入法，播放音乐的天天动听音乐播放器等。图1-11 Android部分APP客户端图标展示图1-12 APP Store部分APP客户端图标展示

1.1.4 智能手机的操作系统有哪些

智能手机（Smartphone）是指像PC（个人电脑）一样，具有独立的操作系统，可以由用户自行安装第三方服务商提供的应用程序，并可通过移动通信网络实现无线上网的一类手机。

目前智能手机的操作系统有：Symbian（塞班）、Windows Mobile、Windows Phone、iOS、Linux（含Android、Maemo、MeeGo和WebOS）、Palm OS和BlackBerry OS。本书中的UI设计主要基于Android、iOS和Windows Phone这三个当前最热门的系统。图1-13至图1-15分别为这三种系统的经典机型示例。图1-13 Android系统手机示例图1-14 iOS系统智能手机示例图1-15 Windows Phone系统智能手机示例

1.1.5 Photoshop和手机UI的关系

Photoshop简称PS，是一款功能非常强大的图形图像处理软件，如图1-16所示。

既然本书以《Photoshop智能手机APP界面设计》为题，那就不得不提到Photoshop与智能手机UI之间的关系。

在UI设计、界面美化时，使用Photoshop的频率非常高。当然这会根据设计者的喜好因人而异。对于初学者来说，掌握Photoshop会较其他图形软件（如Illustrator、Fireworks）来得容易，这也是本书选择Photoshop来制作手机UI的原因。图1-16 Adobe Photoshop程序主界面

1.1.6 没有UI设计的世界

前面说到UI设计包括两方面——美化和交互。为了让大家更直观地了解UI设计的重要性，我将以UI优化前和优化后（Before/After）做了对比分析，如图1-17所示。图1-17 Before/After对比

从美化的角度来说，图1-17中UI优化后的界面有如下特点。（1）更有时尚感、层次感。（2）即使没有标注“QQ帐号”、“QQ密码”的提示，但从图片上的QQ企鹅已经明确知道这是一个QQ的登录界面，而不是其他。

从交互的角度来说，图1-17中未UI优化的界面有如下特点。（1）功能过于简单。（2）“登录”没有体现出按钮的特点，甚至会让人误以为是单纯的文本文字，而不会单击。（3）密码输入框也没有做掩密处理，被盗号的风险系数增加。（4）在不做任何说明的前提下，无法知道登录器属于哪款软件。

没有做UI设计的界面体验是如此之差，换位思考，如果你是用户，你愿意下载这样一个不做UI设计，而又存在盗号风险的APP吗？本节结语：通过这一节的介绍，我们已经对手机UI设计的相关概念有了一个基本认识。接下来我们将深入到UI设计的各种环境中，去感受这样一个美妙的世界！

1.2 UI设计与产品团队项目流程的关系

UI设计的环境，当然要先从设计团队入手！本节将向大家呈现UI设计与产品团队项目流程的关系。

经常有人把UI设计者当做一个独立的个体看待，认为他们只要设计就够了。但别忘了，他同时也属于产品团队，如果产品团队之间没有协作，最终也是无法发挥优势的。做一个称职的UI设计者，要从了解自己，了解团队开始。

1.2.1 UI设计者与产品团队

UI设计者们一般都存在于一个叫“产品团队”集体中。关于产品团队人员的划分，我引用了UI设计网上较被认可的一种普遍划分方式，如图1-18所示。

产品经理（PM/Product Manager）：产品团队的老大，对用户需求进行细分调研，针对用户的需求进行产品卖点的规划，然后将规划陈述给公司高层，以此来争取项目所要用到的各类资源（人力、物力和财力等）。比较全能的产品经理可兼具另外一个PM（Project Manager，项目经理）的职责。产品经理常用软件主要是PPT，Visio和Project等。

产品设计师（PD/Product 图1-18 产品团队结构组成Designer）：PD侧重功能设计，考虑技术可行性和性价比。比如在看书类的APP中加入背景音乐的功能，是否可行，能否增加APP的下载量，这都是PD考虑的问题。产品设计师相当于小产品经理。常用软件为Word和AXURE。

用户体验师（UE/User Experience）：UE需要了解商业层面的内容，与PD配合，从商业价值的角度出发，对产品与用户交互方面的环节进行改良。比如在播放音乐的APP中是否加入一个静音按钮，加与没加时有什么区别，这些都是UE侧重思考的问题。常用软件为Dreamweaver。

UI设计者也就是这里所称的UI设计师，有时候与UE的职责界限模糊，单纯只进行界面表现和美化的时候，就称为美工。常用软件有Photoshop、Fireworks和Illustrator等。

以上说到的人员划分模型，是在公司内部职责划分很明确前提下的理想状态。但不是所有公司都能做到职责划分明确。在实际工作中，你能看到更多的是，PM与PD的任务由同一个人来完成。

1.2.2 UI设计与项目流程步骤

在一个成熟且高效的手机APP产品团队中，通常UI设计者会在前期就加入项目中，针对产品定位、面向人群、设计风格、色调和控件等多方面问题进行探讨。这样做的好处在于，保持了设计风格与产品的一致性，同时，定下风格后设计人员立刻可以着手效果图的设计和多套方案的整理，有效节约时间。

UI所参与的项目流程有以下几个部分，如图1-19所示。

1.产品定位

产品的功能是什么？做这个产品的依据是什么？要达到什么目的？想要达成什么样的影响？

2.产品风格

产品定位直接影响产品风格。根据产品的功能、面向人群和商业价值等产品定位的内容，会产生许多不同的风格需求。以面向人群为例：面向年轻人的风格可以是清新、绚丽的；面向商图1-19 UI设计参与的项目流程段务人士的则可以是简洁、稳重和大气的。以产品功能为例：娱乐类应用的风格可以是花哨的、华丽的和具有冲击力的；工具类应用的风格应以实用为主，采用更清淡的风格较好。

3.产品控件

用多选框还是用下拉菜单，用下拉滑屏还是滚动条，控件的数量限制在多少个比较好等。关于产品组件的详细内容可以参看1.8节的介绍。

4.方案制订

当对产品的定位、风格和组件确定后，此时就可以开始制订方案。一般情况下可以做出两套以上的方案，以便于对比选择。方案可以采用原型图来表现，也可以是效果图，这根据项目的要求来做。

5.方案提交

方案提交后，邀请各方人士（不仅限于产品团队，可以包括技术和运营人员等）来进行评定，两套方案可以做A/B测试，选取用户体验更优的方案。

6.方案选定

如果前期做方案时采用的是原型图的表现形式，那在方案选定后，就可以以敲定的方案效果图为基准开始进行美化设计了。本节结语：只有清晰地了解UI设计的职责定位及UI设计与项目流程的互动关系，才能跟其他团队成员配合好，不至于在实际工作中茫然不知所措。

1.3 UI的设计流程及方法

上一节说的是UI设计与项目流程步骤，是从全局上进行了一次纵向划分，而本节所说的UI的设计流程及方法则更为具体，从横向视角深入到UI设计者的具体操作。

当产品定位和风格等达成一致意见后，UI设计者最好马上开始进行方案的起草。方案起草一般由定位指南、核心功能确认、ADS、画草图、还原原型、视觉设计和交付6个部分组成。

1.3.1 定位指南图

定位指南图用来直观展现产品的定位。明确的定位更容易把握产品的风格。在设计的过程中，可以不时地以此图来提醒自己，以避免因定位不明确而造成风格不符等问题。图1-20引用自《iOS的人机界面指南》，但设计者们不应局限于此，在更多实际产品设计中，大可根据自身产品情况灵活规划和更改参考指标。图1-20 产品定位指南

1.3.2 核心功能确认

大方向把握好了，接下来就是核心功能的确认。UI设计的分工其实并不是很明确的，有些公司的UI设计者无须进行功能确认，只需按PM要求的功能进行还原，而有些公司则需要UI设计加入到功能提出及功能确认的环节中去。为了UI设计的连贯性，此处还是介绍一下核心功能确认的方法。

APP最终是要为用户服务的，它能实现什么功能一定是一个重要的衡量依据。所以在功能选择上，就得慎之又慎。如何从海量的功能中梳理出最主要的核心功能，还真不是一件容易的事情。

好在大师们总留有一些经验方法可供我们参考。比如接下来我要介绍的KJ法，如图1-21所示。

KJ法，又称亲和法，由日本Jiro Kawakita教授创造。可以帮助团队对产品最主要核心功能达成共识。

1.首先准备黄色便利贴、笔和贴便利贴的场地。

2.头脑风暴让参与者在黄色便利贴上写下自己认为最主要的功能，写完贴上墙。

3.让每个人都将他认为的功能相似的便利贴排在一起，可以讨论，当所有人对排列方式满意的时候，小组就确定了。

4.再给参与者绿色便利贴，给这些小组命名，并写上命名理由。

5.投票。给每个人发三张便利贴，分别画上1星、2星和3星，图1-21 KJ实验代表优先级，分别贴在各小组旁边。最后统计星数，星数越高代表优先级越高，功能越核心。

可以看出，KJ法其实采用的是由下往上的（bottom-up）的归类总结法。这样做的好处是，避免了在细节问题上争吵而浪费时间，有效总结归类抓住重点。用在核心功能的确认上是再恰当不过了。

接下来，只需把这些便利贴上写的内容按优先级，归纳到ADS中去。

1.3.3 ADS

ADS（Application Definition Statement）就是应用定义声明。应用定义声明由3个不同的部分组成，根据受众区分解决方案，即定位（differentiator）、方案（solution）和用户（audience），基本结构如下。（differentiator）（solution）for（audience）

如图1-22所示，一句话简短说明应用（APP）的作用，它能为（哪些）用户（在什么情况下）解决（什么）问题？从而展现出它的定位（娱乐/工具），然后列出最主要的功能（Features）。

例如一个天气预报APP的ADS会是：为在出游前想确定天气情况的用户提供随时随地查询天气情况的解决方案。

ADS不是功能的堆砌，而是将此APP与其他APP区别开来。你要做的就是尽量展现出你所创造的APP的独特性。不要小瞧ADS，功能独特性被清晰陈述出来的ADS，往往被设计出来的成功率很高。图1-22 ADS

1.3.4 画草图

ADS是基于文字性的展示。要把它变成更为直观易于理解的形式，用画草图的方式再合适不过了，如图1-23所示。

神笔马良大笔一挥，画笔下的万物都变成了现实。事实证明，在手机UI的世界，草图一样可以变为实实在在的界面。

画草图不要求很复杂，简简单单就好。重要的是将思考的结果表现出来。工具加上一点技巧，任何人都能轻松上手。图1-23 草图

工具：速写本/白纸和笔（马克笔，不同粗细的3支左右）。

草图绘制需注意的要点如下。

1.要有说服力——线条不能纤细无力，要流畅，如图1-24和图1-25所示。图1-24 线条画法图1-25 线条画法效果对比

2.草图要稳固——画形状时不要留下空白，线与线之间稍微交叉。

3.更有层次感——加阴影（投影、影子和背光面）和材质（玻璃、木头和镜面），如图1-26和图1-27所示。图1-26 草图一览图1-27 草图一览近景

总的来说，手机UI设计师不是画家，不要求一定要把草图画到多么完美，能把功能要求表达清楚就可以。在本书附录篇中附有一些草图的工具介绍，对草图的绘制比较感兴趣的读者可以参考一下。

1.3.5 低保真原型与高保真原型

低保真还原是指将草图通过Axure、Mockup和Visio等线框工具还原，并移植到电脑上，无须纠结于细节效果，尽量使用黑白粗糙的线条来还原。

高保真原型因追求细节（如屏幕尺寸）而比低保真原型更加耗时，为了避免高保真原型被否决而浪费大量时间，高保真原型通常是在低保真原型得到确认后才开始制作，如图1-28所示。图1-28 低保真与高保真原型的对比

1.3.6 视觉设计

在原型完成的基础上，就可以对其进行视觉设计。理论上不提倡使用用户不熟悉或奇怪复杂的界面元素（游戏类APP除外）。

除了配色和图标的设计加工以外，还可以在某些其他元素上下工夫，如文本、高光、点触后的背景和微薄的阴影等。

在没有灵感的时候，可以多借鉴那些人气高的APP的设计风格。这些APP大多都有一个共同点，它们的界面不一定华丽，但是能迎合用户使用时的心情。如图1-29和图1-30所示为两款经过优化的界面。图1-29 经过视觉设计的精美APP界面I图1-30 经过视觉设计的精美APP界面II

1.3.7 交付

把设计的界面成果和描述指南集中到一张大图中交付给开发人员。标注出原型图的尺寸以及描述说明，并切图为PNG格式，以便于技术人员在开发APP时使用，如图1-31所示。图1-31 交付文档模板本节结语：本节中所说的前4项工作，从定位指南到画草图，目前在APP产品开发领域中绝大数情况下由产品经理来主导，刚入门的UI设计者可以先从第5步开始，逐渐熟练，成为一个实力派的设计师时，就可以开始学着包揽整个设计流程的工作，独当一面了。

1.4 色彩搭配

色彩的搭配是否恰当，决定着你的设计水平品位的高低。本节将介绍几种常见的色彩搭配方法，全面提升你的色彩搭配感知力！

1.4.1 色彩的重要性

曾有科学研究表明，人们对色彩的反应高于文字。这是一个非常有趣的研究。如图1-32的实验，分别以蓝色和红色来代表大灰狼的家和小红帽的家。图1-32 色彩实验图例（1）

当图1-33作为测试题出现（单击相应色块选择小红帽的家）时，很多人会根据之前看到的白色文字提示，而单击红色色块。不过，请大家再注意两个色块下所显示的文字。图1-33 色彩实验图例（2）

这种现象在现实生活中经常发生，那就让我们再来看看下面这组带有颜色数字的图片。

不用多说，从图1-34上你会得知微软、IBM、英特尔、亚马逊和可口可乐的股票都在上涨，而其他的都在下跌。这是因为这些颜色已经具有了众所周知的代表意义。而国内的股市则是相反的情况，即绿色代表下跌，红色代表上涨。如果这时候突然有人心血来潮将华尔街股市交易所大屏上数字的颜色互换一下，后果可想而知！图1-34 美股股市图

1.4.2 色彩的分类

色彩有着鲜活的生命，它的分类维度也是多种多样的。按色彩的色调色系（冷、暖、明、暗、软、硬），色彩的感情表达（喜、怒、哀、乐），色彩的呈现状态（安静的、活泼的、典雅的、清新的）可以划分出多种不同的类别组合。

如图1-35中展现的春秋冬夏，在同一画面中，色彩的变换能置换出别样的情绪状态。

春天，微寒却点缀有生机的绿——清新。

秋天，热未散尽带点哀愁的黄——典雅。

冬天，冷清沉寂纯洁如雪的白——安静。

夏天，热闹欢乐铺满世界的蓝——活泼。

看到这里或许有人会说，颜色种类何其多，如果我对色彩根本就不了解该怎么办？不用担心，接下来将要介绍的内容中将向大家推荐几个简单就能搞定色彩搭配的方法。图1-35 春秋冬夏图

1.4.3 色彩搭配方法

颜色切忌滥用，在实际搭配中，如果对自己色彩搭配水平没有把握，可以采用三个简单方法：参考同类APP案例、使用配色软件和在线配色网站。

1.参考同类APP案例

参考同类APP案例是指根据APP的行业、风格和定位，去寻找同类型APP的常用色彩搭配组合。如橙色在商业类的APP中受到青睐，而蓝色在社交类的APP中使用更广泛，如图1-36所示。图1-36 商业类淘宝与社交类QQ的色彩对比

图1-37至图1-42是一组APP色彩搭配组合图。图中右侧的色块都源自左侧APP界面。具体操作是采用吸管工具，将APP界面中采用面积最大的几种颜色提取出来。这种方法可以快速有效地找出适用的色彩搭配方案。图1-37 色彩搭配组合1图1-38 色彩搭配组合2图1-39 色彩搭配组合3图1-40 色彩搭配组合4图1-41 色彩搭配组合5图1-42 色彩搭配组合6

在看过这6组图片后不难发现，基本上每个APP界面中，主要颜色最多不会超过4种。简洁舒适是手机UI设计的一个趋势，所以颜色的搭配切忌贪多。

2.配色软件

RealColors Pro是一款手机上的实用色彩捕捉分析配色工具。除支持直接调用图片进行色彩分析外，还可通过摄像头实拍功能进行外界色彩的抽取与搭配。遇到喜欢的搭配，可以保存到库（Library）中，在需要的时候调取出来作为参考，如图1-43和图1-44所示。图1-43 REAL COLORS主页面图1-44 REAL COLORS库

3.配色网站

觉得参考别人的APP太麻烦？用软件采集的颜色也无法符合自己的心意？那么配色网站就是你的不二之选，如图1-45所示。它推荐的每组搭配都符合色彩搭配的规范，还将色盘进行了冷暖色调的区分，一键生成更是省去了多余的操作，让色彩搭配变得如此容易！图1-45 配色网站colorschemedesigner.com本节结语：先入为主的颜色认知可以覆盖文字本身要表述的意思。由此可见，颜色的搭配是多么重要。错误的色彩搭配用再多的文字内容也无法弥补。在设计的世界中，色彩搭配是最不能忽视的环节之一。好的色彩搭配可以让人心情愉悦，舒适，同时，它也能给产品带来更深层次的意境。

1.5 各设备尺寸标准一览

为了避免在手机UI设计时出现不必要的麻烦，如设计尺寸错误而导致显示不正常的情况发生，设备尺寸的标准（如单位、分辨率、密度等）都是我们必须先了解清楚的。

首先让我们来看图1-46所示。如果没有接触过手机界面设计，对于下图中的各种数值很可能会一头雾水。Inch是什么？320×480代表什么？DPI又是什么单位？HDPI和MDPI又分别代表什么？下面我们就来一一介绍这些设备尺寸相关的内容。图1-46 手机屏幕各类参数

1.5.1 英寸（Inch）

英寸其实就是我们常说的长度单位，14英寸笔记本电脑，30英寸纯平彩电。指的是屏幕对角的长度，如图1-47所示，手机屏幕也沿用着这个概念。图1-47 图解英寸的概念

1.5.2 分辨率（Resolution）

分辨率是屏幕物理像素的总和。一般用屏宽像素数乘以屏高像素数来表示，比如480px×800px，320px×480px等。像素是显示屏规范中的最小单位。

图1-48所示是一张分辨率为420px×320px的图片。用放大工具将此图放大后，所见图片就变成图1-49所示这种全是正方形格子的样子，而每一个正方形格子，就是一个像素。如果有兴趣去数一下这些格子数的话就可以发现，屏宽的格子数为420，屏高的格子数为320，也就是分辨率中的宽和高。图1-48 分辨率示例图图1-49 像素示例图

1.5.3 网点密度（DPI）

屏幕物理面积内所包含的像素数，通过DPI（每英寸点数）来计量。图1-46所示的252DPI和180DPI就是指每英寸点数为252和180。

DPI越高，显示的画面质量就越精细。在一般平面设计上比较追求高DPI来呈现画面质感。但在手机UI设计时，DPI要与相应手机相匹配，因为低分辨率的手机无法满足高DPI图片对手机硬件的要求，显示的效果反而会变得很糟糕。所以，这就涉及一个新的名词——屏幕密度。

1.5.4 屏幕密度（Screen Densities）

屏幕密度分为iDPI（低）、mDPI（中等）、hDPI（高）、xhDPI（特高）四种。图1-46所示的mDPI和hDPI分别指中等密度和高密度。图1-50 屏幕密度一览表

图1-50中分成了屏幕密度（横列表头）和屏幕大小（纵列表头）两个维度。与屏幕密度相对应的，屏幕大小也分为四种：小屏（Small screen）、普屏（Normal screen）、大屏（Large screen）、超大屏（Extra large screen）。

拿出你自己的手机，根据分辨率看它属于哪种屏幕大小从而可以推导出应该采用的屏幕密度。假设我的手机分辨率为320×480，可以看到对应320×480（即HVGA）分辨率屏幕大小的只有普屏（Normal screen），通过图表反查可知，其适用于mdpi屏幕密度。也就是说，如果我要做一个适合我手机的应用，就应该选择mdpi屏幕密度来进行设计。

不过，APP终究不是为某一个人而服务的，它需要满足一大部分手机用户，而这些手机品牌、型号、屏幕尺寸都是各异的。

最基本的定律——想让越多不同屏幕大小的手机能够适应你的APP，生成的图片屏幕密度版本就要越齐全，如图1-51所示。

比如你只生成了hdpi版本的图片，但有很多手机只支持HVGA分辨率，那么你生成的图片在这些只支持HVGA的手机上，会显得很大很粗糙，用户体验就会很差。图1-51 各密度版本效果及参数展示

细心的你可能发现了，图1-50中绿色区域的屏幕密度后面都会带有一个括号，里面填有120、160、240、320这样的数值。其实这些数值就是在Photoshop设计中需要使用到的。图1-52在新建一个Photoshop文档时，在分辨率一栏，选择像素/英寸模式，再在前面的输入框中输入相应的屏幕密度数值即可。图1-52 新建文档的各参数设置

不过这样就出现了一个麻烦的问题，假如一个APP有50张图要设计，每张图要生成4种不同版本，那就是50×4，合计200张。意味着要新建并填写200次分辨率，而且还得将图片内容不停地缩放大小，对于新手来说完全就是一种折磨。

建议新手先从最基准的分辨率160像素/英寸开始设计，设计完后，按75%、150%、200%的缩放比率将图片缩小或扩大。

Photoshop菜单中的图像＞图像大小命令，按Alt+Ctrl+I组合键，就能很好地完成这一功能，如图1-53至图1-56所示。图1-53 原始尺寸原图图1-54 查看原图图像大小图1-55 缩放比例的调整图1-56 缩放后的效果

转换完不要忘记命名并放置到相应的文件夹中，如图1-57所示。

不过也不是所有时候都需要这么做的。比如仅针对Pad（平板电脑）而设计的APP，如果定位时就不预备在手机上运行，可以只生成相应版本（如xhdpi）的图片。

与Android相比，iPhone对密度版本的数量要求就没那么恐怖了，因为目前iPhone仅两种设计尺寸——480px×320px和960px×480px，即mdpi密度就可以满足要求了。本节结语：手机在进行UI设计时，对设计参数的要求较一般WEB设计更严格。正如WEB会因各种浏览器版本不同，而要讲求兼图1-57 命名规则建议容性一样，手机的UI要根据手机型号、屏幕大小等各方面因素来进行综合考量。但是，WEB上的一个像素的误差，非专业人士是很难发现的，而手机则不同，一个dpi设置的误差，在手机平台上会被成倍地放大。为了避免闹笑话，请大家努力研究它吧！

1.6 图标尺寸大小与格式建议

本节介绍Android、iOS、Windows Phone三个系统图标的尺寸要求，以及对于图片采用格式的建议。

1.6.1 图标尺寸大小

APP的图标（ICON）不仅指应用程序的启动图标，还包括状态栏、菜单栏或者是切换导航栏等位置出现的其他标识性图片，所以ICON指的是所有这些图片的集合。

记得上一节讲到的屏幕密度吗？ICON也是受这一密度制约的。注：Launcher：程序主界面，启动图标；Menu：菜单栏；Status Bar：状态栏；List View：列表显示；Tab：切换、标签；Dialog：对话框

说过Android的图标，再来说说iOS的图标。iPhone的屏幕密度默认mdpi，所以不会像Android分得那么细，按手机、设备版本类型区分就可以了。

最后是Windows Phone（Windows Phone 7）的图标。Windows Phone的图标标准非常简单和统一，对于设计师来说简直就是易如反掌！

1.6.2 图标格式建议

任何关于图标格式的选择，都应该将实际情况需求纳入考虑范围。下面介绍下最常见的图片格式。

JPEG：照片基本格式，相同图像JPEG格式文件较PNG格式文件小，不支持背景透明。

GIF：支持透明但会出现锯齿。

PNG：支持透明，iOS推荐图片格式，相同图像在生成PNG格式后，文件会比JPEG格式、GIF格式大。图1-58至图1-60分别为生成JPEG、GIF、PNG格式图片后的显示效果。图1-58 生成JPEG格式的图片效果图1-59 生成GIF格式的图片效果图1-60 生成PNG格式的图片效果

GIF格式的锯齿问题很显而易见。但JPEG格式貌似看上去没什么问题。其实不然。当它要作为某种组件置于背景上方时，问题就突显出来了，如图1-61所示。图1-61 深色背景上方，JPEG格式与PNG格式图片效果的对比

JPEG格式背景不透明，所以加盖在新背景色上方时，原有的白色背景也会加进来，即使想以抠图的方式也无法很好地恢复成原有的样式（如阴影效果）；PNG的格式支持背景透明，所以加盖在其他背景上完全不存在问题，所有效果也能保留，并与背景完美地融合在了一起。

如果APP不涉及网上下载，且需要进行图片透明处理，那么PNG的格式是最好的选择。如果要保持图片色泽质量饱和度等，不需要透明处理时，就可以选择JPEG格式。GIF格式占的空间很小，在不要求背景透明和图片质量的前提下，可以考虑使用GIF格式。本节结语：选适合的尺寸、选适合的格式，就是这么简单！

1.7 APP布局说明

本节将对Android、iPhone、Windows Phone的APP界面布局进行剖析对比，从而了解不同系统的APP在设计时的异同。

图1-62是Android、iPhone一般常规界面布局。但在实际设计中，也能发现很多Android的APP上，采用的是iPhone（俗称：Android mix iPhone）、Windows Phone的常规界面布局方式（如新浪微博）。下文介绍最常规的界面。图1-62 Android与iPhone的布局对比图

Android布局的界面元素一般分为四个部分：状态栏、标题栏、标签栏、工具栏。

状态栏：位于界面最上方。当有短信、通知、应用更新、连接状态变更时，会在左侧显示，而右侧则是电量、信号、时间等常规手机信息。按住状态栏下拉，可以查看信息、通知、应用更新等详细情况。

标题栏：文本居左显示当前的APP名称。

标签栏：标签栏放置的是APP的导航菜单，标签栏既可以在APP主体的上方也可以在主体的下方，但标签项目数不宜超过5个。

工具栏：针对当前APP页面，是否有相应的操作菜单，如果有，则放置在工具栏中。那么，在单击手机上的“详情菜单”键时，屏幕底部会出现工具栏。

iPhone布局界面元素则分为状态栏、导航栏（含标题）、工具栏/标签栏三个部分。

状态栏：显示应用运行状态。

导航栏：文本居中显示当前APP标题名称。左侧为后退按钮，右侧为当前APP内容操作按钮。

工具栏/标签栏：工具栏与标签栏共用一个位置——iPhone最下方，因此必须根据APP的要求选择其一。工具栏按钮不超过5个。

Windows Phone布局界面元素则分为状态栏、标题栏、枢轴和工具栏四个部分。如图1-63所示。

状态栏：显示时间、电量等信息。

标题栏：显示当前APP的名称或应用类别等主要标题。

枢轴：枢轴由枢轴组件组成，类似于Android中的标签栏，用于APP中各个功能、选项间的切换。只是枢轴的表现形式图1-63 Windows Phone的界面布局较为特别，在下一节的组件中，将对枢轴组件进行介绍。

工具栏：单击Windows Phone手机上的开始键，就可以弹出相应的工具栏。工具栏中包含可对当前APP页面进行操作的相应功能按钮。

由以上的界面布局可见，这三个系统所用到的布局大多是相同的。掌握起来难度也不会很大，可谓一通则全通。本节结语：布局是一门艺术。如何去分配空间，组织架构，有很大的学问在里面。试想，在Android、iPhone等智能机未出现之前，为何有人能从无到有地发明了这样一种智能手机布局呢？而他要如此布局的原因和目的又是什么呢？

1.8 熟悉各系统组件

各类组件集合在一起，丰富且增强了APP的互动性，UI组件可以根据APP的需要自定义风格。可以说，没有组件的APP就像一个公告牌一样，没有了互动的APP也就黯然失色。

本节将介绍Android、iOS、Windows Phone这三个系统的组件。需要稍做说明的是，在应用程序开发时，针对View（视图）和控件的区别是很明确的，但对于UI设计来说，这些都是在设计时需要用到的元素，因此将View（视图）和控件合并在一起，作为组件介绍。

1.8.1 Android的基础UI组件

本节Android部分将介绍18个基础常用UI组件。这些组件在APP中的出镜率非常高。为了能顺利地与开发人员沟通，理解掌握这些组件的功能是很有必要的。对于什么情况下选择什么组件要仔细推敲。UI设计时组件的取舍会直接影响到界面的显示效果与用户体验的满意度。

1.TextView（文本显示）

用于显示固定不变的文本，如图1-64所示，图中红框部分使用的即是TextView组件。图1-64 文本显示

2.Button（常规按钮）

常规按钮的风格可以很不一样，上面可以写文字也可以标上图片，但它们最终都要用于确认、提交等功能的实现，如图1-65和图1-66所示。图1-65 带文本的按钮图1-66 图形按钮

3.EditText（编辑输入框）

输入文本，能够对文本内容进行编辑修改的文本框，如图1-67所示。图1-67 编辑输入框

4.CheckBox（复选框）

复选框常见于设置管理、资料的填写页面中，用于资料内容选项的选择和状态的确认（如兴趣爱好，声音是否开启）。复选框对选择数量没有限制，如图1-68所示。

5.RadioButton（单选按钮）

按照APP中的实际需求，在单选组（RadioGroup）中罗列出几个不同时存在的条件，每个条件旁放置1个单选按钮。与复选框不同的是，单选框对选择数量有限制，同一单选组里，只能选择一个选项，不能多选，如图1-69所示。

6.ToggleButton（开关按钮）

一键开关，可更改图1-68 复选框APP设置的状态（如网络开关、WIFI开关）。通常情况下打开时显示绿色，关闭图1-69 单选框则为灰色，如图1-70所示。同样地，开关按钮也可以根据APP进行个性化设置，如图1-71所示。图1-70 常见开关按钮图1-71 个性化开关按钮

7.Spinner（下拉框）

单击下拉框，可以从弹出的列表中选择1个选项。下拉框跟单选框类似，只能选择一个选项。但单选框比较占用屏幕空间，当选项较多时，可以考虑使用下拉框，如图1-72和图1-73所示。图1-72 下拉框（未展开状态）图1-73 下拉框（展开状态）

8.AutoCompleteTextView（智能提示框）

智能提示框指的就是带智能提示的文本输入框。普通的文本输入框在输入文字的时候不会有其他功能。但智能提示框在输入文本时，会在相应的数据中找寻是否有匹配的记录，如果有匹配的记录，就会在此提示框下方以列表的形式显示出来，单击提示的结果，可以将文本框内容补充成提示的选项，大大节省了输入的时间，如图1-74所示。

9.TimePicker（时间选择框）

选择时间时用到的控件，通过数字上下方的加减按钮进行调节选择，如图1-75所示。与时间选择框相类似的还有DataPicker（日期选择框）。特别适用于日期、数字的调节选择。图1-74 智能提示框

10.ListView将所有选项按ListView（列列表的形式排列。适用于管表显示）理设置、资料管理等，如图1-76所示。图1-75 时间选择框

11.ExpandableListView（可扩展列表显示）

在列表包含有子列表时，单击列表选项向下展开子选项，这种列表显示方式就叫可扩展列表显示。QQ的分组折叠采用的就是最典型的可扩展列表显示组件，如图1-77所示。

12.GridView（网格式浏览）

图标呈图1-76 列表显示网格式的排列，就叫做网格式浏览。网格式浏览在SNS类APP中应用较为广泛，如开心图1-77 可扩展列表显示网的菜单导航采用的就是这种方式，在导航菜单过多时推荐使用此种方式，且图标的表现形式较ListView（列表显示）更为直观，如图1-78所示。

13.Gallery（图片显示组件）

显示文本要使用TextView，那显示图片要用什么呢？当然就是这里所介绍的Gallery（图片显示组件）了，如图1-79所示。图1-78 网格式浏览图1-79 图片显示组件

14.ImageSwitcher（图片切换条）

在多个图片中切换的时候，可以用到ImageSwitcher（图片切换条），在图片切换条区域左右滑动，可以浏览指定栏中的所有图片，单击小图片，图片显示组件会显示相应的图片，如图1-80所示。

15.ProgressBar（进度条）

进度条一般用于显示APP的安装进度或读取进度。在APP读取较慢时，设置一个读取进度条，比没有进度条的用户体验好很多。进度条的形式多种多样，除了条状的（如图1-81所示），还有环状等多种样式可供选择，当然也可以进行个性设计。

16.TabWidget（选项卡切换）图1-80 图片切换条

单击选项卡任意一个选项，可以进入该选项下的子页面。不过与导航菜单不同的是，选图1-81 进度条项卡的选项栏不会隐藏。被选中的选项会与其他选项呈现不一样的字色或背景，如图1-82所示。

选项卡会被很自然地认为比导航菜单切换耗时短，尽管这种主观感觉没有具体测试数据作依据，但在用户体验上可以加分不少。

17.Toast（提示信息）

提示信息不等同于TextView（文本显示）。因为文本显示一开始就已经显现在页面中，而提示信息则是要在特定条件触发时，才会在指定的区域显示出相应的文字，并且在几秒钟后消失。如图1-83红框部分。图1-82 选项卡切换

18.快捷菜单常见于通讯Quick 录，但在APP中很少用到。Actions（快在通讯录单击联系人头像捷菜单）时，会弹出快捷菜单，菜单内包含一组有多种功能的按钮图标，如图1-84所示。图1-83 提示信息图1-84 快捷菜单

1.8.2 iOS的基础UI组件

本节iPhone部分将介绍17个基础常用UI组件。iPhone的组件名大多以UI开头，如UIButton（按钮）、UISlider（滑动条）。这种独树一帜的命名方法极有可能是为了与其他系统的组件进行区分，避免混淆引起冲突。

1.UITextView（文本显示）

UITextView有点类似于Android中的TextView。不过区别在于，UITextView可以设置成可编辑的模式，且UITextView中的字体字号皆是统一的，如图1-85所示。

2.UILabel（文本标签）

UILabel也是文本显示的一种形式，它是短的只读文本，不能进行文字编辑，但可以通过设置视图属性为标签选择颜色，字体和字号等，如图1-86所示。图1-85 文本显示图1-86 文本标签

3.UIImageViews（图片显示）

用于图片的显示，等同于Android中的Gallery组件，如图1-87所示。图1-87 图片显示

4.UIWebView（WEB内容显示）

用于显示HTML、PDF等高级网页内容，如图1-88所示。图1-88 WEB内容显示

5.MKMapViews（地图显示）

用来显示地图的控件，如图1-89所示。图1-89 地图显示

6.UIScrollView（滚动条）

滚动条显示。当界面大小无法满足内容时，可以采用滚动条显示，如图1-90所示。图1-90 滚动条

7.UIAlertView与UIActionSheet（警告框）

警告框是附带有一组选项按钮供选择的组合组件。UIAlertView与UIActionSheet都称为警告框，但这两者的区别在于，前者最多只支持3个选项，如图1-91所示，而后者支持超过3个的选项，如图1-92所示。图1-91 警告框图1-92 超过3个选项的警告框

8.UIButton（按钮）

UIButton跟Android中的Button一样，用于提交确认的作用，如图1-93所示。图1-93 按钮控件

9.UISegmentedControl（平行按钮组）

常用于各种子功能之间的切换，位置一般在页面主体偏上区域，但最近也常被放在页面底部，如图1-94所示。图1-94 平行按钮组

10.UISwtich（一键开关）

一键切换，常用于状态的开关，类似于Android的ToggleButton。1为打开状态，呈蓝色；0为关闭状态，呈灰色，如图1-95所示。图1-95 一键开关

11.UISlider（滑动条）

UISlider的作用非常广，常用于参数值的调整，图片大小缩放，屏幕亮度的增减。可以根据APP的需求，更改样式相应的颜色。图1-96是一个标准的UISlider组件。图1-96 滑动条

12.UIPageControl（多图片浏览切换控件）

浏览多张图片时，有一个可以展示图片张数和当前图片所在页的组件——UIPageControl。根据图片的张数，相应地在屏幕上方或下方出现相同数量的圆点，白色圆点代表当前所阅览的图片，灰色圆点是未在查看的其他图片，如图1-97所示，当左右滑动屏幕时，白色圆点会相应地转移，如果白色圆点出现在第5个圆点，那么当前预览的就是第5张图片。图1-97 多图片浏览切换控件

13.UITextField（编辑输入框）

文本输入框，效果同Android的EditText，如图1-98所示。

试读结束[说明：试读内容隐藏了图片]

下载完整电子书