Android 可協助您開發適用於各種裝置螢幕尺寸和板型規格的應用程式。這項廣泛的相容性有助於設計單一應用程式,並廣泛發布至所有目標裝置。
不過,為了在各種螢幕設定下提供最佳使用者體驗,您需要針對不同大小的螢幕,最佳化版面配置和其他 UI 元件。在 ChromeOS 上,最佳化 UI 可充分利用額外的螢幕空間,提供新功能、呈現新內容或提升體驗,進一步吸引使用者。
大螢幕適用的版面配置
如果您開發的應用程式適用於手機,並想改善 ChromeOS 和其他大螢幕板型規格的設計,請先對版面配置、字型和間距進行微調。如果是 7 吋平板電腦或畫布較大的遊戲,這些調整可能就足夠了。
如果是大螢幕,您可以重新設計部分 UI,以有效率的多窗格 UI、更簡單的導覽和額外內容,取代「延展」的 UI。如需相關範例,請參閱 Material Design 團隊的質感設計研究。舉例來說,請參閱「回覆」應用程式如何配合不同螢幕大小調整版面配置。
以下提供幾項建議:
- 為這些大螢幕提供自訂版面配置。你可以使用螢幕的最短尺寸,或最小可用寬度和高度來完成這項操作。
- 想像一下,在以橫向為主的環境 (例如 ChromeOS) 中,您的 UX 和版面配置會如何運作。根據視窗大小調整版面配置,確保在這些螢幕方向上都能正常顯示及運作,或使用 land 資源限定符提供特定橫向版面配置。如要進一步瞭解動態視窗大小調整功能,以及大螢幕的其他注意事項,請參閱視窗管理頁面。
- 如果應用程式拉伸至較寬的狀態,底部導覽列就無法順利縮放。建議將導覽選單移至左側,方便使用者存取,並顯示更多選項。Reply 範例就清楚說明瞭這點。
- 至少要自訂字型大小、邊框間距和間距等尺寸,以改善大螢幕的空間使用率和內容可讀性。請考量使用者離裝置稍遠時的畫面,例如 ChromeOS 裝置或其他桌面環境。
- 調整 UI 控制項的位置,讓使用者在使用滑鼠或拿著平板電腦時可以存取,例如移到兩側或遠離中央。
- 在 ChromeOS 和其他大螢幕裝置上,UI 元素的邊框間距通常應大於手機。邊界和間距應配合不同的螢幕大小調整。
- 適當填補文字內容,避免直接沿著螢幕邊緣對齊。在螢幕邊緣附近的內容周圍,使用至少 16 dp 的邊框間距。
具體來說,請確保版面配置不會在畫面上「延展」:
- 文字行不宜過長,每行最多 100 個半形字元,50 到 75 個半形字元為最佳長度。
- 清單和選單不應使用全螢幕寬度。
- 使用邊框間距管理螢幕上元素的寬度,或改用多窗格 UI 搭配大型螢幕裝置 (請參閱下一節)。
善用額外的螢幕空間
ChromeOS 裝置為應用程式提供更多螢幕空間。為大螢幕設計應用程式 UI 時,請充分利用額外空間。
在「Reply」和「Rally」範例中,應用程式採用不同的方法來運用增加的螢幕大小。「回覆」會增加空間,讓畫面更簡潔;「Rally」則會顯示更多資料,減少捲動和輕觸次數。
建議您先找出可能對使用者隱藏的項目,並思考如何讓這些項目顯示出來。例如顯示項目詳細資訊、顯示可能隱藏在右鍵或長按後方的選單,或是顯示不同或更深入的導覽選項,因為現在左側導覽區域較大。這些都是實用性方面的重大勝利,可改善使用者體驗,並讓應用程式更像電腦版,且無須徹底重新設計目前的體驗。
以下是應用程式的幾項建議:
- 思考這些不同螢幕大小時,品牌會決定您應採取的方向。要優先顯示哪些內容給使用者,取決於現有的使用者歷程類型和最常用的功能。如需靈感,請參閱 Material Studies,瞭解各項產品在大螢幕上的不同回應方式。
- 請考慮如何使用回應式格線系統,讓應用程式設計適應不同螢幕大小,以及如何在大螢幕上移動內容、導覽和選項。
- 決定要為哪些螢幕大小使用不同版面配置,然後在適當的視窗大小區間 (例如大型/特大型) 或最小視窗寬度 (例如 sw600dp/sw720) 中提供不同版面配置。請注意,當您進入這些版面配置時,使用者所處的整體環境不應改變,且您應盡量在版面配置之間轉換時保留所有使用者狀態 (捲動位置、正在撰寫的文字等)。
使用專為高密度和大螢幕設計的素材資源
為確保應用程式呈現最佳狀態,請為 ChromeOS 支援的常見密度範圍提供圖示和其他點陣圖資產。具體來說,您應根據圖示設計指南設計應用程式列、通知和啟動器的圖示,並以向量格式提供,以便在應用程式顯示的不同螢幕上順利縮放。
如要進一步瞭解 Android 上的 VectorDrawable 和向量資產,請參閱 Nick Butcher 的這篇網誌文章。
調整字型大小和觸控目標
如要讓應用程式在 ChromeOS 和高密度螢幕上正常運作,請針對您鎖定的所有螢幕設定,調整 UI 中的字型大小和觸控目標。您可以透過可設定樣式的屬性或維度資源調整字型大小,也可以透過版面配置和點陣圖可繪項目調整觸控目標,如先前所述。
以下是幾點注意事項:
- 在較大的螢幕尺寸和密度下,文字不應過大或過小。請確認標籤大小是否適合對應的 UI 元素,並確保標籤、標題和其他元素沒有不當的換行。
- 螢幕上元素的建議觸控目標大小為 48 dp,您可能需要在較大的螢幕 UI 中進行一些調整。如要瞭解觸控目標和項目間距如何隨著螢幕大小而變化,請參閱「間距方法」。這些建議也符合最低無障礙指南。
-
盡可能使用
TouchDelegate將可觸控區域擴大至 48 dp 以上,或只是將圖示置中於透明按鈕內,以利觸控較小的圖示。