Hộp thoại là một cửa sổ phương thức xuất hiện ở phía trước một ứng dụng để hiển thị thông tin về công việc cần phản hồi ngay lập tức của người dùng.
Một hộp thoại có thể là cảnh báo yêu cầu tương tác của người dùng. Đó cũng có thể là một hộp thoại lựa chọn hoặc xác nhận, yêu cầu người dùng đưa ra hoặc xác nhận lựa chọn. Hộp thoại sẽ giữ lại tiêu điểm cho đến khi bạn đóng hoặc thực hiện hành động bắt buộc. Vì hộp thoại gây gián đoạn, bạn nên hạn chế sử dụng hộp thoại.
Hộp thoại có liên quan đến thông báo ngắn (cả hai đều là thành phần của nhóm thành phần Hộp thoại), nhưng khác nhau về mục đích và mức độ ưu tiên, như được trình bày dưới đây.
Thành phần | Mục đích | Mức độ ưu tiên |
Bánh mì nướng | Hiển thị thông báo giàu thông tin. Không yêu cầu người dùng tương tác. Sẽ biến mất sau 8 giây. | Kém |
Hộp thoại | Cho thấy thông tin và các tuỳ chọn công việc yêu cầu người dùng tương tác. Hộp thoại sẽ giữ tiêu điểm cho đến khi người dùng phản hồi. | Cao |
Phân tích
Hộp thoại chứa văn bản cung cấp thông tin và các thành phần điều khiển trên giao diện người dùng yêu cầu phản hồi của người dùng.
![](https://developers.google.cn/cars/design/automotive-os/components/images/Dialog-Anatomy-new.png?authuser=9&hl=vi)
2. Tiêu đề thẻ
3. Khu vực nội dung
4. Khu vực thao tác với thẻ
Thông số
Hộp thoại không có tiêu đề
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-3.png?authuser=9&hl=vi)
Hộp thoại có tiêu đề
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-4.png?authuser=9&hl=vi)
Hộp thoại có tiêu đề được căn giữa
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-5.png?authuser=9&hl=vi)
Hộp thoại có thể cuộn
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-6.png?authuser=9&hl=vi)
Tuỳ chỉnh
OEM có thể phản ánh thương hiệu của mình bằng cách tuỳ chỉnh các khía cạnh sau của hộp thoại:
- Phông chữ
- Kiểu các nút đang hoạt động, không hoạt động và đã tắt
- Kích thước và vị trí nút
Hệ thống thiết kế đưa ra hướng dẫn về cách tuỳ chỉnh các thành phần bằng cách sử dụng bố cục, màu sắc, kiểu chữ và kích thước.
Ví dụ
![](https://developers.google.cn/cars/design/automotive-os/components/images/Dialog-Mock-1-new.png?authuser=9&hl=vi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/Dialog-Mock-2-new.png?authuser=9&hl=vi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-mock-3.png?authuser=9&hl=vi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-mock-4.png?authuser=9&hl=vi)
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-animation-1.gif?authuser=9&hl=vi)