1看脸对比
在经过11月3日的跳票后,谷歌终于在11月13日凌晨发布了最新版移动操作系统Android5.0(代号Lollipop,中文:棒棒糖),目前可更新的设备包括从Nexus 4以后推出的Nexus 系列手机与平板,电视和智能穿戴设备也会在最近更新新版的UI。
或许是受到了苹果 iOS 7.0与黑莓 BlackBerry 10系统的刺激,谷歌此次在Android 5.0 (Lollipop)对图形、交互、动画三个方面,做了Android系统发布以来的最大幅度的调整。其正式版发布后,我们也而在第一时间对这款新系统做了体验。
Material design,谷歌在Android 5.0(Lollipop)上引入了新的视觉设计语言。通过多重图层、不同图形、字体粗细以及动态阴影等多种设计规范,以及卡片、标签、列表、转轴等多种布局样式,去美化之前被认为丑陋不堪的老版Android系统。
Material design UI设计语言和Notification(通知)是新系统的主要更新内容(图片来自Google)
如今,笔者手里的Nexus 5和Nexus 7(2013)都已经更新到了最新的Android 5.0(Lollipop)。那么两款不同形态的产品在更新完系统后会有哪些界面样式上不同呢?我们今天就通过手中Nexus 5与Nexus 7两个设备的多图对比,来一探究竟吧。
先来两张桌面的对比图热热场(左边是Android 4.4,右边是Android 5.0)
啊!开始之前再来补充说明一下。之所以没用最新的Nexus 6&9(名字好邪恶呀~)来做对比,答案很简单,因为笔者没钱买!另外为在申明一下两个系统的版本号,Nexus5是LRX21O,Nexus 7是LRX21P,下面的内容均是在这这个基础上进行的。
2锁屏界面
经过对比我们发现,Nexus 7(2013)上使用平板布局的Android5.0系统与Nexus 5上使用手机布局的Android 5.0,在图形交互界面上的相似程度非常高。并且与之前任何一版Android系统相比,这一代这一版均是最高。下面我们从锁屏开始说起。
如果Nexus 7(2013)能够支持接打电话的话,那么两款设备的锁屏界面应该是一摸一样的,另外它还提供了针对平板的横屏模式。在操作上,支持任意空白位置上滑解锁,任意位置下滑显示快速设置面板。拖动话筒和相机图标至中央可激活对应的应用。
■Google Nexus 5
Android 5.0 Nexus 5丨锁屏界面(可从顶部划出快速设置面板)
Android 5.0 Nexus 5丨通知信息直接显示在锁屏界面上
在缺省状态下,通知信息和音乐播放器控制面板会直接显示在锁屏界面的中央,竖屏状态下Nexus 5可以显示4条完整的通知,Nexus 7则可以显示5条。其它多出来的信息将会以图标加数字标签的方式显示在最下方,点击后即可查看详细的信息内容。
■Google Nexus 7(2013)
Android 5.0 Nexus 7丨锁屏界面四周留有很多空隙
Android 5.0 Nexus 7丨作为平板多了横屏显示模式
由于通知信息是直接显示在锁屏上的,所以目前从屏幕的顶部执行往下滑的操作,呼出的直接就是布局和样式经过重新调整的快速设置面板。由于两款设备硬件上的不同,所以相比之下多出了“手电筒”和“移动网络”的设置开关,具体的内容我们后面详谈。
3主屏界面
进入待机主界面,我们能够很轻易的找到两款设备在元素样式以及界面布局上的不同。Nexus 5的固定应用栏(Dock)与桌面区域之间有一条明显的分割线,另外应用抽屉的图标,快速搜索栏、文件夹的样式、底部虚拟按键的背景均与Nexus 7有所区别。
那么上面提到的那条分割线其实就是Nexus 7的桌面指示器(之前也是这样的),而在Nexus 5上,这个桌面指示器则是用小圆点来代替的。在静止状态下(非桌面切换状态下),Nexus 5的指示器能够显示当前的桌面是哪个(高亮),Nexus 7的则不能。
■Google Nexus 5
Android5.0 Nexus 5丨待机主屏界面(出去顶部快捷搜索栏后的桌面空间为 4x4)
Android 5.0 Nexus 5丨长按桌面空白处可以对壁纸、小部件进行设置
桌面容量方面,使用5.0英寸面板的Nexus 5的布局为4 x 5(横向 x 竖向,不算Dock),使用7.0英寸面板的Nexus 7的布局为6 x 6(横向 x 竖向,不算Dock),所以无论是放置图标还是放置插件,Nexus 7的桌面都要更富裕一些,毕竟它是个平板电脑。
■Google Nexus 7(2013)
Android 5.0 Nexus 7丨待机主屏界面(出去顶部快捷搜索栏后的桌面空间为 6x6)
Android 5.0 Nexus 7丨目前主屏界面还没有对 Material design做 完全的适配
长按桌面的空白区域,Nexus 5可以通过弹出的菜单调整壁纸、桌面插件,以及设置Google即时搜索(国内无法使用)的功能,而Nexus 7则只能通过这项操作来调整壁纸。那么Nexus 7想要设置桌面插件需要进入应用抽屉才行,这是我们下面将要说的。
4应用后台
■应用后台
除了待机桌面之外,在Android系统中还有两个我们平时需要经常打交道的基本模块,那就是应用后台与应用抽屉。那么Android 5.0为这两个模块的激活过程设计了非常炫酷的交互动画,Nexus 5(手机)上面的是都变了,Nexus 7则只改变了后台的部分。
从Android 4.4系统开始,屏幕底部虚拟按键区中的“菜单键”被“多任务键”所替代。而在Android 5.0系统中,三个按键在功能保持不变前提下对样式做了图形化处理,使用三角形、圆形与正方形来代替原有的拟物图标。其中多任务键就是位于右侧的正方形。
■Google Nexus 5
Android 5.0 Nexus 5丨由正方形任务卡片构成的应用后台(依旧是划出关闭应用)
两款机器在点击“正方形”按钮后都会经过一段同样的交互动画:一排正方形的应用卡片(上面是应用的名称,下面是应用的缩率图)从底部向上弹出。在这个界面下Nexus 5和Nexus 7都具有横竖两种显示模式,上下滑动即可在任务重切换,点击打开应用。
■Google Nexus 7(2013)
Android 5.0 Nexus 7丨正方形任务卡片构成的应用后台(屏幕顶部出现快速搜索栏)
Android 5.0 Nexus 7丨进入多任务管理界面后屏幕下方虚拟按键区的背景变透明了
在Android 5.0系统的后台中依旧没有提供一键清理后台全部应用的按钮,两款机器都是一样的。另外还有一个细节上的变化值得注意,Nexus 7在进入后台应用管理界面后,屏幕底部的虚拟按键区的背景变成了透明的,而在普通待机状态下是黑色的背景。
5应用抽屉
在应用抽屉这个模块的处理上,Nexus 5和Nexus 7之间有比较大的差异,这个差异体现在界面的布局和样式两方面。那么在之前我们就说过了,两款机器说面上应用图标的样式就有所不同。Nexus 5 上面的图标经过重新设计,在白色圆型背景中有六个圆孔。
点击应用抽屉图标后,Nexus 5的转场动画是经过重新设计的:图标的白色背景会“摊开”直至填充出一个白色矩形框,应用抽屉中的图标是向上浮现出来的(布局同样为4 x 5)。此时我们能够看出,“小部件”这个标签已经不存在了,这里面只有用户安装的应用。
■Google Nexus 5
Android5.0 Nexus 5丨应用抽屉(小部件标签已经移除,布局为 4x5)
Android 5.0 Nexus 5丨小部件(Widget)通过长按桌面空白区域进行设置
而到了Nexus 7这边,一切都是照搬Android 4.4版的内容,经过“图标向内收缩”的转场动画后,我们得到的是一个纯黑的背景,在“应用”标签下是用户安装的应用,竖屏状态下图标的布局为5 x 6,横屏状态下的图标布局为7 x 4,在美观程度上完败于 Nexus 5。
■Google Nexus 7(2013)
Android 5.0 Nexus 7丨应用抽屉竖屏模式(UI没有适配、布局为 5x6)
Android 5.0 Nexus 7丨应用抽屉横屏模式(UI没有适配、布局为 7x4)
功能层面,Nexus 7的应用抽屉中还带有“小部件”的标签,这也是用户唯一一个想默认Launcher添加插件的途径。另外在应用抽屉界面的右上角还出现了Google Play内容商店的图标,这个设计已经很老了,可见Google对于 Nexus 7 的优化内容还不是很全面。
6通知面板
回顾Android系统的发展史,从屏幕下拉激活的这个面板从一开始就有,而在iOS、Windows Phone和BB 10系统更新之前,这个下拉面板可以说是Android系统独占的标志性设计。既然竞争对手纷纷抄袭了这个经典的设计,所以Google自此也对它进行了改造。
在Android 5.0系统推出之前,这个下拉面板中的设计已经经过了多次的调整,如今它既是通知消息的汇总中心,同时也集成了一些快速设置开关。那么新系统所带来的改变并没有影响到它的功能,主要的还是视觉呈现和交互操作方面的调整,有新意而且好玩儿。
■Google Nexus 5
在Android 4.4系统中,从屏幕顶部左半部分往下滑是得到的是通知中心面板,从右半部分往下滑得到的是快速设置面板(也就是各种开关)。对于手机用户来说,这样的操作会降低单手操作时的体验,所以在新版的系统中这两个面板的呼出逻辑有了一些改变。
Android 5.0 Nexus 5丨屏幕顶部下拉一次显示通知丨两次显示快速设置面板
Android 5.0 Nexus 5丨横屏模式下的通知中心与快速设置面板丨两侧有空隙
■Google Nexus 7(2013)
Android 5.0 Nexus 7丨操作与Nexus 5相同丨面板左右两侧留有很大的空隙
Android 5.0 Nexus 7丨面板两侧有很大的空隙但是可显示的内容比Nexus 5多
从屏幕顶部向下第一次滑动呼出通知中心,继续再向下滑呼出快速设置面板,同时位于顶部的内容会扩展显示更详细的内容(时间、日期、电量、设置等)。两款机器在这个模块上没有功能差异,界面布局也是完全一致,Google并没有对Nexus 7的大屏做优化。
7设置界面
对于一款智能终端设备来说,系统对于设置菜单的呈现好坏与否,基本上不会影响到产品核心功能的使用体验,但它却能间接地体现出一款操作系统交互层面的友好程度,以及图形界面的匹配程度。那么升级到现版本后,两款设备的设置界面出现了一些差异。
黑色的标题栏、蛋白色的背景、深绿色的拟物化图标、灰色的说明性文字以及扁平化的样式,Nexus 5和Nexus 7的设置菜单在视觉观感上有着一致的体验。控制开关的样式也不在具有那么强的科技感,看上去很亲切,图表等元素的样式也都做了重新适配。
■Google Nexus 5
在升级Android5.0之前,Nexus 7的系统设置菜单与Nexus 5几乎是一样的,看上去就像一个放大的版本。而此次谷歌对拥有大屏设备做了优化,使用了双列布局来显示菜单中的项目,从第一屏上滑差不多三分之一左右即可见底,而Nexus 5需要额外再滑两屏半。
Android 5.0 Nexus 5丨竖屏模式下的设置项是单列显示的
Android 5.0 Nexus 5丨横屏模式下的设置项是双列显示的
■Google Nexus 7(2013)
Android 5.0 Nexus 7丨竖屏模式下双列显示(显示剩余项目只需滚动三分之屏幕)
Android 5.0 Nexus 7丨横屏模式下双列显示(显示剩余项目需要滚动一屏半左右)
不过如果切换到横屏状态下,小屏幕的Nexus 5也可以以双列布局来显示菜单中的项目,但不论是横屏还是竖屏模式,屏幕上的设置项均是六个。Nexus 7在横屏模式下依旧是以双列布局显示,所以在一个屏幕中能显示的项目也就少了,但依旧比Nexus 5要多。
8浏览器
Android5.0系统的默认浏览器已经完全被Chrome所取代,之前在开发者预览版中曾出现的Chrome Lite(蓝色地球图标)已经完全消失了。浏览器作为消费者访问网络、消耗流量的主要入口之一,其本身在整个操作系统中的地位仅次于最基础的通话、短信功能。
Chrome浏览器在两款设备上均有出现,版本号也均是39.0.217.59。在两款设备上,Chrome浏览器提供了两种不同的标签页显示布局。其中 Nexus 5 在默认状态将浏览器的“标签页”与系统内的“应用”做了整合,把标签页也当做一个任务放置进了系统的应用后台里。
■Google Nexus 5
如果不习惯将“标签页”作为应用去处理的做法,Nexus 5的Chrome在设置中还提供了关闭这一功能的选项(个人感觉有点不适应,标签页在应用后台中看上去有些凌乱)。切换回来的话,新版的Chrome在使用方式上就与之前的版本(Android 4.4)没有区别了。
Android 5.0 Nexus 5丨Chrome浏览器的界面丨默认标签页和应用是合并在应用后台显示的
Android 5.0 Nexus 5丨如果不喜欢用户可以将“合并标签页和应用”的功能关闭
■Google Nexus 7(2013)
Android 5.0 Nexus 7丨Chrome版本号相同但确实完全不同的风格
Android 5.0 Nexus 7丨平板还是横着用舒服手机还是竖着用舒服
大屏幕设备更适合以横屏的方式去查看桌面版的Web页面,所以Nexus 7上的Chrome浏览器在缺省设置下会优先访问所输入网址的桌面版,并且标签页像桌面版Chrome一样陈列在屏幕的上方。除此之外,两个设备的Chrome应用都提供了云端压缩节省流量的功能。
9相机应用
虽然两款设备只比最新的产品晚了一代,但相机模块的硬件均已经与市面上主流的配置有所脱节(Nexus 5的主镜头像素数为800万,Nexus 7 2013的主镜头像素数为500万),不过Google Nexus 系列的设备一直以来也都没在相机的硬件方面下过什么功夫。。。
相机功能,目前在智能终端设备上的重要性丝毫不亚于上面提到的浏览器,当然可能对于某些用户来收,还得加上美图秀秀这个后期处理图像用的伴侣。那么在新版的Android5.0系统中,Google又完全推翻了之前在Android 4.x系统中曾经引入的指滑菜单的设定。
■Google Nexus 5
新版相机的取景界面非常简单,屏幕底部Banner上只有一个大小适中的快门键(无论机身如何放置,都在屏幕底部那一侧),另外在取景区域的右上角有一个快速设置按钮,点开之后可以进行一些简单的调整。对比之下,Nexus 5多了闪光灯、HDR等设置项目。
Android 5.0 Nexus 5丨相机应用界面丨设置面板
Android 5.0 Nexus 5丨相机场景选择丨设置菜单
■Google Nexus 7(2013)
Android 5.0 Nexus 7丨缺少闪光灯、HDR两项设置
Android 5.0 Nexus 7丨相机场景选择丨设置菜单
从屏幕左侧向右滑动可调出场景切换按钮,以及相机功能设置按钮。两款机器在这一项的操作方式以及显示出来的内容均是一样的。虽然两款机器的尺寸有所区别,但由于可操作项目均设置在屏幕的两侧,所以单手操作并不吃力,视觉感受和操作体验均有提升。
10输入法
如果我们在设置系统时选择了简体中文,那么机器便会激活预装在设备内的谷歌拼音输入法。与原来内置的谷歌键盘(纯英文)输入法一样,谷歌拼音输入法也对Android5.0系统做了Material design UI的适配,键盘使用的皮肤与之前的版本有很明显的差别。
新版输入法的皮肤配色与设置菜单中的配色方案有些类似,样式上取消了按键之间的分割线,仅仅是用不同饱和度的颜色对按键加以区分,与系统整体的风格比较搭调。初次使用的时候可能会感觉非常的不习惯,但是看久了会渐渐地适应这种非常简约的设计。
■Google Nexus 5
同样,谷歌也为输入法的键盘设计了很动感的按键动画(只有全键盘布局才有),配合按键音与按键震动效果在打字时会有非常爽快的感觉,笔者目前已经无法自拔。功能方面具备滑动输入、用户词库、智能纠正等常用的功能,同时也支持直接输入Emoji表情。
Android 5.0 Nexus 5丨竖屏模式丨谷歌输入法中文拇指键盘丨英文全键盘
Android 5.0 Nexus 5丨竖屏模式丨谷歌输入法提供了非常优雅的按键动画
Android 5.0 Nexus 5丨横屏模式丨谷歌拼音输入法(仅仅是拉伸适配)
■Google Nexus 7(2013)
Android 5.0 Nexus 7丨竖屏模式丨谷歌输入法中文拆分键盘丨英文全键盘
Android 5.0 Nexus 7丨横屏模式丨谷歌拼音输入法针对平板做了优化
二者的区别方面,Nexus 7的谷歌拼音输入法没有按键动画,并且额外提供了名为“华硕键盘”的繁体注意键盘,Nexus 5那边也有额外地宫印地语输入法。另外两款设备在键盘布局方面也有区别,Nexus 7的拇指键盘考虑到了屏幕尺寸的问题,使用了分栏式设计。
11其它内容
谷歌先如今对Android系统的控制原来越收紧,预装的应用也越来越多。相比Android 4.4此次多出来的预装应用有Google家的办公三件套:表格、文档、幻灯片,另外除了地图外还预装了地球,以及健身、Keep备忘录、Hangouts环聊、Play报亭、Play图书等等。
虽然Google Play以及Google+、Gmail等服务在国内无法正常使用,但这些应用与服务的质量与苹果对应的内容相比并不差,有些甚至还要好于后者。那么由于硬件配置的不同,Nexus 5多了名为“健身”应用,另外短信默认是没有预装的,目前已经被环聊所替代。
■Google Nexus 5
不像苹果有iOS 7做铺垫,谷歌在升级Android 5.0的时候需要做很多UI界面上的适配,再加上系统预装的应用不少,所以在预览版的时候包括日历、通信录、电话、短信等APP都还没有适配Material Design,而正式版发布后,这些应用如今也已经成功换装。
Android 5.0 Nexus 5丨谷歌日历应用(竖屏模式丨可选三种视图)
Android 5.0 Nexus 5丨谷歌日历应用(横屏模式丨只有五天视图)
Android 5.0 Nexus 5丨谷歌邮件应用(横屏模式丨没有分栏视图)
■Google Nexus 7(2013)
Android 5.0 Nexus 7丨谷歌日历应用丨带有图片背景丨增加月视图
Android 5.0 Nexus 7丨谷歌邮件应用(横屏模式丨设有分栏视图)
Android 5.0 Nexus 7丨印象笔记应用(横屏模式丨针对平板进行适配)
同一款应用,因为屏幕尺寸上的差异使得它们在不同设备上的呈现方式也有所不同。就以日历应用为例,日程视图在两款机器的屏幕上有着不一样的显示效果,另外Nexus 7还额外有提供月视图的现实方式。这就是Android 5.0对待手机与平板设备的解决方案。
12总结点评
这篇文章的目的就是简单地展示一下Android5.0(Lollipop)在不同形态产品上的UI呈现。经过Nexus 5与Nexus 7的比对,我们发现了Nexus 7对于Android 5.0的适配工作进度要慢于前者,比如桌面启动器还没有对Material Design进行适配(Nexus 9已经适配)。
不管怎么说,Android 5.0依旧是为其它应用提供运行平台的操作系统,谷歌目前在很好的维护者的AOSP开源项目计划外的GMS服务于GAPPS系列应用,使他们能够很好地对新系统设计语言的适配。但我们同样关注第三方APP的适配,以及它们对于大屏的优化。
受制于开源项目原因,谷歌对于内容分发渠道的控制能力并不及苹果那样强,它不能完全控制生存在Android平台上的应用质量。所以谷歌此次在Android 5.0上对于UI和交互的调整有非常大的指导性倾向,从自身做起,督促应用软件开发商去做UI和交互的提升。
| 责编:张志成
Android 5.0 Nexus 5丨Chrome浏览器的界面丨默认标签页和应用是合并在应用后台显示的
先来两张桌面的对比图热热场(左边是Android 4.4,右边是Android 5.0)
Android 5.0 Nexus 5丨锁屏界面(可从顶部划出快速设置面板)
Android 5.0 Nexus 5丨通知信息直接显示在锁屏界面上
Android5.0 Nexus 5丨待机主屏界面(出去顶部快捷搜索栏后的桌面空间为 4x4)
Android 5.0 Nexus 7丨目前主屏界面还没有对 Material design做 完全的适配
Android 5.0 Nexus 5丨由正方形任务卡片构成的应用后台(依旧是划出关闭应用)
Android5.0 Nexus 5丨应用抽屉(小部件标签已经移除,布局为 4x5)
Android 5.0 Nexus 5丨小部件(Widget)通过长按桌面空白区域进行设置