Designing For Android Tablets

最新推荐文章于 2021-12-07 12:15:54 发布

androidboy365

最新推荐文章于 2021-12-07 12:15:54 发布

阅读量1.4k

点赞数

分类专栏： android 文章标签： android notifications animation ipad action 设计模式

android 专栏收录该内容

110 篇文章 0 订阅

订阅专栏

Designing For Android Tablets

More than ever, designers are being asked to create experiences for a variety of mobile devices. As tablet adoption increases and we move into the post-PC world, companies will compete for users’ attention with the quality of their experience. Designing successful apps for Android tablets requires not only a great concept that will encourage downloads, usage and retention, but also an experience that Android users will find intuitive and native to the environment.

没有什么时候比现在更需要设计师去为各种各样的移动设备营造体验了。随着平板电脑被不断接受，我们已经步入“后PC时代”，公司会利用平板电脑的用户体验质量来争夺用户的注意力。设计成功的Android平板电脑应用程序，不但需要一个很棒的概念来鼓励用户下载、使用和保留，还需要一种使Android用户很直观的发现并适应使用环境的用户体验。

Designing For Android Tablets - tanlee - Tanlee

The following will help designers become familiar with Android tablet app design by understanding the differences between the iPad iOS user interface and Android 3.x “Honeycomb” UI conventions and elements. We will also look at Honeycomb design patterns and layout strategies, and then review some of the best Android tablet apps out there.

接下来通过了解ipad iOS用户界面与Android 3.x “Honeycomb 用户界面设计规范和元素之间的不同，可以帮助设计师熟悉Android平板电脑应用程序设计。我们还将分析Honeycomb的设计模式和布局策略，然后查看一些那里面非常好的Android平板电脑应用程序。

Note that while Android 2.x apps for smartphones can run on tablets, Android 3.0 Honeycomb was designed and launched specifically for tablets. Future updates promise to bring Honeycomb features to smartphone devices, as well as make it easier to design and build for multiple screen types.

注意，虽然智能手机上Android 2.x应用程序也可以在平板电脑上运行，Android 3.0 Honeycomb 系统是专门为平板电脑设计和推出的。Future updates 承诺将Honeycomb的特性植入智能手机设备中，并使它更容易在多种多样的屏幕尺寸上设计和构建。

For most of us, our first exposure to tablets was via the iPad. For this reason, it’s reasonable to begin comparing the two user interfaces. By comparing, we can align what we’ve learned about tablets and begin to focus on the key differences between the two, so that we can meet the unique UI needs of Android users. Not only will this help us get up to speed, but it becomes especially important when designing an Android tablet app from an existing iPad one.

对于我们大多数人，我们第一次接触平板电脑是通过ipad. 正因为这个原因，开始比较二者的用户界面是合理的。通过比较，我们可以组织整理我们已经了解的平板电脑的知识，并去关注二者的关键不同点，这样我们就可以满足Android用户独特的用户界面要求。在将已存在于iPad上的应用程序转换到Android平板电脑上的时候，这不但可以使我们速度更快，而且变得非常重要。

[Editor's note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents .]

It’s Just Like The iPad, Right?只要做得像iPad就行，对吗？

While the Android tablet and iPad experience share many similarities (touch gestures, app launch icons, modals, etc.), designers should be aware of the many differences before making assumptions and drawing up screens.

虽然Android 平板电脑和iPad的体验方面有很多的相似之处（触控手势、应用程序启动图标、情态表达等），设计师在作出假设和绘制屏幕流之前应该熟知二者的差异。

Screen Size and Orientation屏幕尺寸和方向

The biggest difference between the two platforms is the form factor. Layouts for the iPad are measured at 768 × 1024 physical pixels, and the iPad uses portrait mode as its default viewing orientation.

这两个平台之间最大的不同就是外形尺寸。iPad的布局尺寸是768×1024物理像素，并且iPad将纵向显示方向作为它默认的查看方向。

With Android tablets, it’s a bit more complicated, due to the multiple device makers. In general, there are 7- and 10-inch Android tablets screen sizes (measured diagonally from the top-left corner to the bottom-right), with sizes in between. However, most tablets are around 10 inches.

而Android平板电脑，由于拥有众多的设备生产厂家，稍微有一些复杂。概括地讲，有7英寸和10英寸的Android平板电脑屏幕尺寸（自左上角至右下角的对角线长度），以及介于二者之间的尺寸。然而，大多数平板电脑是10英寸左右。

What does this mean in pixels? A good baseline for your layouts is 1280 × 752 pixels (excluding the system bar), based on a 10-inch screen size and using landscape (not portrait) as the default orientation. Like on the iPad, content on Android tablets can be viewed in both landscape or portrait view, but landscape mode is usually preferred.

换算成像素，这意味着什么？一个不错的布局基线是1280×752像素（不包括系统栏），基于10英寸的屏幕尺寸大小并且将横向（而不是纵向）作为默认的方向。如同在iPad上一样，Android上的内容可以在横向和纵向两个方向上查阅，但横向模式往往更受人喜欢。

The portrait view on a typical 10-inch Android tablet (left) and on the iPad (right).左图是在典型的10英寸Android平板电脑上的纵向视图，右图是在iPad上的。

The landscape view on a typical 10-inch Android tablet (left) and on the iPad (right).左图是在典型的10英寸Android平板电脑上的横向视图，右图是在iPad上的。

However, with Android, screen size is only the half of it. Android tablets also come in different “screen densities”?—?that is, the number of pixels within a given area of the screen. Without going into too much detail, designers have to prepare all production-ready bitmaps for three different screen densities, by scaling each bitmap to 1.5×and 2× its original size. So, a bitmap set to 100 × 100 pixels would also have copies at 150 × 150 and 200 × 200. By making three batches of graphics scaled at these sizes, you will be able to deliver your bitmaps to medium, high and extra-high density tablet screens without losing image quality.

然而，对于Android来说，屏幕尺寸只是差异中的一半因素。Android平板电脑在“屏幕密度”（屏幕特定区域的像素数量）方面也有所不同。不要关注太多细节，设计师只能为三种不同的屏幕密度准备所有的生产型备用位图，放大每个位图到原大小的1.5倍或2倍。所以，被设置为100×100像素大小的位图应该也要有150 × 150 和 200 × 200大小的副本。通过制作三种缩放尺寸的位图，你可以将你的位图转换成为中、高、超高密度的平板电脑屏幕而不会损害图片的质量。

For more information on screen densities and preparing graphics for Android devices, refer to my previous article on designing for Android.更多关于Android设备屏幕密度和图像准备方面的信息，请参考我之前的文章

System Bar 系统栏

While iOS makes minimal use of the system bar, Android Honeycomb expands its size to include notifications and soft navigation buttons. There is a “Back” button, a home button and a “Recent apps” button.

虽然iOS平台将系统栏做的尽量小，但是Android Honeycomb 扩大了系统栏的尺寸并包含通知和软导航按钮。其中包括返回按钮、主页按钮和最新应用程序按钮。

The Android Honeycomb system bar.Android Honeycomb系统栏

Android Honeycomb’s system bar and buttons are always present and appear at the bottom of the screen regardless of which app is open. Think of it like a permanent UI fixture. The only exception is a “Lights out” mode, which dims the system bar to show immersive content, such as video and games.

Android Honeycomb的系统栏和按钮在屏幕底部始终存在，无论开启的是什么应用程序。你可以把它当作永久性的UI固定装置。唯一的例外是“关灯”模式，它是将系统栏变暗来显示沉浸式内容，例如视频和游戏。

“Back” Button 返回按钮

While the bulkiness and permanence of the Honeycomb system bar might seem an obstacle to designers, it does free up the real estate that is typically taken by the “Back” button in iPad apps. The “Back” button in Honeycomb’s system bar works globally across all apps.

虽然Honeycomb笨重、永久存在的系统栏对设计师来说可能是一个阻碍，但它确实解放了在iPad应用程序中通常被返回键占据的固定位置。Honeycomb系统栏中的返回键在世界上所有的应用程序中都存在。

The “Back” button in the system bar.系统栏中的返回键

Action Bar 操作栏

The bulk of the UI differences between platforms is found in the top action bar. Android suggests a specific arrangement of elements and a specific visual format for the action bar, including the placement of the icon or logo, the navigation (e.g. drop-down menu or tabs) and common actions. This is one of the most unifying design patterns across Android Honeycomb apps, and familiarizing yourself with it before attempting customizations or something iPad-like would be worthwhile. More on the pervasive action bar later.

两个平台之间大多数用户界面的不同点在于其顶部的操作栏。Android 为操作栏元素的具体布置和具体的视觉形式提供了建议，包括icon或logo的位置、导航（例如下拉菜单或标签）及常用操作。这是Android Honeycomb系统应用程序最统一的设计模式之一，因而在尝试使用自定义设置或类似iPad的东西之前，让你自己熟悉此操作栏是值得的。之后将对这个普遍存在的操作栏做更多的分析。

The action bar.操作栏

Widgets 控件

New to iPad users will be Android’s widgets. As the name implies, these are small notification and shortcuts tools that users can set to appear on their launch screen. Widgets can be designed to show stack views, grid views and list views, and with Android 3.1, they are now resizable.

能使iPad用户感到新颖的将是Android的控件。顾名思义，控件主要是小的通知栏和快捷使用工具，用户可以将其设置出现在启动屏幕中。控件可以被设计为堆栈视图、网格视图和列表视图，在Android 3.1中它们现在可以调整大小。

Several widgets on a launch screen.启动屏幕中的几个控件

Notifications 通知

While iOS’ notifications system pushes simple alerts to your launch screen, Honeycomb offers rich notifications that pop up (“toast” we used to call them) in the bottom-right area of the screen, much like Growl on Mac OS X. Custom layouts for notifications can be anything from icons to ticker text to actionable buttons.

iOS 的通知系统将简单的提醒推送到启动屏幕中，而Honeycomb是在屏幕的右下角位置弹出（我们通常称它们为toast）丰富的通知,非常像Mac OS X中的Growl.通知的自定义布局可以是图标、滚动文本或可操作按钮中的任何形式。

A notification on Android.Android 上的通知

Settings 设置

Access to settings in an iPad app are usually presented in a pop-over, triggered by an “i” button; and settings categories are broken up into tables for easy visual identification. Honeycomb has a different convention. It looks more like the iOS’ “General Settings” screen, where the user navigates categories on the left and views details on the right. This is the preferred (and more elegant) way to present multiple settings in Honeycomb.

iPad应用程序中的设置通常是以弹出窗口呈现，在点击“i”按钮后触发；而且设置项被分解成易于视觉识别的诸多表格。Honeycomb系统有不同的规范。它看起来更像iOS的“常规设置”屏，用户可以在左侧进行类型导航，在右侧查看详情。这是Honeycomb系统上呈现多设置项的首选（也是更雅致的）一种方式。

The settings design pattern in the Calendar app.日历应用程序中的设置设计模式

UI Elements UI元素

As you can imagine, Android goes to great lengths to do everything opposite from its competitor (that’s called differentiation!). Honeycomb has its own UI conventions, and it now has a new “holographic UI” visual language for such routine actions as picking a time and date, selecting an option, setting the volume, etc. Understanding this UI language is important to building screen flows and creating layouts.

如同大家所想的那样，Android系统竭尽全力把一切做的与它的竞争对手相反（这叫做差异化！）。Honeycomb有其自己的UI规范，并且它现在有一种新的“全息UI”视觉语言，用于诸如选择时间日期、选择一个选项，设置音量等日常操作中。了解这种UI语言对创建屏幕流和设计布局至关重要。

A sampling of UI elements, taken from a slide in a Google I/O 2011 presentation.UI元素的采样，来自Google I/O 2011演示文稿的一页幻灯片

Fonts 字体

How many fonts does iPad 4.3 make available? The answer is fifty-seven.

iPad4.3可以使用多少种字体？答案是57种。

How many does Android? Just three.

Android多少种？只有3种。

Yep, those three are Droid Sans, Droid Serif and Droid Sans Mono. But there is an upside. While only these three ship with the platform, developers are free to bundle any other fonts with their apps.

是的，它们是 Droid Sans, Droid Serif and Droid Sans Mono.然而有积极的一方面。虽然平台只有这三种字体，但开发人员可以自由地将其他字体绑定他们的应用程序。

Anything the Same?什么相同

Luckily for designers who are already familiar with the iPad, the two platforms have some similarities.

对iPad已经熟悉的设计师是幸运的，这两个平台有一些相似之处。

Touch Gestures 触控手势

Tap, double-tap, flick, drag, pinch, rotate and scroll at will.

点击、双击、滑动、拖动、收缩、旋转和任意滚动。

Split View and Multi-Pane UI 拆分视图和多窗格用户界面

The split view is one of the most common layouts for tablets. It consists of two side-by-side panes. Of course, you can add panes for more complex layouts.

拆分视图是平板电脑中最常见的布局之一。它由两个并排的窗格组成。当然，你可以为更加复杂的布局增加窗格。

Ustream’s split-view layout, with categories on the left and content on the right.Ustream的拆分视图，类别选项在左，内容在右。

Embedded Multimedia 嵌入式多媒体

Both platforms allow embedded audio, video and maps.

两个平台都允许嵌入音频、视频和地图。

The YouTube app, with an embedded video player.Youtube 应用程序，具有嵌入式视频播放器。

Clipboard 剪贴板

For copying and pasting data into and out of applications.

支持应用程序内外的信息复制和粘贴。

Drag and Drop 拖放

Both platforms have drag-and-drop capabilities.两个平台都有拖放功能。

The drag-and-drop feature in the Gmail app.Gmail应用程序中的拖放特性

Design Patterns设计模式

Honeycomb continues many of the design patterns introduced in Android 2.0 and expands on them. In case you’re not familiar with design patterns, they are, as defined in Android, a “general solution to a recurring problem.” Design patterns are key UI conventions designed by Android’s maintainers to help unify the user experience and to give designers and developers a template to work from. They are also customizable, so no need to fret!

Honeycomb沿用了很多在Android 2.0中引入的设计模式，并扩充了它们。如果你对设计模式不熟悉，正如Android中定义的，它们是一种“应对反复出现的问题的一般性解决方案”。设计模式是Android维护者设计的关键的用户界面规范，意图是助于用户体验的一致性、给予设计师和开发人员一个工作模板。它们是可以定制的，所以没有必要担忧。

As mentioned, the action bar is the most prominent Android UI component and is the one we’ll focus on here.

如前所述，操作栏是Android 用户界面中最为突出的组成部分，也是这里的重点所在。

The action bar highlighted in the Calendar app.日历应用程序中被高亮显示的操作栏

Icon or Logo 图标或标志

The action bar starts with an icon or logo on the far left. It is actionable; by tapping on it, the user is directed to the app’s home screen.

图标或标志在操作栏的最左边。它是可操作的；点击后用户被带到应用程序的主页屏幕。

The Calendar app icon.日历应用程序的图标

Navigation 导航

Next, we’ll typically find some form of navigation, in the form of a drop-down or tab menu. Honeycomb uses a triangle graphic to indicate a drop-down menu and a series of underlines for tabs, which typically take up most of the action bar’s real estate.

下面，我们找了几种典型的导航形式，下拉菜单形式或标签菜单形式。Honeycomb使用一个三角图形指示下拉菜单，并为标签提供了一系列的下划线；下划线通常占据大多数操作栏的自身空间。

A left arrow button might also appear to the left of the icon or logo or the label, for navigating back or cancelling a primary action.

左箭头也可能出现在图标或标志抑或标签的左侧，用作返回导航或者取消主要操作。

Three different kinds of action bar navigation.三种不同形式的操作栏导航

Common Actions 常用操作

Common actions, as the name implies, gives user such things as search, share and an overflow menu. They are always positioned to the right of the action bar, away from any tabs.

常用操作，顾名思义，就是给用户类似搜索、分享和溢出菜单的东西。它们总是被放置在操作栏的右侧，远离任何标签。

Common actions in the Calendar app.日历应用程序中的常用操作

Overflow Menu 溢出菜单

The overflow menu is part of the common actions group and is sometimes separated by a vertical rule. It is a place for miscellaneous menu items, such settings, help and feedback.

溢出菜单是常见操作组的一部分，有时候会被一根垂直的线分隔开。这个位置放置多种菜单项，比如设置、帮助和反馈

An overflow menu.一个溢出菜单

Search 搜索

Search is also a part of the common actions group. Unique to search is its expand and collapse action. Tap on the search icon and a search box expands out, letting you enter a query. Tap the “x” to cancel, and it collapses to its single-button state. This is a space saver when many actions or tabs need to be shown.

搜索也是常见操作组的一部分。搜索的独特性在于它的展开和收缩动作。点击搜索图标后搜索框展开让你输入查询关键词。点击“×”取消搜索，此时搜索框收缩，又变成单个按钮的状态。这是在有很多操作键或图标需要展示的情况下节约显示空间的一种方法。

The search function collapsed (top) and expanded (bottom). Tapping the magnifying glass opens the search box, while tapping the “x” closes it.

搜索功能收缩状态（上方的图）和展开状态（下方的图）。点击放大镜展开搜索框，点击“×”关闭搜索框。

Contextual Actions 语境操作

Contextual actions change the format of the action bar when an item is selected, revealing options unique to that item. For example, if a photo app is displaying thumbnails, the action bar might change once an image is selected, providing contextual actions for editing that particular image.

当某个项目被选中的时候，语境操作会改变操作栏的格式，展示出的选项不同于其他项目。例如，照片应用程序正在展示缩略图，一旦一张图片被选中，操作栏就可能发生变化，为编辑这张图片提供语境操作。

To exit the contextual action bar, users can tap either “Cancel” or “Done” at the far right of the bar.

用户可以点击“取消”或操作栏中的“完成”来退出语境操作栏。

The contextual action bar is triggered when tapping and holding an email in the Gmail app.Gmail 应用程序中，点击和选中邮件的时候就会触发语境操作栏

Tablet Layout Strategies平板电脑布局策略

Using Fragments and Multi-Pane Views 使用碎片和多窗格视图

The building blocks of Honeycomb design are “Fragments.” A Fragment is a self-contained layout component that can change size or layout position depending on the screen’s orientation and size. This further addresses the problem of designing for multiple form factors by giving designers and developers a way to make their screen layout components elastic and stackable, depending on the screen restraints of the device that is running the app. Screen components can be stretched, stacked, expanded or collapsed and shown or hidden.

Honeycomb设计的构建模块是“碎片”.碎片是自成体系的布局组成部分，它可以根据屏幕的方向和尺寸改变自身的尺寸和布局位置。为多种尺寸外观而设计这个问题的进一步解决方法是：给设计师和开发人员一种途径使他们的屏幕布局组成部分具有弹性和堆叠性，并取决于运行应用程序的设备屏幕限制。屏幕组成部分可以被拉伸、堆叠、扩展或者收缩、展示或者隐藏。

The Fragments framework gives designers and developers several options for maintaining their layouts across screen sizes and orientation modes.

碎片架构给了设计者和开发者几种选择，在跨越多种屏幕尺寸和方向的情形下维护他们的布局。

What makes Fragments so special? With a compatibility library, developers can bring this functionality to Android smartphones going back to version 1.6, allowing them to build apps using a one-size-fits-all strategy. In short, it enables designers and developers to build one app for everything.

是什么让碎片变得如此特别？通过兼容性库，开发者可以将这种功能带入到1.6版以上的Android智能手机中，使他们能够使用一种尺寸适配多种设备的策略来创建应用程序。简言之，它能够使设计师和开发人员只开发一个应用程序而适配所有规格的设备。

While Fragments may be a term used more by developers, designers should still have a basic understanding of how capsules of content can be stretched, stacked, expanded and hidden at will.

虽然碎片可能是一个更多的被开发人员使用的术语，但设计师仍然应该对压缩的内容如何任意拉伸、堆叠、扩展和隐藏有一个基本的了解。

The most common arrangement of Fragments is the split view. This layout is common in news apps and email clients, where a list is presented in a narrow column and a detailed view in a wider one.

最常见的碎片排布方式是分割视图。这种布局在新闻应用程序和电子邮件客户端中较为常见，通常列表在较窄的一栏中呈现，详情视图在较宽的一栏中呈现。

The split view used by USA TodayUSA Today 使用的分割视图

Another way to present a split view is to turn it on its side. In this case, the sideways list Fragment becomes a carousel, navigating horizontally instead of vertically.

呈现分割视图的另一种方式是在它的一侧转换方向。这种情况下，侧边的列表碎片变成了轮播，支持水平方向上的导航而不再是垂直方向上的。

Orientation Strategies 方向策略

While Fragments are great for applying one design to multiple screen sizes, they are also useful for setting orientation strategies. Your screen design might look great in landscape view, but what will you do with three columns in a narrow portrait view? Again, you have the option to stretch, stack or hide content. Think of Fragments like a bunch of stretchy puzzle pieces that you can move around, shape and eliminate as needed.

碎片是将一种设计应用到多个屏幕尺寸上的好办法，同时对设定方向策略亦是非常有用的。你的屏幕设计在横向视图时也许看起来很不错，但面对狭窄的纵向视图包含三栏的情况的时候你要做些什么呢？你可以再次选择拉伸、堆叠或者隐藏内容。可以把碎片想象成一堆可伸展的拼图，你可以根据需要四处移动、塑造或者删除它。

A Word About Animation关于动画

The Honeycomb framework allows designers and developers to use a variety of animation effects. According to the Android 3.0 Highlights page, “Animations can create fades or movement between states, loop an animated image or an existing animation, change colors, and much more.” Honeycomb also boasts high-performance mechanisms for presenting 2-D and 3-D graphics. For a good overview of what Honeycomb is capable of, check out this video.

Honeycomb架构允许设计师和开发人员运用丰富多彩的动画效果。根据Android 3.0 要点页，“动画可以创建淡出效果、不同状态间的运动、循环播放一张动态图片、或者退出动画、改变颜色以及更多。”Honeycomb还拥有展现2D或3D图像的高性能机制。为了更好地了解Honeycomb性能的大体情况，看一下这段视频。

Learning from Example从例子中学习

Android tablet apps are still a relatively new space, and some brands are only beginning to test the waters. Below is a list of apps for inspiration. You can download any of them from the Android Market orAmazon.

Android平板电脑仍是一个相对较新的领域，有些品牌只是刚刚开始试水。下面是一系列为激发灵感而收集的应用程序。你可以从 Android Market 或者Amazon中下载其中的任何一款。

YouTube
Naturally, Google’s YouTube app for Honeycomb is exemplary, showcasing all of the design patterns and UI elements discussed above. To get a good feel for Honeycomb, download this app first and take it for a spin.

当然，Google在Honeycomb平台上的youtube应用程序堪称典范，展示了上文所有讨论到的设计样式及用户界面元素。为了更好的体验Honeycomb，请先下载这款应用程序并运行它。

CNN
The CNN app makes good use of touch gestures (including flicking to view more content), the split view and fonts! A custom font (Rockwell) is used for news headlines.

CNN（美国有线电视新闻网）应用程序很好地运用了触控手势（包括滑动来浏览更多内容）、分割视图和字体！一种自定义的字体（Rockwell）应用于新闻标题。

CNBC
Another good news app, with animation (the stock ticker tape) and rich graphics and gradients. CNBC has one of the most visually compelling apps.

CNBC（美国全国广播公司财经频道）是另一个优秀的新闻应用程序，包括动画（股票行情自动轮播）以及丰富的图表和渐变。CNBC是最引人入胜的应用程序之一。

Plume
With its three-column layout, Plume is a good example of how layouts might need to be changed dramatically from landscape to portrait views.

通过它的三栏布局，Plume很好的示范了横向视图变为纵向视图的时候布局需要如何显著地改变。

FlightTrack
A data-heavy app done elegantly. Includes nice maps, subtle animation and standard Honeycomb UI elements.

一款设计优雅的信息量巨大的应用程序。包括精致的地图，微妙的动画以及标准的Honeycomb 用户界面元素。

Pulse
What else can you say: it’s Pulse for Android tablets! But comparing the Android and iPad versions, which are identical in almost every way, is still fun anyway.

你还可以说: Pulse是为Android平板电脑而生!但是对比Android和iPad版本，它们几乎在各个方面都是相同的；无论如何，它仍然很有趣。

WeatherBug
This was one of the first Honeycomb apps in the Android Market. It makes good use of maps and of the holographic UI for showing pictures from weather cams.

它曾是是Android Market中最早的Honeycomb应用程序之一。它很好地利用了地图和全息用户界面来展示来自于天气凸轮的图片。

Kindle
Kindle pretty much sticks to the book in using design patterns and Honeycomb UI elements. The outcome is elegant, while staying true to Android’s best practices.

Kindle很好地坚持使用了设计模式和Honeycomb用户界面元素。结果是优雅的，也是坚守Android的最佳实践。