THIẾT KẾ ANIMATION: NHỮNG NGUYÊN TẮC NỀN TẢNG KHÔNG THỂ BỎ QUA

Chắc hẳn ai trong chúng ta cũng rất hào hứng khi gặp phải một thiết kế app hay website có hiệu ứng chuyển động (animation) thật mượt mà và bắt mắt.

Trong thiết kế UI/UX, animation không những làm người dùng cảm thấy thích thú khi sử dụng, mà nó còn giúp việc điều hướng và tương tác trở nên trực quan hơn rất nhiều.

Hiện nay các bài viết trên mạng chỉ đề cập chung chung hay chỉ một phần nhỏ về animation. Hiếm có bài nào trong số đó nhắc đến các quy tắc trọng tâm thiết yếu, để ta có thể áp dụng ngay vào các trường hợp cụ thể khi thiết kế trải nghiệm người dùng. Do vậy, bài viết này sẽ không nêu ra bất kì khái niệm nào mới, đây chỉ là một bài tổng hợp lại các nguyên tắc nền tảng và một vài kinh nghiệm nho nhỏ để bạn có thể áp dụng chúng vào các vấn đề thực tế trong thiết kế của mình, mà không phải tốn công đọc quá nhiều tài liệu trên mạng.

Cùng bắt đầu nhé!

Nhanh cỡ bao nhiêu là vừa?

Một chuyển động không nên diễn ra quá nhanh khiến người xem không kịp nhìn thấy gì, hay quá chậm để gây khó chịu khi để họ phải chờ lâu.

Nhiều nghiên cứu đã chỉ ra rằng thời lượng của một chuyển động nên diễn ra vào khoảng 200 đến 500 ms (millisecond/mili-giây). Kết luận trên được đúc kết từ các thí nghiệm về thần kinh học, nếu một chuyển động ngắn hơn 100 ms, não bộ chúng ta sẽ không kịp phản ứng chuyện gì đang xảy ra; nếu dài hơn 1s thì sẽ rất tốn thời gian, và mang lại cảm giác giật lag ngán ngẩm đến cho người xem.

Trong Material Design Guidelines (giáo trình thiết kế theo phong cách Material Design), Google cũng giới hạn thiết lập chuyển động cho smartphone là 200-300 ms, và lâu hơn 30% đối với tablet 400-450 ms. Lý do rất đơn giản, tablet có kích cỡ màn hình to hơn rất nhiều, vì vậy các thành phần đồ họa cũng phải đi một quãng đường dài hơn so với trên smartphone. Và tương tự thế, trên smartwatch thời lượng trên chỉ còn lại 150-200ms.

Trường hợp chuyển trang trên các website lại là một câu chuyện khác. Hầu như người dùng Internet nào cũng muốn click chuột một cái thì website phải được hiện ra ngay lập tức. Đó là lý do thời lượng chuyển trang lúc này phải được diễn ra ngắn hơn 2 lần so với trên smartphone, tức vào khoảng 150-200 ms. Vì vậy hãy hạn chế các hiệu ứng chuyển động diễn ra quá chậm, không thôi người dùng sẽ nghĩ máy tính họ có vấn đề, hay cá mập mới cắn cáp quang nữa đấy.

Trường hợp chuyển trang nội dung là thế, còn lại, các chuyển động chỉ mang tính chất trang trí thì chậm hơn một chút cũng không sao cả.

Ngoài ra, một chuyển động diễn ra phụ thuộc vào hai yếu tố chính: kích thước màn hình và kích thước vật thể. Những vật thể nhỏ bé thì nên di chuyển với tốc độ nhanh hơn, còn những vật thể to lớn phức tạp thì nên đi chậm lại một tí.

Với một nhóm vật thể có cùng kích thước thì vật thể nào dừng lại đầu tiên, vật thể đó nên có quãng đường đi ngắn nhất.

Khi có sự va chạm giữa các vật thể, năng lượng phải được phân bố đều ra giữa chúng theo định luật vật lý. Tốt nhất là nên loại bỏ hiệu ứng nảy (bounce effect).

Các chuyển động nên diễn ra thật dứt khoát và rõ ràng, đừng nên áp dụng hiệu ứng làm mờ (blur effect). Vì cũng không dễ dàng gì, thậm chí là trên các thiết bị di động tiên tiến hiện nay, có thể tái tạo lại được hiệu ứng phức tạp như vậy.

Các thẻ hiển thị danh sách thông tin (danh bạ, hộp thư đến, tin tức,…) nên có khoảng thời gian xuất hiện thật ngắn, lý tưởng nhất là mỗi thẻ nên chỉ chiếm khoảng 20 đến 25 ms vì chậm quá sẽ khiến người dùng bực mình đấy.

Easing

Easing là một trong những quy tắc cực kì căn bản khi thiết kế animation (tham khảo thêm tại: https://vimeo.com/93206523), làm các chuyển động trong thiết kế trở nên rất thật, tự nhiên, và không khô cứng. Quy tắc này được nhắc đến trong cuốn The Illusion of Life: Disney Animation, bởi hai nhà thiết kế animator gạo cội cho Disney—Ollie Johnston và Frank Thomas.

Để có được những chuyển động thật mượt mà, không máy móc, các vật thể nên di chuyển với các tốc độ khác nhau, tức là có sự tăng giảm tốc độ ở trong đó.

Linear motion (Di chuyển theo đồ thị tuyến tính)

Mọi vật thể trên Trái Đất đều bị ảnh hưởng bởi các định luật vật lý, nếu chúng cứ di chuyển một cách đều đặn, cùng với một tốc độ cố định từ đầu đến cuối thì sẽ rất cứng nhắc, không tự nhiên.

Vì thế dân nhà nghề thường dựa vào animation curve (tạm dịch: đường cong chuyển động). Với trục y biểu diễn vị trí của vật thể, còn trục x thì biểu diễn thời gian diễn ra chuyển động.

Nếu muốn áp dụng chuyển động tuyến tính, bạn nên dùng cho các trường hợp mà vị trí vật thể được cố định như thay đổi màu sắc hay độ đậm nhạt.

Ease-in (gia tốc tăng cố định)

Bạn có thể thấy trong đồ thị bên dưới, vật thể đi chầm chậm lúc ban đầu, sau đó mới dần tăng tốc độ lên. Điều đó có nghĩalà chúng đang di chuyển với một gia tốc (acceleration) cố định đấy.

Những khi vật thể bay ra khỏi màn hình và một đi không trở lại (thông báo hệ thống hay thẻ hiển thị thông tin), bạn nên áp dụng animation curve với gia tốc cố định:

Animation curve giúp cho các thiết kế diễn ra trông rất tự nhiên không máy móc, khiến ta thích thú hơn khi nhìn. Như ví dụ bên dưới, tất cả đều xuất phát cùng một điểm và đi đến cùng một vị trí, nhưng nhờ chút tinh chỉnh nhỏ ở animation curve, chúng trở nên sống động và chuyên nghiệp hơn hẳn.

Ease-out (gia tốc giảm cố định)

Quy tắc này ngược lại với Ease-in ở trên, vật thể ban đầu di chuyển với một tốc độ rất nhanh, sau đấy lại từ từ hạ tốc độ xuống.

Loại animation curve này được dùng khi một vật thể bất ngờ xuất hiện trên màn hình, di chuyển thật nhanh lúc ban đầu, nhưng về sau chậm lại để người xem có thể nắm bắt được.

Ease-in-out

Với thể loại đồ thị standard curve, (tạm dịch: đường cong tiêu chuẩn), vật thể sẽ di chuyển nhanh lúc ban đầu, sau đó từ từ hạ tốc độ về bằng 0. Đây gần như là loại animation phổ biết nhất khi thiết kế giao diện, nếu bạn bối rối không biết xài cái nào cho đúng, hãy sử dụng loại này.

Theo Material Design Guidelines, chúng ta nên sử dụng asymmetric curve để các chuyển động có phần mượt mà và thật hơn so với standard curve. Phần cuối của chuyển động nên gây được sự chú ý, thời gian lúc tăng tốc nên ngắn hơn một tí so với lúc giảm tốc. Như thế, người xem sẽ bị thu hút bởi các chuyển động gần cuối và chuyển tiếp sang giai đoạn kế tiếp được mượt mà hơn.

Ease-in-out còn được sử dụng khi một thành phần di chuyển từ vị trí này đến vị trí khác trong cùng một trang. Điều này sẽ tránh làm người dùng choáng váng khi cứ nhìn một vật thể bay loạn xạ.

Và còn một trường hợp nữa mà bạn cũng nên áp dụng chuyển động trên, đó là khi đóng một thẻ để trở về màn hình chính trước đó (navigation drawer-hides) như bên dưới:

Đọc đến đây bạn có nhận thấy, dường như có một qui tắc đều áp dụng  chung cho hầu hết mọi thể loại animation không? Đó chính là khoảng đầu thời gian chuyển động không nhất thiết phải giống với khoảng cuối chuyển động. Như trong trường hợp mới vừa nêu, chuyển động xuất hiện ban đầu với ease-out, nhưng lại kết thúc bằng ease-in-out. Thêm nữa, Google Material Design cũng nói thêm rằng, để người dùng bị thu hút khi vật thể xuất hiện, thì khoảng thời gian đó nên dài hơn một chút.

Thổi hồn choreography vào thiết kế giao diện

Thiết kế animation cũng giống như choreography vậy, quan trọng là làm sao để người xem cảm nhận được sự uyển chuyển, mềm mại và tự nhiên trong từng chuyển động.

Có hai thể loại choreography: Equal Interaction (tương tác đồng điệu) và subordinate interaction (tương tác chính phụ)

Equal Interaction (tương tác đồng điệu)

Sự xuất hiện của các vật thể chỉ nên tuân theo một nguyên tắc nhất định và đồng điệu với nhau.

Như có thể thấy ở hình dưới (phải), các thẻ xuất hiện theo đúng một trật tự từ trên xuống sẽ làm mắt người xem cảm thấy dễ chịu và tập trung hơn hẳn, so với hình (trái) xuất hiện một cách rất lộn xộn, khó hiểu. Và trường hợp tất cả các thẻ xuất hiện cùng một lúc cũng không phải là ý hay.

Với trường hợp dưới đây, chúng ta không nên để từng thành phần lần lượt xuất hiện như ở trên, vì nó sẽ kéo dài thời gian chuyển động lâu hơn khiến người xem cứ phải đảo mắt liên tục để nhìn từng cái. Tốt nhất là cứ xuất hiện theo một đường chéo như ở hình bên trái:

Subordinate interaction (tương tác chính phụ)

Trong lúc diễn ra chuyển động, chúng ta cần xác định thành phần nào là trọng tâm cần gây được sự chú ý nhiều nhất và các thành phần còn lại chỉ nên đóng vai phụ. Việc phân ra chính phụ như vậy sẽ giúp người dùng mới biết được phần thông tin nào đáng được quan tâm nhất.

Khi có quá nhiều thành phần di chuyển cùng một lúc, người dùng sẽ không biết nên tập trung vào cái nào. Lời khuyên là, bạn nên tối giản số lượng thành phần chuyển động lại và tập trung vào thứ bạn muốn người dùng chú ý đến nhất.

Cũng lại theo Material Design, một vật thể khi bị co giãn không theo tỉ lệ ban đầu (hình vuông thành hình chữ nhật) thì chúng nên di chuyển theo hình vòng cung như hình dưới.

Còn khi di chuyển theo một đường thẳng thì vật thể đó trước sau phải không bị co giãn tỉ lệ.

Quỹ đạo của chuyển động nên khớp với chiều khi cuộn trang. Ví dụ như, một giao diện đang cuộn dọc từ trên xuống, thì ta nên dùng quỹ đạo Vertical out (tức là bắt đầu là đi ngang nhưng sau đó đi theo chiều từ trên xuống). Còn trường hợp ngược lại thì dùng Horizontal out (bắt đầu di chuyển theo trục dọc, sau đó thì di chuyển ngang).

Đường đi giữa các vật thể cũng không nên giao nhau, lý do là khi di chuyển, các vật thể mà chồng lên nhau thì sẽ khiến chúng trông rất không thực.

Một trường hợp khác nữa là, nếu một vật thể di chuyển ngang qua các vật thể khác, thì nó nên tuân theo các định luật vật lý (như hình dưới):

Tổng kết

Cuối cùng thì, chúng ta cũng đã đi qua được hết các nguyên tắc trọng tâm khi thiết kế animation. Bạn chỉ cần nhớ một điều: Cố gắng mô phỏng chuyển động trong tác phẩm sao cho càng giống trong thực tế càng tốt.

Một designer chuyên nghiệp sẽ không làm người dùng bị phân tâm bởi những chuyển động không hợp lý và rối mắt. Trái lại, designer chuyên nghiệp giúp người dùng giải quyết được nhu cầu một cách nhanh chóng và hiệu quả nhất.

Người dịch: Đông Đông
Nguồn: UXDesign.cc