Chuyển động

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Chuyển động nên xuất hiện một cách hạn chế trong bối cảnh lái xe để thể hiện các 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 dùng báo cáo này để thông báo cho người lái xe mà không cần quan tâm đến họ.

Xem nhanh:

  • Tránh làm người dùng mất tập trung khi có chuyển động không cần thiết
  • Sử dụng chuyển động để tăng hiểu biết của người dùng và xây dựng mức độ thành thạo
  • Giúp ngôn ngữ chuyển động của bạn đủ linh hoạt cho tất cả phần cứng liên quan
  • Sử dụng mẫu chuyển động được đề xuất cho tình huống của bạn

Mẫ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ô hình chuyển động cụ thể sẽ áp dụng cho các tương tác sau:

  • Chuyển đổi giữa các ứng dụng
  • Chuyển đổi giữa các chế độ xem ngang hàng
  • Mở rộng 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 độ tiêu chuẩn, như mô tả trong Material Design, giúp đặt tiêu điểm vào quá trình kết thúc của quá trình chuyển đổi bằng cách tăng tốc quá trình chuyển đổi, sau đó giảm dần.


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, làm mờ một thành phần trong khung nhìn trong khi các thành phần khác mờ dần. Quá trình chuyển đổi này mô tả việc 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 chóng giữa các ứng dụng
Chuyển động mờ dần sẽ chuyển đổi người dùng nhanh chóng giữa các ứng dụng

Ví dụ:

Ví dụ về chuyển đổi ứng dụng
Mô hình chuyển đổi nhanh đưa người dùng từ ứng dụng điều hướ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 phân cấp trong một ứng dụng (còn gọi là chế độ xem ngang hàng), chẳng hạn như 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 chia sẻ. Chuyển động ngang sang hai bên này phản ánh trạng thái ở cùng một cấp trong ứng dụng.

Ví dụ về chuyển đổi ngang hàng
Sự chuyển đổi nhanh chóng đưa người dùng từ một ứng dụng điều hướng đến một ứng dụng đa phương tiện và quay lại

Ví dụ:

Mẫu chuyển động trục chung khi chuyển từ bài hát sang bài hát trong một ứng dụng đa phương tiện sẽ củng cố cả hai bài hát trong cùng một danh sách phát

Mở rộng 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 một hành động phụ, có liên quan, thì hành động phụ đó sẽ được đưa vào bằng một chuyển động dọc (lên hoặc xuống). Thao tác phụ này được hiển thị trên lớp phủ toàn màn hình, với nền màn hình phía trước hành động chính. Nếu có sự hiện diện của hành động chính thông qua màn, bạn sẽ cho thấy rằng người dùng vẫn đang trong quá trình thực hiện hành động đó.

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

Lớp phủ hành động phụ
Ở đây, hành động phụ tăng lê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 hình

Ví dụ:

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

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

Bạn có thể giảm thiểu các hành động đang diễn ra ở đị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 thao tác đang diễn ra trong nền.

  • Mở rộng: Khi người dùng nhấn vào một thao tác thu nhỏ, thao tác đó sẽ mở rộng 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.

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

Mở rộng màn hình thu nhỏ
Thao tác thu nhỏ sẽ mở rộng ra toàn màn hình khi thao tác đó được làm mờ dần ở đầu thao tác hiện tại

Ví dụ:

Ví dụ về nút hành động nổi trên Android Auto
FAB phát (nút hành động nổi) mở rộng sang chế độ xem đầy đủ, sau đó 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, không bắt buộc cần xuất hiện đột ngột trước một hành động đang diễn ra, thì người đó 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 này sẽ mờ dần ở giữa màn hình và có toàn bộ màn hình. Bắt đầu chuyển động từ vị trí gần vị trí bạn muốn thao tác mới xuất hiện nhất.

Ví dụ về hành động ngắn
Khi hành động gây rối có thể xuất hiện ở gần đầu màn hình, hãy trượt hành động đó từ trên đầu xuống một phần màn hình

Ví dụ:

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