萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> Android平板電腦設計:平板電腦布局策略

Android平板電腦設計:平板電腦布局策略

平板電腦布局策略

使用碎片和多窗格視圖

Honeycomb設計的構建模塊是“碎片”。 碎片是自成體系的布局組成部分,它可以根據屏幕的方向和尺寸改變自身的尺寸和布局位置。為多種尺寸外觀而設計這個問題的進一步解決方法是:給設計師和開發 人員一種途徑使他們的屏幕布局組成部分具有彈性和堆疊性,並取決於運行應用程序的設備屏幕限制。屏幕組成部分可以被拉伸、堆疊、擴展或者收縮、展示或者隱 藏。

碎片架構給了設計者和開發者幾種選擇,在跨越多種屏幕尺寸和方向的情形下維護他們的布局。

是什麼讓碎片變得如此特別?通過兼容性庫,開發者可以將這種功能帶入到1.6版以上的Android智能手機中,使他們能夠使用一種尺寸適配多種設備的策略來創建應用程序。簡言之,它能夠使設計師和開發人員只開發一個應用程序而適配所有規格的設備。

雖然碎片可能是一個更多的被開發人員使用的術語,但設計師仍然應該對壓縮的內容如何任意拉伸、堆疊、擴展和隱藏有一個基本的了解。

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

USA Today 使用的分割視圖

呈現分割視圖的另一種方式是在它的一側轉換方向。這種情況下,側邊的列表碎片變成了輪播,支持水平方向上的導航而不再是垂直方向上的。

方向策略

碎片是將一種設計應用到多個屏幕尺寸上的好辦法,同時對設定方向策略亦是非常有用的。你的屏幕設計在橫向視圖時也許看起來很不錯,但面對狹窄的縱向 視圖包含三欄的情況的時候你要做些什麼呢?你可以再次選擇拉伸、堆疊或者隱藏內容。可以把碎片想象成一堆可伸展的拼圖,你可以根據需要四處移動、塑造或者 刪除它。

關於動畫

Honeycomb架構允許設計師和開發人員運用豐富多彩的動畫效果。根據Android 3.0 要點 頁,“動畫可以創建淡出效果、不同狀態間的運動、循環播放一張動態圖片、或者退出動畫、改變顏色以及更多。”Honeycomb還擁有展現2D或3D圖像的高性能機制。為了更好地了解Honeycomb性能的大體情況,看一下這段視頻。

從例子中學習

Android平板電腦仍是一個相對較新的領域,有些品牌只是剛剛開始試水。下面是一系列為激發靈感而收集的應用程序。你可以從 Android Market 或者Amazon中下載其中的任何一款。

YouTube

當然,Google在Honeycomb平台上的youtube應用程序堪稱典范,展示了上文所有討論到的設計樣式及用戶界面元素。為了更好的體驗Honeycomb,請先下載這款應用程序並運行它。

CNN

CNN(美國有線電視新聞網)應用程序很好地運用了觸控手勢(包括滑動來浏覽更多內容)、分割視圖和字體!一種自定義的字體(Rockwell)應用於新聞標題。

CNBC

CNBC(美國全國廣播公司財經頻道)是另一個優秀的新聞應用程序,包括動畫(股票行情自動輪播)以及豐富的圖表和漸變。CNBC是最引人入勝的應用程序之一。

Plume

通過它的三欄布局,Plume很好的示范了橫向視圖變為縱向視圖的時候布局需要如何顯著地改變。

FlightTrack

一款設計優雅的信息量巨大的應用程序。包括精致的地圖,微妙的動畫以及標准的Honeycomb 用戶界面元素。

Pulse

你還可以說: Pulse是為Android平板電腦而生!但是對比Android和iPad版本,它們幾乎在各個方面都是相同的;無論如何,它仍然很有趣。

WeatherBug

它曾是是Android Market中最早的Honeycomb應用程序之一。它很好地利用了地圖和全息用戶界面來展示來自於天氣凸輪的圖片。

Kindle

Kindle很好地堅持使用了設計模式和Honeycomb用戶界面元素。結果是優雅的,也是堅守Android的最佳實踐。

佳作

IMDb

News360

USA Today

AccuWeather

Ustream

Google Earth

Think Space

在線資源

視頻

n Android手機與平板電腦的用戶界面設計及實現,Google I/O 2011

n Android 3.0 Honeycomb 動畫演示

演示文檔

Android手機與平板電腦的用戶界面設計及實現,Google I/O 2011(PDF)

博客

平板電腦用戶界面模式

Android 開發者

支持多屏幕

圖標設計

Android 3.0 平台要點

[譯者注:本人英語水平實在有限,而文章專業詞匯又過多,翻譯失實之處請指正。謝謝!]

        系列文章:

        Android平板電腦設計:做得像iPad就行嗎?

       Android平板電腦設計:屏幕流創建與設計布

文章來源:一葉苦雨

copyright © 萬盛學電腦網 all rights reserved