設計可靈活調整的彈性 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 |
中斷點
如要打造可靈活調整且容易調整大小的功能,中斷點是不可或缺的一環 透過測試設計,您可以找出版面配置的尺寸門檻 就必須做出調整實作中斷點來觸發這些變更。 確保小工具在任何大小下都能保有視覺吸引力與功能。
中斷點也能靈活地根據條件納入或排除 補充內容,並根據小工具的 維度。
![](https://developer.android.com/static/images/design/ui/mobile/widgets/01_Breakpoints.jpg?authuser=9&hl=zh-tw)
填滿界限
其中一項主要原因,是與 以及其他主螢幕元素。為避免這種情況,請確保小工具一律填滿 已完全配置的電網空間。
![](https://developer.android.com/static/images/design/ui/mobile/widgets/01_Fill_the_Bounds.jpg?authuser=9&hl=zh-tw)
正確做法
確保容器以任何大小延展至無邊框設計。
![](https://developer.android.com/static/images/design/ui/mobile/widgets/02_Fill_the_Bounds.jpg?authuser=9&hl=zh-tw)
錯誤做法
新增自訂邊框間距。您的小工具應該完美無邊框。
![](https://developer.android.com/static/images/design/ui/mobile/widgets/03_Fill_the_Bounds.jpg?authuser=9&hl=zh-tw)
正確做法
確保非矩形形狀會沿著垂直軸或水平軸觸及格線,以維持視覺上一致性。
![](https://developer.android.com/static/images/design/ui/mobile/widgets/04_Fill_the_Bounds.jpg?authuser=9&hl=zh-tw)
錯誤做法
使用固定正方形形狀。建議改用可配合各種格線尺寸的回應式矩形容器。