大小
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
設計可靈活調整的彈性 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 |
中斷點
如要打造可靈活調整且容易調整大小的功能,中斷點是不可或缺的一環
透過測試設計,您可以找出版面配置的尺寸門檻
就必須做出調整實作中斷點來觸發這些變更。
確保小工具在任何大小下都能保有視覺吸引力與功能。
中斷點也能靈活地根據條件納入或排除
補充內容,並根據小工具的
維度。
填滿界限
其中一項主要原因,是與
以及其他主螢幕元素。為避免這種情況,請確保小工具一律填滿
已完全配置的電網空間。
check_circle
正確做法
確保容器以任何大小延展至無邊框設計。
cancel
錯誤做法
新增自訂邊框間距。您的小工具應該完美無邊框。
check_circle
正確做法
確保非矩形形狀會沿著垂直軸或水平軸觸及格線,以維持視覺上一致性。
cancel
錯誤做法
使用固定正方形形狀。建議改用可配合各種格線尺寸的回應式矩形容器。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2024-08-03 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-08-03 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-08-03 (世界標準時間)。"]]