將不同的板型規格納入設計考量

Stay organized with collections Save and categorize content based on your preferences.

應用程式使用者介面的設計與特定裝置板型規格無關。Android 應用程式必須適應多種不同類型的裝置,例如 4 吋手機、50 吋電視和可調整大小視窗的 Chrome OS 裝置。

您應用程式的使用者介面在視窗中繪製,其大小可以自由改變。您可以使用資源限定詞,為不同大小的視窗提供不同的版面配置。這些差異可能是裝置螢幕大小的限制所造成,也可能是使用者採用多視窗模式來變更視窗大小。

設計回應式內容

建議您為所有使用者提供豐富的體驗,讓應用程式中的各個畫面都能完整運用適用的視窗空間。

舉例來說,在視窗中執行的應用程式佔據了手機螢幕的整個寬度,在進入多視窗模式時可能會隱藏部分內容,而且在 Chrome OS 裝置螢幕的整個視窗中執行時,可以擴展使用者介面,提供更多內容。

除了滿足這些使用者的期望,我們通常必須在較大的裝置上提供更多內容,以免過度空白字元或不小心出現尷尬的互動。下圖顯示在調整較大的使用者介面設計時,可能會發生的一些問題:

圖 1. 寬幅視窗上的內容不足,會造成尷尬空白字元和行過長。

如要進一步瞭解設計回應式導覽體驗,請參閱回應式使用者介面 (UI) 導覽功能

提供量身打造的使用者體驗

提供獨一無二的使用體驗,只擴展內容瀏覽範圍以填滿可用空間。即使使用者介面使用完全不同的版面配置和小工具,您仍可針對特定使用者介面打造符合需求的使用者體驗。

在圖 2 中,當有足夠垂直空間時,系統會使用 BottomNavigationView 做為頂層導覽區域。當視窗大小縮小時 (如圖表右側所示),請改用 DrawerLayout 來進行頂層導覽。

圖 2. 在垂直空間有限的情況下,底部導覽列會替換成導覽匣。

其他例子包括:

  • Toolbar 能夠根據可用的空間大小,顯示或隱藏動作選單項目。
  • RecyclerView.LayoutManager 可能會變更時距數,以充分利用視窗大小
  • 您可以為自訂檢視畫面增加更多詳細顯示資料,只要有更多空間就能增加。

這些都是確保使用者隨時隨地執行應用程式並獲得良好體驗的絕佳方法。

您可以在 material.io 找到更多回應式設計模式範例,以及自動調整版面配置的靈感。