《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所示。

1

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

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

2

图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所示。

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所示。

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所示。

5

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

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

6

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

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

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章。

8

2.4 摆脱空间限制

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

9

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

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

10

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

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

11

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

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

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

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

2.5 大局着眼,小处着手

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

12

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

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

13

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

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

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

14

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

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

15

图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)”。

16

图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用户对这样一点心知肚明:要使用全局导航功能,必须按返回按钮一次或多次。

17

图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】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

点赞
收藏
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏