Chuyển động

Chuyển động nên xuất hiện một cách thận trọng trong ngữ cảnh lái xe để thể hiện khái niệm, thương hiệu và mối quan hệ giữa các thành phần. Bạn chỉ nên sử dụng tính năng này để thông báo cho người lái xe mà không làm họ chú ý.

Thông tin tóm tắt:

  • Tránh làm người dùng bị phân tâm bằng những chuyển động không cần thiết
  • Sử dụng chuyển động để nâng cao mức độ hiểu bài của người dùng và nâng cao mức độ thành thạo của họ
  • Làm cho ngôn ngữ chuyển động của bạn đủ linh hoạt cho tất cả phần cứng có liên quan
  • Sử dụng mẫu chuyển động được đề xuất cho tình huống của bạn

Kiểu chuyển động

Để hỗ trợ trải nghiệm người dùng nhất quán trên tất cả ứng dụng, các mẫu chuyển động cụ thể sẽ áp dụng cho các tương tác sau đây:

  • Chuyển đổi giữa các ứng dụng
  • Chuyển đổi giữa các chế độ xem ngang hàng
  • Kéo dài một hành động hiện có
  • Giảm thiểu và mở rộng một hành động
  • Làm gián đoạn một hành động

Các mẫu chuyển động này dựa trên tốc độ chuẩn, như được mô tả trong Material Design, trong đó tập trung vào việc kết thúc quá trình chuyển đổi bằng cách tăng tốc độ chuyển đổi nhanh chóng rồi chậm lại.


Chuyển đổi giữa các ứng dụng

Khi chuyển đổi giữa các ứng dụng, hãy sử dụng hiệu ứng chuyển đổi mờ dần, hiệu ứng này làm mờ một phần tử trong khung nhìn trong khi một phần tử khác mờ dần. Quá trình chuyển đổi này mô tả một lần thoát khỏi ứng dụng hiện tại trong khi chuyển nhanh sang một ứng dụng khác.

Chuyển đổi nhanh giữa các ứng dụng
Chuyển động chuyển đổi giúp người dùng nhanh chóng chuyển đổi giữa các ứng dụng

Ví dụ:

Ví dụ về việc chuyển đổi ứng dụng
Chuyển đổi nhanh chóng đưa người dùng từ một ứng dụng chỉ đường đến một ứng dụng đa phương tiện rồi quay lại

Chuyển đổi giữa các chế độ xem ngang hàng

Khi chuyển đổi giữa các chế độ xem ở cùng cấp thứ bậc trong ứng dụng (còn gọi là chế độ xem ngang hàng), chẳng hạn như các thẻ trong thanh ứng dụng hoặc bài hát trong danh sách phát, hãy sử dụng chuyển đổi Trục dùng chung. Chuyển động theo chiều ngang, từ hai bên của hiệu ứng chuyển đổi này phản ánh trạng thái giữ nguyên cấp độ trong ứng dụng.

Ví dụ về chuyển đổi ngang hàng
Quá trình chuyển đổi nhanh chóng đưa người dùng từ một ứng dụng chỉ đường đến một ứng dụng đa phương tiện rồi quay lại

Ví dụ:

Mẫu chuyển động trục dùng chung khi chuyển từ bài hát sang bài hát trong ứng dụng đa phương tiện giúp nhấn mạnh rằng cả hai bài hát đều nằm trong cùng một danh sách phát

Kéo dài một hành động hiện có

Khi người dùng đang trong quá trình xem hoặc thực hiện một hành động và sau đó thực hiện hành động phụ có liên quan, thì hành động phụ đó phải được đưa vào theo chuyển động dọc (lên hoặc xuống). Hành động phụ này hiển thị trên một lớp phủ toàn màn hình, với nền là màn nền, ở phía trước hành động chính. Sự hiện diện của hành động chính qua màn nền sẽ củng cố rằng người dùng vẫn đang thực hiện hành động đó.

Sau đó, hành động phụ được đóng theo hướng ngược lại của chuyển động mở. Chuyển động đảo ngược này sẽ mất ít thời gian hơn so với chuyển động gốc vì hành động này đã kết thúc.

Lớp phủ hành động phụ
Ở đây, hành động phụ xuất hiện từ hành động chính trên một lớp phủ, trong khi hành động chính vẫn hiển thị một phần phía sau màn nền

Ví dụ:

Ví dụ về lớp phủ hành động trên Android Auto
Khi chọn nút mục bổ sung trên thanh điều khiển nội dung nghe nhìn, thanh điều khiển nội dung đa phương tiện sẽ mở rộng theo chiều dọc trên một lớp phủ có nền màn nền

Giảm thiểu và mở rộng một hành động

Bạn có thể thu nhỏ các hành động đang diễn ra thành định dạng nhỏ hơn. Định dạng nhỏ hơn này cho phép người dùng làm nhiều việc cùng lúc trong khi hành động đang diễn ra đó chạy trong nền.

  • Mở rộng: Khi người dùng nhấn vào một hành động thu nhỏ, hành động đó sẽ mở rộng kích thước và lấp đầy toàn màn hình bằng cách sử dụng hiệu ứng chuyển đổi mờ dần.

  • Thu nhỏ: Khi thu nhỏ một hành động đang diễn ra, hãy sử dụng đảo ngược của chuyển động này. Chuyển động thu nhỏ sẽ mất ít thời gian hơn so với chuyển động mở rộng, vì người dùng đang rời khỏi hành động này.

Mở rộng màn hình thu nhỏ
Hành động thu nhỏ sẽ mở rộng ra toàn màn hình khi nó mờ dần ở phía trên hành động hiện tại

Ví dụ:

Ví dụ về nút hành động nổi trên Android Auto
Nút hành động nổi (FAB) phát sẽ mở rộng thành chế độ xem toàn bộ khi phát rồi thu gọn thông qua mũi tên xuống

Làm gián đoạn một hành động

Khi một hành động ngắn, tùy chọn cần xuất hiện đột ngột trước một hành động đang diễn ra, nó sẽ trượt (lên hoặc xuống) từ cạnh màn hình với một phần màn hình. Ngoài ra, màn hình sẽ hiện dần vào giữa màn hình với màn hình toàn bộ. Bắt đầu chuyển động từ vị trí gần nhất với vị trí mà bạn muốn thao tác mới xuất hiện.

Ví dụ về hành động ngắn
Khi hành động gây phiền toái xuất hiện ở gần đầu màn hình, hãy trượt hành động đó vào từ trên cùng bằng một màn hình một phần

Ví dụ:

Ví dụ về thông báo
Trong ví dụ này về Android Auto, thông báo về ngã rẽ sắp tới sẽ trượt từ đầu màn hình xuống với một màn hình một phần để nội dung nghe nhìn đang phát vẫn hiển thị