第 2 層：彈性調整最佳化

經過最佳化的應用程式可完整支援所有螢幕類型和裝置狀態，包括狀態轉換。

插圖：三個品質等級以垂直堆疊的圖層呈現，並醒目顯示中間的等級。

規範

建構應用程式時，請確保能根據各種螢幕大小和裝置狀態自動調整。

使用者介面

Guideline ID Test IDs Description
Responsive_adaptive_layouts T-Layout_Flow

應用程式具備專為各種螢幕尺寸設計的回應式及自動調整式版面配置。所有版面配置均採用回應式設計 (請參閱「將使用者介面轉移至回應式的版面配置」一文)。自動調整式版面配置的實作方式視視窗大小類別而定。

應用程式 UI 可能包含下列項目：

  • 前端導覽邊欄，可在大型視窗內展開為完整的導覽面板
  • 格狀版面配置，可配合視窗大小變更調整欄數
  • 大型螢幕上的文字欄
  • 尾端邊緣面板，在桌機的螢幕尺寸會預設為開啟，在小型螢幕上則預設為關閉。

視情況建立多窗格版面配置，善用大螢幕空間。請參閱「標準版面配置」。

活動嵌入功能可讓以活動為基礎的應用程式並排顯示多項活動，建立多窗格版面配置。
UI_Secondary_Elements T-Layout_Flow

所有螢幕類型和裝置狀態的視窗、內容選單和其他次要元素均格式正確，例如：

  • 在大型螢幕上，底部功能表不會以完整寬度顯示 (套用最大寬度即可避免延展)。請參閱「工作表：底部」中的「行為」相關說明。
  • 在大型螢幕上，按鈕不會以完整寬度顯示。請參閱「按鈕」中的行為相關說明。
  • 在大型螢幕上，文字欄位和方塊不會延展至完整寬度。請參閱「文字欄位」中的行為相關說明。
  • 小型編輯選單或視窗不會覆蓋整個螢幕，並盡可能維持使用者的使用情境。請參閱「選單」。
  • 內容選單會顯示在使用者選取的項目旁邊。請參閱「選單」中的「內容選單」主題。
  • 導覽邊欄會取代導覽列，更符合大螢幕的人體工學需求。請參閱「導覽邊欄」。
  • 導覽匣已更新為展開的導覽邊欄。請參閱「導覽匣」。
  • 對話方塊已更新至最新的 Material Design 元件。請參閱「對話方塊」一文。
  • 圖片會以適當的解析度顯示，不會遭到延展或裁剪。
Touch_Targets T-Touch_Targets 觸控目標的大小至少為 48dp。請參閱 Material Design 的「版面配置與字體排版」準則。
Drawable_Focus T-Drawable_Focus 應用程式會針對互動式自訂可繪項目建立聚焦狀態。自訂可繪項目是指 Android 架構未提供的任何視覺 UI 元素。如果使用者可以與自訂可繪項目互動，則當裝置未處於觸控模式時，可繪項目必須可聚焦，且焦點狀態的視覺指標必須能夠明顯呈現。

鍵盤、滑鼠和觸控板

Guideline ID Test IDs Description
Keyboard_Navigation T-Keyboard_Navigation 應用程式的主要工作流程支援鍵盤導覽功能，包括 Tab 鍵和方向鍵導覽。請參閱「打造更符合無障礙需求的應用程式」。
Keyboard_Shortcuts T-Keyboard_Shortcuts 應用程式支援常用操作的鍵盤快速鍵，例如選取、剪下、複製、貼上、復原和重做。請參閱「輸入相容性」一文。
Keyboard_Media_Playback T-Keyboard_Media_Playback 鍵盤可用來控制媒體播放。例如，空格鍵可播放及暫停媒體。
Keyboard_Send T-Keyboard_Send 鍵盤 Enter 鍵可在通訊應用程式中執行 send 函式。
Context_Menus T-Context_Menus 使用者可透過滑鼠和觸控板的典型按右鍵 (次要滑鼠按鈕或次要輕觸) 行為存取內容選單。
Content_Zoom T-Content_Zoom 應用程式內容可以使用滑鼠滾輪 (搭配按 Control 或 Ctrl 鍵) 和觸控板雙指撥動手勢進行縮放。
Hover_States T-Hover_States 可操作的 UI 元素會在適用情況下提供滑鼠懸停狀態，向滑鼠和觸控板使用者表明可與該元素進行互動。

測試

為確保應用程式已最佳化，且能因應所有螢幕設定，請執行下列測試。

使用者介面

Test ID Guideline IDs Description
T-Layout_Flow Responsive_adaptive_layouts、
UI_Secondary_Elements

在各種螢幕尺寸的裝置上執行應用程式，包括手機、折疊式手機、小型和大型平板電腦，以及桌機。在裝置上以多視窗模式執行應用程式。

確認應用程式版面配置可配合不同螢幕和視窗大小做出回應及調整。檢查應用程式是否能順利展開及收合導覽邊欄、調整格狀版面配置中的欄數、將文字排入欄中等等。觀察 UI 元素的格式設定是否能兼顧美觀和功能。

針對使用活動嵌入功能的應用程式，測試活動是否能並排顯示在大型螢幕上，而以堆疊形式顯示在小型螢幕上。
T-Touch_Targets Touch_Targets 確認觸控目標均維持一致以及易於存取的大小和位置，且不會遭到其他 UI 元素遮蓋或遮蔽，適用於所有螢幕尺寸和設定。如需無障礙功能相關資訊，請參閱「無障礙功能檢查工具」一文。
T-Drawable_Focus Drawable_Focus 在每個含有互動式自訂可繪項目的應用程式畫面上，使用外接鍵盤、D-pad 或其他可使 UI 元素聚焦的裝置，驗證可繪項目是否可聚焦。確認聚焦狀態的視覺指標是否明顯。如需相關資訊，請參閱「觸控模式」相關說明。

鍵盤、滑鼠和觸控板

Test ID Guideline IDs Description
T-Keyboard_Navigation Keyboard_Navigation 使用外接鍵盤的 Tab 鍵和方向鍵，瀏覽應用程式的可聚焦元件。
T-Keyboard_Shortcuts Keyboard_Shortcuts 在外接鍵盤上使用鍵盤快速鍵，執行選取、剪下、複製、貼上、復原和重做等操作。
T-Keyboard_Media_Playback Keyboard_Media_Playback 使用外接鍵盤對媒體執行開始、停止、暫停、倒轉及快轉等播放操作。
T-Keyboard_Send Keyboard_Send 使用外接鍵盤的 Enter 鍵傳送或提交資料。
T-Context_Menus Context_Menus 使用次要滑鼠按鈕或觸控板次要輕觸功能，存取互動元素的內容選單。
T-Content_Zoom Content_Zoom 使用滑鼠滾輪 (搭配 Control 或 Ctrl 鍵) 和觸控板雙指撥動手勢縮放內容。
T-Hover_States Hover_States 將滑鼠或觸控板游標懸停在可操作的 UI 元素上，啟動該元素的懸停狀態。