Mục đích của Motion là giúp giao diện người dùng trở nên ấn tượng và trực quan hơn. Dù mang trong mình những lợi ích không cần bàn cãi, phần lớn chúng ta đều không khai thác được hết tiềm năng của công cụ này.

Điều này có thể do motion vẫn còn khá mới mẻ, chỉ mới xuất hiện trong giới thiết kế giao diện thời gian gần đây. Trước đó vài năm, một số giới hạn công nghệ khiến việc áp dụng motion rất phức tạp và không mang lại hiệu quả thực sự.

Tuy nhiên, các nguyên tắc motion trong giao diện người dùng và hình thức motion truyền thống về cơ bản khá giống nhau. Điều này có nghĩa là, nếu bạn nắm vững 12 nguyên tắc chuyển động nền tảng của Disney (Hé lộ 12 nguyên tắc tạo chuyển động của Disney), thì việc áp dụng motion vào trong thiết kế là việc dễ dàng như trở bàn tay.

Bài viết có sử dụng và không dịch trực tiếp một số thuật ngữ, để hiểu rõ hơn mời bạn đọc trước bài viết Thiết kế Animation: Những nguyên tắc nền tảng không thể bỏ qua.

Bắt đầu từ đâu?

Sự chuyển tiếp giữa các thành phần đồ họa trong giao diện có được trơn tru hay không, thì motion chính là yếu tố quyết định. Motion có thể được áp dụng khéo léo vào một chiếc logo, một icon động vui mắt hoặc các bức hình minh họa chuyển động đầy lôi cuốn. Vậy điều cần làm đầu tiên là bạn nên tự vun đắp cho mình những kiến thức cốt lõi về motion, giúp việc điều hướng trong giao diện trở nên bắt mắt, nhưng vẫn đem lại hiệu quả cao, lúc đó người dùng sẽ dễ dàng hơn khi thao tác với sản phẩm.

Những kiểu chuyển cảnh (transition patterns)

Khi thiết kế motion, yêu cầu quan trọng nhất không gì khác ngoài đáp ứng được 2 yếu tố: đơn giản, và đồng nhất. Có 2 loại hình motion đạt được các yếu tố quan trọng trên:

1. Chuyển cảnh dựa trên container. 
2. Chuyển cảnh không dựa trên containter.

Chuyển cảnh dựa trên container

Container được hiểu là một thẻ, khung hay khu vực chứa thông tin đi kèm giữa các thành phần đồ họa.

Loại chuyển cảnh này diễn ra qua ba giai đoạn:

1. Ban đầu, hiệu ứng chuyển động tương ứng với kiểu Material’s standard easing (diễn ra rất nhanh nhưng giảm dần tốc độ về sau).

2. Tiếp theo, co giãn tỉ lệ các thành phần đồ họa bên trong container cho tương xứng với tỉ lệ kích thước của container. Điều này giúp những thành phần đồ họa có sự kết nối chặt chẽ với container.

3. Cuối cùng, những thành phần đồ họa nên có hiệu ứng fade in và fade out tương xứng với kích thước của container như đồ thị bên dưới:

Việc áp dụng chung kiểu chuyển cảnh này cho tất cả các container trong giao diện sẽ tạo nên sự đồng nhất trong trải nghiệm. Thêm nữa, thời điểm kết thúc chuyển động nên chậm rãi, để người dùng có thể bắt kịp nội dung phần thông tin mới xuất hiện. 

Trường hợp một container xuất hiện từ ngay trong màn hình, thay vì tăng kích thước của container từ 0%, chúng ta nên tăng từ 95%, và thêm hiệu ứng fade in. Cách làm này giúp người dùng không bị mất tập trung vào hiệu ứng chuyển cảnh. Thêm nữa, đồ thị chuyển động Material’s deceleration easing nên được dùng trong trường hợp này. 

Chuyển cảnh không dựa trên container

Một lọai chuyển cảnh khác khi diễn ra sẽ không có container đi kèm, ví dụ như khi chạm vào một icon phía dưới giao diện, để chuyển sang một trang khác. Đối với trường hợp chuyển cảnh này, ta có 2 giai đoạn:

1. Khi bắt đầu, phần thông tin cũ sẽ bị mờ dần đi (fade out), và nội dung mới sẽ từ từ hiện rõ lên (fade in)
2. Khi phần nội dung mới kết thúc hiệu ứng fade in, nó sẽ chậm rãi phóng to lên tương ứng với đồ thị chuyển động Material’s deceleration easing.  

Sẽ tuyệt vời hơn rất nhiều, nếu bạn có thể áp dụng định hướng chuyển động cho hiệu ứng chuyển cảnh của mình. Lấy ví dụ, bạn đang có một cột dọc các lựa chọn, thì hiệu ứng chuyển cảnh cũng nên di chuyển lên xuống tùy theo vị trí của các lựa chọn, hoặc các lựa chọn nằm ngang hai bên thì hiệu ứng chuyển cảnh có thể di chuyển qua trái/phải. 

Hai điều quan trọng bạn nên nhớ

1. Giữ mọi thứ thật đơn giản

Chúng ta nên đặt chức năng (functionality) lên trên hình thức (style). Nói như vậy không có nghĩa là những phong cách thiết kế mang đậm dấu ấn thương hiệu sẽ bị bỏ qua, mà những yếu hiệu ứng chuyển động cầu kì, bắt mắt chỉ nên dành cho những đối tượng có kích thước nhỏ như logo, icon, hay loader. Có thể tác phẩm của bạn sẽ không bắt mắt như những gì bạn thường thấy trên Dribbble, nhưng ứng dụng bạn tạo ra sẽ mang lại hiệu quả trải nghiệm rất cao.

2. Chọn thời lượng và easing phù hợp

Thời lượng khi diễn ra chuyển động cũng cần đặc biệt quan tâm, nhanh đủ mức không làm người dùng chờ đợi khó chịu, nhưng lại không quá đột ngột. Điều này tùy thuộc vào kích cỡ của các thành phần đồ họa, nếu kích thước lớn thì 300ms (mili giây) là ổn, còn nhỏ thì 200ms. Mẹo cho bạn là nếu thấy nó quá nhanh, hay quá chậm, thì cứ tăng lần lượt 25ms cho đến khi tìm ra được con số phù hợp.

Hầu hết các hiệu ứng chuyển động hiện nay trên giao diện đều tuân theo Material’s standard easing. Tức là những thành phần đồ họa sẽ tăng tốc rất nhanh lúc đầu, và sau đó từ từ chậm lại, mục đích là để người dùng tập trung hơn vào phần tin được hiện ra sau cùng. Thật ra, hiệu ứng chuyển động này mô phỏng lại các chuyển động trong tự nhiên, bạn để ý thử xem, trong thực tế đâu có vật thể nào đột ngột bắt đầu rồi đột ngột kết thúc đâu đúng không? Nếu như đồ thị chuyển cảnh là một đường thẳng (linear hoặc symmetrical) thì trông chúng khá máy móc và không thực chút nào.

————————

Tất cả những nguyên tắc phía trên đều có thể áp dụng cho hầu hết các ứng dụng thông thường hiện nay. Tuy nhiên để có thể tạo ra phong cách và dấu ấn cho riêng bản thân, hoặc theo yêu cầu công ty thì mời bạn đọc thêm bài viết Customization – Material Design.

Người dịch: Đông Đông
Nguồn: Google Design