Android平板电脑上的APP应用程序设计须知

Android平板操作系统预览和详细说明
Eclipse开发Android应用程序入门

来源：草根网(www.20ju.com) - 互联网界的读者文摘

作者: Android开发网原创 时间: 2011-01-27 Android 3.0预览版SDK中可以找到

1.一个早期Android 3.0系统映像和一个模拟器，
2.目前Android 3.0类库使用的API不是最终的，模拟器使用了WXGA
3. 新的WXGA模拟器皮肤和更大的模拟器，XGA为16:10的宽屏分辨率，一般为1280x800

安装Android 3.0 SDK必须使用ADT 9.0.0， 同时在androidmanifest.xml中使用android:targetSdkVersion属性值为Honeycomb，为了兼容早期版本的软件，这里Android123给大家一个例子

<manifest ... >
<uses-sdk android:minSdkVersion="4"
android:targetSdkVersion="Honeycomb" />
<application ... >
...
<application>
</manifest>

有关新的Android 3.0文档、API引用和2.3以及3.0之间的不同可以在新的SDK版本中找到，可以在 Android平板SDK下载-代号3.0 honeycomb 中了解。

但屏幕尺寸仅仅是这两款电脑的差异中的一半因素。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)