Nền tảng
Bo góc
Đã đặc tảSáu bậc. Bán kính tăng theo kích thước vật chứa, không theo tầm quan trọng: control 8, thẻ 12, panel 16. pill là một hình dạng riêng, không phải bậc cuối của thang. Bán kính không đổi theo density.
Token
Sáu bậc thành sáu hộp thật
none
UnknownThứ chạm cạnh màn hình, hoặc ô trong bảng
small
UnknownChip, badge, ô nhỏ trong một control lớn hơn
control
UnknownNút, ô nhập, select — mọi control
card
UnknownThẻ, hộp callout
panel
UnknownDialog, sheet, panel lớn
pill
UnknownHình viên thuốc: chip trạng thái, nút icon tròn
Vì sao
Vì sao bán kính tăng theo kích thước
Một bán kính cố định trên hai hộp khác cỡ trông không giống nhau: 8px trên một nút cao 44 là một góc rõ ràng; 8px trên một dialog rộng 560 gần như là góc vuông. Thang này giữ cho tỉ lệ giữa góc và cạnh gần như không đổi. pill không phải bậc bảy: 9999px không phải một bán kính lớn hơn 16, nó là cách nói "bo hết mức có thể" và kết quả phụ thuộc chiều cao vật chứa.
Ranh giới
Không đổi theo density
Khối remap density chạm chiều cao control, chiều cao hàng và kiểu chữ control. Nó không chạm bán kính — bo góc là dấu hiệu nhận ra loại vật thể, không phải tín hiệu mật độ.
Quy tắc
Do / Don't
| Do | Don't | Vì sao |
|---|---|---|
| Chọn bậc theo kích thước vật chứa | Chọn bậc theo mức quan trọng | Bán kính không mang thứ bậc; màu và cỡ thì có |
| Dùng pill khi hình viên thuốc là ý định | Dùng pill để bo nhiều hơn panel | Kết quả phụ thuộc chiều cao, không phải token |
| Dùng none ở ô bảng và thứ chạm mép | Ép bán kính lên thứ chạm mép màn hình | Một góc bo cạnh mép để lộ nền phía sau |
| Giữ bán kính cố định qua density | Co bán kính ở compact | Mất tín hiệu nhận dạng loại control |
Chưa quyết
Open questions
| Question | Owner | Resolves when |
|---|---|---|
| Có sản phẩm nào trong họ cần bán kính riêng như một nét nhận diện không? | nexoboxvn@gmail.com | Một brand guideline nói vậy |
| Ảnh và avatar dùng bậc nào? | nexoboxvn@gmail.com | Một primitive avatar tồn tại trong catalogue |