使用者體驗
透過集合功能整理內容
你可以依據偏好儲存及分類內容。

第 2 級 — 大螢幕最佳化
對使用者而言,使用者介面就是應用程式。使用者介面決定使用者體驗,而使用者體驗則決定使用者滿意度、應用程式使用量、應用程式購買次數和客戶留存率。
大螢幕提供廣大的顯示空間,可讓創新且適應性強的使用者介面提供小螢幕無法複製的使用者體驗。
加入下列 UI 元素,針對大螢幕進行應用程式最佳化:
- 導覽邊欄或導覽匣
- 大型觸控目標
- 妥善放置的選單和對話方塊
- 多窗格版面配置
自動調整式版面配置
建立自動調整式版面配置,在大小螢幕上最佳化應用程式的 UI。同時針對多種板型規格進行設計與建構。讓應用程式可支援新裝置類型。
標準版面配置
善用經過驗證的大螢幕版面配置,打造出色的應用程式使用者體驗。建立清單詳細資料、支援窗格或動態饋給版面配置,讓您更輕鬆地管理更多內容,並提供更優質的使用體驗。
回應式使用者介面
請根據螢幕大小調整 UI 元素格式。對於會占據小螢幕整個寬度的按鈕、卡片,以及文字欄位,請限制這些元素的寬度,使其在大螢幕上擁有能讓功能正常運作的合適大小。記得千萬別讓對話方塊和其他互動視窗占滿整個畫面。請確保內容選單和其他與元素相關的彈出式視窗顯示在使用者選取的元素附近,而不要將這些內容置於畫面中央。
活動嵌入
更新以活動為依據的舊版應用程式,以便在大螢幕上使用多窗格版面配置。不需重構程式碼。您可以在 XML 中設定版面配置,也可以透過幾個 Jetpack WindowManager API 呼叫來設定。
後續步驟
如要瞭解如何開發 UI 以改善使用者體驗,請參閱下列開發人員指南:
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-07-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],null,["# UX\n\nTIER 2 --- Large screen optimized\n| **Objective:** Make your app [large screen\n| optimized](/docs/quality-guidelines/large-screen-app-quality#large_screen_optimized) by meeting the [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) user interface requirements of the [Large screen app\n| quality](/docs/quality-guidelines/large-screen-app-quality) guidelines.\n\nTo users, the user interface is the app. The UI determines the user experience,\nwhich determines user satisfaction, app usage, app purchases, customer\nretention.\n\nLarge screens offer expansive display space for innovative, accommodative UIs\nthat provide a UX small screens can't replicate.\n\nOptimize your app for large screens by including the following UI elements:\n\n- Navigation rail or navigation drawer\n- Large touch targets\n- Well-placed menus and dialogs\n- Multipane layouts\n\nAdaptive layouts\n----------------\n\nCreate adaptive layouts that optimize your app's UI on screens large and small.\nDesign and build for multiple form factors simultaneously. Future-proof your app\nfor new device types.\n\nCanonical layouts\n-----------------\n\nTake advantage of proven large screen layouts to make your app UX exceptional.\nCreate a list‑detail, supporting pane, or feed layout to make more content\nmore manageable and more enjoyable.\n\nResponsive UI\n-------------\n\nFormat UI elements based on screen size. Constrain the width of buttons, cards,\nand text fields that are full width on small screens to a functionally\nappropriate size on large screens. Don't let dialog boxes and other modal\nwindows fill the entire screen. Position context menus and other\nelement‑related pop‑up displays adjacent to the element the user\nselected, not centered on screen.\n\nActivity embedding\n------------------\n\nUpdate your activity‑based legacy apps with multipane layouts on large\nscreens. No code refactoring required. Configure your layouts in XML or with a\nfew Jetpack WindowManager API calls.\n\nNext steps\n----------\n\nTo learn about UI development for optimized UX, see the following developer\nguides:\n\n- [About adaptive layouts](/develop/ui/compose/layouts/adaptive)\n- [Canonical layouts](/develop/ui/compose/layouts/adaptive/canonical-layouts)\n- [Build responsive navigation](/develop/ui/views/layout/build-responsive-navigation)\n- [Activity embedding](/develop/ui/views/layout/activity-embedding)"]]