设计师们从来没有像今天这样需要为如此多的移动设备营造用户体验。随着平板电脑持有量的不断增加,我们进入了“后PC时代”。各个公司都在极力为用户提供高质量的用户体验,以争取他们的注意力。设计一个成功的Android的应用程序,不仅需要一个伟大的、可以激励用户下载、使用和保存的构想,还需要一个自然流畅而又直观的用户体验。
以下这些内容有助于设计师了解iPad的iOS和Android的3.x“蜂巢”系统的交互原则和主要元素的不同,以便他们更好地熟悉 Android的平板电脑应用程序的设计。此外,我们也可以一起来看看Android的设计模式和布局策略,并分享一些好的Android平板电脑的应用程序设计案例。
虽然智能手机上的Android 2.x的应用程序也能在平板电脑上使用,但Android3.0的蜂巢系统是专门为平板电脑设计的。Android承诺未来将会把蜂巢系统的功能植入到智能手机中,以便于这些应用程序在不同尺寸的屏幕上进行设计和构建。
我们大多数都把自己和平板电脑的“第一次”献给了iPad,因此,不如先来个新欢旧爱大PK,比较一下这两款平板电脑的用户界面。通过这样的比较,我们可以梳理一下对于平板电脑的理解,并着眼于两款电脑的主要区别,从而满足Android用户的独特需求;这也有助于我们在将iPad上已经有的应用程序转化到Android电脑上的时候,可以工作得更有效、更顺利。
只要做得像iPad就好?
尽管Android的平板电脑和iPad在用户体验上有许多相似之处(按键手势、APP图标、情态表达等),但设计师在做出预设和绘制屏幕之前,还是应该搞清楚它们的区别。
屏幕的尺寸和方向
这两个平台之间最大的差别就是外形尺寸,iPad的界面尺寸为768*1024像素,并且它的默认显示方式是纵向显示。
而对于Android来说,情况就有点复杂了。因为Android有一大堆设备产商,所以它的平板电脑屏幕尺寸有7英寸的、10英寸的,还有一些介于两者之的非主流尺寸(这里的尺寸指的是对角线长度)。不过还是以10英寸左右的尺寸居多。
我们把这个尺寸换算成像素。在10英寸的屏幕上,1280*752像素可以构成一个不错的布局基线(不包括系统栏),而Android的默认显示方向是横向的。当然,和iPad一样,用户也可以自己设定显示方向,但横向比较受人欢迎。
左图是在10英寸Android平板电脑上的纵向视图,右图是在iPad上的。
左图是在典型的10英寸Android平板电脑上的横向视图,右图是在iPad上的。
但屏幕尺寸仅仅是这两款电脑的差异中的一半因素。Android电脑在“屏幕密度”(即屏幕特定区域内的像素数量)上也有所不同。不要在细节上太钻牛角尖,设计师只能为三种不同的屏幕密度制作位图副本:原图、1.5倍原图和2倍原图。也就是说,一张100*100的原始位图也应该有150*150和 200*200大小的副本。这三种不同大小非副本可以让你的图像在中、高和超高屏幕密度下正常显示,不会损害图片质量。
系统栏
iOS把系统栏做得要多小有多小,而Android的蜂巢系统的系统栏扩大了一些。系统栏里面有通知栏和软导航按钮,包括“返回”“主页”和“最新应用”等按钮。
Android“蜂巢”的系统栏
无论你使用哪一个程序,Android的系统栏和按钮总是会在屏幕底部存在,你可以把它们看做一个固定存在的UI工具。唯一例外的是“关灯”模式,当你看视频或者玩游戏的时候,系统栏会自动变暗,以便你拥有身临其境的体验。
“返回”按钮
Android略显笨重而又固定存在的系统栏对设计师来说似乎是个障碍,但它也有一个好处:将iPad中被“返回”按钮固定占用的位置解放了出来。蜂巢系统中的“返回”按钮设计在全球都统一适用。
“蜂巢”中的返回按钮
操作栏
大部分UI系统的差异存在于屏幕最上方的操作栏。Android为操作栏的具体元素和视觉形式的安排提供了一些建议,包括标识和图标的位置、导航(如下拉菜单或选项)和常用操作。这是整个蜂巢系统里最统一的设计模式,值得你在做自定义设置或者使用iPad之类的产品之前去熟悉它。在下文中,我们将对这个常见的操作栏进行进一步的分析。
Android“蜂巢”的操作栏
控件
iPad用户对Android中的控件会感到新鲜。顾名思义,控件就是一些小的通知栏和快捷键,用户可以在设置它们启动屏幕上的显示。控件可以被设置为堆栈视图、网格视图和列表视图,现在,Android3.1当中,它们还可以调整大小。
启动屏幕中的一些控件
通知
区别于iOS系统只是将简单的通知信息推送到屏幕上,蜂巢系统的通知信息量比较丰富,并且它是通过屏幕右下角的弹出(我们称之为“toast”)将通知送到你面前。这一点很像Mac OS X中的Growl。你可以改变通知栏布局,从文本到图标到可操作按钮都可以自定义设置。
Android“蜂巢”的通知栏
设置
iPad的设置通常是点击一个“i”按钮而跳出弹窗,设置类别被细分为一些容易识别的列表。Android则有不同的方式。它看上去更像iOS的“常规设置”界面,用户导航在左,详情显示在右。这是蜂巢系统的多个设置方式中的首选,也是较为优雅的一种。
在“日历”程序中的设置模式
UI元素
就像你所能想象到的那样,Android拼了老命要把所有东西都做得跟竞争对手不一样,巴不得全部跟竞品相反,所以他们有自己的一套UI规范,现在又搞了一个叫做“全景UI”(holographic UI)的视觉语言,用于选择日期和时间、选择一个选项、设置音量等日常操作。了解这个UI语言系统,对于创建屏幕流和页面布局至关重要。
UI元素的采样,来自Google I/O 2011 PPT放映中的一页
字体
iPad可以显示多少种字体?——57种。
那么Android系统呢?——3种。
你没有听错,Android系统只显示Droid Sans、 Droid Serif 和Droid Sans Mono这三种字体。不过,不要绝望,事情总有好的一面——虽然系统只支持这三种字体,但开发人员可以在他们的程序里自由捆绑其他的字体。
有什么与iPad相似的地方吗?
对iPad比较熟悉的设计师们有福了,这两款电脑在蛮多地方还是很像的。
触控手势
点击、双击、滑动、拖动、收缩、旋转和任意滚动——呐,还是这么几个经典体位。
拆分视图和多窗格界面
拆分视图是平板电脑最常用的界面布局之一,它由两个并排的窗格组成。你也可以自己设定更复杂的窗格布局。
Ustream的拆分视图,类别选项在左,内容在右
多媒体嵌入
这两个平台都支持音频、视频和地图的嵌入。
在YouTube的应用程序里嵌入的视频
剪贴板
都支持应用程序内外的复制和粘贴。
拖放
都有拖放功能。