Hãy sử dụng animation một cách thông minh
UI
25
design
27
Animation
6
White

Vu Nhat Minh viết ngày 29/03/2016

Bài viết nhỏ này giúp những dev đang học design có cái nhìn thông suốt hơn về animation trong UI Design, tránh được những "hệ lụy" đáng tiếc như dưới đây.

Lạm dụng animation

Ví dụ này chưa hẳn là một ví dụ xấu nhất để chỉ cho bạn thấy lạm dụng animation sẽ tệ như thế nào trong Motion Design, tuy nhiên sẽ có những gợi ý đi kèm để cải thiện và phát triển mà các bạn có thể áp dụng được vào sản phẩm của mình.

Lịch sử của Visual Design

Thập niên 70 và 80, khi nhân loại đang sống trong kỷ nguyên màn hình CRT thì sự ra đời của đồ họa raster (nếu bạn chưa biết thì đồ họa raster là đồ họa dựa trên pixel, công cụ điển hình là Photoshop, đối lập với đồ họa vector dựa trên hình học vector, công cụ điển hình là Illustrator hay Sketch) bị bó hẹp trong phạm vi thiết bị màn hình thời bấy giờ.

Thời đó màn hình có độ phân giải là CGA (320x200), VGA(640x480) rồi sau này mới dần lên đến SVGA(800x600) rồi lao như tên bắn đến tận công nghệ 4K như bây giờ.

Đến những năm 90 và 2000 thì phong trào thiết kế theo xu hướng mô tả thực ở trạng thái 3D lên ngôi rất mạnh. Designer gần như dùng hết những khả năng có được để tạo ra các bóng đổ sâu hun hút, ánh sáng nhảy tưng bừng và hiển nhiên là không có chỗ cho các khoảng trắng. Bạn thử nhìn lại các vỏ đĩa CD hay web thời sơ khai sẽ hiểu :smile:

web những năm 90

... và design hiện đại với sự lên ngôi của thiết kế phẳng, tràn ngập từ PC đến mobile, IOS, Android, WindowOS ...

Xu hướng thiết kế phẳng
Thiết kế phẳng trở thành "thời trang" cho tất cả các sản phẩm công nghệ

Motion Design đang ở đâu?

Motion design (animation) giống như đang ở kỷ nguyên mô tả thực của những năm 90!

Khả năng tạo dựng animation đã phát triển vượt bậc trong thời gian qua thông qua cách mạng CSS3 transition, rồi hiệu năng tăng phi mã của các thiết bị hardware về xử lý đồ họa. Vâng, và không thể thiếu Javascript nữa.

Không chỉ có PC, smartphone ngày nay cũng multi-core, multi-gigabyte, DPI cao ngất, 60fps animated UI chẳng còn nhằm nhò gì!

Hệ quả là khắp nơi đang tràn ngập những mẫu animation mà tôi nghĩ là bị sử dụng quá mức. Tần suất xuất hiện không chỉ giới hạn trong sản phẩm của các amateur designer. Người dùng ngày càng trở nên điên tiết khi không thể thực hiện tác vụ mà mình mong muốn vì bị cản trở bởi một đống element đang bay qua bay lại, và designer thì không ý thức được rằng UI không phải là trò giải trí cho anh ta hay cho người dùng sản phẩm của anh ta,

Vậy bạn có đoán được tương lai của motion design không :) Tôi nghĩ nó sẽ lại được giản lược hóa, tối giản hóa để quay lại với vẻ đẹp đơn giản mà không cầu kỳ như kỷ nguyên Flat design đang thống trị bây giờ.

Ví dụ kinh điển về Animation tệ

OSX Full Screen Animation

Có rất nhiều những lời phàn nàn về OSX Full Screen Animation. Tựu chung lại là:

  • Chậm
  • Không cần thiết
  • Không thể tắt đi (nếu không dùng command)

Bạn sẽ dễ dàng tìm thấy hàng tá câu hỏi trên khắp các diễn đàn về làm thế nào để tăng tốc hay thậm chí tắt hẳn hiệu ứng này đi... Người dùng không hạnh phúc!

Quay lại với bài học

Bạn còn nhớ ví dụ ở đầu bài chứ. Tôi sẽ hướng dẫn cách làm animation ở ví dụ tốt hơn từng bước một. Đầu tiên chúng ta hãy thử phân tích vấn đề.

Lạm dụng animation

  • Màn hình như bị "khóa" lại bởi màu nền đen
  • Không có gì cho người dùng biết là đang có một tác vụ đang chạy
  • Animation bị chậm
  • Animation là không cần thiết.

Nếu để ý kỹ bạn sẽ thấy, animation xuất hiện sau khi dữ liệu được load lên và rồi lại mất vài giây để chạy hết, khiến cho tổng thời gian đợi tăng lên.

Khi nào thì animation là cần thiết

Thật dễ, animation là cần thiết khi dữ liệu đang được load. Lúc đó app chẳng có gì có thể show ra cho người dùng cả, animation sẽ làm họ cảm thấy dễ chịu khi đang phải đợi.

Load data khi đang đợi

Dữ liệu đã sẵn sàng? Hãy hiển thị sớm nhất có thể!

Khi dữ liệu đã sẵn sàng, đừng bắt người dùng phải đợi thêm! Hãy chọn hiệu ứng hiện thị có thời gian ngắn. Bước này chúng ta sẽ bỏ đi hiệu ứng "popup".

Hiển thị dữ liệu ngay

Khiến người dùng quên đi cảm giác chờ đợi

Bạn có thấy hiệu ứng nền đen sẽ kéo dài rất lâu nếu thời gian load dữ liệu rất dài không? Hãy dùng hiệu ứng đợi nhẹ nhàng hơn, và dùng những hiệu ứng bắt mắt như nền cho việc hiển thị dữ liệu.

Snappy application

Progressive Loading

Bước này là một kỹ thuật nâng cao. Progessive Loading là tên một kỹ thuật hay được sử dụng nhằm làm giảm hơn nữa cảm giác chờ đợi của người dùng. Người dùng hiển nhiên là muốn có được dữ liệu càng sớm càng tốt, vậy chúng ta hãy bẻ dữ liệu ra thành từng khối (chunk) và hiển thị ngay từng phần mỗi khi nhận được. Cách làm này đòi hỏi cả khả năng implement nữa bên ngoài công việc thiết kế.

Progressive Loading

Hiệu ứng thẻ mở rộng

Dưới đây là một mẫu tham khảo từ cộng đồng userexperiencedesign trên Slack có tên là "hiệu ứng thẻ mở rộng" (expand card).

Expand card

Kết luận

Hãy cẩn thận với tất cả các mẫu design liên quan đến animation của mình. Animation có nhiều ưu điểm có thể làm tăng trải nghiệm người dùng nếu được dùng đúng chỗ và đúng cách. Ngược lại, không có bất cứ đảm bảo nào cho một sản phẩm nhiều animation sẽ trở thành một sản phẩm tốt.

Network đang chậm, dữ liệu đang phải đợi xử lý là những khoảnh khắc hoàn hảo để sử dụng animation. Ngoài ra? Hãy cân nhắn thật kỹ trước khi dùng.

Reference

https://medium.com/@sophie_paxtonUX/stop-gratuitous-ui-animation-9ece9aa9eb97

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Vu Nhat Minh

54 bài viết.
724 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
116 29
Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department. Tốc độ hiển thị nội dung của menu là tức thì so với d...
Vu Nhat Minh viết hơn 2 năm trước
116 29
White
87 4
Lời người dịch Người dịch là một developer , sau khi tìm đọc được bài viết này bằng bản gốc tiếng Anh đã cảm thấy như được "khai sáng" về khả năng...
Vu Nhat Minh viết hơn 2 năm trước
87 4
White
56 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết hơn 2 năm trước
56 5
Bài viết liên quan
White
143 37
(Ảnh) Tiếp tục sêri (Link) lần này, chúng ta sẽ cùng tìm hiểu và mô phỏng lại một chức năng mà mọi người đang bắt đầu sử dụng hằng ngày, đó là chứ...
Huy Trần viết hơn 1 năm trước
143 37
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
54 bài viết.
724 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!