大小

設計可流暢擴充的可調整 Android 小工具。請先使用我們建議的預設大小,並測試不同尺寸的版面配置,確保最顯眼的可讀性和使用者體驗。

預設大小

透過至少一種建議尺寸來最佳化版面配置,提供更優質的小工具體驗。為手持裝置和平板電腦裝置定義 targetCellWidthtargetCellHeight 屬性,確保小工具挑選器中的位置和顯示設定正確無誤。

這些值是根據 Pixel 裝置計算而得。這些大小是您設計小工具的起點。因此請在各種裝置上全面測試小工具的大小,確保提供優質的使用者體驗。

手提式

大小 寬度下限 最大寬度 高度下限 高度上限
2x1 109 306 44 130
2x2 109 306 115 276
2x3 109 306 185 422
4x1 245 624 44 130
4x2 245 624 115 276
4x3 245 624 185 422

平板電腦

大小 寬度下限 最大寬度 高度下限 高度上限
2x1 180 304 64 120
2x2 180 304 184 304
2x3 180 304 304 488
3x1 328 488 64 120
3x2 298 488 184 304
3x3 298 488 424 672
3x4 456 672 344 488

中斷點

如要製作可配合使用者調整大小的可調整大小小工具,中斷點是不可或缺的要素。透過測試設計,您可以找出必須調整版面配置的大小門檻。實作中斷點以便觸發這些變更,確保小工具能保持任何大小的視覺吸引力和功能。

中斷點也可讓您有彈性地依條件納入或排除補充內容,並根據小工具的維度最佳化空間使用率。

圖 1:使用中斷點變更不同大小的版面配置。

填滿邊界

使用者移除小工具的主要原因之一,就是導致其他主畫面元素沒有對齊。為避免這種情況,請確認您的小工具一律填滿分配的格線空間。

確保容器在各種尺寸下都能無邊框向外延伸。
新增自訂邊框間距。小工具應該採用無邊框設計。
確保非矩形形狀在垂直或水平軸上接觸網格,以確保視覺的一致性。
使用固定的正方形形狀。改用回應式矩形容器,系統會根據各種格狀空間尺寸進行調整。