กล่องโต้ตอบคือหน้าต่างโมดัลที่ปรากฏด้านหน้าแอปเพื่อแสดงข้อมูลงานที่ต้องให้ผู้ใช้ตอบกลับทันที
กล่องโต้ตอบอาจเป็นการแจ้งเตือนซึ่งต้องมีการโต้ตอบของผู้ใช้ นอกจากนี้ยังอาจเป็นกล่องโต้ตอบสำหรับเลือกหรือยืนยันที่กำหนดให้ผู้ใช้เลือกหรือยืนยันการเลือกก็ได้ กล่องโต้ตอบจะคงโฟกัสไว้จนกว่าจะปิดหรือดำเนินการตามที่จำเป็น เนื่องจากกล่องโต้ตอบจะรบกวนการใช้งาน จึงควรใช้แต่น้อย
กล่องโต้ตอบจะเกี่ยวข้องกับข้อความโทสต์ (ทั้งคู่เป็นสมาชิกในกลุ่มคอมโพเนนต์ของกล่องโต้ตอบ) แต่มีวัตถุประสงค์และลำดับความสำคัญต่างกัน ดังที่แสดงด้านล่าง
ส่วนประกอบ | Purpose | ลำดับความสำคัญ |
ข้อความโทสต์ | แสดงข้อความที่ให้ข้อมูล ไม่ต้องใช้การโต้ตอบของผู้ใช้ จะหายไปหลังจากผ่านไป 8 วินาที | ต่ำ |
Dialog | แสดงข้อมูลและตัวเลือกงานที่ต้องใช้การโต้ตอบของผู้ใช้ กล่องโต้ตอบจะรักษาโฟกัสไว้จนกว่าผู้ใช้จะตอบสนอง | สูง |
กายวิภาคศาสตร์
กล่องโต้ตอบมีข้อความให้ข้อมูลและการควบคุม UI ที่ขอให้ผู้ใช้ตอบกลับ
![](https://developers.google.cn/cars/design/automotive-os/components/images/Dialog-Anatomy-new.png?authuser=1&hl=th)
2. ส่วนหัวของการ์ด
3. ด้านเนื้อหา
4. พื้นที่การดำเนินการกับการ์ด
ข้อกำหนด
กล่องโต้ตอบที่ไม่มีชื่อ
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-3.png?authuser=1&hl=th)
กล่องโต้ตอบที่มีชื่อ
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-4.png?authuser=1&hl=th)
กล่องโต้ตอบที่มีชื่อกึ่งกลาง
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-5.png?authuser=1&hl=th)
กล่องโต้ตอบแบบเลื่อนได้
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-6.png?authuser=1&hl=th)
การปรับแต่งช่อง
OEM สามารถสะท้อนถึงแบรนด์ของตนโดยการปรับแต่งบทสนทนาในด้านต่อไปนี้
- แบบอักษร
- การจัดรูปแบบปุ่มที่ใช้งานอยู่ ปุ่มที่ไม่ใช้งาน และปุ่มที่ปิดใช้อยู่
- มิติข้อมูลและตำแหน่งของปุ่ม
ระบบการออกแบบให้คำแนะนำในการปรับแต่งคอมโพเนนต์โดยใช้เลย์เอาต์ สี การพิมพ์ และการปรับขนาด
ตัวอย่าง
![](https://developers.google.cn/cars/design/automotive-os/components/images/Dialog-Mock-1-new.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/Dialog-Mock-2-new.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-mock-3.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-mock-4.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-animation-1.gif?authuser=1&hl=th)