• 回复: 0
panguangchen 发布于:2015-05-16 03:52:02

Android应用UI设计模式

《Android应用UI设计模式》

图书特色:
58个重要交互设计模式将扁平化设计理念发挥到极致,Android应用设计困难各个击破
集各家操纵体系(iOS、Windows Phone)之长处,将其绝妙理念融入Android交互设计
多个试验模式和反模式帮手摸索Android设计的前沿部分,避开设计误区,冲破设计僵局
内容简介:
本书先容了58种必不可少的交互设计模式,帮手你处置Android应用程序设计最具挑衅性的方方面面,以及同样重要的12种反模式,形貌了在寻求客户美满、愉悦和享受的过程中的常见错误,非常得当各层次的Android应用开辟者、UI设计师阅读、参考。
作者简介:
试读第二章:
Android的特色
图2-15 Gmail应用的详细视图表现的是上下文操纵而非全局菜单
自面世以来,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将典范按钮设计为“值得轻按的地区”(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中,用户必须知道,要获取更详细的信息,可轻按元素(即表行)的任何地方。刚开始,这是个不小的认知停滞,使用过iOS或过去Android版本的用户尤其如此。然而,大大都用户很快就能熟习到这样一点:要获取某个元素的更详细信息,通常可以轻按它,即便它没有提示。Android在向用户贯注防备“按任意键连续”的理念。
图2-6 Gmail应用包括位于顶部的主操纵栏和位于底部的次级操纵栏
不管有多少个操纵栏(通常是一到两个:顶部的主操纵栏和底部的次级操纵栏),菜单都好像手风琴,可根据屏幕空间的大小展开或折叠。屏幕较小时,只表现几个重要的成果;屏幕较大时(如在平板电脑上),表现整个菜单且通常只有一个操纵栏。操纵栏容纳不下的成果放在溢出菜单中,这为屏幕有限的问题提供了一种可高度扩展的绝妙办理方案。图2-7比力了平板电脑和手机中的菜单。

图2-7 屏幕较小时,Gmail将容纳不下的成果移到溢出菜单中
通常,操纵栏只使用搁笔,而溢出菜单只使用文本,这与iOS菜单及过去的Android菜单迥然差别。在Android 4.0中,仍可同时使用搁笔和文本,比方Google Plus的取消和确定按钮及抽屉式菜单项,如图2-8所示。
图2-8 Google Plus应用在抽屉式菜单中同时使用搁笔和文本
不同于过去的移脱技术,Android在每个屏幕上都只表现局部成果,这表白Android做了这样的假定:即便不靠全局导航来获悉当前位置,用户也不会迷失落方向。Android 4.0依照“大局着眼,小处动手”的原则:提供高度局部化的操纵和屏幕问题,而不是始终向用户表现全局导航(通常位于面包屑中)。这要求Android 4.0用户对这样一点心知肚明:要使用全局导航成果,必须按返回按钮一次或多次。
经过过程同时使用操纵栏和溢出菜单,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-12 Amazon.com应用使用iOS选项卡栏确保可随时拜候全局导航成果

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

图2-11 Android 4.0“设置”应用使用大致问题而非容器,改进了页面的活动性
不用容器进步了页面的活动性,可将更多屏幕空间用于表现内容,还让UI更能适应不同的配置,不管其屏幕的高度和宽度如何。
如果使用容器,那么容器必须小于屏幕尺寸(即屏幕可表现多个容器),才华确保其举动正常。因此,配置处于横向模式时,iOS容器通常会让人感觉很独特。这是Android考虑的一个重要因素,由于正如前面会商过的,“得当种种配置”意味着界面必须可以或许适应种种屏幕,而不管它多小、长宽比有多怪(当然得在公道范围内)。在界面中使用容器的效果不佳,由于不克不及动态地调解容器,以适应不同的景象。相反,如果不同错误内容举行束缚,让它们可以或许自由地活动,它们就能根据屏幕大小相应地调解大小。
痛惜,移动设计中的统统都是要付出价格的,不用容器也不例外。不用容器当然进步了页面的活动性,但也要求我们增大垂直间距,以便将不同元素分离隔来。屏幕较小时,垂直间距大概很难将元素分离隔,导致整个页面中的元素都连在一起,难以分辨。另一个问题是极简的种颜色搭配。在前面的“设置”屏幕中,问题为淡灰色,与链接的颜色靠近。在“日历”等其他原生应用中,问题的颜色与活动元素沟通,都是淡蓝色。这两种颜色方案都大概令人怀疑,用户难以分清哪个是可轻按的活动元素,哪个是问题。一种值得推荐的做法,是为问题、活动链接和活动元素设置不同的颜色,以消除怀疑。
2.5 大局着眼,小处动手
在新的Android 4.0/4.1设计方案中,最风趣、最新颖的原则之一是局部操纵优先原则。市道市面上其他全部移动操纵体系(包罗Android的早期版本)在确保随时可以拜候全局导航成果方面,都特别把稳。比方,为实现这个目标,iOS使用无处不在的选项卡栏,如图2-12所示。

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

图2-13 较老的Android应用(如Amazon.com)在导航栏中包括一个全局菜单
比方,在图2-14所示的Gmail邮件列表屏幕中,Search、New Message等重要操纵包括在操纵栏中,而Settings、Help和Send Feedback等较通用的操纵埋没在溢出菜单中。

图2-14 Gmail的列表视图表现的是全局操纵
然而,表现特定邮件后,用户可实行的操纵大相径庭。在图2-15中,你看到的不是Search和New Message等顶级菜单项,而是Favorite和Reply(顶部操纵栏中的星形和箭头搁笔)等上下文操纵,以及常用操纵Archive、Trash和Tag(底部操纵栏中的档案柜、垃圾桶和标签搁笔)。

依然可经过过程底部的溢出菜单来拜候较通用的操纵,如Settings、Help和Send Feedback,但在列表视图中可用的全局成果没有了。这很重要,由于根据“小处动手”原则,在邮件详情屏幕中,不克不及拜候Search和New Message等全局成果。基于“小处动手”原则,还拓展了溢出菜单:顶部的溢出菜单包括的不是邮件成果,而是不那么常用的回答选项,如Reply All和Forward。
Android 4.0的屏幕问题也不同,这是“小处动手”的另一个肯定结果。比方,在iOS中,屏幕问题指出了用户当前所处的位置,而返回按钮指出了轻按它将前去什么地方。在图2-16所示的“邮件”应用中,iOS将“14 of 69”用作屏幕问题,并在返回按钮上表现“All Mail (41)”。
然而,Android 4.0将用户带入了一个全新的天下:总是向用户表现最得当当前任务的操纵。

图2-16 Android屏幕问题和返回按钮(左)与iOS屏幕问题(右)
Android 4.0没有指出轻按返回按钮将前去何方,而将整个问题栏都用于表现屏幕问题(这里是邮件的主题),即用户当前所处的位置。这会让人感到利诱,对过去大事iOS设计设计职员以及过去使用iOS的用户来说尤其如此。在这些人看来,“箭头+徽标+问题”的含义是,轻按箭头将返回到问题所说的目标地,这与Android 4.0大相径庭。在Android 4.0中,“箭头+徽标+问题”意味着用户当前处于问题所说的位置,而轻按返回按钮将返回到上一级。痛惜,如今没有好办法让人顺利跨过认知停滞,只能渐渐风俗。
为办理这个问题,Android 4.0设计职员采取了一种货真价实的移动办理方案:溢出菜单。要大白如何针对Android 4.0和Android 4.1举行设计,必须体会这种菜单的事情道理。成果放在一个或多个被称为操纵栏的菜单中。将成果放在多个操纵栏中时,第二个操纵栏被称为次级操纵栏。图2-6所示的应用包括两个操纵栏。
如果将这种高度局部化的屏幕问题与Android操纵体系过去版本使用的面包屑(如图2-17所示)举行比力,将发现变化非常大。除高度局部化的信息外,其他信息Android 4.0一概不表现。

图2-17 “图库”应用的Android 4.0操纵栏(左)与Android 2.3面包屑导航栏(右)
风趣的是,对很多应用来说,这种高度局部化并不同适。很著名的例子便是Facebook,它使用“瑞士军刀导航”模式在左上角安排一个导航按钮,用户随时可单击它来拜候全局操纵。第13章将先容一些实用设计模式,可用于办理全局和局部之间的辩论。
大致体会让Android 4.0不同凡响的总体设计原则后,接下来该摸索若何在种种支持Android的配置上贯彻这些原则了。
比拟iOS和Windows Modern UI,Android 4.0的一个光显特征是,问题大致且完全扬弃了容器。需要离开UI的不同部分时,Android 4.0不使用容器,而使用不同颜色的问题,将其字体设置为Roboto并全部大写,同时鄙人方添加程度离开线,如图2-11所示。







Greg Nudelman是DesignCaffeine公司CEO兼移动体验战略师,具有15年的移动体验大业经历,曾为eBay、WebEx、Wells Fargo、PayPal、Safeway、Cisco、IBM、美联社和Groupon等财产500强企业,以及非红利性构造和创蚩瀚司实现跨平台的数字体验,受到数百万客户的好评。Greg还是很多驰名用户体验设计图书的作者,此中包罗Designing Search: UX Strategies for eCommerce Success。

扫一扫,关注设计动量,随时参与互动。
我要评论