การเคลื่อนไหวควรปรากฏขึ้นเพียงเล็กน้อยในบริบทของการขับเคลื่อนเพื่อสื่อถึงแนวคิด การสร้างแบรนด์ และความสัมพันธ์ระหว่างองค์ประกอบต่างๆ ควรใช้เพื่อให้ข้อมูลกับผู้ขับเท่านั้นโดยไม่ทำให้เสียสมาธิ
ข้อมูลโดยย่อ
- หลีกเลี่ยงไม่ให้ผู้ใช้เสียสมาธิด้วยการเคลื่อนไหวที่ไม่จำเป็น
- ใช้การเคลื่อนไหวเพื่อเพิ่มความเข้าใจของผู้ใช้และสร้างความเชี่ยวชาญ
- ทำให้ภาษาสำหรับการเคลื่อนไหวมีความยืดหยุ่นเพียงพอสำหรับฮาร์ดแวร์ที่เกี่ยวข้องทั้งหมด
- ใช้รูปแบบการเคลื่อนไหวที่แนะนำสำหรับสถานการณ์ของคุณ
รูปแบบการเคลื่อนไหว
รูปแบบการเคลื่อนไหวที่เฉพาะเจาะจงจะมีผลกับการโต้ตอบต่อไปนี้เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่สอดคล้องกันในทุกแอป
- การสลับระหว่างแอป
- การสลับระหว่างมุมมองที่คล้ายกัน
- การขยายการดำเนินการที่มีอยู่
- การลดและขยายการดำเนินการ
- ขัดขวางการดำเนินการ
รูปแบบการเคลื่อนไหวเหล่านี้จะอิงตามการค่อยๆ เปลี่ยนมาตรฐานตามที่อธิบายไว้ในดีไซน์ Material ซึ่งจะเน้นไปที่การสิ้นสุดของการเปลี่ยนโดยเร่งให้เร็วขึ้น จากนั้นค่อยๆ ช้าลง
การสลับระหว่างแอป
เมื่อสลับระหว่างแอป ให้ใช้การเปลี่ยนแบบครอสเฟด ซึ่งจะเฟดองค์ประกอบหนึ่งให้เข้ามาให้เห็นในขณะที่องค์ประกอบอื่นค่อยๆ จางลง การเปลี่ยนนี้แสดงให้เห็นการออกจากแอปพลิเคชันปัจจุบันในขณะที่ย้ายไปยังอีกแอปพลิเคชันหนึ่งอย่างรวดเร็ว
![การสลับระหว่างแอปอย่างรวดเร็ว](https://developers.google.cn/cars/design/android-auto/design-system/images/1-Peer-Transition_PrimaryTransition.gif?authuser=1&hl=th)
ตัวอย่าง
![ตัวอย่างการเปลี่ยนแอป](https://developers.google.cn/cars/design/android-auto/design-system/images/App-Switch_RoadMap.gif?authuser=1&hl=th)
การสลับระหว่างมุมมองที่คล้ายกัน
เมื่อสลับมุมมองที่ลำดับชั้นเดียวกันในแอป (หรือเรียกว่ามุมมองที่คล้ายกัน) เช่น แท็บในแถบแอปหรือเพลงในเพลย์ลิสต์ ให้ใช้การเปลี่ยนแกนที่ใช้ร่วมกัน การเคลื่อนไหวแบบเคียงข้างกันในแนวนอนของการเปลี่ยนนี้จะแสดงสถานะของการคงระดับเดิมภายในแอป
![ตัวอย่างการเปลี่ยนแบบเพียร์](https://developers.google.cn/cars/design/android-auto/design-system/images/1-Peer-Transition.gif?authuser=1&hl=th)
ตัวอย่าง
![](https://developers.google.cn/cars/design/android-auto/design-system/images/Song-Switch_Projected.gif?authuser=1&hl=th)
การขยายการดำเนินการที่มีอยู่
เมื่อผู้ใช้อยู่ในกระบวนการดูหรือดำเนินการหนึ่ง แล้วดำเนินการรองที่เกี่ยวข้อง การดำเนินการระดับรองนั้นควรถูกเพิ่มโดยการเคลื่อนไหวแนวตั้ง (ขึ้นหรือลง) การดำเนินการรองนี้จะแสดงบนการวางซ้อนแบบเต็มหน้าจอโดยมีพื้นหลัง Scrim อยู่หน้าการดำเนินการหลัก การมีการกระทำหลักผ่านทาง Scrim ตอกย้ำว่าผู้ใช้ยังอยู่ในระหว่างดำเนินการดังกล่าว
จากนั้นการดำเนินการรองจะปิดในทิศทางย้อนกลับของการเคลื่อนไหวเปิด การเคลื่อนไหวแบบย้อนกลับนี้ควรใช้เวลาน้อยกว่าการเคลื่อนไหวเดิมเนื่องจากจะเป็นการเสร็จสิ้นการดำเนินการ
![การวางซ้อนการกระทำรอง](https://developers.google.cn/cars/design/android-auto/design-system/images/3_Secondary_actions.gif?authuser=1&hl=th)
ตัวอย่าง
![ตัวอย่างการวางซ้อนการทำงาน Android Auto](https://developers.google.cn/cars/design/android-auto/design-system/images/Action-Bar_Projected.gif?authuser=1&hl=th)
การลดและขยายการดำเนินการ
การดําเนินการที่ดำเนินอยู่สามารถย่อเป็นรูปแบบที่เล็กลงได้ รูปแบบที่เล็กลงนี้ช่วยให้ผู้ใช้ทำงานหลายอย่างพร้อมกันได้ในขณะที่การดำเนินการที่ดำเนินอยู่จะทำงานอยู่เบื้องหลัง
การขยาย: เมื่อผู้ใช้แตะการทำงานที่ย่อขนาดไว้ การดำเนินการที่ย่อขนาดไว้จะขยายขนาดและแสดงเต็มหน้าจอโดยใช้การเปลี่ยนแบบเฟดเข้า
การย่อเล็กสุด: เมื่อลดการดำเนินการที่ดำเนินอยู่ ให้ใช้การย้อนกลับของการเคลื่อนไหวนี้ การเคลื่อนไหวให้น้อยที่สุดควรใช้เวลาน้อยกว่าการเคลื่อนไหวที่ขยาย เนื่องจากผู้ใช้กำลังออกจากการดำเนินการ
![การขยายหน้าจอที่ย่อเล็กสุด](https://developers.google.cn/cars/design/android-auto/design-system/images/6_Mini_window_to_full_screen.gif?authuser=1&hl=th)
ตัวอย่าง
![ตัวอย่างปุ่มการทำงานแบบลอยใน Android Auto](https://developers.google.cn/cars/design/android-auto/design-system/images/Fab.gif?authuser=1&hl=th)
ขัดขวางการดำเนินการ
เมื่อการทำงานแบบไม่บังคับสั้นๆ ปรากฏขึ้นข้างหน้าการดำเนินการที่ดำเนินอยู่ ทันทีนั้นควรเลื่อน (ขึ้นหรือลง) จากขอบของหน้าจอโดยมีเครื่องหมายแจ้งเตือนบางส่วน อีกทางเลือกหนึ่งคือ ควรจางลงตรงกลางหน้าจอพร้อมหน้าจอแบบเต็ม เริ่มการเคลื่อนไหวจากตำแหน่งที่คุณต้องการให้การทำงานใหม่ปรากฏมากที่สุด
![ตัวอย่างการกระทำแบบสั้น](https://developers.google.cn/cars/design/android-auto/design-system/images/5_Disruptive.gif?authuser=1&hl=th)
ตัวอย่าง
![ตัวอย่างการแจ้งเตือน](https://developers.google.cn/cars/design/android-auto/design-system/images/HUN.gif?authuser=1&hl=th)