Giới thiệu Animation trong thiết kế web

Giới thiệu Animation trong thiết kế web

Animation không chỉ dành riêng cho phim hoạt hình nữa. Từ hình ảnh chuyển động toàn màn hình đến hiệu ứng di chuyển chuột nhỏ, các hình ảnh động đang xuất hiện ở khắp mọi nơi. Animation là xu hướng vì nó thú vị và thân thiện với người dùng.

Animation cơ bản

Animation là một thứ gì đó được tạo ra ở dạng tĩnh hoặc hai chiều được mang đến sự sống, nó chuyển động lặp đi lặp lại theo quy luật. Đó có thể là cách các nhân vật hoạt hình đi ngang qua màn hình hoặc cách một biểu tượng ứng dụng nảy như quả bóng trên màn hình desktop của bạn.

Một trong những từ gần như đồng nghĩa với animation là disney. Đầu những năm 1980, hai trong số các công ty animation hàng đầu đã viết một cuốn sách chi tiết về 12 nguyên tắc của animation. “The Ill Illusion of Life: Disney Animation” của Frank Thomas và Ollie Johnston cung cấp khuôn khổ cho animation có thể dùng được cho đến ngày nay.

  1. Squash and Stretch (Sự co và giãn của chuyển động)
  2. Anticipation (Sự lấy đà, lấy trớn cho một chuyển động)
  3. Staging (Một tư thế hay hành động nên giao tiếp rõ ràng với khán giả bởi thái độ, tâm trạng, phản ứng hoặc ý tưởng của các nhân vật có liên quan đến những câu chuyện và liên tục của mạch chuyện)
  4. Straight Ahead Action và Pose to Pose (Sự diễn tiến và Sự Chuyển hoá điệu bộ – Tư thế – Hình dạng)
  5. Follow Through (Sự diễn tiến sau khi kết thúc một hành động) và Overlapping Action (Sự kết nối chuỗi hành động khi một phần bắt đầu thì các phần khác sẽ tiếp diễn theo – Vì không bất cứ tổ hợp vật thể nào bắt đầu chuyển động cùng lúc)
  6. Ease-In and Ease-Out (Bắt đầu chậm rãi và kết thúc chậm rãi của đường cong thời gian – Nhẹ Nhàng)
  7. Arcs (Bất cứ một chuyển động nào cũng cần tạo ra đường cong của chuyển động từ điểm bắt đầu tới kết thúc) – Đối với một số hoạt hình dạng cartoon sẽ có khi huỷ bỏ hoàn toàn nguyên tắc này, nhưng áp dụng mạnh mẽ sự Co và Giãn cùng với khoảng cách thời gian bó hẹp sẽ tạo ra những hành động vui nhộn – Cartoon Network rất thường có các animation này.
  8. Secondary Action (Ảnh hưởng chuyển động phụ từ những chuyển động chính – vd: đuôi của một vật thể lúc lắc khi vật thể chuyển động)
  9. Timing and Spacing (Quản lý thời gian và Khoảng cách của khung hình ảnh thay đổi trong từng khoảnh khắc)
  10. Exaggeration (Cường điệu hoá)
  11. Solid Drawing (Mọi hình ảnh hiển thị cần tạo phối cảnh trong khung hình – điều này có nghĩa bạn hãy cố gắng tạo ra nhiều góc độ không gian hơn khi trình diễn animation của bạn trên mô hình 3D hay thiết kế, điều này giúp tạo chiều sâu và làm cho diễn xuất của bạn kiên cố hơn | Thuật ngữ khác “Staging”)
  12. Appeal (Sự nổi bật tính cách đặc điểm – Khi diễn xuất nhân vật trong làm phim hoạt hình, bạn cần nắm rõ tính cách nhân vật, không gian nhân vật đang ở đó, và sự chuyển động phải gắn với tính cách)

Hoạt ảnh trên web thường được lưu dưới dạng GIF, CSS, SVG, WebGL hoặc video. Chúng có thể là bất cứ thứ gì từ một gạch chân đơn giản xuất hiện khi bạn di chuột qua một từ cho đến video toàn màn hình hoặc hình nền. Như với bất kỳ kỹ thuật thiết kế nào khác, hình ảnh động phải được thiết kế chuyển động thật tinh tế.

Những xu hướng đáng chú ý

Animation trong thiết kế web là thứ mà chúng ta đang bắt đầu thấy nhiều hơn mỗi ngày. Chìa khóa để animation trở thành xu hướng thiết kế là sự hài hòa. Animation nhỏ, đơn giản thì đã hấp dẫn và thú vị. Animation ở quy mô lớn có thể là một hình ảnh trực quan thú vị kéo bạn vào thiết kế. Nhưng nếu bạn bắt đầu trộn quá nhiều hiệu ứng di chuyển khác nhau, nó có thể gây ra sự hỗn loạn hoàn toàn.

Điều làm cho animation trở thành xu hướng chính là chủ nghĩa hiện thực. Trong bối cảnh thiết kế theo phong cách phẳng và tối thiểu ngày nay, người dùng cần nhiều tín hiệu hơn để nói cho họ biết họ phải làm gì. Các bit của animation đơn giản có thể hướng dẫn người dùng mà không thay đổi tính thẩm mỹ. Nó giúp thêm hướng dẫn bằng các thiết kế sơ đồ có thể quá đơn giản về mặt trực quan để hướng dẫn cho người dùng. Trong trường hợp này, animation tạo ra một phương tiện kết nối giữa sự đơn giản và khả năng sử dụng.

Yếu tố đóng góp khác cho xu hướng này là quyền truy cập vào các công cụ back và user – ends của thiết kế. Bạn không cần Flash cho các hình ảnh động phức tạp nữa. (Và nếu bạn vẫn đang xây dựng trong Flash, thì đây là lúc dừng lại). Nó có thể được thực hiện theo một số cách khác. Ngày nay, hình ảnh động không còn bị cản trở bởi các trang web hoặc máy chủ web, vì nó được thiết kế giúp tải nhanh các hiệu ứng cho người dùng hơn và với tốc độ truy cập internet cao các hình ảnh động cũng được tải nhanh hơn.

Kết luận

Khi nói đến animation, nguyên tắc cơ bản là: Animation tốt sẽ giúp người dùng trải nghiệm tốt hơn. Điều này có thể dễ dàng kết nối cảm xúc hơn – chẳng hạn như tạo những trải nghiệm thú vị, tích cực – hoặc làm cho một trang web dễ sử dụng hơn.