Android应用UI设计模式

《Android应用UI设计模式》

图书特色：

58个重要交互设计模式将扁平化设计理念发挥到极致，Android应用设计难题各个击破
集各家操作系统（iOS、Windows Phone）之所长，将其绝妙理念融入Android交互设计
多个试验模式和反模式帮助探索Android设计的前沿部分，避开设计误区，打破设计僵局

内容简介：

本书介绍了58种必不可少的交互设计模式，帮助你处理Android应用程序设计最具挑战性的方方面面，以及同样重要的12种反模式，描述了在追求客户完善、愉悦和享受的过程中的常见错误，非常适合各层次的Android应用开发者、UI设计师阅读、参考。

作者简介：

Greg Nudelman是DesignCaffeine公司CEO兼移动体验策略师，具有15年的移动体验从业经验，曾为eBay、WebEx、Wells Fargo、PayPal、Safeway、Cisco、IBM、美联社和Groupon等财富500强企业，以及非盈利性组织和创业公司实现跨平台的数字体验，受到数百万客户的好评。Greg还是很多著名用户体验设计图书的作者，其中包括Designing Search: UX Strategies for eCommerce Success。

试读第二章：

Android的特色

自面世以来，Android始终像荷尔蒙过剩的少年，成长速度十分迅猛，变化全面而深远。Ice Cream Sandwich发布后，相应的UI标准和设计元素发生了巨变，而这个平台本身也更成熟稳定。尽管如此，Android的反叛精神并未泯灭，仍然具有其他移动操作系统没有的一些特色。

亚马逊购买地址：《Android应用UI设计模式》

 2.1 这里是平面国

如果将Android应用和iOS应用进行比较，你首先可能注意到的是前者是一个平面国：按钮是平的，内容区域是平的，所有工具栏和控件也都是平的。就像Rudy Rucker的短篇小说Message Found in a Copy of Flatland中的平面国国民，Android“看到”的一切都是二维的。另外，Android不做任何装扮，完全是纯人工数字制品：通过想象创造出来的东西，非实物。Android就是一款运行在硬件上的软件，而不是相反。在我看来，这是件天大的好事。为什么呢？因为不需要让界面看起来“真实”、“漂亮”，那么内容便显得更重要，有助于向用户提供最基本的数字体验。Windows Modern UI是另一款与iOS形成鲜明对比的移动操作系统，从很多方面说，它和Android 4.0采用的平面数字视觉方案很像。

下面来比较一下Android和iOS的“信息”应用，如图2-1所示。

图2-1 iOS和Android 4.0的“信息”应用

首先印入眼帘的是信息密度：在Android版中，屏幕上罗列的内容要多很多。原因之一是iOS使用“气泡”来表示短信，而Android只在表格中简单地列出短信。是不是很乏味？在有些人看来也许如此。然而，Android未做任何装饰，整个“信息”应用就是一部简单纯粹而又强大的短信机器。整个视觉方案显得保守，几乎到了刻板的程度。另外，请注意工具栏：iOS规定工具栏元素必须是三维的，让它们看起来就想要从屏幕中跳出来。这是使用渐变实现的，让工具栏等数字对象看起来栩栩如生。相反，Android工具栏（乃至整个页面）完全是二维的，一点也不像实物。Android毅然决然地拥抱“平面国”，“远离三维世界”，这为创建半透明菜单（见图2-2）、全身心地践行“内容至上”理念打开了大门。第13章将更详细地介绍各种菜单样式。

图2-2 谷歌Earth应用Android 4.0版中半透明的菜单栏与iOS版中模拟实物的菜单

整个Android屏幕呈现灰色调，只使用了刚刚够的颜色让工具栏较暗，而内容区域几乎保持了屏幕的亮度。在色彩方面，Windows Modern UI等众多移动操作系统都与Android Ice Cream Sandwich操作系统形成了鲜明对比。虽然这两种设计语言都秉承“平面国”理念，但Windows Modern UI在色彩和交互性方面其实非常突出：通过巧妙的变换和色彩对比，每个元素都像在振动、翻转和滑动，这种动感让主屏幕几乎“呼之欲出”。而常见的Android屏幕简洁、严肃、一本正经，只提供必不可少的元素，就像典型的线框。更有趣的是，这种“平面国”理念也体现在按钮和轻按目标上。Android按钮也未使用渐变，这将在下一节讨论。

2.2 轻按任何地方

很久以前，我在使用大型机工作站时第一次见到“按任意键继续”的提示，它让我一时间有点不知所措。编程是一门精确的学科，想不到按任意键都行！但按哪个键最合适呢？有没有好坏之分？当然没有。我很快就学会了享受自由，想都不用想，就随便按一个键（但大多数情况下，我都用拇指按下空格键）。

Android把按钮的概念扩大化了。iOS可谓煞费苦心，用带斜面的立体按钮标出可轻按的元素，而Android一切就简，假定屏幕上的任何元素都可以轻按，通常也不提供额外的线索。就拿“信息”应用中的短信行来说吧，iOS提供了包含在圆圈内且带斜面的“>”按钮，而Android几乎没有提供对应的任何线索，如图2-3所示。

图2-3 Android 4.0与iOS中的表行

在Android 4.0中，用户必须知道，要获取更详细的信息，可轻按元素（即表行）的任何地方。刚开始，这是个不小的认知障碍，使用过iOS或以前Android版本的用户尤其如此。然而，大多数用户很快就能认识到这样一点：要获取某个元素的更详细信息，通常可以轻按它，即便它没有提示。Android在向用户灌输“按任意键继续”的理念。

Android将典型按钮设计为“值得轻按的区域”（tap-worthy area，出自移动设计专家兼技术作家Josh Clark之口的妙语，见http://globalmoxie.com），将“轻按任何地方”的视觉设计原则展示得淋漓尽致。iOS则煞费苦心，使用了显眼的斜面、阴影和渐变，确保按钮看起来是可轻按的，如图2-4所示。

图2-4 Android“值得轻按的区域”与iOS的立体按钮

相反，Android不遗余力地遵循“轻按任何地方”的原则，使用区域而不是按钮，其中唯一的线索是垂直分隔条。这突显了Android的基调：不将轻按目标限定在固定边框内，也不让轻按目标周围有空白区域。这种基调意义深远，因为如果它得到严格遵守，触摸屏上的一切都将是轻按目标。对设计人员来说，这既是挑战也是机会。之所以说是挑战，是因为在没有主要或次要轻按目标的情况下，用户很可能感到迷惑：既然可以轻按任何地方，那么按哪个区域最合适？对设计和开发人员来说，无论用户轻按什么地方，都应做出直观的响应。如何在遵循这种设计原则的同时，不忘用户的主要目标同时兼顾开发预算呢？第10章和第11章我们再讨论。

“轻按任何地方”也提供了众多有待挖掘的机会，让我们能够通过加速手势、多点触控手势及“隐藏”菜单，提供内容至上的设计和沉浸式数字体验。第13章将进一步探讨各种激动人心的可能性。

2.3 适合各种设备

简单地移植苹果菜单不可行，这一点在Android早期版本中就显而易见。其中一个原因是运行Android的设备种类繁多，有HTC Hero手机，有7英寸和10英寸的平板电脑，还有Android滑雪镜、智能住宅和车用触控面板，因此Android界面受制于众多空间约束。还记得第1章的案例AutoTrader吗？它采用Android 2.3及更早版本的做法，将所有功能都放在屏幕底部的导航栏菜单中。这不是好办法，因为即便设备屏幕空间足够，也会隐藏重要的功能。另外，提供的上下文操作难以超过三个或四个，如图2-5所示。

图2-5 AutoTrader应用表明，Android 2.3及更早版本的硬件菜单隐藏了重要功能

为解决这个问题，Android 4.0设计人员采用了一种货真价实的移动解决方案：溢出菜单。要明白如何针对Android 4.0和Android 4.1进行设计，必须了解这种菜单的工作原理。功能放在一个或多个被称为操作栏的菜单中。将功能放在多个操作栏中时，第二个操作栏被称为次级操作栏。图2-6所示的应用包含两个操作栏。

图2-6 Gmail应用包含位于顶部的主操作栏和位于底部的次级操作栏

不管有多少个操作栏（通常是一到两个：顶部的主操作栏和底部的次级操作栏），菜单都犹如手风琴，可根据屏幕空间的大小展开或折叠。屏幕较小时，只显示几个重要的功能；屏幕较大时（如在平板电脑上），显示整个菜单且通常只有一个操作栏。操作栏容纳不下的功能放在溢出菜单中，这为屏幕有限的问题提供了一种可高度扩展的绝妙解决方案。图2-7比较了平板电脑和手机中的菜单。

图2-7 屏幕较小时，Gmail将容纳不下的功能移到溢出菜单中

通常，操作栏只使用图标，而溢出菜单只使用文本，这与iOS菜单及以前的Android菜单大相径庭。在Android 4.0中，仍可同时使用图标和文本，例如Google Plus的取消和确定按钮及抽屉式菜单项，如图2-8所示。

图2-8 Google Plus应用在抽屉式菜单中同时使用图标和文本

通过同时使用操作栏和溢出菜单，Android界面通常能够适应不同的屏幕尺寸和设备朝向。然而，从人体工学的角度说，最终的UI并非都令人满意。下一章将详细讨论设备约束。第13章将讨论如何使用“瑞士军刀导航”模式在屏幕角落放置“隐藏的”菜单，以最大限度地节省空间。第8章将介绍使用菜单处理重要功能（如搜索）的各种方式。有关如何为7英寸和10英寸平板电脑设计有效的UI，请参阅第14章。

2.4 摆脱空间限制

“轻按任何地方”和“适合各种设备”的理念带来了一个重要变化，即可以毫不留情地将各种容器从界面中删除！这与通常大量使用圆角容器的iOS形成了鲜明对比，如图2-9所示。

图2-9 “设置”应用表明，iOS倚重于UI容器

提到Windows Modern UI最鲜明的特征，不同颜色的方形容器（也叫贴片，tile）、全景视图（Panorama）控件的统一背景和大标题（更详细的信息请参阅第13章）是很多开发人员的共识，如图2-10所示。

图2-10 Windows Modern UI“设置”应用在全景视图控件中使用统一背景和大标题

相比iOS和Windows Modern UI，Android 4.0的一个鲜明特征是，标题简单且完全抛弃了容器。需要分隔UI的不同部分时，Android 4.0不使用容器，而使用不同颜色的标题，将其字体设置为Roboto并全部大写，同时在下方添加水平分隔线，如图2-11所示。

图2-11 Android 4.0“设置”应用使用简单标题而非容器，改善了页面的流动性

不用容器提高了页面的流动性，可将更多屏幕空间用于显示内容，还让UI更能适应不同的设备，不管其屏幕的高度和宽度如何。

如果使用容器，那么容器必须小于屏幕尺寸（即屏幕可显示多个容器），才能确保其行为正常。因此，设备处于横向模式时，iOS容器常常会让人觉得很怪异。这是Android考虑的一个重要因素，因为正如前面讨论过的，“适合各种设备”意味着界面必须能够适应各种屏幕，而不管它多小、长宽比有多怪（当然得在合理范围内）。在界面中使用容器的效果不佳，因为不能动态地调整容器，以适应不同的情形。相反，如果不对内容进行约束，让它们能够自由地流动，它们就能根据屏幕大小相应地调整大小。

可惜，移动设计中的一切都是要付出代价的，不用容器也不例外。不用容器虽然提高了页面的流动性，但也要求我们增大垂直间距，以便将不同元素分隔开来。屏幕较小时，垂直间距可能很难将元素分隔开，导致整个页面中的元素都连在一起，难以分辨。另一个问题是极简的种颜色搭配。在前面的“设置”屏幕中，标题为淡灰色，与链接的颜色接近。在“日历”等其他原生应用中，标题的颜色与活动元素相同，都是淡蓝色。这两种颜色方案都可能令人困惑，用户难以分清哪个是可轻按的活动元素，哪个是标题。一种值得推荐的做法，是为标题、活动链接和活动元素设置不同的颜色，以消除困惑。

2.5 大局着眼，小处着手

在新的Android 4.0/4.1设计方案中，最有趣、最新颖的原则之一是局部操作优先原则。市面上其他所有移动操作系统（包括Android的早期版本）在确保随时可以访问全局导航功能方面，都特别留心。例如，为实现这个目标，iOS使用无处不在的选项卡栏，如图2-12所示。

图2-12 Amazon.com应用使用iOS选项卡栏确保可随时访问全局导航功能

在Ice Cream Sandwich推出之前，Android应用（如Android 4.0之前的Amazon.com）也遵循这样的原则，如图2-13所示。

图2-13 较老的Android应用（如Amazon.com）在导航栏中包含一个全局菜单

然而，Android 4.0将用户带入了一个全新的世界：总是向用户显示最适合当前任务的操作。

例如，在图2-14所示的Gmail邮件列表屏幕中，Search、New Message等重要操作包含在操作栏中，而Settings、Help和Send Feedback等较通用的操作隐藏在溢出菜单中。

图2-14 Gmail的列表视图显示的是全局操作

然而，显示特定邮件后，用户可执行的操作截然不同。在图2-15中，你看到的不是Search和New Message等顶级菜单项，而是Favorite和Reply（顶部操作栏中的星形和箭头图标）等上下文操作，以及常用操作Archive、Trash和Tag（底部操作栏中的档案柜、垃圾桶和标签图标）。

图2-15 Gmail应用的详细视图显示的是上下文操作而非全局菜单

依然可通过底部的溢出菜单来访问较通用的操作，如Settings、Help和Send Feedback，但在列表视图中可用的全局功能没有了。这很重要，因为根据“小处着手”原则，在邮件详情屏幕中，不能访问Search和New Message等全局功能。基于“小处着手”原则，还拓展了溢出菜单：顶部的溢出菜单包含的不是邮件功能，而是不那么常用的回复选项，如Reply All和Forward。

Android 4.0的屏幕标题也不同，这是“小处着手”的另一个必然结果。例如，在iOS中，屏幕标题指出了用户当前所处的位置，而返回按钮指出了轻按它将前往什么地方。在图2-16所示的“邮件”应用中，iOS将“14 of 69”用作屏幕标题，并在返回按钮上显示“All Mail (41)”。

图2-16 Android屏幕标题和返回按钮（左）与iOS屏幕标题（右）

Android 4.0没有指出轻按返回按钮将前往何方，而将整个标题栏都用于显示屏幕标题（这里是邮件的主题），即用户当前所处的位置。这会让人感到迷惑，对以前从事iOS设计的设计人员以及以前使用iOS的用户来说尤其如此。在这些人看来，“箭头+徽标+标题”的含义是，轻按箭头将返回到标题所说的目的地，这与Android 4.0截然不同。在Android 4.0中，“箭头+徽标+标题”意味着用户当前处于标题所说的位置，而轻按返回按钮将返回到上一级。可惜，目前没有好办法让人顺利跨过认知障碍，只能慢慢习惯。

如果将这种高度局部化的屏幕标题与Android操作系统以前版本使用的面包屑（如图2-17所示）进行比较，将发现变化非常大。除高度局部化的信息外，其他信息Android 4.0一概不显示。

不同于以前的移动技术，Android在每个屏幕上都只显示局部功能，这表明Android做了这样的假定：即便不靠全局导航来获悉当前位置，用户也不会迷失方向。Android 4.0遵循“大局着眼，小处着手”的原则：提供高度局部化的操作和屏幕标题，而不是始终向用户显示全局导航（通常位于面包屑中）。这要求Android 4.0用户对这样一点心知肚明：要使用全局导航功能，必须按返回按钮一次或多次。

图2-17 “图库”应用的Android 4.0操作栏（左）与Android 2.3面包屑导航栏（右）

有趣的是，对很多应用来说，这种高度局部化并不合适。很有名的例子就是Facebook，它使用“瑞士军刀导航”模式在左上角放置一个导航按钮，用户随时可单击它来访问全局操作。第13章将介绍一些实用设计模式，可用于解决全局和局部之间的冲突。

大致了解让Android 4.0与众不同的总体设计原则后，接下来该探索如何在各种支持Android的设备上贯彻这些原则了。

================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/。
设计微博：拥有粉丝量58万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：