Android应用UI设计模式 - 优设网 - UISDC

Android应用UI设计模式

2013/12/24 17097评论区

《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
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/android-ui-mode

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里