NộI Dung
- NÊN giữ mọi thứ nhất quán với hệ thống thiết kế
- KHÔNG bao gồm hoạt ảnh vì lợi ích của nó
- NÊN xem xét các thiết bị khác nhau
- KHÔNG ép buộc hoạt ảnh đối với người dùng
- NÊN chú ý đến các mô hình tinh thần hiện có
- ĐỪNG quên khán giả của bạn
- NÊN dính vào Biến đổi và Độ mờ
- KHÔNG tạo hoạt ảnh quá dài
Cuối cùng thì chúng ta cũng đang đến giai đoạn mà các thương hiệu đang nhận ra sức mạnh của hoạt ảnh trên web. Chúng tôi đã tập hợp lại các ví dụ hoạt ảnh CSS tốt nhất và chỉ cho bạn cách viết mã chúng, nhưng trong bài viết này, chúng tôi sẽ chia sẻ một số mẹo hàng đầu để khai thác nhiều hơn từ chuyển động trong các dự án thiết kế giao diện người dùng của bạn.
Lisi Linhart là một nhà phát triển sáng tạo chuyên tạo ra những thứ tương tác, chuyển động trên web (xem hoạt động của chú cá voi đổi màu ở trên). Tại Pixel Pioneers, cô ấy đã lên sân khấu để giải thích cho khán giả về cách giữ cho hoạt ảnh hoạt động hiệu quả trên các trình duyệt và giới thiệu các tùy chọn hoạt ảnh khác nhau mà chúng ta có trên web ngày nay. Sau đó, chúng tôi đã bắt kịp cô ấy để nghe thêm một số mẹo hàng đầu.
NÊN giữ mọi thứ nhất quán với hệ thống thiết kế
Linhart đã nhận thấy sự gia tăng trong việc sử dụng các hệ thống thiết kế để giúp kiểm soát việc sử dụng hoạt ảnh trong một dự án. Các hệ thống này phác thảo và xác định các loại hoạt ảnh xuất hiện trong các loại trang khác nhau trong một trang web - ví dụ: trên các trang sản phẩm.
"Tính nhất quán ngày càng quan trọng và có một cái nhìn tổng thể về tất cả các hoạt ảnh của bạn cũng rất quan trọng", Linhart tóm tắt.
KHÔNG bao gồm hoạt ảnh vì lợi ích của nó
Linhart nói: “Nhiều người kết hợp hoạt ảnh nhưng họ không nghĩ đến khả năng sử dụng của hoạt ảnh. "Việc tìm ra mục tiêu mà hoạt ảnh có và liệu nó có thực sự hữu ích hay không là điều rất quan trọng, thay vì chỉ xây dựng hoạt ảnh để có hoạt ảnh."
Hệ thống thiết kế cũng có thể có lợi trong vấn đề này. Khi bạn quyết định các loại chuyển động khác nhau, chúng được liên kết với các mục đích khác nhau trong giao diện.
NÊN xem xét các thiết bị khác nhau
Tùy thuộc vào vai trò hoạt ảnh sẽ thực hiện trong sản phẩm của bạn, bạn có thể giới thiệu các cách tiếp cận khác nhau dựa trên thiết bị được sử dụng. Ví dụ: đối với trải nghiệm máy tính để bàn, bạn có thể thêm các hiệu ứng phản ứng với các sự kiện chuột, trong khi trải nghiệm trên thiết bị di động có thể có hoạt ảnh được kích hoạt bởi chuyển động của thiết bị.
Ngoài ra, bạn có thể muốn giữ mọi thứ đơn giản, Linhart nói và tạo các hoạt ảnh toàn cầu gắn liền với quy trình làm việc và phù hợp bất kể thiết bị đang được sử dụng.
KHÔNG ép buộc hoạt ảnh đối với người dùng
Có một số lý do khiến người dùng có thể muốn tắt chuyển động - ví dụ: cuộn thị sai có thể gây say tàu xe. Người dùng không muốn hoạt ảnh giao diện người dùng có thể chọn trải nghiệm chuyển động giảm trong trình duyệt của họ. Nhờ có API hoạt ảnh trên web, giờ đây có thể dễ dàng cung cấp trải nghiệm thay thế bằng JavaScript; bạn có thể dừng các hoạt ảnh trong thiết kế của mình hoặc bỏ qua tất cả các hoạt ảnh đến trạng thái kết thúc của chúng. Hoạt ảnh rất tuyệt, nhưng đừng ép chúng vào những người không muốn chúng!
NÊN chú ý đến các mô hình tinh thần hiện có
Có một số mô hình tinh thần nhất định, dựa trên vật lý thế giới thực, ra lệnh cho cách chúng ta mong đợi các đối tượng hoạt động và cách chúng ta phản ứng với một số chuyển động nhất định. Ví dụ: một chuyển động lắc lư sẽ kích hoạt sự chú ý của người dùng, trong khi chuyển động mờ dần sẽ thường không được chú ý.
Linhart nói: “Hoạt ảnh có thể được sử dụng kết hợp với các mô hình tinh thần và bạn có thể sử dụng chúng để làm cho hoạt ảnh của mình trông đẹp hơn hoặc để giải thích điều gì đó. Một nơi tốt để bắt đầu là với 12 nguyên tắc cổ điển của hoạt hình.
ĐỪNG quên khán giả của bạn
Linhart nói, số lượng hoạt ảnh bạn đưa vào giao diện của mình sẽ bị ảnh hưởng mạnh mẽ bởi đối tượng mà bạn hướng tới. Mặc dù nhiều chuyển động liên tục có thể giúp giữ chân khán giả trẻ tuổi tương tác và hào hứng với sản phẩm của bạn, nhưng khán giả lớn tuổi có thể cảm thấy mất tập trung và khó chịu khi họ cố gắng tiếp thu nội dung theo tốc độ của riêng mình.
NÊN dính vào Biến đổi và Độ mờ
Linhart giải thích rằng có bốn loại hoạt ảnh có thể được xử lý với chi phí thấp bằng cách sử dụng CSS: thay đổi vị trí của đối tượng, tăng hoặc giảm tỷ lệ, xoay đối tượng và thay đổi độ mờ đang thay đổi của nó (mờ dần trong và ngoài). Trong số này, CSS Transform và Opacity là những thứ có hiệu suất cao nhất. Hãy ghi nhớ kiến thức này khi thiết kế hoạt ảnh giao diện người dùng của bạn, để có trải nghiệm mượt mà và thân thiện với người dùng.
KHÔNG tạo hoạt ảnh quá dài
Việc nắm bắt đúng thời điểm của các hoạt ảnh của bạn là điều vô cùng quan trọng. "Bạn không nên đặt thời gian cho hoạt ảnh quá lâu, bởi vì người dùng của bạn đang cố gắng làm điều gì đó và nếu bạn có thời gian hoạt ảnh thực sự dài, điều đó sẽ cản trở họ", Linhart của chúng tôi chỉ ra. "Vì vậy, giữ cho các hình ảnh động ngắn gọn trong giao diện là điều quan trọng."
Tuy nhiên, có một lưu ý: nếu bạn đang tạo hoạt ảnh cho một quá trình chuyển đổi, bạn có thể tạo hoạt ảnh chậm hơn để không thu hút sự chú ý không cần thiết.
