设计师们从来没有像今天这样需要为如此多的移动设备营造用户体验。随着平板电脑持有量的不断增加，我们进入了“后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的应用程序里嵌入的视频
剪贴板
都支持应用程序内外的复制和粘贴。
拖放
都有拖放功能。
在Gmail里的拖放效果
设计模式
蜂巢继承并发展了许多在Android2.0引入的设计模式。也许你对这个设计模式还不太熟悉，但它们就像Android定义的那样，是一个“常见问题的普遍解决方式”。设计模式是一个UI设计的重要规范，便于营造统一的用户体验，并提供给设计者和开发者一个模板。你不必担心什么，因为它们是可以定制的。
如前所述，操作栏是最重要的UI组件，我们将重点讨论它。
在“日历”程序中突出显示的操作栏
标识和图标
操作栏上的标识和图标都是从最左边开始，点击它们，用户就可以回到应用程序的主屏幕。
“日历”程序图标
导航
点击图标以后，我们通常会进入某种形式的导航，比如下拉选项，或者是菜单。蜂巢系统里用一个小三角形来显示一个菜单，并为标签提供了一系列的下划线。下划线在操作栏内部，不额外占用空间。
左箭头按钮也可能出现在图标左侧，用于返回导航或者取消操作。
三种不同的操作栏导航
常用操作
常用操作，顾名思义，就是一些搜索、分享和拉出菜单这样经常使用的操作。它们被放在导航栏的右侧，远离任何标签。
“日历”程序中的常用操作
弹出菜单
弹出菜单是常用操作中的一部分，有时也被一根直线分开。在这个地方放置了一些杂项的菜单，比如设置、帮助和反馈。
一个弹出的菜单
搜索
搜索也是一个常用操作。对搜索来说，它有一个独特的缩放动作，点击“搜索”标识，就会弹出一个搜索框，让你查询你想要找的内容。点击“×”取消，就又缩回一个小标识。在同时存在着许多操作和标识的时候，这是一个节省空间的方式。
上方是搜索标识的展开状态，下方是收缩状态，点击放大镜展开搜索框，点“×”关闭它。
语境操作
当一个项目被选中时，语境操作会自动改变它在操作栏中的模式，以说明它区别于其他的项目。例如，当一个显示为缩略图的照片被选中的时候，操作栏就会发生变化，以便于你编辑这张图片。
要退出语境操作栏，用户可以点击“取消”或者操作栏右边的“完成”。
在Gmail的程序中，点击一封已收到的邮件就会触发语境操作栏
平板电脑，布局有讲究
使用碎片和多窗格视图
蜂巢系统的构建模式是“碎片化”的。“碎片”是一个自成体系的布局组件，它可以改变在布局中的大小和位置，来使用不同的屏幕尺寸和方向。它为开发者和设计师提供了一种方法，让他们的设计变得有弹性、可堆叠，从而适应不同设备的屏幕规格。屏幕组件可以自由拉伸、堆叠、缩放和隐藏。
碎片架构给了设计师和开发人员一些选择，在保持屏幕大小和显示方向不变的情况下进行布局。
是什么让碎片架构变得如此特别?在一个兼容性的程序库里，开发人员可以把这个功能带入1.6版的Android智能手机。运用一种大小就可以满足所有尺寸的设备，在这个策略上，开发人员构建一种程序，就可以应用到不同的设备当中。
虽然“碎片”更多时候是一个开发人员使用的术语，但是设计师对内容的拉伸、堆叠、展开和隐藏也应该有个基本的了解。
拆分窗格是一种最常见的碎片布局。这种布局常见于新的应用程序和电子邮件客户端，有一个狭长的列表和一个较为宽阔的详细视图。
“今日美国”使用的拆分视图
拆分视图的另一种方式，是在视图的一侧进行项目转换。在这种情况下，侧边的列表变成了轮播，导航也从垂直方向变成了水平方向。
方向策略
碎片是一个以一种大小适应多种尺寸的好方法，但方向策略也是很有用的。你的设计在横向的屏幕上看起来不错，但是如果变成纵向视图并且上面排列了三个狭长的列表，你该怎么办呢?这时候你就可以选择拉伸、堆叠或者隐藏内容。把碎片想象成一堆有弹性的拼图，你可以根据自己的需要移动、塑造和隐藏它。
关于动态效果
在蜂巢系统的架构下，设计师和开发者可以运用纷繁复杂的动态效果。根据Android3.0关于动态效果的说明，“动态效果可以在不同的项目之间淡入淡出、改变颜色，播放现有的动画等等。”蜂巢系统还拥有可以支持2D和3D动画的高性能机制。以下这个视频很好地展现的蜂巢系统在动态效果方面的性能。
值得学习的案例
Android平板电脑上的应用程序仍然是一个相对较新的空间，一些品牌都还处在试水阶段。以下是一些可以启发灵感的应用程序案例，你可以从Android Mark或者Amazon上面下载它们。
YouTube
Google的YouTube成为Android的应用程序设计典范是理所当然的事情，它展示了上文提到的所有设计模式和UI元素。为了更好地体验这款程序在蜂巢系统中的表现，请先下载并运行它吧。
CNN
CNN这款应用程序很好地运用了触摸手势(包括弹出和查看更多内容)，拆分视图和字体应用也不错!他们使用的自定义字体Rockwell用于头条新闻。
CNBC
另一款相当棒的新闻类应用程序。丰富的图形和渐变的动态效果，CNBC是最具视觉冲击力的应用程序之一。
Plume
通过三栏布局的界面设计，Plume是一个展现从横向显示到纵向显示时，布局发生重大变化的好例子。
FlightTrack
看，数据量大的应用程序也可以设计得很典雅。这款程序包含了漂亮的地图、微妙的动画和标准的蜂巢UI元素。
Pulse
“这是Android上的Pulse”，你当然可以这么说。但是比较它在Android和iPad上的版本，它们简直没有什么不同。不过，它还是很有趣。
WeatherBug
这是Android Mark上最早的蜂巢系统应用程序之一。它很好地使用了地图和“全景UI”，显示来自气候摄像头的图片。
Kindle
Kindle是一个坚持自己的设计模式并运用蜂巢系统的UI元素的成功案例，这是一个非常典雅的设计，也是坚守Android设计模式的最佳实践。
其他佳作
IMDb
News360
USA Today
AccuWeather
Ustream
Google Earth
Think Space
在线资源
Video
Designing and Implementing Android UIs for Phones and Tablets， Google I/O 2011
Android 3.0 Honeycomb animation demo
PResentations
Designing and Implementing Android UIs for Phones and Tablets， Google I/O 2011 (PDF)
Blogs
Tablet UI Patterns
Android Developers
Supporting Multiple Screens
Icon Design
Android 3.0 Platform Highlights
本文编译自Ruanruan Lan@DamnDigital，原文地址。
译文出处：smashingmagazine.com，转载请注明出处链接。
(转载请注明来自DamnDigital)
新闻热点
疑难解答
