大螢幕最佳化
透過集合功能整理內容
你可以依據偏好儲存及分類內容。

等級 2 - 遵循「大螢幕應用程式品質」指南,讓應用程式支援各種螢幕尺寸。

「專為大螢幕最佳化的應用程式」可運用大螢幕裝置寬廣的顯示空間,提供高效且引人入勝的使用者體驗。
應用程式經過最佳化後,就會採用回應式/自動調整式版面配置,配合直向/橫向螢幕方向、多視窗模式,以及摺疊與展開的裝置狀態做出調整。導覽邊欄和導覽匣可強化使用者介面,進而動態調整按鈕、文字欄位和對話方塊等元素的格式和位置,提供最佳使用者體驗。
此外,針對大螢幕最佳化的應用程式還可支援鍵盤導覽、鍵盤快速鍵,以及滑鼠與觸控板的縮放、「右鍵」和懸停行為。
注意事項
- 建立雙窗格版面配置
- 使用格線和資料欄版面配置
- 以導覽邊欄和導覽匣取代導覽列
- 在舊版的多活動應用程式中使用活動嵌入功能
- 支援進階鍵盤、滑鼠和觸控板功能
- 為了填滿額外空間而延展 UI 元素,包括文字欄位、按鈕、對話方塊
- 延展或裁剪圖片
- 將面板或工作表設為完整寬度
指南
請按照等級 2 的指南,針對大螢幕最佳化應用程式。
透過回應式/自動調整式版面配置,在各式裝置上支援各種尺寸的螢幕,提供最佳使用者體驗。
適用指南:LS-U1 至 LS-U4
意義
應用程式版面配置會配合大螢幕尺寸變動。應用程式 UI 包括:
- 前端導覽邊欄和導覽匣
- 可配合視窗大小變更的格狀版面配置
- 資料欄版面配置
- 在大螢幕上預設為開啟的尾端面板
雙窗格版面配置可充分運用大螢幕空間。多活動應用程式則可實作活動嵌入功能,建立會並排顯示活動的多窗格版面配置。
使用者可觸及較大的觸控目標,運用可聚焦的互動式可繪項目。
理由
大螢幕裝置涵蓋多種板型規格,包括平板電腦、摺疊式裝置和 ChromeOS 裝置。這些裝置的螢幕大小各有不同,螢幕方向一般為橫向,有時則全以橫向為主。
支援外部硬體輸入裝置,提升應用程式可用性和使用者滿意度。
適用指南:LS-I3 至 LS-I9
意義
應用程式可更妥善支援鍵盤、滑鼠和觸控板輸入功能。使用者可透過滑鼠和觸控板的右鍵 (次要滑鼠按鈕或次要輕觸) 存取選項選單,也可透過滑鼠滾輪和在觸控板上使用雙指撥動手勢縮放應用程式內容。UI 元素則設有懸停狀態。
理由
鍵盤、滑鼠和觸控板等周邊裝置,經常會與大螢幕裝置連結。ChromeOS 裝置通常具備內建鍵盤和觸控板。使用者習慣使用鍵盤快速鍵、多個滑鼠按鈕、滑鼠滾輪和觸控板手勢。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-07-27 (世界標準時間)。
[null,null,["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],null,["# Large screen optimized\n\nTIER 2 --- [Large screen app\nquality](/docs/quality-guidelines/large-screen-app-quality) guidelines that\nprepare your app for displays large and small.\n\nAPPS OPTIMIZED FOR LARGE SCREENS take advantage of the expansive displays of\nlarge screen devices to provide a productive, engaging user experience.\n\nOptimized apps are built with responsive/adaptive layouts that conform to\nportrait and landscape orientations, multi‑window mode, and folded and\nunfolded device states. Navigation rails and drawers enhance a user interface\nthat dynamically formats and positions elements such as buttons, text fields,\nand dialogs for an optimal user experience.\n\nApps optimized for large screens provide support for keyboard navigation,\nkeyboard shortcuts, and mouse and trackpad zoom, \"right‑click,\" and hover\nbehavior.\n\nDo's and don'ts\n---------------\n\ncheck_circle\n\n### Do\n\n- Create two-pane layouts\n- Use grid and column layouts\n- Replace navigation bars with navigation rails and drawers\n- Use activity embedding in legacy, multi-activity apps\n- Support advanced keyboard, mouse, and trackpad functionality \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space\n- Stretch or crop images\n- Make panels or sheets full width\n\nGuidelines\n----------\n\nFollow the Tier 2 guidelines to optimize your apps for large screens. \n\n### [UX](/docs/quality-guidelines/large-screen-app-quality#t2_ux)\n\nSupport screens of all sizes on devices of all kinds with responsive/adaptive layouts that provide an optimal user experience.\n\nGuidelines [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) \n\n#### What\n\nApp layouts conform to large screen dimensions. App UI includes:\n\n- Leading-edge navigation rails and drawers\n- Grid layouts that accommodate window size changes\n- Column layouts\n- Trailing-edge panels that are open by default on large screens\n\nTwo-pane layouts take advantage of large screen space. Multi‑activity apps implement activity embedding to create multi‑pane layouts of activities side by side.\n\nTouch targets are large and reachable. Interactive drawables are focusable. \n\n#### Why\n\nLarge screen devices encompass a variety of form factors, including tablets, foldables, and ChromeOS devices. Display sizes vary. Devices are often---sometimes primarily---used in landscape orientation. \n\n#### How\n\nSee the [UX](/guide/topics/large-screens/ux) overview. \n\n### [Keyboard, mouse, and trackpad](/docs/quality-guidelines/large-screen-app-quality#t2_keyboard_mouse_trackpad)\n\nSupport external hardware input devices to increase app usability and user satisfaction.\n\nGuidelines [LS-I3](/docs/quality-guidelines/large-screen-app-quality#LS-I3) through [LS-I9](/docs/quality-guidelines/large-screen-app-quality#LS-I9) \n\n#### What\n\nApp provides enhanced support for keyboard, mouse, and trackpad input. Options menus are accessible by mouse and trackpad right‑click (secondary mouse button or secondary tap) behavior. App content can be zoomed using the mouse scroll wheel and trackpad pinch gestures. UI elements have hover states. \n\n#### Why\n\nPeripherals such as keyboards, mice, and trackpads are often connected to large screen devices. ChromeOS devices typically have a built‑in keyboard and trackpad. Users are accustomed to using keyboard shortcuts, multiple mouse buttons, mouse scroll wheel, and trackpad gestures. \n\n#### How\n\nSee the [Keyboard, mouse, and trackpad](/guide/topics/large-screens/keyboard-mouse-and-trackpad-tier-2) overview."]]