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

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

คำแนะนำโดยสรุป (TL;DR):

หลักการเคลื่อนที่

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

ปลอดภัย

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

ให้ข้อมูล

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

ยืดหยุ่นได้

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

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

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

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

รูปแบบการเคลื่อนไหวทั้งหมดในส่วนนี้อิงตามการปรับความเร็วมาตรฐาน (standard easing) ตามที่ได้กล่าวไว้ในแนวทางการออกแบบ Material Design Easing กล่าวคือ การเคลื่อนไหวจะเร็วขึ้นอย่างรวดเร็วและค่อยๆ ช้าลง เพื่อดึงความสนใจไปที่จุดสิ้นสุดของการเปลี่ยนผ่าน

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

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

ตัวอย่าง

เมื่อเข้าสู่มุมมองรายละเอียด

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

ตัวอย่าง

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

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

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

ระยะเวลา

แนวทางการออกแบบ Material Design เกี่ยวกับระยะเวลาที่ควรใช้ในการเปลี่ยนภาพ