大小

設計可靈活調整的彈性 Android 小工具。採用我們建議的做法 以預設大小做為基礎，然後針對各種不同的 盡可能提升可讀性和使用者體驗

預設大小

將版面配置最佳化，提供至少一種流暢的小工具體驗 建議的尺寸確認小工具中的位置和能見度正確無誤 定義兩者的 targetCellWidth 和 targetCellHeight 屬性 手持裝置和平板電腦裝置

這些值是以 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 304 488
3x4 298 488 424 672

中斷點

如要打造可靈活調整且容易調整大小的功能，中斷點是不可或缺的一環 透過測試設計，您可以找出版面配置的尺寸門檻 就必須做出調整實作中斷點來觸發這些變更。 確保小工具在任何大小下都能保有視覺吸引力與功能。

中斷點也能靈活地根據條件納入或排除 補充內容，並根據小工具的 維度。

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

填滿界限

其中一項主要原因，是與 以及其他主螢幕元素。為避免這種情況，請確保小工具一律填滿 已完全配置的電網空間。

正確做法

確保容器以任何大小延展至無邊框設計。

錯誤做法

新增自訂邊框間距。您的小工具應該完美無邊框。

正確做法

確保非矩形形狀會沿著垂直軸或水平軸觸及格線，以維持視覺上一致性。

錯誤做法

使用固定正方形形狀。建議改用可配合各種格線尺寸的回應式矩形容器。