大小

設計可順暢縮放的彈性 Android 小工具。建議您先使用預設大小做為起點,然後測試不同尺寸的版面配置,確保可讀性良好,並提供最佳使用者體驗。

預設大小

請針對至少一個建議大小調整版面配置,提供完善的小工具體驗。為手機和平板電腦定義 targetCellWidthtargetCellHeight 屬性,確保在小工具選擇器中正確放置及顯示小工具。

這些值是以 Pixel 裝置為準。你可以根據這些尺寸設計小工具。在不同大小和各種裝置上徹底測試小工具,確保使用者體驗良好。

手持式

大小 最小寬度 最大寬度 高度下限 高度上限
2x1 109 306 56 130
2x2 109 306 115 276
2x3 109 306 185 422
4x1 245 624 56 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:使用中斷點,在不同大小的螢幕上變更版面配置。

填入界線

使用者移除小工具的主要原因之一,是小工具與其他主畫面元素未對齊。為避免發生這種情況,請確保小工具一律會完全填滿所分配的格線空間。

請確保容器在所有大小的螢幕上都能延展至邊緣。
新增自訂邊框間距。小工具應可順暢地從一側邊緣延伸至另一側邊緣。
請確保非矩形形狀觸及垂直或水平軸上的格線,以維持視覺一致性。
使用固定正方形形狀。請改用可因應各種格線尺寸的回應式矩形容器。