設計應用程式的最佳做法

針對垂直版面配置進行最佳化調整

使用垂直版面配置以簡化應用程式設計,其可讓使用者使用單一方向捲動內容。

這個應用程式的目標是將使用者從 A 點帶往 B 點。
請同時採用垂直和水平捲動,以免造成應用程式體驗混淆。

顯示時間

在頂端顯示時間 (重疊),以一致的空間讓使用者能夠查看時間。

在重疊元素頂端顯示時間,以一致的空間讓使用者能夠查看時間。
在暫時性對話方塊、確認覆疊或挑選器中顯示時間,例如使用者可能只會短暫地看到確認畫面。

可存取的內嵌進入點

確保所有動作都是以內嵌方式顯示,並使用清楚的圖像和標籤來取得可存取性。包括設定和偏好設定的進入點。

請盡可能使用圖示和標籤。
只靠圖示來提示使用者採取行動。

使用標籤引導使用者

對於較長的對話方塊,請協助引導使用者在瀏覽內容時加上標籤。

利用分節符號、標籤和其他提示功能來整理內容,並當使用者在捲動瀏覽包含複合型內容的較長檢視畫面時,協助引導。
為包含單一內容類型的對話方塊新增標籤。

優先採取主要動作

將主要動作提取至重疊元素頂端,讓使用者能在應用程式中採取行動。

將不模糊的主要動作移至頂端。
在非常長的頁面底部放置主要動作。

在捲動畫面上顯示捲軸

請只在捲動畫面上使用捲動指標,以免使用者產生錯誤的互動預期。同樣地,請記得在捲動畫面上加入捲動指標,指出您正在查看畫面的哪個位置。

如果整個檢視畫面捲動,則顯示捲動指標。
在非捲動檢視畫面中顯示捲動指標,或在捲動檢視畫面中不顯示捲軸。

針對大螢幕設計回應式設計

請確保您使用的元件可填滿可用的寬度,並考慮非捲動版面配置的高度。

所有 Compose 元件都是以回應式方式建構,但建議您進行任何自訂動作,以便在更大的螢幕上提升設計並增加額外價值。

請確保內容會填滿可用的寬度和高度,且全螢幕元素 (ProgressIndicators、TimeText 等) 會在非捲動版面配置中做出回應式調整。
使用固定寬度的元件,不必配合螢幕畫面填滿畫面,或不調整內容的行為,以填滿可用的空間。

使用回應式 (百分比) 邊界

建議您使用百分比邊界,讓邊界大小能配合螢幕的成長曲線。

使用其他百分比邊界,確保內容不會在頂端和底部遭到裁剪。
元件不應只在沒有額外邊距的情況下,擴大填滿可用空間。