從一開始就針對大螢幕設計

Android 裝置有多種板型規格,例如手機、平板電腦、折疊式裝置、ChromeOS 裝置,且有多種螢幕大小。Android 支援多種顯示模式,包括多視窗模式、多螢幕、任意形式和子母畫面。折疊式裝置可能處於各種狀態或型態,例如桌面或書籍。

開始設計應用程式時,建議您考量應用程式的不同用途。例如:

  • 大螢幕裝置提供使用者更多空間,以不同方式與媒體應用程式內容互動。

  • 使用者可以透過多視窗設定觀看影片時執行多工處理,或利用大螢幕在擷取圖片後套用更複雜的編輯。

  • 使用者可能會使用平板電腦與視訊通話保持聯繫,也能看到親朋好友的詳細資料。應用程式可以在自訂播放重疊元素中顯示更豐富的標題或場景背景資訊,或在畫面上顯示更多控制選項。

  • 瀏覽檢視畫面中的輪轉介面可以呈現更多元的視覺效果,或者在媒體應用程式旁一併提供可瀏覽的動態饋給,方便使用者瀏覽內容,持續吸引使用者的注意力。

請注意,您的媒體應用程式是在標準手機、摺疊式裝置、平板電腦和 ChromeOS 裝置上執行的程式碼,因此在應用程式開發之初就應該設計大螢幕裝置。如需詳細資訊和圖像範例,請參閱「大螢幕圖片庫」。

將媒體應用程式設為預設回應

針對手機、平板電腦、折疊式裝置和 ChromeOS 裝置調整應用程式版面配置,避免媒體應用程式中的使用者體驗不佳。

應用程式應根據不同的螢幕大小、方向和板型規格做出回應。自動調整式版面配置會配合可用的畫面空間而變化。詳情請參閱「支援不同的螢幕大小」。

根據指南進行設計

核心應用程式品質是所有 Android 應用程式的基礎,包括螢幕尺寸、裝置型態或其他與裝置特有的考量。開始設計大螢幕前,您的應用程式應符合這些基本需求。詳情請參閱核心應用程式品質相關說明。

無論裝置板型規格、螢幕大小、顯示模式或型態為何,應用程式都應提供優質的使用者體驗,因此請根據以下第 1、2 和 3 層指南設計應用程式。

這些規範定義了適用於大部分 Android 應用程式的所有品質規定。

第 3 級:

在這個基本層級,應用程式仍必須符合 UI 和圖形規定。您的應用程式可供大螢幕使用,且使用者可以完成重要工作流程,但使用者體驗不佳。

應用程式版面配置可能並不理想,但可以在全螢幕或多視窗模式下執行完整視窗。系統不會加上黑邊,且無法在相容模式下執行。應用程式可為外部輸入裝置提供基本支援,包括鍵盤、滑鼠和觸控板。詳情請參閱「可供大螢幕使用」。

第 2 級:

在此,應用程式會針對所有螢幕大小和裝置設定實作版面配置最佳化,並強化對外部輸入裝置的支援。詳情請參閱「大螢幕最佳化」。

第 1 級:

這是最高等級的支援,因為其中具有進階功能和功能,因此能為使用者提供最優質的應用程式體驗。

在適用情況下,應用程式支援多工處理、摺疊式裝置型態、拖曳和觸控筆輸入。在這個階段,應用程式會有高度差異,因此請特別留意多工處理和折疊式裝置型態等相關規範。詳情請參閱「大螢幕差異化」。

最佳化版面配置

充分利用大螢幕的更多空間,而不加上黑邊 (因為限制方向) 或延展模式。針對媒體和社群媒體最佳化應用程式版面配置,不僅能擴大應用程式的觸及範圍,還能在所有大螢幕板型規格 (平板電腦、折疊式裝置和 ChromeOS 裝置) 上提供更優質的使用者體驗,並支援所有手機尺寸。

導覽邊欄和導覽匣元件提供現成的導覽功能,讓 UI 更易於使用和控制。這些元件還能透過將主要導覽目的地放置在近距離接觸的位置,同時佔用最少的螢幕空間,使標準版面配置 (清單詳細資料、動態饋給和輔助窗格) 相輔相成。

媒體版面配置

針對清單/詳細資料、動態饋給和輔助窗格實作媒體專屬版面配置,讓應用程式更易於使用。如要瞭解 MDX、Flutter 和 Compose 版面配置,請參閱版面配置資源

  • 清單詳細資料:使用互動式媒體瀏覽器設計應用程式,讓使用者在觀看或聆聽時瀏覽不同媒體。媒體標題會並排顯示 正在播放的影片或音訊檔案。如果裝置螢幕方向改變,清單詳細資料版面配置會做出回應,以保留應用程式狀態。詳情請參閱「清單詳細資料版面配置」。

  • 動態消息:動態消息版面配置會在可設定格線中,排列對等的內容元素,以便快速檢視大量內容,例如應用程式中的音樂動態或應用程式中的電影和電視節目。詳情請參閱「動態消息版面配置」。

  • 輔助窗格:透過主要和次要顯示區域,應用程式可嵌入輔助窗格,提供背景資訊、關聯性或參考資訊,例如顯示類似標題、已發布評論的捲動清單、相同藝人或演員的其他作品。詳情請參閱「輔助窗格版面配置」。

如需一系列精選媒體版面配置,請參閱媒體庫

社群媒體版面配置

大螢幕讓社群媒體使用者有更多工作空間進行創作、多工處理、在不同應用程式間拖曳內容,以及分享。透過小螢幕裝置無法實現的獨特功能,大螢幕媒體應用程式可以利用清單/詳細資料、動態饋給和輔助窗格版面配置。

  • 清單詳細資料:適合訊息應用程式、聯絡人管理員或檔案瀏覽器使用。舉例來說,您的應用程式可以並排顯示對話清單,並提供詳細資料,讓您隨時掌握最新訊息。詳情請參閱「清單詳細資料版面配置」。

  • 動態消息:這種版面配置樣式中的常見元件為資訊卡和清單。例如,以靈活的格線格式建立貼文拼貼,或使用大小和位置吸引讀者關注主打貼文。使用者可以快速查看大量內容詳情請參閱「動態消息版面配置」。

  • 輔助窗格:搜尋和參考應用程式或效率提升應用程式可以利用這種版面配置樣式。能讓使用者使用內容創作工具。舉例來說,應用程式可讓使用者調整設定、存取調色盤、套用效果,以及立即查看變更。詳情請參閱「輔助窗格版面配置」

如需瞭解一系列精選社群媒體版面配置,請參閱社群媒體圖片庫頁面。

大螢幕媒體應用程式的最佳做法

運用大螢幕的最佳做法,可避免應用程式進行不必要的重新處理,而且一開始還能讓更多裝置的使用者更容易使用應用程式,特別是在螢幕方向、鍵盤快速鍵、相機預覽支援和摺疊式裝置型態方面。

調整螢幕方向和調整大小

如果媒體應用程式宣告方向和大小調整限制,Android 會啟用相容性模式。儘管相容性模式可確保應用程式運作合理,但可用性會大幅降低,使用者體驗也會受到影響。

舉例來說,如果應用程式位於平板電腦,平板電腦會做為橫向方向的平板電腦座架。如果應用程式限制為直向,就會產生上下黑邊,對使用者而言不理想。應用程式應讓使用者採用偏好的方向,因此請在設計中善用大螢幕的可用尺寸。

任何方向限制都會降低使用者與內容互動或耗用媒體的方式,進而限制應用程式的使用。變更螢幕方向可能會影響大小調整功能,但調整大小不一定會改變方向。

鍵盤快速鍵

在大螢幕上,啟動、停止、暫停、倒轉和快轉等實體鍵盤較可能使用鍵盤快速鍵,讓使用者在鍵盤上享有一致的使用者體驗。

使用者預期媒體應用程式具有這些功能。如要減少使用者操作不便,建議您使用實體鍵盤測試應用程式。這有助於您在設計開始時注意,並在應用程式中加入這些重要捷徑。

相機預覽支援

使用大螢幕時,您可能會遇到有關延展、裁剪和旋轉的問題。因此,您無法假設相機預覽的大小是媒體應用程式實際轉譯的 UI。

舉例來說,如果使用者用平板電腦拍照,但平板電腦螢幕呈現上下顛倒,這樣的體驗就不甚理想。納入大螢幕相機預覽支援功能。

詳情請參閱「CameraX 預覽」或「Camera2 預覽」。

折疊型態

針對大螢幕設計媒體應用程式包括摺疊式裝置型態。舉例來說,您的應用程式可讓使用者透過桌面設定進行媒體播放,或使用後置顯示和雙螢幕模式預覽及擷取內容。

隨著開發計畫納入摺疊式裝置型態,您的應用程式可提供給更多裝置使用,並帶來更大影響。您會為了改善使用者的媒體體驗,而有其他裝置必須採用摺疊式裝置型態才能辦到。詳情請參閱「摺疊式裝置型態」一文。