การเคลื่อนไหว

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

คำแนะนำโดยย่อ (TL;DR):

  • หลีกเลี่ยงไม่ให้ผู้ใช้เสียสมาธิด้วยการเคลื่อนไหวที่ไม่จำเป็น
  • ใช้การเคลื่อนไหวเพื่อเพิ่มความเข้าใจของผู้ใช้และสร้างความเชี่ยวชาญ
  • ทำให้ภาษาสำหรับการเคลื่อนไหวมีความยืดหยุ่นเพียงพอสำหรับฮาร์ดแวร์ที่เกี่ยวข้องทั้งหมด
  • ใช้รูปแบบการเคลื่อนไหวที่แนะนำสำหรับสถานการณ์ของคุณ

หลักการการเคลื่อนไหว

เมื่อออกแบบการเคลื่อนไหวสำหรับอินเทอร์เฟซของ Android สำหรับรถยนต์ โปรดคำนึงถึงหลักการพื้นฐาน 3 ข้อ ได้แก่ ปลอดภัย ให้ข้อมูล และยืดหยุ่น

ปลอดภัย

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

GIF ดวงตา

มีสาระ

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

GIF ที่ให้ข้อมูล

ยืดหยุ่น

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

GIF หน้าจอ Flex

รูปแบบการเคลื่อนไหว

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

  • การสลับระหว่างมุมมองระดับเดียวกัน
  • การย้ายไปยังมุมมองรายละเอียด
  • การขยายการดำเนินการที่มีอยู่
  • การลดและขยายการดำเนินการ
  • ขัดขวางการดำเนินการ

รูปแบบการเคลื่อนไหวทั้งหมดในส่วนนี้จะอิงตามการค่อยๆ เปลี่ยนมาตรฐาน ดังที่อธิบายไว้ในหลักเกณฑ์การค่อยๆ เปลี่ยนของดีไซน์ Material กล่าวคือ การเคลื่อนไหวจะเร่งความเร็วขึ้นและค่อยๆ ลดความเร็วลงเพื่อดึงโฟกัสไปยังจุดสิ้นสุดของการเปลี่ยน


การสลับระหว่างมุมมองระดับเดียวกัน

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

ตัวอย่างการเปลี่ยนแบบเพียร์
การครอสเฟดอย่างรวดเร็วจะนำผู้ใช้จากแอปการนำทางไปยังแอปสื่อและกลับมาที่แอปสื่ออีกครั้งใน Android Automotive

ตัวอย่าง

ใน Android Automotive OS การเคลื่อนไหวแบบเคียงข้างกันเมื่อเปลี่ยนจากแท็บหน้าแรกเป็นแท็บเพลย์ลิสต์ในแอปสื่อจะเน้นย้ำว่าทั้ง 2 แท็บเป็นมุมมองเนื้อหาระดับบนสุด

การย้ายไปยังมุมมองรายละเอียด

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

การเปลี่ยนจากผู้ปกครองเป็นเด็ก
จากหน้าจอหลัก องค์ประกอบย่อยจะยกขึ้นและขยายออกในตำแหน่งเดิม

ตัวอย่าง

เปลี่ยนเป็นมุมมองรายละเอียด
ในเทมเพลตสื่อของ Android Automotive OS เมื่อผู้ใช้คลิกอัลบั้มที่ต้องการในตารางกริดของอัลบั้ม รายการเพลงสำหรับอัลบั้มนั้นจะขยายและขยายออกเพื่อเจาะลึกรายละเอียด

การขยายการดำเนินการที่มีอยู่

เมื่อผู้ใช้กำลังดำเนินการที่เกี่ยวข้อง ให้ใช้การเคลื่อนไหวแนวตั้ง (ขึ้นหรือลง) เพื่อแนะนำการดำเนินการรองบนการวางซ้อนแบบเต็มหน้าจอ โดยมีพื้นหลัง Scrim อยู่ที่ด้านบนของการดำเนินการหลัก การได้เห็นการกระทำหลักผ่าน SCrim ตอกย้ำว่าผู้ใช้ยังอยู่ในการกระทำนั้น

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

การวางซ้อนการกระทำรอง
ในส่วนนี้ การดำเนินการรองปรากฏขึ้นจากการดำเนินการหลักบนโฆษณาซ้อนทับ ในขณะที่การดำเนินการหลักยังคงมองเห็นได้บางส่วนด้านหลัง Scrim

ตัวอย่าง

ตัวอย่างการวางซ้อนการทำงานในระบบปฏิบัติการ Android Auto
ในเทมเพลตสื่อของ Android Automotive OS เมื่อผู้ใช้แตะปุ่มรายการเพิ่มเติมเพื่อขยายแถบควบคุม ตัวควบคุมเพิ่มเติมจะปรากฏขึ้นและปรากฏบนการวางซ้อน

การลดและขยายการดำเนินการ

เมื่อขยายการดำเนินการที่ดำเนินอยู่ซึ่งลดขนาดให้เล็กลงบนหน้าจอเพื่อให้ทำงานหลายอย่างพร้อมกัน ให้ใช้มาสก์หน้าต่างที่ขยายได้และเฟดเข้าแบบเต็มหน้าจอ

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

การขยายหน้าจอที่ย่อเล็กสุด
การดำเนินการที่ย่อขนาดจะขยายเป็นโหมดเต็มหน้าจอเมื่อค่อยๆ ปรากฏขึ้นที่ด้านบนของการดำเนินการปัจจุบัน

ตัวอย่าง

ตัวอย่างแถบควบคุม Android Automotive OS
ในเทมเพลตสื่อของ Android Automotive OS แถบควบคุมที่ย่อขนาดจะขยายเป็นมุมมองการเล่นแบบเต็ม จากนั้นจะย่อกลับเป็นรูปแบบแบบย่อเมื่อผู้ใช้แตะลูกศรลง

ขัดขวางการดำเนินการ

เมื่อการดำเนินการสั้นๆ ที่ไม่เป็นการรบกวนปรากฏขึ้นเหนือการดำเนินการที่ดำเนินอยู่อย่างกะทันหัน ให้เลื่อนขึ้นหรือลงจากขอบของหน้าจอ (โดยมีรอยขีดข่วนบางส่วน) หรือจางลงไปตรงกลาง (โดยมี Scrim แบบเต็ม) เริ่มการเคลื่อนไหวจากตำแหน่งที่คุณต้องการให้การทำงานใหม่ปรากฏมากที่สุด

ตัวอย่างการกระทำแบบสั้น
เมื่อการดำเนินการรบกวนควรปรากฏขึ้นใกล้กับด้านบนของหน้าจอ ให้เลื่อนหน้าจอจากด้านบนโดยมีเครื่องหมายบางส่วน

ตัวอย่าง

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