เทมเพลตการนำทางจะแสดงแผนที่ฐานและข้อมูลการกำหนดเส้นทางที่ไม่บังคับ
เมื่อผู้ใช้ขับรถโดยไม่มีเส้นทางแบบเลี้ยวต่อเลี้ยวที่เป็นข้อความ แอปจะ แสดงแผนที่แบบเต็มหน้าจอที่อัปเดตแบบเรียลไทม์ได้ ในระหว่างการนำทางที่ใช้งานอยู่ แอปจะแสดงการ์ดที่ไม่บังคับพร้อมรายละเอียดการเลี้ยวและพื้นผิว รวมถึง การแจ้งเตือนการนำทางได้
เทมเพลตการนำทางมีองค์ประกอบต่อไปนี้
- แผนที่ฐานแบบเต็มหน้าจอที่แอปวาด
- การ์ดเส้นทาง (ไม่บังคับ) พร้อม การเลี้ยวที่กำลังจะมาถึง
- การ์ดการเดินทางโดยประมาณ (ไม่บังคับ) พร้อมเวลาถึงโดยประมาณ (ETA) เวลาไปยังจุดหมาย และระยะทางที่เหลือ (หรือข้อมูลอื่น ที่แสดงพร้อมตัวเลือกข้อความและไอคอนที่กำหนดเอง)
- แถบการดำเนินการ ที่มีการดำเนินการของแอปได้สูงสุด 4 รายการ ซึ่งจะแสดงตามที่อธิบายไว้ใน ระดับการมองเห็นของแถบการดำเนินการ
- แถบการทำงานของแผนที่ (ไม่บังคับ) ที่มีปุ่มสูงสุด 4 ปุ่มสำหรับการโต้ตอบกับแผนที่
การแสดงแผนที่ในคลัสเตอร์
ในระหว่างการนำทางที่ใช้งานอยู่ แอปจะแสดงแผนที่ในแผงหน้าปัดได้ โดยใช้เทมเพลตการนำทาง คลัสเตอร์คือพื้นที่ของแดชบอร์ดที่อยู่ด้านหลัง พวงมาลัย
แผนที่ในคลัสเตอร์มีไว้เพื่อ
- แสดงผลแยกกัน แต่อาจคัดลอกจอแสดงผลหลักหากจำเป็น
- ไม่มีการโต้ตอบ ระบบจะนำองค์ประกอบแบบอินเทอร์แอกทีฟ เช่น ปุ่ม ออก
- ธีมมืด ขอแนะนำอย่างยิ่งให้วาดแผนที่คลัสเตอร์เวอร์ชันธีมมืดเพื่อลดโอกาสที่อาจดึงดูดความสนใจของผู้ขับขี่ออกจากถนน
แผนที่ของแอปในแผงหน้าปัดจะแสดงในบางครั้งเท่านั้น โดยขึ้นอยู่กับ ปัจจัยต่างๆ เช่น สถานะการนำทาง ค่ากำหนดของผู้ผลิตยานยนต์ (ใน AAOS) และสิ่งที่ แสดงบนจอแสดงผลหลัก (ใน AAP)
ดูตัวอย่างโฟลว์ของผู้ใช้ที่เกี่ยวข้องกับคลัสเตอร์ได้ที่ ดูแผนที่ในคลัสเตอร์
ตัวอย่างหน้าจอคลัสเตอร์และหน้าจอตรงกลาง
กำลังกำหนดเส้นทางรายละเอียดบัตร
เมื่อการ์ดการกำหนดเส้นทางอยู่ในสถานะการกำหนดเส้นทาง (ต่างจากสถานะข้อความ) การ์ดจะแสดงข้อมูลต่อไปนี้
- ขั้นตอนปัจจุบัน: มีไอคอน (โดยปกติจะเป็นลูกศร บอกทิศทาง) ระยะทาง และข้อความคิว (ซึ่งอาจมีช่วงรูปภาพ เช่น เครื่องหมาย เส้นทาง)
- คำแนะนำเลน (ไม่บังคับ): แสดงเป็นรูปภาพช่วยเลนแบบง่าย หรือเป็นรูปภาพทางแยกขนาดใหญ่ (ขนาดที่ยืดหยุ่นได้โดยมีความสูงสูงสุด 200dp)
- ขั้นตอนถัดไป (ไม่บังคับ): มีไอคอนและคิว และจะ ปรากฏที่ด้านล่างของการ์ดการนำทางที่ไม่มีภาพทางแยกเท่านั้น
อีกตัวเลือกหนึ่งในสถานะการกำหนดเส้นทางคือการ์ดการกำหนดเส้นทางจะแสดงภาพเคลื่อนไหวของ สปินเนอร์ (ไม่แสดงที่นี่) เพื่อระบุสถานะชั่วคราว เช่น กำลังโหลด กำลังคำนวณ หรือกำลังเปลี่ยนเส้นทาง
ในบางกรณี ระบบอาจแสดงข้อมูลการกำหนดเส้นทางใน แถบนำทางแบบลอยแทน ดังที่แสดงใน เพิ่มจุดแวะพักขณะขับรถ
สถานะข้อความของการ์ดการกำหนดเส้นทาง
เมื่อการ์ดการกำหนดเส้นทางอยู่ในสถานะข้อความ การ์ดจะแสดงข้อความแทนเส้นทางการนำทาง ข้อความนี้ใช้เพื่อสื่อถึงสถานการณ์ต่างๆ ได้ เช่น การเดินทางถึงจุดหมายหรือเส้นทางล้มเหลว
ในการ์ดการกำหนดเส้นทางในสถานะข้อความอาจมีข้อมูลต่อไปนี้
- ข้อความที่เกี่ยวข้องกับการกำหนดเส้นทางซึ่งมีความยาวไม่เกิน 2 บรรทัด
- รูปภาพหรือไอคอน (ไม่บังคับ)
การแจ้งเตือนการนำทาง: แบบเลี้ยวต่อเลี้ยว (TBT) และแบบปกติ
การแจ้งเตือน TBT: เมื่อแอป ระบุเส้นทาง TBT ที่เป็นข้อความ แอปจะต้องทริกเกอร์การแจ้งเตือน TBT ด้วย การแจ้งเตือนเหล่านี้ใช้เพื่อแสดงเส้นทางแบบเลี้ยวต่อเลี้ยวภายนอก เทมเพลตการนำทาง แอปสามารถปรับแต่งสีพื้นหลังของการแจ้งเตือน TBT เพื่อให้มองเห็นได้ชัดเจนยิ่งขึ้น
การแจ้งเตือนปกติ: เพื่อ สื่อสารข้อความอื่นๆ ที่เกี่ยวข้องกับการนำทาง เช่น การเปลี่ยนแปลงการตั้งค่า เส้นทาง แอปนำทางยังส่งการแจ้งเตือนปกติ (ที่ไม่ใช่ TBT) (ดังที่ แสดงที่นี่) หรือใช้การแจ้งเตือนการนำทางได้ด้วย โดยอาจปรากฏแม้ว่าจะมีการ์ดการกำหนดเส้นทาง แสดงอยู่ก็ตาม
การแจ้งเตือนการนำทาง
การแจ้งเตือนการนำทางจะแสดงข้อความสั้นๆ ชั่วคราวและการดำเนินการที่ไม่บังคับ ในรูปแบบที่ไม่บล็อกเส้นทางการนำทาง เนื้อหาควร เรียบง่ายและเกี่ยวข้องกับงานการนำทาง ตัวอย่างเช่น การแจ้งเตือนอาจ อธิบายการเปลี่ยนแปลงสภาพการจราจรหรือถามว่าคนขับรับลูกค้าได้ไหม
การแจ้งเตือนแต่ละรายการประกอบด้วยข้อมูลต่อไปนี้
- ชื่อและชื่อย่อย (ไม่บังคับ)
- ไอคอน (ไม่บังคับ)
- ตัวบ่งชี้ความคืบหน้า - แถบหรือ (ไม่บังคับ) สร้างไว้ในปุ่มที่กำหนดเวลา
- ปุ่มสูงสุด 2 ปุ่ม โดยสามารถกำหนดปุ่มเป็น ปุ่มหลัก หรือเป็น ปุ่มที่กำหนดเวลา (พร้อมตัวบ่งชี้ความคืบหน้า ดังที่แสดงในรูปก่อนหน้า)
คุณปิดการแจ้งเตือนได้โดยทำอย่างใดอย่างหนึ่งต่อไปนี้
- ผู้ใช้เลือกการดำเนินการใดก็ได้
- หมดเวลาหลังจาก
Xวินาที (กำหนดค่าได้) - การปิดแอปโดยที่ผู้ใช้ไม่ต้องดำเนินการใดๆ
ตัวอย่างเทมเพลตการนำทาง
ข้อกำหนด UX ของเทมเพลตการนำทาง
นักพัฒนาแอป
| ต้อง | แสดงการเลี้ยวอย่างน้อย 1 ครั้งในการ์ดการกำหนดเส้นทาง |
| ต้อง | ใส่ปุ่มการดำเนินการอย่างน้อย 1 ปุ่มในแถบการดำเนินการเพื่อเปิดใช้โฟลว์ผู้ใช้ |
| ต้อง | ใส่ปุ่มเลื่อนในแถบการทำงานของแผนที่หากแอปรองรับ ท่าทางสัมผัสการเลื่อน |
| ควร | ใช้ธีมมืดในแผนที่ที่แสดงในคลัสเตอร์ |
| ควร | ใส่เฉพาะปุ่มที่เกี่ยวข้องกับการโต้ตอบกับแผนที่ในแถบการทำงานของแผนที่ (เช่น เข็มทิศ การตั้งศูนย์กลางใหม่ หรือโหมด 3 มิติ) |
| ควร | ใส่ปุ่มเพื่อสิ้นสุดการนำทางเมื่อระบุเส้นทางแบบเลี้ยวต่อเลี้ยว |
| ควร | ใช้สัญลักษณ์ที่เป็นมาตรฐานหรือสอดคล้องกับสัญลักษณ์สากลหรือสัญลักษณ์เฉพาะประเทศ |
| ควร | ใช้รูปภาพทางแยกเพื่อแสดงเนื้อหาที่เกี่ยวข้องกับการนำทางเท่านั้น โดยครอบคลุมความกว้างของการ์ดด้วยรูปภาพ |
| ควร | ระบุรูปภาพเลนที่มีพื้นหลังโปร่งใสเพื่อให้กลมกลืนกับพื้นหลังของการ์ดเส้นทาง |
| ควร | ใช้การแจ้งเตือนสำหรับข้อมูลที่ไม่รบกวนซึ่งเกี่ยวข้องกับงานการนำทางปัจจุบันเท่านั้น |
| MAY | แสดงข้อความสนับสนุนแบบสั้นใต้เลน (แนะนำ Roboto 24) และ ลดอัตราส่วนคอนทราสต์สำหรับเลนที่ไม่ได้ไฮไลต์ |
| MAY | แสดงการเลี้ยว 2 ครั้งในการ์ดการกำหนดเส้นทางเมื่อเกิดขึ้นติดต่อกันอย่างรวดเร็ว |
| MAY | ใส่รูปภาพ เช่น เครื่องหมายเส้นทาง ในข้อความของการ์ดเส้นทาง (ขั้นตอนปัจจุบัน และขั้นตอนถัดไป) |
| MAY | แสดงแผนที่แบบเต็มเมื่อผู้ใช้ขับรถโดยไม่มีเส้นทางแบบข้อความ แบบเลี้ยวต่อเลี้ยว หรืออยู่ในโหมดขับรถอิสระ |
| MAY | เลือกว่าจะแสดงหรือซ่อนการ์ดการกำหนดเส้นทางและองค์ประกอบการประมาณการเดินทางตาม ต้องการ |
| MAY | วาดรายละเอียดและการแจ้งเตือนที่เกี่ยวข้องกับการขับขี่บนแผนที่ เช่น ความเร็วปัจจุบัน ขีดจำกัดความเร็ว และกล้องข้างหน้า |
| MAY | ปรับแต่งสีพื้นหลังของการ์ดเส้นทางและเปลี่ยนสีระหว่างเซสชันการนำทางเพื่อแสดงประเภทถนนหรือเงื่อนไขอื่นๆ ที่เกี่ยวข้อง |
แหล่งข้อมูล
| ประเภท | ลิงก์ |
| การอ้างอิง API |
NavigationTemplate,
NavigationTemplate.Builder
|
| คู่มือสำหรับนักพัฒนาซอฟต์แวร์ | เข้าถึงเทมเพลตการนำทาง |