Interface animation (IA) – chuyển động trong giao diện – là để thể hiện tương tác qua lại giữa các màn hình giao diện, và giữa các thành tố trên một màn hình giao diện nữa, ngoài ra còn định hướng tập trung của người dùng, dẫn dắt họ sử dụng app một cách dễ dàng hơn. Lúc tìm hiểu các bài viết về animation, tui nhận ra là đa phần các bài đó chỉ nói về một vài use-case cụ thể hoặc nói chung chung về animation. Mà tui cũng chưa thấm nhuần hết các bài viết về những quy tắc liên quan đến chuyển động trong giao diện. Oke trong bài này tui sẽ không viết thêm gì mới, chỉ là tóm gọn lại các nguyên tắc & quy luật trong một bài, để cho mấy bạn designer muốn bắt đầu mày mò AI đỡ tốn thời gian kiếm thông tin ở chỗ khác.
Nếu đối tượng thay đổi trạng thái hoặc vị trí thì thời lượng cho chuyển động của nó cần phải đủ chậm để người nhìn nhận biết được sự thay đổi, mà cũng phải nhanh, đủ để người ta không phải chờ.
Nhiều nghiên cứu cho ra tốc độ tối ưu cho một chuyển động là khoảng 200-500ms. Con số này dựa trên các tính chất cụ thể cuả bộ não con người, đại khái đối với nhận thức của chúng ta những chuyển động ngắn hơn 100ms là mấy cái chuyển động chớp nhoáng, mình không thể nào nhận thấy được. Còn các chuyển động dài hơn 1s thì khiến người ta chờ, gây chán.
Trên mobile thì MDG (Material Design Guidlines) cũng khuyên nên dùng thời lượng chuyển động vào khoảng 200-300ms. Trên tablet thì thời lượng chuyển động nên dài hơn tầm 30%, là khoảng 400-500ms. Lý do đơn giản là màn hình lớn hơn thì đối tượng phải đi một đoạn dài hơn. Còn các món đeo trên người (như smart watch chằng hạn) có màn hình nhỏ nên khoảng di chuyển cũng ngắn lại, thời lượng cũng nên ngắn đi 30%, khoảng 150-200ms.
Web animation thì phải xử lý kiểu khác. Mình đã quen mới chuyện mở một trang web gần như ngay lập tức trên trình duyệt rồi, nên việc chuyển đổi trạng thái cũng cần phải nhanh tương tự. Bởi vậy các chuyển động trên web thường ngắn hơn khảng 2 lần so với mobile, khoảng 150-200ms. Trong các trường hợp khác thì sẽ không tránh khỏi việc người dùng tưởng là máy bị đơ hay mạng có vấn đề.
Nói đi thì cũng phải nói lại, nếu mình đang làm các hiệu ứng chuyển động cho đẹp hoặc để hướng sự chú ý của người xem vào một chỗ nào đó quan trọng, quên mấy cái bên trên đi. Lúc này thời lượng chuyển động có thể dài hơn đôi chút.
Cũng nên nhớ là bất kể ở trên nền tảng nào thì thời lượng chuyển động của đối tượng phụ thuộc vào cả khoảng cách di chuyển và kích thước của chính nó. Các đối tượng nhỏ hoặc có sự thay đổi không nhiều sẽ chuyển động nhanh. Và như vậy, chuyển động của các đối tượng có kích thước lớn và phức tạp sẽ mượt mà hơn nếu kéo giãn thời lượng một chút.
Và, giữa hai đối tượng chuyển động có cùng kích thước thì cái nào dừng trước sẽ là cái đi quãng đường ngắn hơn.
Nếu các vật thể chuyển động chạm vào nhau thì theo vật lý học, phần năng lượng va chạm đó sẽ tản đều ra. Bởi vậy mình bỏ qua các hiệu ứng tưng nẩy (bounce effect) thì hơn, chỉ nên dùng khi cần, khi mà nó có hiệu quả đặc biệt trong một trường hợp cố định nào đó.
Chuyển động của đối tượng cũng nên rõ ràng dễ thấy, nên hạn chế dùng hiệu ứng motion blur (mấy ông After Effect nhớ nha, đừng, nha). Mấy hiệu ứng này rất khó làm ngay cả trên các smartphone xịn sò, nên ít ai dùng trong IA.
Các đối tượng dạng list item (news card, email lists, blabla..) nên xuất hiện lần lượt với độ trễ cực kì ngắn. Thời lượng xuất hiện của mỗi món chỉ nên từ 20-25ms thôi, nếu ngắn hơn sẽ gây khó chịu cho người dùng.
Easing là hiệu ứng làm cho chuyển động của đối tượng nhìn thật hơn. Nó là một trong những nguyên tắc chuyển động cần thiết, trong cuốn The Illusion of Life: Disney Animation, 2 ông animator xịn của Disney (Ollie Johnston và Frank Thomas) có nói rất kĩ về nó.
Để cho chuyển động nhìn đỡ khô khan máy móc, vật thể di chuyển phải có thêm sự tăng giảm tốc độ, mô phỏng theo các vật thật trong thế giới thực.
Linear motion – gọi là chuyển động tuyến tính đi, học vật lý lớp 6 7 thì kêu là chuyển động đều. Các đối tượng không chịu tác động vật lý thì sẽ chuyển động theo cách này, nghĩa là không có sự thay đổi về tốc độ. Và cũng do đó, nhìn nó sẽ có cảm giác không tự nhiên.
Tất cả các ứng dụng làm animation đều dùng animation curve (AC – ở đây mình gọi là biểu đồ nha). Tui sẽ ráng giải thích ý nghĩa và cách xem/đọc animation curve ngay sau đây.
AC là biểu đồ thể hiện sự thay đổi tương quan giữa vị trí của đối tượng (trục x) trong một khoảng thời gian (trục y). Trong trường hợp này là chuyển động tuyến tính, vật thể sẽ di chuyển cùng một quãng đường trong một khoảng thời gian.
Ví dụ nha, linear motion sẽ dùng khi đối tượng đổi màu hoặc độ trong suốt. Đại khái thì mình sẽ dùng linear cho các tính chất trạng thái của đối tượng nếu nó không thay đổi vị trí.
Nhìn vào biểu đồ minh hoạ ở dưới sẽ thấy ngay, lúc bắt đầu chuyển động thì chiếc xe đi từ từ và nhanh dần về sau. Đây là chuyển động tăng tốc!
Dạng chuyển động này nên dùng cho các đối tượng di chuyển nhanh ra khỏi màn hình. Có thể là các bảng system notification, hay các các đối tượng dạng card trong giao diện. Hãy cứ nhớ trong đầu là dạng này chỉ nên dùng cho các đối tượng nào trượt luôn ra khỏi màn hình, mình không giữ lại hay hoàn tác được.
Animation curve có thể giúp ta thể hiện đúng nhịp chuyển động. Như hình dưới, rõ ràng thời lượng và khoảng cách chuyển động là như nhau, nhưng một chút thay đổi trên biểu đồ cũng có thể ảnh hưởng tới nhịp điệu của chuyển động.
Và tất nhiên, chỉ cần hiệu chỉnh biểu đồ AC, ta có thể làm cho đối tượng chuyển động như trong đời thực.
Ngược với ease-in, đối tượng chuyển động ease-out sẽ di chuyển nhanh một đoạn dài rồi từ từ chậm dần cho đến khi dừng hẳn.
Dạng này thường dùng cho các đối tượng xuất hiện trên màn hình ứng dụng. Nó sẽ trượt vào với tốc độ cao, từ từ chậm dần rồi dừng hẳn. Cũng có thể dùng cho các đối tượng dạng card, các đối tượng xuất hiện từ bên ngoài màn hình ứng dụng.
Animation curve dạng này sẽ cho phép đối tượng tăng tốc chuyển động khi bắt đầu và giảm dần về 0 khi kết thúc. Trong IA người ta dùng dạng này nhiều nhất, nên nếu có khi nào mình băn khooăn không biết nên dùng animation kiểu gì, cứ dùng ease-in-out, nó còn được gọi là standard curve.
Theo MDG, dùng AC dạng bất đối xứng sẽ tốt hơn, nó giúp chuyển động nhìn tự nhiên và giống thật. Phần cuối biểu đồ nên được nhấn mạnh hơn để cho thời lượng của pha tăng tốc ngắn hơn pha giảm tốc. Như vậy thì người dùng sẽ chú ý hơn đến giai đoạn sau của chuyển động, cũng là trạng thái mới của đối tượng.
Ease-in-out thường được dùng cho các đối tượng đi từ vị trí này đến vị trí khác trên màn hình.
Dạng chuyển động này cũng được dùng khi các đối tượng di chuyển khỏi màn hình và người dùng có thể mở lại khi cần. Một ví dụ điển hình cho trường hợp này là bảng navigation menu.
Có nhiều trường hợp mà mấy ông beginner hay bỏ qua các quy tắc cơ bản – điển hình là quy tắc animation mở màn sẽ khác với animation kết thúc. Ví dụ như trong bảng navigation menu, nó xuất hiện với hiệu ứng chuyển động giảm tốc và bị tắt đi với chuyển động theo biểu đồ AC ease-in-out. Theo Google Mategial Design, thời gian xuất hiện của đối tượng nên lâu một chút để tạo được sự chú ý.
Người ta dùng hàm cubic-bezier() để định hình biểu đồ animation curve. Tên nó là cubic vì hàm này dựa trên 4 điểm toạ độ. Điểm đầu có toạ độ là (0,0) – góc dưới bên trái, và điểm cuối là góc trên bên phải (1,1), cũng là hai toạ độ cố định của biểu đồ.
Hai điểm toạ độ tiếp theo sẽ được tuỳ biến theo ý mình thông qua 4 tham số, 2 tham số đầu sẽ khai báo toạ độ x,y của điểm đầu tiên, và tương tự cho cặp tham số còn lại.
Để tiện thao tác với biểu đồ AC, bạn có thể vào trang easing.net hoặc cubic-bezier.com. Trang đầu tiên có sẵn nhiều dạng biểu đồ thông dụng đii kèm với các tham số của nó, mình có thể copy về dùng cho nhanh. Trang thứ 2 cho phép mình tuỳ chỉnh các tham số của biểu đồ và xem thử chuyển động của đối tượng theo biểu đồ.
Từa tựa như múa balê vậy á, mục đích chính của việc này là dẫn dắt sự tập trung của người dùng vào một dòng chảy qua từng bước biến đổi trạng thái.
Có 2 dạng: tương tác ngang hàng hoặc phân cấp (đoạn này nghe học thuật vl, nhưng không biết dịch sao cho dễ gần nữa)
Trong tương tác ngang hàng, sự xuất hiện của các đối tượng đều tuân theo một quy tắc cụ thể.
Ở hình dưới, các thẻ hiện ra lần lượt, định hướng thị giác người dùng theo chiều từ trên xuống dưới. Việc không theo lần lượt như vậy sẽ phân tán sự tập trung của người dùng. Nếu cho tất cả các thẻ hiện ra cùng lúc cũng không được hiệu quả cho lắm.
Với các giao diện dạng bảng thì sẽ phức tạp hơn đôi chút. Ở đây hướng theo dõi của người dùng sẽ theo đường chéo, cho nên cho hiện ra lần lượt từng thành phần là một ý cực kỳ tệ. Làm vậy sẽ khiến cho animation bị kéo dài ra, hướng nhìn của người dùng cũng đi theo đường zigzag, sai quá sai.
Ở tương tác phân cấp, sẽ có một đối tượng giữ vai trò trung tâm, nó sẽ thu hút sự tập trung của người dùng, và các thành phần còn lại sẽ phụ thuộc vào đó. Chuyển động như vậy sẽ cho ta cảm giác tuần tự, đối tượng chính sẽ được chú ý nhiều hơn.
Nếu không, người dùng sẽ không biết phải nhìn vào đâu, kết quả là tầm nhìn bị phân tán. Do đó, nếu muốn làm animation cho cùng lúc nhiều thành phần, mình phải định rõ trình tự chuyển động và tốt nhất nên giới hạn đến mức tối thiểu số lượng thành phần có chuyển động.
Theo Material Design, nếu đối tượng thay đổi kích thước mà không giữ tỷ lệ thì quỹ đạo di chuyển của nó nên đi theo một đường cong thay vì đường thẳng. Như vậy chuyển động sẽ mượt mà tự nhiên hơn. “Không giữ tỷ lệ” ở đây nghĩa là chiều rộng và chiều cao của đối tượng biến đổi không đều với tốc độ khác nhau, ví dụ như một khung hình vuông biến thành hình chữ nhật.
Quỹ đạo di chuyển theo đường thẳng được dùng cho các đối tượng biến đổi kích thước theo tỉ lệ. Các nguyên tắc về chuyển động theo quỹ đạo đường cong thường hay bị bỏ qua, thay vào đó người ta hay dùng đường thẳng, đơn giản và dễ thực hiện hơn nhiều. Chỉ cần để ý chuyển động trong các ứng dụng là thấy ngay nó phổ biến đến mức nào!
Các chuyển động theo đường cong thường thấy trong 2 dạng: vertical out – vật thể sẽ bắt đầu đi theo phương ngang và kết thúc chuyển động theo chiều thẳng đứng; horizontal out – ngược lại.
Quỹ đạo di chuyển của đối tượng sẽ đi theo chiều cuộn của giao diện. Ví dụ ở hình dưới, giao diện của chúng ta cuộn lên xuống theo chiều dọc, và khung ảnh sẽ mở rộng theo dạng vertical out, đầu tiên nó sẽ đi sang phải rồi trượt xuống đến giữa màn hình. Thao tác thu gọn sẽ đi theo trình tự ngược lại, nó sẽ trượt lên trên rồi mới thu lại theo chiều ngang.
Các đối tượng không nên chồng đè lên nhau khi di chuyển, và cũng cần cha đủ không gian cho các đối tượng khác di chuyển, có thể là tăng tốc hoặc giảm tốc tuỳ theo từng trường hợp. Bên cạnh đó còn một cách khác, cứ cho chúng di chuyển tuần tự, như kiểu một hàng người di chuyển trên máy bay á.
Có một trường hợp nữa là đối tượng có thể di chuyển bên trên các thứ còn lại. Và tất nhên nó không làm xáo trộn hoặc đi xuyên qua. Tại sao vậy? Ừ thì các đối tượng trên một giao diện cũng cần phải tuân theo một số định luật vật lý chứ, ngoài đời không có thực thể nào mà có được khả năng di chuyển thần kì như vậy đâu.
Okay, nếu tổng kết lại hết tất cả các nguyên tắc kể trên thì, chuyển động trong giao diện chẳng qua cũng chỉ là tái hiện lại các chuyển động ta thấy thường ngày trong thế giới thực thôi – cũng có ma sát, có tăng giảm tốc độ, vân vân.. Nếu mô phỏng chuyển động theo các vật thể bình thường, mình có thể dẫn dắt người dùng nên chú ý vào đâu, phần nào trên giao diện.
Một khi mình làm animation đúng, mọi thứ sẽ rất nhã nhặn hài hoà và không gây phân tán người dùng. Mà nếu lỡ bị như vậy thì phải chỉnh lại thôi, hoặc thậm chí bỏ luôn animation đó nếu nó không cần thiết hoặc nó làm rối quá. Chuyển động trong giao diện không nên cản trở thao tác người dùng, cũng không nên làm mất thời gian của họ.
Nhưng mà cũng nên nhớ, animation nó thiên về art hơn là science (nghiên cứu khoa học đồ..), bởi vậy nếu quyết định xài animation thì chắc cú hãy thử trải nghiệm nó, thử với nhiều người để chắc là nó hiệu quả!
The ultimate guide to proper use of animation in UX – Taras Skytskyi
