Android 3.0 Honeycomb 為平板電腦引入專屬設計語言「全息 UI」與核心佈局單元「Fragment（碎片）」。不同於 iPad 的固定畫布，Android 平板面臨極端碎片化：7-10 英寸、16:9/4:3/16:10、橫豎自由切換。本文系統解讀 Google I/O 2011 官方設計指南，構建跨設備適配的佈局策略知識庫。

核心構建塊：Fragment（碎片）

Fragment 是自包含的佈局模組，可根據屏幕尺寸/方向動態調整尺寸、位置、顯隱、堆疊、拉伸。兼容庫將此能力下放至 Android 1.6+，實現「一套代碼，適配所有規格」的工程理想。設計師須理解：內容模塊如何像彈性拼圖般自由組合、重組、隱藏。

最常見模式：分割視圖

列表在窄欄，詳情在寬欄——新聞客戶端、郵箱的標準範式。USA Today 典型應用。

USA Today 分割視圖應用

變體：側邊列表轉輪播

橫屏時側邊列表；豎屏時轉為頂部水平輪播，支持水平導航而非垂直滾動。

方向策略：碎片的四種變身術

面對狹窄豎屏三欄困境，碎片提供四種策略任意組合：

1. 拉伸：寬度自適應填充可用空間
2. 堆疊：多欄垂直堆疊為單欄
3. 擴展/收縮：展開/摺疊次要內容
4. 顯示/隱藏：輔助面板按需彈出（Popover/側滑抽屉）

將碎片視為可伸縮、可移動、可增刪的拼圖塊，根據屏幕約束自由組合。

動畫系統：豐富動效的原生支持

Honeycomb 動畫框架支持：淡入淡出、狀態間位移、循環幀動畫、退出動畫、顏色漸變、2D/3D 圖形高性能渲染。建議觀看 Google I/O 2011 動畫演示視頻體驗性能上限。

標杆應用解析：向最好的學習

應用	亮點
YouTube	全息 UI 全元素展示、分割視圖、嵌入播放器、手勢操作——Honeycomb 教科書級參考
CNN	滑動手勢瀏覽、分割視圖、自定義字體 Rockwell 用於標題
CNBC	股票跑馬燈動畫、豐富圖表漸變、高資訊密度下的視覺秩序
Plume	三欄橫屏 → 豎屏劇烈佈局重組的教科書級演示
FlightTrack	精致地圖、微妙動畫、標準全息 UI 元素、巨大信息量的優雅承載
Pulse	Android/iPad 體驗高度一致，跨平台設計一致性標桿
WeatherBug	早期 Honeycomb 應用，地圖+全息 UI+天氣攝像頭圖片融合
Kindle	嚴守設計模式與全息 UI 規範，優雅且最佳實踐導向

佳作推薦

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

在線資源庫

• 視頻：Google I/O 2011「Android 手機與平板 UI 設計與實現」、Honeycomb 動畫演示
• 文檔：Google I/O 2011 投影片 PDF、Android Developers「支持多屏幕」「圖標設計」「Android 3.0 平台要點」
• 博客：Tablet UI Patterns

譯者注：英語水平有限，專業術語翻譯不當之處請指正。系列文章含《做得像 iPad 就行嗎？》《屏幕流創建與設計佈局》。

文章來源：一葉苦雨