เทมเพลตการนําทาง

เทมเพลตการนำทางจะแสดงแผนที่ฐานและข้อมูลการกำหนดเส้นทางแบบไม่บังคับ

เมื่อผู้ใช้กำลังขับรถโดยไม่มีข้อมูลเส้นทางแบบเลี้ยวต่อเลี้ยว แอปสามารถแสดงแผนที่แบบเต็มหน้าจอที่อัปเดตแบบเรียลไทม์ ระหว่างการนำทางที่ดำเนินอยู่ แอปสามารถแสดงการ์ดตัวเลือกพร้อมการบังคับทิศทางและรายละเอียดพื้นผิว รวมถึงการแจ้งเตือนการนำทาง

ประกอบด้วย

  • แผนที่ฐานแบบเต็มหน้าจอที่แอปวาด
  • การ์ดการกำหนดเส้นทาง (ไม่บังคับ) พร้อมยานพาหนะที่กำลังจะเกิดขึ้น
  • บัตรคาดคะเนการเดินทาง (ไม่บังคับ) พร้อมเวลาถึงโดยประมาณ (ETA), เวลาถึงจุดหมาย และระยะทางที่เหลืออยู่ (หรือแสดงข้อมูลอื่นพร้อมข้อความและตัวเลือกไอคอนที่กำหนดเอง)
  • แถบการทำงาน ที่มีการดำเนินการของแอปสูงสุด 4 รายการ ซึ่งจะแสดงตามที่อธิบายไว้ใน การเปิดเผยแถบการดำเนินการ
  • แถบการทำงานบนแผนที่ (ไม่บังคับ) ที่มีปุ่มสูงสุด 4 ปุ่มสำหรับการโต้ตอบบนแผนที่
ไวร์เฟรมของเทมเพลตการนำทาง

การแสดงแผนที่ในคลัสเตอร์

ระหว่างการนำทางที่ใช้งานอยู่ แอปจะแสดงแผนที่บนแผงหน้าปัดได้โดยใช้เทมเพลตการนำทาง คลัสเตอร์คือพื้นที่ของแดชบอร์ดหลังพวงมาลัย ปัจจุบันตัวเลือกนี้มีให้บริการแก่พาร์ทเนอร์ที่ทดลองใช้ก่อนเปิดตัวเท่านั้น

ไวร์เฟรมของคลัสเตอร์แผนที่

Maps ในคลัสเตอร์มีวัตถุประสงค์เพื่อให้เป็น

  • แสดงผลแบบอิสระ แต่อาจคัดลอกจอแสดงผลหลักได้หากต้องการ
  • ไม่มีการโต้ตอบ ระบบจะนำองค์ประกอบแบบโต้ตอบ เช่น ปุ่ม ออก
  • ธีมมืด ขอแนะนำให้วาดแผนที่คลัสเตอร์ในเวอร์ชันธีมสีเข้มเพื่อลดโอกาสในการดึงดูดความสนใจของผู้ขับขี่ให้ออกจากถนน

แผนที่ของแอปในคลัสเตอร์จะแสดงเฉพาะในบางกรณีเท่านั้นโดยขึ้นอยู่กับปัจจัยต่างๆ เช่น สถานะการนําทาง, ค่ากำหนด OEM ยานพาหนะ (ใน AAOS) และสิ่งที่แสดงอยู่ในจอแสดงผลหลัก (ใน AAP)

ดูตัวอย่างโฟลว์ผู้ใช้ที่เกี่ยวข้องกับคลัสเตอร์ได้ที่ดูแผนที่ในคลัสเตอร์

ตัวอย่างคลัสเตอร์และหน้าจอกลาง

ไวร์เฟรมของคลัสเตอร์แผนที่ที่มีแมปภาพรวมเส้นทาง
ในส่วนนี้ แอปจะแสดงแผนที่ระยะใกล้ในกลุ่ม ขณะที่แสดงแผนที่ภาพรวมเส้นทางในหน้าจอหลัก
ไวร์เฟรมของคลัสเตอร์แผนที่ที่มีการตั้งค่า
ในส่วนนี้ แผนที่ของแอปจะยังคงแสดงในคลัสเตอร์ในขณะที่ผู้ใช้ปรับการตั้งค่ารถที่หน้าจอหลัก

รายละเอียดการ์ดการกำหนดเส้นทาง

การจำลองรายละเอียดการ์ดการกำหนดเส้นทางในสถานะการกำหนดเส้นทาง

เมื่อการ์ดการกำหนดเส้นทางอยู่ในสถานะการกำหนดเส้นทาง (ตรงข้ามกับสถานะของข้อความ) ระบบจะแสดงข้อมูลต่อไปนี้

  1. ขั้นตอนปัจจุบัน: มีไอคอน (โดยปกติจะเป็นลูกศรทิศทาง) ระยะทาง และข้อความเริ่มโฆษณา (ซึ่งอาจรวมถึงช่วงของรูปภาพ เช่น เครื่องหมายเส้นทาง)
  2. คำแนะนำเลน (ไม่บังคับ): แสดงเป็นรูปภาพความช่วยเหลือบนถนนแบบง่ายๆ หรือภาพทางแยกที่ใหญ่กว่า (ขนาดที่ยืดหยุ่นโดยมีความสูงไม่เกิน 200 dp)
  3. ขั้นตอนถัดไป (ไม่บังคับ): มีไอคอนและคิว และจะปรากฏเฉพาะที่ด้านล่างของการ์ดการกำหนดเส้นทางที่ไม่มีรูปภาพทางแยก

อีกตัวเลือกหนึ่งในสถานะการกำหนดเส้นทางคือการให้การ์ดการกำหนดเส้นทางแสดงภาพเคลื่อนไหวของตัวหมุน (ไม่ได้แสดงที่นี่) เพื่อระบุสถานะชั่วคราว เช่น การโหลด การคำนวณ หรือการเปลี่ยนเส้นทาง

ในบางกรณี ข้อมูลการกำหนดเส้นทางอาจแสดงในแถบนำทางแบบลอยแทน ดังที่แสดงในเพิ่มจุดแวะขณะขับรถ

สถานะข้อความของการ์ดการกำหนดเส้นทาง

เมื่อการ์ดการกำหนดเส้นทางอยู่ในสถานะข้อความ ระบบจะแสดงข้อความแทนการกำหนดเส้นทาง ข้อความนี้สามารถใช้เพื่อสื่อสารสถานการณ์ต่างๆ เช่น การไปถึงจุดหมายหรือเส้นทางล้มเหลว

ในสถานะข้อความ การ์ดการกำหนดเส้นทางอาจมีข้อมูลต่อไปนี้

  • ข้อความที่เกี่ยวข้องกับการกำหนดเส้นทางที่ไม่ว่างเปล่า มีความยาวได้สูงสุด 2 บรรทัด
  • รูปภาพหรือไอคอน (ไม่บังคับ)
ภาพจำลองสถานะข้อความของการ์ดการกำหนดเส้นทาง

การแจ้งเตือนการนำทาง: แบบเลี้ยวต่อเลี้ยว (TBT) และแบบปกติ

การกำหนดเส้นทางการ์ดที่มีการแจ้งเตือน TBT
กำลังกำหนดเส้นทางการ์ดที่มีการแจ้งเตือนตามปกติ

การแจ้งเตือน TBT: เมื่อแอปแจ้งเส้นทาง TBT แบบข้อความ แอปจะต้องทริกเกอร์การแจ้งเตือน TBT ด้วย การแจ้งเตือนเหล่านี้ใช้เพื่อแสดงเส้นทาง TBT นอกเทมเพลตการนำทาง แอปสามารถปรับแต่งสีพื้นหลังการแจ้งเตือน TBT เพื่อเพิ่มระดับการมองเห็น

การแจ้งเตือนปกติ: หากต้องการสื่อสารข้อความอื่นๆ ที่เกี่ยวข้องกับการนำทาง เช่น การเปลี่ยนการตั้งค่าเส้นทาง แอปการนำทางก็ส่งการแจ้งเตือนปกติ (ไม่ใช่ TBT) (ดังที่แสดงที่นี่) หรือใช้การแจ้งเตือนการนำทางได้เช่นกัน ซึ่งจะปรากฏขึ้นได้แม้ว่าการ์ดการกำหนดเส้นทางจะปรากฏก็ตาม

การแจ้งเตือนการนำทาง

การแจ้งเตือนการนำทางจะแสดงข้อความชั่วคราวสั้นๆ และการดำเนินการที่ไม่บังคับในรูปแบบที่ไม่บล็อกเส้นทางการนำทาง เนื้อหาควรเรียบง่ายและเกี่ยวข้องกับงานการนำทาง เช่น การแจ้งเตือนอาจอธิบายการเปลี่ยนแปลงของสภาพการจราจร หรือถามว่าคนขับจะมารับลูกค้าได้หรือไม่

การแจ้งเตือนแต่ละรายการประกอบด้วยข้อมูลต่อไปนี้

  • ชื่อและคำบรรยายเพิ่มเติม
  • ไอคอน (ไม่บังคับ)
  • สัญญาณบอกสถานะความคืบหน้า – อาจเป็นแบบแท่งหรือ (ไม่บังคับ) อยู่ในปุ่มที่ระบุเวลา
  • สูงสุด 2 ปุ่ม โดยสามารถกำหนดปุ่มให้เป็นปุ่มหลักหรือเป็นปุ่มที่กำหนดเวลา (โดยมีสัญญาณบอกสถานะความคืบหน้าดังที่แสดงในรูปก่อนหน้า)

การแจ้งเตือนสามารถปิดได้โดยตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

  • การเลือกการดำเนินการใดๆ โดยผู้ใช้
  • หมดเวลาหลังจาก X วินาที (กำหนดค่าได้)
  • การปิดแอปโดยที่ผู้ใช้ไม่ได้ดำเนินการ
การแจ้งเตือนการนำทาง

เทมเพลตการนำทาง ไม่มีการโต้ตอบ
เทมเพลตการนำทาง ไม่มีการโต้ตอบ

แผนที่แบบเต็มหน้าจอเมื่อไม่มีการนำทางและการโต้ตอบบนแผนที่ (ตัวอย่าง Android Auto)

การ์ดกำหนดเส้นทางที่มีค่าประมาณการเดินทาง แถบการทำงาน (ด้านบน) และแถบการทำงานของแผนที่ (ที่ด้านขวาล่าง) ระหว่างการนำทางที่ใช้งานอยู่

ข้อกำหนด UX ของเทมเพลตการนำทาง

นักพัฒนาแอป

ต้อง แสดงการขับขี่อย่างน้อย 1 เส้นทางบนการ์ดเส้นทาง
ต้อง ใส่ปุ่มการทำงานอย่างน้อย 1 ปุ่มในแถบการทำงานเพื่อเปิดใช้โฟลว์ของผู้ใช้
ต้อง รวมปุ่มเลื่อนในแถบการทำงานของแผนที่หากแอปรองรับท่าทางสัมผัสการแพน
ควร ใช้ธีมมืดในแผนที่ที่แสดงในคลัสเตอร์
ควร ใส่เฉพาะปุ่มที่เกี่ยวข้องกับการโต้ตอบบนแผนที่บนแถบการทำงานบนแผนที่ (เช่น เข็มทิศ การทำจุดศูนย์กลาง หรือโหมด 3 มิติ)
ควร ใส่ปุ่มเพื่อสิ้นสุดการนำทางเมื่อให้เส้นทางแบบเลี้ยวต่อเลี้ยว
ควร ใช้สัญลักษณ์ที่เป็นมาตรฐานหรือสอดคล้องกับสัญลักษณ์สากลหรือเฉพาะประเทศ
ควร ใช้รูปทางแยกเพื่อแสดงเนื้อหาที่เกี่ยวข้องกับการนำทางเท่านั้น โดยขยายความกว้างของการ์ดไปกับรูปภาพ
ควร สร้างภาพเลนที่มีพื้นหลังโปร่งใสเพื่อให้กลมกลืนกับพื้นหลังของการ์ดกำหนดเส้นทาง
ควร ใช้การแจ้งเตือนสำหรับข้อมูลที่ไม่รบกวนงานการนำทางปัจจุบันเท่านั้น
พ.ค. แสดงข้อความสนับสนุนสั้นๆ ใต้ช่องทาง (แนะนำให้ใช้ Roboto 24) และอัตราส่วนคอนทราสต์ต่ำลงสำหรับช่องทางที่ไม่ได้ไฮไลต์
พ.ค. แสดงการขับขี่ 2 แบบบนการ์ดการกำหนดเส้นทาง เมื่อมีการจัดเส้นทางแบบต่อเนื่องกันอย่างรวดเร็ว
พ.ค. ใส่ภาพ เช่น เครื่องหมายเส้นทางในข้อความของการ์ดเส้นทาง (ขั้นตอนปัจจุบันและขั้นตอนถัดไป)
พ.ค. แสดงแผนที่แบบเต็มเมื่อผู้ใช้ขับรถโดยไม่แสดงเส้นทางแบบเลี้ยวต่อเลี้ยวแบบข้อความหรืออยู่ในโหมดขับรถฟรี
พ.ค. เลือกแสดงหรือซ่อนองค์ประกอบการ์ดการกำหนดเส้นทางและค่าประมาณการเดินทางตามต้องการ
พ.ค. วาดรายละเอียดและการแจ้งเตือนเกี่ยวกับการขับขี่บนแผนที่ เช่น ความเร็วปัจจุบัน ขีดจำกัดความเร็ว และกล้องข้างหน้า
พ.ค. ปรับแต่งสีพื้นหลังของการ์ดกำหนดเส้นทางและเปลี่ยนระหว่าง เซสชันการนำทางเพื่อแสดงประเภทถนนหรือเงื่อนไขที่เกี่ยวข้องอื่นๆ