Kích thước của biểu tượng, hình đại diện và đích chạm là những yếu tố quan trọng cần cân nhắc để giảm thiểu tình trạng phân tâm của người lái xe.
Đích chạm có kích thước vừa phải giúp người lái xe dễ dàng và nhanh chóng tương tác với ứng dụng cũng như tập trung vào việc lái xe.
Xem nhanh hướng dẫn (Tóm tắt):
- Sử dụng kích thước chuẩn của biểu tượng và hình đại diện để đảm bảo tính nhất quán
- Kích thước đích chạm tối thiểu là 76 x 76 dp
- Căn chỉnh và căn giữa các biểu tượng và phần tử trong đích chạm
Kích thước biểu tượng
Sau đây là các kích thước biểu tượng tiêu chuẩn mà Android sử dụng cho Ô tô:
![Kích thước biểu tượng Android cho Ô tô](https://developers.google.cn/cars/design/automotive-os/design-system/images/Size-1.png?authuser=5&hl=vi)
Biểu tượng chính | Biểu tượng phụ | Biểu tượng cấp ba |
---|---|---|
44 x 44dp | 36 x 36dp | 24 x 24dp |
Kích thước hình đại diện
Sau đây là kích thước hình đại diện tiêu chuẩn mà Android sử dụng cho Ô tô:
![Kích thước hình đại diện Android cho Ô tô](https://developers.google.cn/cars/design/automotive-os/design-system/images/Avatar_AR.png?authuser=5&hl=vi)
Hình đại diện nhỏ | Hình đại diện trung bình | Hình đại diện lớn |
---|---|---|
56 x 56dp | 76 x 76dp | 96 x 96dp |
Căn chỉnh biểu tượng và đích chạm
Kích thước đích chạm tối thiểu trong Android cho Ô tô là 76 x 76 dp. Đích chạm phải đủ lớn để người lái xe có thể lướt xem nhanh và dễ dàng chọn khi ô tô đang di chuyển. Các thành phần như nút phải được căn giữa trong ranh giới của đích chạm và không có phần nào của thành phần nằm ngoài ranh giới của đích chạm.
![Giữ kích thước đích chạm ở mức hoặc cao hơn 76 x 76 dp](https://developers.google.cn/cars/design/automotive-os/design-system/images/Size-2.png?authuser=5&hl=vi)
Việc nên làm
![Chú thích ở giữa trong vùng đích chạm](https://developers.google.cn/cars/design/automotive-os/design-system/images/Size-3.png?authuser=5&hl=vi)
Việc nên làm
![Không căn chỉnh phần tử theo một cạnh của đích chạm](https://developers.google.cn/cars/design/automotive-os/design-system/images/Size-4.png?authuser=5&hl=vi)
Việc không nên làm
![Không cho phép các phần tử nằm ngoài đích chạm](https://developers.google.cn/cars/design/automotive-os/design-system/images/Size-5.png?authuser=5&hl=vi)
Việc không nên làm