設計可順暢縮放的彈性 Android 小工具。建議您先使用預設大小做為起點,然後測試不同尺寸的版面配置,確保可讀性良好,並提供最佳使用者體驗。
預設大小
請針對至少一個建議大小調整版面配置,提供完善的小工具體驗。為手機和平板電腦定義 targetCellWidth 和 targetCellHeight 屬性,確保在小工具選擇器中正確放置及顯示小工具。
這些值是以 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 |
中斷點
如要製作可調整大小的適應性小工具,中斷點是不可或缺的要素。透過測試設計,您可以找出需要調整版面配置的大小門檻。實作中斷點來觸發這些變更,確保小工具在任何大小下都能維持視覺吸引力和功能。
此外,中斷點也提供彈性,可根據小工具的尺寸有條件地納入或排除補充內容,進而最佳化空間使用率。
填入界線
使用者移除小工具的主要原因之一,是小工具與其他主畫面元素未對齊。為避免發生這種情況,請確保小工具一律會完全填滿所分配的格線空間。
正確做法
請確保容器在所有大小的螢幕上都能延展至邊緣。
錯誤做法
新增自訂邊框間距。小工具應可順暢地從一側邊緣延伸至另一側邊緣。
正確做法
請確保非矩形形狀觸及垂直或水平軸上的格線,以維持視覺一致性。
錯誤做法
使用固定正方形形狀。請改用可因應各種格線尺寸的回應式矩形容器。