Chuyển động trong thiết kế giao diện người dùng

Chuyển động giúp cho giao diện người dùng trở lên dễ sử dụng và dễ dùng hơn.

Bài viết được mình dịch từ bài Understanding motion của Google, theo ý hiểu của cá nhân. Nếu có thiếu sót ở đâu thì mong được mọi người góp ý giúp mình với nha.


I. Yếu tố cơ bản của chuyển động

1. Thể hiện thông tin: Chuyển động cho chúng ta thấy mối quan hệ giữa các thành phần trong giao diện thiết kế tương tác với nhau ra sao. Điều gì sẽ xảy ra khi ta bấm vào một đối tượng bất kì nào đó?
2. Thu hút sự tập trung: Chuyển động tập trung sự chú ý của người dùng vào những gì quan trọng mà đã được các nhà thiết kế định sẵn. Và không tạo ra sự mất tập trung khi không cần thiết.
3. Sự biểu cảm của chuyển động: Chuyển động tốt tạo lên những khoảnh khắc cảm thấy thú vị của người dùng trong quá trình sử dụng sản phẩm. Chúng ta có thể thêm chuyển động vào cho các nhân vật có trong thiết kế, để có biểu cảm đặc trưng của con người hoặc một phong cách cụ thể nào đó, giúp nâng cao tính tương tác với người dùng.

II. Một số ứng dụng cụ thể của chuyển động

1. Tạo hệ thống phân cấp: Bằng cách diễn tả sự tương tác khi người dùng di chuyển từ đối tượng cha đi đến một đối tượng con khác. Chuyển động giúp người dùng định hướng được sự phân cấp thông tin.
2. Tạo ra phản hồi và thông báo trạng thái: Ví dụ: Khi người dùng giữ chặt vào một biểu tượng ứng dụng trên màn hình điện thoại, và biểu tượng này có chuyển động rung lên và có thêm dấu X đỏ ở trên. Đó chính là sự phản hồi được tạo ra bởi chuyển động, nó rất thú vị phải không? Hoặc cung cấp trạng thái của đối tượng được người dùng bấm vào (VD: trạng thái “Bấm”, “Giữ” v...v)
3. Hướng dẫn người dùng: Khi ta cần hướng dẫn người dùng thực hiện một hành động nào đó thay vì dùng những hình ảnh tĩnh, thì sử dụng những chuyển động gợi ý sẽ thú vị và hấp dẫn hơn nhiều.
4. Tạo biểu cảm cho nhân vật: Trong các thiết kế nếu chúng ta có những nhân vật, thì nên thêm chuyển động vào các nhân vật này, để tăng tính hấp dẫn và tương tác hơn với người dùng

III. Phân tích sự biến đổi (transitions)

Trong quá trình biến đổi, các thành phần giao diện người dùng biến đổi được phân loại là: xuất hiện, biến mất hoặc lặp lại. Danh mục chuyển đổi của một đối tượng phụ thuộc đến cách nó chuyển đổi như thế nào. Các yếu tố giao diện người dùng không biến đổi được coi đối tượng tĩnh. Và chúng không nằm trong luật của sự biến đổi.

1. Đối tượng lặp lại: Khi bấm vào biểu tượng “menu” sẽ chuyển sang biểu tượng “đóng” và ngược lại.
2. Đối tượng biến mất: Như “tiêu đề của page” biến mất khỏi màn hình bằng cách mờ dần đi.
3. Đối tượng xuất hiện: Như 2 biểu tượng “thích” và “tìm kiếm”, xuất hiện trên màn hình bằng cách làm rõ dần lên.
4. Đối tượng tĩnh: Như menu mục bổ sung, không biến đổi.

IV. Thể hiện sự liên tục

Chuyển động giúp trải nghiệm của người dùng được chú ý một cách mượt mà, không bị gián đoạn. Khi giao diện người dùng bị thay đổi, chuyển động tạo sự liên tục giữa vị trí và sự xuất hiện của các đối tượng trước và sau khi biến đổi.
Sự liên tục được thể hiện bằng một hoặc nhiều kỹ thuật sau:

1. Chuyển hình (Tweening)
2. Mờ dần (Fading)
3. Liên kết chuyển động (Shared transformation)

1. Chuyển hình

Chuyển hình hiển thị sự tiến triển liên tục của các thay đổi được áp dụng cho đối tượng theo thời gian.


Ví dụ, một biến đổi có thể di chuyển trơn tru trên màn hình bằng cách chuyển hình biến đổi vị trí của nó, hoặc như trên hình ví dụ ta có thể thấy 1 nút bấm nổi (floating action button) có thể biến thành một thẻ bằng cách chuyển hình kích thước và bán kính góc của nút bấm nổi đó.

Chuyển hình có thể được áp dụng cho các thuộc tính có một loạt các giá trị trung gian, chẳng hạn như các màu dọc theo một phổ. Ví dụ, màu sắc có thể được chuyển hình từ màu đỏ sang màu xanh bằng cách hiển thị màu trung gian, như màu tím.

Chú ý: Không thể áp dụng tính năng chuyển hình cho các khía cạnh của giao diện người dùng không có giá trị hoặc trạng thái trung gian.

2. Mờ dần

Mờ dần đề cập đến độ mờ đục (opacity) của một đối tượng. Ngay cả khi giữa các đối tượng đó không có trạng thái trung gian, sự mờ dần có thể tạo ra các chuyển đổi trơn tru.

Ví dụ, một hình ảnh có thể chuyển đổi sang một hình ảnh khác bằng cách làm mờ đi độ mờ đục của hình ảnh để lộ ra hình ảnh khác.

2.1. Sự hòa tan (Dissolve)
Sự hòa tan tạo ra sự chuyển tiếp suôn sẻ giữa các đối tượng chồng chéo hoàn toàn với nhau, chẳng hạn như ảnh bên trong một thẻ hoặc một vật chứa khác. Một phần tử ở phía trênOne element fades to reveal another element hidden behind it. mờ dần (xuất hiện) hoặc ra (biến mất) để hiển thị hoặc ẩn một phần tử đằng sau nó.


2.2. Xuyên qua sự hòa tan (Cross-dissolve)
Xuyên qua sự hòa tan là khi cả hai đối tượng cùng mờ dần đồng thời (một đối tượng mờ dần để xuất hiện và một đối tượng mờ dần để biến mất). Khi đó cả hai đối tượng được hiển thị cùng nhau trong một phần của quá trình biến đổi, cùng với bất kỳ yếu tố nào đằng sau chúng. Sự chồng chéo của nhiều lớp đối tượng này có thể gây mất tập trung cho người dùng...


2.3. Làm mờ dần (Fade through)
Làm mờ dần là hành động khi một đối tượng mờ dần biến mất hoàn toàn trước khi một đối tượng mới dần xuất hiện. Những biến đổi này có thể được áp dụng cho văn bản, biểu tượng và các yếu tố khác không trùng lặp hoàn toàn. Kỹ thuật này cho phép nền hiển thị trong suốt quá trình biến đổi. Nó có thể tạo cảm giác liên tục giữa các màn hình khi được ghép nối với liên kết biến đổi.


3. Liên kết biến đổi (Shared transformation)

Liên kết biến đổi là đồng bộ chuyển động của các đối tượng để tạo độ mượt khi biến đổi.

Ví dụ, nếu 1 nút bấm nổi (floating action button) đột nhiên hiển thị một biểu tượng khác, nó có thể gây mất tập trung cho người dùng. Liên kết biến đổi tạo lên cảm giác mượt mà trong chuyển động khi thay đổi các biểu tượng trên nút bấm đó. Xem ví dụ dưới đây để rõ hơn:

1. Các biểu tượng trên nút bấm nổi (floating action button) thay đổi đột ngột.
2. Các biểu tượng trên nút bấm nổi (floating action button) thay đổi mượt mà khi chuyển động.

V. Bài học rút ra của mình sau bài viết:

1. Chuyển động trong thiết kế là một phần không thể thiếu cho một thiết kế tốt.
2. Thiết kế có chuyển động tốt sẽ tăng tính tương tác, cảm xúc của người dùng với sản phẩm hơn.
3. Chỉ với những kiến thức cơ bản được chia sẻ ở trên khi ứng dụng một cách khéo léo thì chúng ta cũng đã có một sản phẩm có các chuyển động tốt rồi.

Cảm ơn các bạn đã đọc hết bài dịch của mình. Đây là lần đầu tiên mình dịch nên chắc không thể tránh sự thiếu sót. Hi vọng các bạn ủng hộ và góp ý giúp mình để mình tiến bộ hơn nữa nhé

Tác giả: Maxx Nguyen ​