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

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

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

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

  • 使用者可能會在多視窗設定中觀看影片時進行多工處理,或是在擷取圖片後利用更大的螢幕進行更複雜的編輯。

  • 使用者可能會使用平板電腦進行視訊通話,以便與親朋好友保持聯繫,並更詳細地查看他們的樣貌。應用程式可以在自訂的回放疊加畫面中,顯示關於標題或場景的更豐富背景資訊,或在畫面上提供更多控制選項。

  • 瀏覽畫面中的輪轉介面可提供更多樣貌,提升視覺吸引力;媒體應用程式也可以透過同時提供可瀏覽的動態消息和播放功能,讓使用者持續保持互動。

請注意,媒體應用程式在標準手機、折疊式裝置、平板電腦和 ChromeOS 裝置上執行的程式碼相同,因此您應從應用程式開發的最初階段就為大螢幕設計。如需更多資訊和視覺範例,請參閱「大螢幕圖片庫」。

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

讓應用程式的版面配置在手機、平板電腦、折疊式裝置和 ChromeOS 裝置上自動調整,避免媒體應用程式提供不佳的使用者體驗。

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

依據規範進行設計

無論螢幕大小、裝置型態或其他裝置相關考量為何,核心應用程式品質都是所有 Android 應用程式的基礎。開始為大螢幕設計應用程式前,應先確保應用程式符合這些基本要求。詳情請參閱「核心應用程式品質」一文。

無論裝置板型規格、螢幕尺寸、顯示模式或形態為何,應用程式都應提供出色的使用者體驗,因此請根據下列第 1、第 2 和第 3 級規範設計應用程式。

這些規範涵蓋了大多數類型 Android 應用程式適用的品質標準。

第 3 級:

在這個基本層級,您的應用程式仍必須遵守UI 和圖形規定。您的應用程式可供大螢幕使用,使用者可以完成重要工作流程,但無法獲得最佳使用者體驗。

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

第 2 級:

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

第 1 級:

這是最佳支援層級,可為使用者提供最佳應用程式體驗,因為它會指定付費功能和能力。

在適用情況下,應用程式支援多工處理、折疊型態、拖曳和觸控筆輸入。在這個層級,應用程式之間的差異相當明顯,因此請密切留意多工處理和折疊式裝置的姿勢等指南。詳情請參閱「大型螢幕的差異化」。

最佳化版面配置

善用大螢幕的額外空間,不必加上黑邊 (由於限制螢幕方向) 或延伸畫面。只要針對媒體和社群媒體最佳化應用程式的版面配置,即可擴大應用程式的觸及範圍,並在所有大螢幕板型規格 (平板電腦、折疊式裝置和 ChromeOS 裝置) 上提供更優質的使用者體驗,同時支援所有手機尺寸。

導覽邊欄和導覽匣元件提供現成的導覽功能,讓使用者介面和控制項使用起來更輕鬆。這些元件也會將主要導覽目的地置於觸手可及的範圍內,同時佔用最少的螢幕空間,藉此彌補標準版面配置 (清單/詳細資料、動態饋給和輔助窗格) 的不足。

媒體版面配置

為清單詳細資料、動態饋給和支援窗格導入媒體專屬版面配置,讓應用程式更易於使用。如要瞭解 MDX、Flutter 和 Compose 版面配置,請參閱「版面配置資源」。

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

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

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

如要查看精選的媒體版面配置,請參閱媒體庫

社群媒體版面配置

拜大螢幕之賜,社群媒體使用者有更多作業空間進行創作、多工處理,還能在不同應用程式間拖曳內容與分享。大螢幕媒體應用程式可利用清單詳細資料、動態消息和支援的窗格版面配置,提供小螢幕裝置無法提供的獨特功能。

  • 清單/詳細資料:這類內容很適合用於訊息應用程式、聯絡人管理工具或檔案瀏覽器。舉例來說,應用程式可以並排顯示對話清單和詳細資料,讓使用者隨時掌握最新訊息。詳情請參閱「清單詳細資料版面配置」。

  • 動態提醒:這種版面配置的常見元件是資訊卡和清單。舉例來說,您可以使用靈活的方格格式,製作貼文拼貼,或是善用方格大小和位置,吸引讀者關注主打貼文。使用者可以快速查看大量內容。詳情請參閱「動態饋給版面配置」。

  • 輔助窗格:搜尋與參考應用程式或生產力應用程式可運用這類版面配置。讓使用者隨時都能使用內容創作工具。舉例來說,您的應用程式可以讓使用者調整設定、存取調色盤、套用效果,以及立即查看變更。詳情請參閱「支援窗格版面配置」。

如要查看精選的社群媒體版面配置,請參閱「社群媒體圖片庫」頁面。

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

採用大螢幕最佳做法,有助於避免不必要的應用程式重製作業。此外,這麼做還能讓應用程式從一開始就更符合使用者需求,特別是針對螢幕方向、鍵盤快速鍵、相機預覽支援功能和折疊式裝置的姿勢。

方向和調整大小

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

舉例來說,如果您的應用程式在平板電腦上執行,平板電腦會以橫向方向固定在底座上。如果應用程式僅限直向,就會導致上下黑邊,這對使用者來說並不理想。您的應用程式應讓使用者使用偏好的方向,因此請在設計中充分運用大螢幕的可用大小。

任何方向限制都會減少使用者與內容互動或使用媒體的方式,進而限制應用程式的使用方式。變更方向可能會對大小造成一定程度的影響,但調整大小不一定會變更方向。

鍵盤快速鍵

在較大的螢幕上,使用者更有可能使用實體鍵盤上的鍵盤快速鍵,例如開始、停止、暫停、快轉和快轉,因此使用者體驗會與鍵盤一致。

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

支援相機預覽

在大型螢幕上,您可能會遇到更多延伸、裁剪和旋轉的問題。因此,您無法假設相機預覽畫面的大小,就是媒體應用程式實際顯示的 UI 大小。

舉例來說,如果使用者使用平板電腦拍照,但在平板電腦螢幕上顯示的圖片是上下顛倒的,這就是不理想的使用體驗。加入大螢幕的相機預覽支援功能。

詳情請參閱 CameraX 預覽版Camera2 預覽版

折疊型態

設計媒體應用程式時,請考量大螢幕裝置的折疊姿勢。舉例來說,您的應用程式可以讓使用者透過桌面模式播放媒體,或使用後置顯示模式和雙螢幕模式進行預覽和擷取。

在開發計畫中納入折疊式裝置的使用情境,可讓應用程式支援更多裝置,並擴大影響力。您可以透過摺疊式裝置,為使用者提供其他裝置無法提供的多媒體體驗。詳情請參閱「摺疊式裝置型態」。