大小

設計可靈活調整的彈性 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:使用中斷點以變更不同大小的版面配置。

填滿界限

使用者移除小工具的主因之一,是與其他主畫面元素不一致。為避免這種情況,請確保小工具一律完全填滿配置的格線空間。

確保容器以任何大小延展至無邊框設計。
新增自訂邊框間距。或無邊框設計。
確保非矩形形狀會沿著垂直軸或水平軸觸及格線,以維持視覺上一致性。
使用固定正方形形狀。建議改用可配合各種格線尺寸的回應式矩形容器。