沒(méi)有什么時(shí)候比現(xiàn)在更需要設(shè)計(jì)師去為各種各樣的移動(dòng)設(shè)備營(yíng)造體驗(yàn)了。隨著平板電腦被不斷接受，我們已經(jīng)步入“后PC時(shí)代”，公司會(huì)利用平板電腦的用戶體驗(yàn)質(zhì)量來(lái)爭(zhēng)奪用戶的注意力。設(shè)計(jì)成功的Android平板電腦應(yīng)用程序，不但需要一個(gè)很棒的概念來(lái)鼓勵(lì)用戶下載、使用和保留，還需要一種使Android用戶很直觀的發(fā)現(xiàn)并適應(yīng)使用環(huán)境的用戶體驗(yàn)。

接下來(lái)通過(guò)了解ipad iOS用戶界面與Android 3.x “Honeycomb 用戶界面 設(shè)計(jì)規(guī)范和元素之間的不同，可以幫助設(shè)計(jì)師熟悉Android平板電腦應(yīng)用程序設(shè)計(jì)。我們還將分析Honeycomb的設(shè)計(jì)模式和布局策略，然后查看一些那里面非常好的Android平板電腦應(yīng)用程序。

注意，雖然智能手機(jī)上Android 2.x應(yīng)用程序也可以在平板電腦上運(yùn)行，Android 3.0 Honeycomb 系統(tǒng)是專門為平板電腦設(shè)計(jì)和推出的。Future updates 承諾將Honeycomb的特性植入智能手機(jī)設(shè)備中，并使它更容易在多種多樣的屏幕尺寸上設(shè)計(jì)和構(gòu)建。

對(duì)于我們大多數(shù)人，我們第一次接觸平板電腦是通過(guò)ipad. 正因?yàn)檫@個(gè)原因，開(kāi)始比較二者的用戶界面是合理的。通過(guò)比較，我們可以組織整理我們已經(jīng)了解的平板電腦的知識(shí)，并去關(guān)注二者的關(guān)鍵不同點(diǎn)，這樣我們就可以滿足Android用戶獨(dú)特的用戶界面要求。在將已存在于iPad上的應(yīng)用程序轉(zhuǎn)換到Android平板電腦上的時(shí)候，這不但可以使我們速度更快，而且變得非常重要。

只要做得像iPad就行，對(duì)嗎？

雖然Android 平板電腦和iPad的體驗(yàn)方面有很多的相似之處（觸控手勢(shì)、應(yīng)用程序啟動(dòng)圖標(biāo)、情態(tài)表達(dá)等），設(shè)計(jì)師在作出假設(shè)和繪制屏幕流之前應(yīng)該熟知二者的差異。

屏幕尺寸和方向

這兩個(gè)平臺(tái)之間最大的不同就是外形尺寸。iPad的布局尺寸是768×1024物理像素，并且iPad將縱向顯示方向作為它默認(rèn)的查看方向。

而Android平板電腦，由于擁有眾多的設(shè)備生產(chǎn)廠家，稍微有一些復(fù)雜。 概括地講，有7英寸和10英寸的Android平板電腦屏幕尺寸（自左上角至右下角的對(duì)角線長(zhǎng)度），以及介于二者之間的尺寸。然而，大多數(shù)平板電腦是10英寸左右。

換算成像素，這意味著什么？一個(gè)不錯(cuò)的布局基線是1280×752像素（不包括系統(tǒng)欄），基于10英寸的屏幕尺寸大小并且將橫向（而不是縱向）作為默認(rèn)的方向。如同在iPad上一樣，Android上的內(nèi)容可以在橫向和縱向兩個(gè)方向上查閱，但橫向模式往往更受人喜歡。

左圖是在典型的10英寸Android平板電腦上的縱向視圖，右圖是在iPad上的。

左圖是在典型的10英寸Android平板電腦上的橫向視圖，右圖是在iPad上的。

然而，對(duì)于Android來(lái)說(shuō)，屏幕尺寸只是差異中的一半因素。Android平板電腦在“屏幕密度”（屏幕特定區(qū)域的像素?cái)?shù)量）方面也有所不同。不要關(guān)注太多細(xì)節(jié)，設(shè)計(jì)師只能為三種不同的屏幕密度準(zhǔn)備所有的生產(chǎn)型備用位圖，放大每個(gè)位圖到原大小的1.5倍或2倍。所以，被設(shè)置為100×100像素大小的位圖應(yīng)該也要有150 × 150 和 200 × 200大小的副本。通過(guò)制作三種縮放尺寸的位圖，你可以將你的位圖轉(zhuǎn)換成為中、高、超高密度的平板電腦屏幕而不會(huì)損害圖片的質(zhì)量。

更多關(guān)于Android設(shè)備屏幕密度和圖像準(zhǔn)備方面的信息，請(qǐng)參考我之前的文章《designing for Android》

系統(tǒng)欄

雖然iOS平臺(tái)將系統(tǒng)欄做的盡量小，但是Android Honeycomb 擴(kuò)大了系統(tǒng)欄的尺寸并包含通知和軟導(dǎo)航按鈕。其中包括返回按鈕、主頁(yè)按鈕和最新應(yīng)用程序按鈕。

Android Honeycomb系統(tǒng)欄

Android Honeycomb的系統(tǒng)欄和按鈕在屏幕底部始終存在，無(wú)論開(kāi)啟的是什么應(yīng)用程序。你可以把它當(dāng)作永久性的UI固定裝置。唯一的例外是“關(guān)燈”模式，它是將系統(tǒng)欄變暗來(lái)顯示沉浸式內(nèi)容，例如視頻和游戲。

返回按鈕

雖然Honeycomb笨重、永久存在的系統(tǒng)欄對(duì)設(shè)計(jì)師來(lái)說(shuō)可能是一個(gè)阻礙，但它確實(shí)解放了在iPad應(yīng)用程序中通常被返回鍵占據(jù)的固定位置。Honeycomb系統(tǒng)欄中的返回鍵在世界上所有的應(yīng)用程序中都存在。

系統(tǒng)欄中的返回鍵

操作欄

兩個(gè)平臺(tái)之間大多數(shù)用戶界面的不同點(diǎn)在于其頂部的操作欄。Android 為操作欄元素的具體布置和具體的視覺(jué)形式提供了建議，包括icon或logo的位置、導(dǎo)航（例如下拉菜單或標(biāo)簽）及常用操作。這是Android Honeycomb系統(tǒng)應(yīng)用程序最統(tǒng)一的設(shè)計(jì)模式之一，因而在嘗試使用自定義設(shè)置或類似iPad的東西之前，讓你自己熟悉此操作欄是值得的。之后將對(duì)這個(gè)普遍存在的操作欄做更多的分析。

操作欄

控件

能使iPad用戶感到新穎的將是Android的控件。顧名思義，控件主要是小的通知欄和快捷使用工具，用戶可以將其設(shè)置出現(xiàn)在啟動(dòng)屏幕中?？丶梢员辉O(shè)計(jì)為堆棧視圖、網(wǎng)格視圖和列表視圖，在Android 3.1中它們現(xiàn)在可以調(diào)整大小。

啟動(dòng)屏幕中的幾個(gè)控件

通知

iOS 的通知系統(tǒng)將簡(jiǎn)單的提醒推送到啟動(dòng)屏幕中，而Honeycomb是在屏幕的右下角位置彈出（我們通常稱它們?yōu)閠oast）豐富的通知,非常像Mac OS X中的Growl.通知的自定義布局可以是圖標(biāo)、滾動(dòng)文本或可操作按鈕中的任何形式。

Android 上的通知

設(shè)置

iPad應(yīng)用程序中的設(shè)置通常是以彈出窗口呈現(xiàn)，在點(diǎn)擊“i”按鈕后觸發(fā)；而且設(shè)置項(xiàng)被分解成易于視覺(jué)識(shí)別的諸多表格。Honeycomb系統(tǒng)有不同的規(guī)范。它看起來(lái)更像iOS的“常規(guī)設(shè)置”屏，用戶可以在左側(cè)進(jìn)行類型導(dǎo)航，在右側(cè)查看詳情。這是Honeycomb系統(tǒng)上呈現(xiàn)多設(shè)置項(xiàng)的首選（也是更雅致的）一種方式。

日歷應(yīng)用程序中的設(shè)置設(shè)計(jì)模式

UI元素

如同大家所想的那樣，Android系統(tǒng)竭盡全力把一切做的與它的競(jìng)爭(zhēng)對(duì)手相反（這叫做差異化?。?。Honeycomb有其自己的UI規(guī)范，并且它現(xiàn)在有一種新的“全息UI”視覺(jué)語(yǔ)言，用于諸如選擇時(shí)間日期、選擇一個(gè)選項(xiàng)，設(shè)置音量等日常操作中。了解這種UI語(yǔ)言對(duì)創(chuàng)建屏幕流和設(shè)計(jì)布局至關(guān)重要。

UI元素的采樣，來(lái)自Google I/O 2011演示文稿的一頁(yè)幻燈片

字體

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

Android多少種？只有3種。

是的，它們是?Droid Sans, Droid Serif and Droid Sans Mono.然而有積極的一方面。雖然平臺(tái)只有這三種字體，但開(kāi)發(fā)人員可以自由地將其他字體綁定他們的應(yīng)用程序。

什么相同？

對(duì)iPad已經(jīng)熟悉的設(shè)計(jì)師是幸運(yùn)的，這兩個(gè)平臺(tái)有一些相似之處。

觸控手勢(shì)

點(diǎn)擊、雙擊、滑動(dòng)、拖動(dòng)、收縮、旋轉(zhuǎn)和任意滾動(dòng)。

拆分視圖和多窗格用戶界面

拆分視圖是平板電腦中最常見(jiàn)的布局之一。它由兩個(gè)并排的窗格組成。當(dāng)然，你可以為更加復(fù)雜的布局增加窗格。

Ustream的拆分視圖，類別選項(xiàng)在左，內(nèi)容在右。

嵌入式多媒體

兩個(gè)平臺(tái)都允許嵌入音頻、視頻和地圖。

Youtube 應(yīng)用程序，具有嵌入式視頻播放器。

剪貼板

支持應(yīng)用程序內(nèi)外的信息復(fù)制和粘貼。

拖放

兩個(gè)平臺(tái)都有拖放功能。

Gmail應(yīng)用程序中的拖放特性

設(shè)計(jì)模式

Honeycomb沿用了很多在Android 2.0中引入的設(shè)計(jì)模式，并擴(kuò)充了它們。如果你對(duì)設(shè)計(jì)模式不熟悉，正如Android中定義的，它們是一種“應(yīng)對(duì)反復(fù)出現(xiàn)的問(wèn)題的一般性解決方案”。設(shè)計(jì)模式是Android維護(hù)者設(shè)計(jì)的關(guān)鍵的用戶界面規(guī)范，意圖是助于用戶體驗(yàn)的一致性、給予設(shè)計(jì)師和開(kāi)發(fā)人員一個(gè)工作模板。它們是可以定制的，所以沒(méi)有必要擔(dān)憂。

如前所述，操作欄是Android 用戶界面中最為突出的組成部分，也是這里的重點(diǎn)所在。

日歷應(yīng)用程序中被高亮顯示的操作欄

圖標(biāo)或標(biāo)志

圖標(biāo)或標(biāo)志在操作欄的最左邊。它是可操作的；點(diǎn)擊后用戶被帶到應(yīng)用程序的主頁(yè)屏幕。

日歷應(yīng)用程序的圖標(biāo)

導(dǎo)航

下面，我們找了幾種典型的導(dǎo)航形式，下拉菜單形式或標(biāo)簽菜單形式。Honeycomb使用一個(gè)三角圖形指示下拉菜單，并為標(biāo)簽提供了一系列的下劃線；下劃線通常占據(jù)大多數(shù)操作欄的自身空間。

左箭頭也可能出現(xiàn)在圖標(biāo)或標(biāo)志抑或標(biāo)簽的左側(cè)，用作返回導(dǎo)航或者取消主要操作。

三種不同形式的操作欄導(dǎo)航

常用操作

常用操作，顧名思義，就是給用戶類似搜索、分享和溢出菜單的東西。它們總是被放置在操作欄的右側(cè)，遠(yuǎn)離任何標(biāo)簽。

日歷應(yīng)用程序中的常用操作

溢出菜單

溢出菜單是常見(jiàn)操作組的一部分，有時(shí)候會(huì)被一根垂直的線分隔開(kāi)。這個(gè)位置放置多種菜單項(xiàng)，比如設(shè)置、幫助和反饋。

一個(gè)溢出菜單

搜索

搜索也是常見(jiàn)操作組的一部分。搜索的獨(dú)特性在于它的展開(kāi)和收縮動(dòng)作。點(diǎn)擊搜索圖標(biāo)后搜索框展開(kāi)讓你輸入查詢關(guān)鍵詞。點(diǎn)擊“×”取消搜索，此時(shí)搜索框收縮，又變成單個(gè)按鈕的狀態(tài)。這是在有很多操作鍵或圖標(biāo)需要展示的情況下節(jié)約顯示空間的一種方法。

搜索功能收縮狀態(tài)（上方的圖）和展開(kāi)狀態(tài)（下方的圖）。點(diǎn)擊放大鏡展開(kāi)搜索框，點(diǎn)擊“×”關(guān)閉搜索框。

語(yǔ)境操作

當(dāng)某個(gè)項(xiàng)目被選中的時(shí)候，語(yǔ)境操作會(huì)改變操作欄的格式，展示出的選項(xiàng)不同于其他項(xiàng)目。例如，照片應(yīng)用程序正在展示縮略圖，一旦一張圖片被選中，操作欄就可能發(fā)生變化，為編輯這張圖片提供語(yǔ)境操作。

用戶可以點(diǎn)擊“取消”或操作欄中的“完成”來(lái)退出語(yǔ)境操作欄。

Gmail 應(yīng)用程序中，點(diǎn)擊和選中郵件的時(shí)候就會(huì)觸發(fā)語(yǔ)境操作欄

平板電腦布局策略

使用碎片和多窗格視圖

Honeycomb設(shè)計(jì)的構(gòu)建模塊是“碎片”.碎片是自成體系的布局組成部分，它可以根據(jù)屏幕的方向和尺寸改變自身的尺寸和布局位置。為多種尺寸外觀而設(shè)計(jì)這個(gè)問(wèn)題的進(jìn)一步解決方法是：給設(shè)計(jì)師和開(kāi)發(fā)人員一種途徑使他們的屏幕布局組成部分具有彈性和堆疊性，并取決于運(yùn)行應(yīng)用程序的設(shè)備屏幕限制。屏幕組成部分可以被拉伸、堆疊、擴(kuò)展或者收縮、展示或者隱藏。

碎片架構(gòu)給了設(shè)計(jì)者和開(kāi)發(fā)者幾種選擇，在跨越多種屏幕尺寸和方向的情形下維護(hù)他們的布局。

是什么讓碎片變得如此特別？通過(guò)兼容性庫(kù)，開(kāi)發(fā)者可以將這種功能帶入到1.6版以上的Android智能手機(jī)中，使他們能夠使用一種尺寸適配多種設(shè)備的策略來(lái)創(chuàng)建應(yīng)用程序。簡(jiǎn)言之，它能夠使設(shè)計(jì)師和開(kāi)發(fā)人員只開(kāi)發(fā)一個(gè)應(yīng)用程序而適配所有規(guī)格的設(shè)備。

雖然碎片可能是一個(gè)更多的被開(kāi)發(fā)人員使用的術(shù)語(yǔ)，但設(shè)計(jì)師仍然應(yīng)該對(duì)壓縮的內(nèi)容如何任意拉伸、堆疊、擴(kuò)展和隱藏有一個(gè)基本的了解。

最常見(jiàn)的碎片排布方式是分割視圖。這種布局在新聞應(yīng)用程序和電子郵件客戶端中較為常見(jiàn)，通常列表在較窄的一欄中呈現(xiàn)，詳情視圖在較寬的一欄中呈現(xiàn)。

USA Today 使用的分割視圖

呈現(xiàn)分割視圖的另一種方式是在它的一側(cè)轉(zhuǎn)換方向。這種情況下，側(cè)邊的列表碎片變成了輪播，支持水平方向上的導(dǎo)航而不再是垂直方向上的。

方向策略

碎片是將一種設(shè)計(jì)應(yīng)用到多個(gè)屏幕尺寸上的好辦法，同時(shí)對(duì)設(shè)定方向策略亦是非常有用的。你的屏幕設(shè)計(jì)在橫向視圖時(shí)也許看起來(lái)很不錯(cuò)，但面對(duì)狹窄的縱向視圖包含三欄的情況的時(shí)候你要做些什么呢？你可以再次選擇拉伸、堆疊或者隱藏內(nèi)容?？梢园阉槠胂蟪梢欢芽缮煺沟钠磮D，你可以根據(jù)需要四處移動(dòng)、塑造或者刪除它。

關(guān)于動(dòng)畫

Honeycomb架構(gòu)允許設(shè)計(jì)師和開(kāi)發(fā)人員運(yùn)用豐富多彩的動(dòng)畫效果。根據(jù)Android 3.0 要點(diǎn) 頁(yè)，“動(dòng)畫可以創(chuàng)建淡出效果、不同狀態(tài)間的運(yùn)動(dòng)、循環(huán)播放一張動(dòng)態(tài)圖片、或者退出動(dòng)畫、改變顏色以及更多?！盚oneycomb還擁有展現(xiàn)2D或3D圖像的高性能機(jī)制。為了更好地了解Honeycomb性能的大體情況，看一下這段視頻。

從例子中學(xué)習(xí)

Android平板電腦仍是一個(gè)相對(duì)較新的領(lǐng)域，有些品牌只是剛剛開(kāi)始試水。下面是一系列為激發(fā)靈感而收集的應(yīng)用程序。你可以從?Android Market 或者Amazon中下載其中的任何一款。

YouTube

當(dāng)然，Google在Honeycomb平臺(tái)上的youtube應(yīng)用程序堪稱典范，展示了上文所有討論到的設(shè)計(jì)樣式及用戶界面元素。為了更好的體驗(yàn)Honeycomb，請(qǐng)先下載這款應(yīng)用程序并運(yùn)行它。

CNN

CNN（美國(guó)有線電視新聞網(wǎng)）應(yīng)用程序很好地運(yùn)用了觸控手勢(shì)（包括滑動(dòng)來(lái)瀏覽更多內(nèi)容）、分割視圖和字體！一種自定義的字體（Rockwell）應(yīng)用于新聞標(biāo)題。

CNBC

CNBC（美國(guó)全國(guó)廣播公司財(cái)經(jīng)頻道）是另一個(gè)優(yōu)秀的新聞應(yīng)用程序，包括動(dòng)畫（股票行情自動(dòng)輪播）以及豐富的圖表和漸變。CNBC是最引人入勝的應(yīng)用程序之一。

?

Plume

通過(guò)它的三欄布局，Plume很好的示范了橫向視圖變?yōu)榭v向視圖的時(shí)候布局需要如何顯著地改變。

?

FlightTrack

一款設(shè)計(jì)優(yōu)雅的信息量巨大的應(yīng)用程序。包括精致的地圖，微妙的動(dòng)畫以及標(biāo)準(zhǔn)的Honeycomb 用戶界面元素。

?

Pulse

你還可以說(shuō): Pulse是為Android平板電腦而生!但是對(duì)比Android和iPad版本，它們幾乎在各個(gè)方面都是相同的；無(wú)論如何，它仍然很有趣。

?

WeatherBug

它曾是是Android Market中最早的Honeycomb應(yīng)用程序之一。它很好地利用了地圖和全息用戶界面來(lái)展示來(lái)自于天氣凸輪的圖片。

?

Kindle

Kindle很好地堅(jiān)持使用了設(shè)計(jì)模式和Honeycomb用戶界面元素。結(jié)果是優(yōu)雅的，也是堅(jiān)守Android的最佳實(shí)踐。

佳作

• IMDb
• News360
• USA Today
• AccuWeather
• Ustream
• Google Earth
• Think Space

在線資源

視頻

Android手機(jī)與平板電腦的用戶界面設(shè)計(jì)及實(shí)現(xiàn)，Google I/O 2011

Android 3.0 Honeycomb 動(dòng)畫演示

演示文檔

Android手機(jī)與平板電腦的用戶界面設(shè)計(jì)及實(shí)現(xiàn)，Google I/O 2011(PDF)

博客

平板電腦用戶界面模式

Android 開(kāi)發(fā)者

支持多屏幕

圖標(biāo)設(shè)計(jì)

Android 3.0 平臺(tái)要點(diǎn)

完

[譯者注:本人英語(yǔ)水平實(shí)在有限，而文章專業(yè)詞匯又過(guò)多，翻譯失實(shí)之處請(qǐng)指正。謝謝！]

源地址：http://thinkingrain.lofte……st/3f64_349ce