Ảnh động có thể làm cho một trang web nổi bật. Hoặc, họ có thể dễ dàng giết chết trải nghiệm. Khi làm việc với hoạt ảnh trên web, có một số điều có thể xảy ra sai sót như thêm hoạt ảnh không phục vụ mục đích nào, đặt thời lượng quá dài hoặc quá nhanh hoặc không sử dụng đúng loại hoạt ảnh ngay từ đầu. Ngay cả khi tất cả những điều này được thực hiện chính xác, phong cách hoạt ảnh có thể không đẹp, đặc biệt nếu chúng không đồng bộ với các hoạt ảnh khác hoặc phù hợp với đặc điểm tổng thể của trang web Show
Một điều quan trọng khác cần lưu ý là không phải tất cả các trải nghiệm kỹ thuật số đều có cùng hình ảnh động giống nhau. Trang web tiếp thị có thể cần hoạt ảnh khác với trang web sản phẩm hoặc ứng dụng dành cho thiết bị di động. Mặc dù các nguyên tắc chuyển động cơ bản giống nhau áp dụng cho tất cả, nhưng có một số sắc thái dựa trên loại nội dung và kích thước màn hình. Ví dụ: giả sử bạn muốn làm cho một biểu mẫu nhàm chán trở nên thú vị hơn để điền vào. Bạn thêm một số hoạt ảnh thú vị trong mỗi bước tiến về phía trước, nhưng đó có phải là ý tưởng hay cho biểu mẫu mà bạn biết người dùng cần truy cập và điền thường xuyên không? Rõ ràng, có những điều kiện và cân nhắc sẽ phục vụ tốt cho hoạt ảnh. Trong bài viết này, chúng ta sẽ thảo luận về việc thêm hoạt ảnh vào trang web sản phẩm. Hãy tìm hiểu sâu hơn một chút và đặt ra một số quy tắc cơ bản để làm việc với chúng. Không hẳn là một bản tuyên ngôn, mà giống như một đường cơ sở mà chúng ta có thể tham khảo và sắp xếp các cuộc biểu tình xung quanh Trước hết, một tình huống tốt cho một hình ảnh động là gì?Khi được sử dụng tốt, hoạt ảnh gần giống như nội dung — nó cung cấp ngữ cảnh và có ý nghĩa giúp thông báo cho người dùng rằng điều gì đó đã xảy ra và thậm chí điều gì sẽ xảy ra tiếp theo. Dưới đây là một vài tình huống hay mà hoạt ảnh có thể thực hiện chính xác điều đó Chuyển đổi các khối giao diện người dùngĐây có thể là trường hợp sử dụng phổ biến nhất cho hoạt ảnh. Khi một khối giao diện người dùng bị di chuyển khỏi vị trí ban đầu hoặc được thêm hoặc xóa khỏi DOM, bạn nên để người dùng thấy điều đó xảy ra  Tải nội dungHoạt ảnh đang tải là thứ mà tất cả chúng ta đã thấy và bắt gặp vào một thời điểm nào đó. Nếu không, một chuyến đi nhanh tới CodePen sẽ cho bạn thấy mức độ phổ biến của hoạt ảnh tải. Chúng lý tưởng làm trình giữ chỗ cho nội dung, nơi người dùng không chỉ được cung cấp gợi ý về những gì sẽ xảy ra khi tải nội dung mà còn tin tưởng rằng có nội dung nào đó đang được tải Bên cạnh việc làm cho trang web có cảm giác nhanh, nó cũng tránh được việc chỉnh lại nội dung lộn xộn, có thể gây mất phương hướng khi các phần tử hiển thị vào các thời điểm khác nhau
Tất nhiên, tải giữ chỗ là tốt nhất khi bạn biết trước chiều cao của các khối nội dung gợi ýĐây thường là hoạt ảnh một lần trong đó mục đích là cung cấp cho người dùng gợi ý về nơi cần tìm hoặc phải làm gì tiếp theo. Một số giao diện người dùng rất phức tạp về bản chất. Một chút ánh sáng hoặc gợn sóng có thể giúp hướng dẫn người dùng trong quá trình hoàn thành một tác vụ hoặc gọi ra một tính năng cụ thể Nó không phải là tất cả trong khuôn mặt của người dùng. Thay vào đó, một gợi ý trực quan nhỏ thông báo mà không chiếm toàn bộ trải nghiệm sẽ hoạt động tốt tương tác vi môThường được sử dụng trên các yếu tố riêng lẻ, các tương tác vi mô cung cấp cho người dùng phản hồi trực quan tức thì sau khi thực hiện một hành động. Họ thấm nhuần niềm tin rằng một hành động được thực hiện đã diễn ra và kết quả là điều gì đó đã xảy ra - tất cả đồng thời thêm một chút thích thú. Những thứ này không cần phải quá cầu kỳ, giống như hoạt hình trái tim của Twitter, nhưng chúng hoàn toàn phải biểu thị một số loại phản hồi hoặc phản hồi đối với hành động của người dùng. Chỉ cần kiểm tra mức độ tinh tế — nhưng thú vị — đó là khi người dùng làm một việc nhỏ như thêm một mục từ dòng này sang dòng khác OK, vậy khi nào chúng ta nên tránh hoạt ảnh?Chúng ta vừa thấy một số tình huống mà hoạt ảnh có rất nhiều ý nghĩa. Hãy giải thích các điều kiện ngược lại khi hoạt ảnh thường đóng góp rất ít hoặc không đóng góp gì cho trải nghiệm người dùng. Nói cách khác, chúng trở nên đáng chú ý vì những lý do tồi tệ và có lẽ tốt nhất là không nên tính đến. chuyển tuyếnCó, chúng tôi thường không thấy những loại hoạt ảnh này trên các trang web sản phẩm nhưng điều đáng nói là bạn phải hiểu tại sao chúng không có ý nghĩa. Các hiệu ứng chuyển tiếp này hoạt động tốt hơn trên các ứng dụng dành cho thiết bị di động do diện tích màn hình nhỏ. Trên màn hình máy tính để bàn có diện tích lớn hơn nhiều để tạo hiệu ứng. Để tạo hiệu ứng mượt mà cho toàn bộ nội dung, bạn sẽ cần đặt nhiều thời lượng hơn trên màn hình thiết bị di động. Điều này sẽ chỉ làm phiền người dùng khiến họ phải chờ để xem nội dung vì họ đã quen với việc xem khả năng hiển thị nội dung tức thì trên web. Và trong những trường hợp xấu nhất, việc chuyển đổi tuyến đường không chỉ gây mất tập trung mà còn là mối lo ngại nghiêm trọng về khả năng tiếp cận khi nói đến độ nhạy chuyển động Khi tải nội dung trang ban đầuBạn có thể làm điều đó trong các trang web tiếp thị khi bạn muốn giáo dục người dùng hoặc chuyển trọng tâm của họ sang một khối cụ thể. Đối với các trang web sản phẩm, sẽ lại khó chịu khi thấy cùng một hoạt ảnh mỗi khi người dùng điều hướng giữa các trang Khi nó bất ngờBạn nên xem xét tâm trạng của người dùng khi họ sử dụng một tính năng cụ thể. Phản hồi trực quan có được mong đợi ở nơi hoạt ảnh đang được sử dụng không? Ví dụ: kiểm tra ứng dụng máy tính này. Không có gì mới trong mẫu giao diện người dùng khi nhập số và chạy phép tính. Người dùng đã biết nơi cần tập trung. Không ích gì khi bắt người dùng chờ đợi trước khi họ có thể thấy kết quả hoặc làm họ ngạc nhiên với thứ gì đó không mang lại ý nghĩa hoặc lợi ích bổ sung nào Khi bạn không chắc nó hoạt động tốt như thế nàoCần lưu ý rằng không phải tất cả các thiết bị, kết nối internet và trình duyệt đều giống nhau trong mắt hoạt ảnh. Eric Bailey đã tóm tắt điều này một cách tuyệt vời trong phần tìm hiểu sâu của anh ấy về truy vấn phương tiện truyền thông
Tiêu đề phía trên câu trích dẫn đó là một lời nhắc nhở hiền triết. Hoạt hình là nâng cao tiến bộ. Nếu chúng tôi dự định sử dụng hoạt ảnh — đặc biệt là những hoạt ảnh đe dọa chiếm ưu thế trong trải nghiệm — thì ít nhất chúng tôi phải xem xét cách từ chối hoạt ảnh đó và liệu trải nghiệm có còn hoạt động khi không có hoạt ảnh hay không. Khi mục đích không rõ ràngCuối cùng, tôi muốn nói rằng đừng thêm hoạt ảnh vào bất cứ nơi nào bạn không hoàn toàn chắc chắn về mục đích mà nó phục vụ. Hoạt hình không cần thiết có thể gây mất tập trung và gây hại nhiều hơn là hữu ích. Tweet này từ năm 2018 vẫn rất đúng
Một hình ảnh động nên kéo dài bao lâu?Độ dài của hoạt ảnh cũng quan trọng như loại hoạt ảnh được sử dụng. Đợi quá lâu và hoạt ảnh có thể kéo dài. Đi quá nhanh và các chi tiết đẹp của hoạt ảnh có thể bị mất (trong trường hợp tốt nhất) hoặc khiến người dùng mất phương hướng hoàn toàn (trong trường hợp xấu hơn) Vì vậy, chúng ta nên đặt thời lượng của một hình ảnh động là bao lâu? . nó phụ thuộc Khoảng cách càng lớn, thời gian nói chung càng dàiHoạt ảnh (như những hoạt ảnh chúng ta đã xem xét trước đó) có thể bị giới hạn trong một khoảng thời gian ngắn. Nhưng nếu chúng ta đang thực hiện một quá trình chuyển đổi lớn trong đó một vật thể đang di chuyển một quãng đường dài, chúng ta có thể cảm thấy nó cần một thứ gì đó lâu hơn một chút để đảm bảo mọi thứ không di chuyển quá nhanh. Nhưng tránh sử dụng thời lượng dài hơn 400 mili giây Kiểm tra ví dụ này. Lưu ý cách nội dung mất nhiều thời gian hơn để chuyển đổi vì nó có khoảng cách lớn hơn để di chuyển. Nhưng cũng lưu ý rằng nó không cần phải kéo dài quá lâu vì đối tượng rời đi mờ dần vào đối tượng đi vào và đối tượng đi vào ở khoảng cách ngắn hơn thay vì di chuyển trên toàn bộ màn hình Cho thấy rằng ngay cả những hình ảnh động lớn cũng có thể được tối ưu hóa theo cách khiến nó có cảm giác ngắn hơn mà không bị lẫn lộn Sử dụng thời lượng ngắn hơn khi người dùng kích hoạt hành độngĐiều này là quan trọng và một lỗi phổ biến. Nếu người dùng đã mong đợi điều gì đó xảy ra — và trọng tâm đã rõ ràng ở nơi cần đến — thì không việc gì phải khiến người dùng đợi vài giây để hoàn thành những gì họ đã mong đợi Mặt khác, nếu hệ thống tự động kích hoạt thay đổi, thì thời lượng dài hơn sẽ có ý nghĩa, vì nó sẽ cho phép người dùng bắt kịp tốc độ với thay đổi đang diễn ra. Hãy nghĩ về các chú giải công cụ hoặc phương thức không được kích hoạt bởi người dùng không yêu cầu họ chú ý ngay lập tức Hoạt ảnh nhập và thoát có thể có thời lượng khác nhauĐôi khi, giữ hoạt ảnh cho một đối tượng đang vào chế độ xem nhanh hơn một chút so với hoạt ảnh cho một đối tượng đang thoát, đặc biệt là khi người dùng đang mong đợi nội dung đó thay đổi Lấy ví dụ trước về menu thả xuống. Khi người dùng nhấp vào nó, họ muốn xem các mục menu ngay lập tức — ít nhất, tôi sẽ không phải đợi để xem các mục menu. Khi người dùng nhấp vào, hãy để menu con vào nhanh và sau đó thoát ra một cách nhẹ nhàng khi nó bị loại bỏ để tránh làm người dùng mất tập trung trên đường ra khi không còn cần thiết Nhưng điều này không áp dụng cho các khối giao diện người dùng lớn. Trên các khối lớn hơn, trong hầu hết các trường hợp, cần có thời lượng dài hơn 200 mili giây. Trong những trường hợp như vậy, việc đảo ngược thời lượng và để khối thoát ra nhanh hơn khối được nhập để đảm bảo khối đó sẽ không chặn chế độ xem trang hiện tại Thời lượng hoạt ảnh trên sản phẩm phải đồng bộ với nhau và phù hợp với tính cách của thương hiệuTôi đã xem qua nhiều sản phẩm trong đó một tính năng có hoạt ảnh rất đẹp và một tính năng khác đơn giản là quá nhanh, chậm hoặc hoàn toàn không có bất kỳ hoạt ảnh nào. Tệ hơn nữa là khi hoạt ảnh trong cùng một tính năng không đồng bộ Đó là lúc có một hướng dẫn phong cách với các nguyên tắc hoạt hình chu đáo có thể được sử dụng nhất quán trong suốt trải nghiệm có thể giúp ích rất nhiều Làm thế nào đơn giản là quá đơn giản?Độ phức tạp của hoạt ảnh phải dựa trên tần suất người dùng dự kiến sẽ gặp nó, trong số những thứ khác mà chúng tôi đã xem xét cho đến nay. Người dùng càng thường xuyên xem nó thì hoạt ảnh càng đơn giản. Điều này sẽ ghi đè các quy tắc trước đó về thời lượng khi cần thiết Ví dụ: hoạt ảnh bên dưới sẽ hoạt động trong menu chính, nhưng việc sử dụng hiệu ứng đáng kinh ngạc tương tự trong menu thả xuống trên toàn bộ sản phẩm là quá nhiều để tiếp nhận. Thực sự có một điểm lợi nhuận giảm dần trong phim hoạt hình, giống như trong kinh tế học Nhưng, này, nếu loại hoạt hình phức tạp này được sử dụng một cách tiết kiệm trong các trường hợp có chủ ý, thì nó có thể cực kỳ thú vị Nhưng vâng, bạn có thể sáng tạo với các hoạt ảnh khi có quyết định đang chờ xử lý ở người dùng hoặc trong khi xử lý dữ liệu. Điều này làm cho thời gian chờ đợi trở nên hấp dẫn hơn, chẳng hạn như khi mạng bị ngắt hoặc gửi sai mật mã Bạn nên sử dụng chức năng nới lỏng nào?Xoa dịu? Việc nới lỏng đúng tuân thủ các định luật vật lý. Nguyên tắc hoạt hình của Disney là tiêu chuẩn vàng khi nói đến điều đó Đối với hoạt ảnh nhập, hãy sử dụng hiệu ứng thoát nếu bạn muốn người dùng chú ý ngay lập tức, nếu không, hãy sử dụng khả năng tăng tốc mượt mà (và giảm tốc, đối với vấn đề đó) tăng dần thay vì tuyến tính. Nảy nên phản ánh trọng lực. Bài đăng của Brandon Gregory về hoạt hình cảm giác tự nhiên cung cấp tất cả các loại ví dụ phù hợp với các định luật vật lý Dự phòng nhúng CodePen Bạn có thể tham khảo Gist này của Adam Argyle để xác định các điểm nới lỏng trong CSS Đèn, máy ảnh và… hành động có chủ ýChú ý đến từng chi tiết là điểm khác biệt giữa hoạt ảnh nổi bật với hoạt ảnh thông thường (hoặc thậm chí bị hỏng hoàn toàn). Nếu bạn đang trong quá trình tìm hiểu hoạt hình trên web hoặc hiện đang làm việc trong một dự án yêu cầu chúng, tôi chắc chắn rằng bài đăng này có thể đóng vai trò là một bộ quy tắc cơ bản hữu ích để giúp bạn tận dụng tối đa công việc của mình Ngoài các quy tắc, tôi cũng đề cập rằng hoạt ảnh tốt cần có thời gian và thực hành. Chắc chắn, rất nhiều thứ tôi đề cập ở đây hơi mang tính giai thoại và dựa trên kinh nghiệm cá nhân, nhưng đó là kết quả của việc phát triển con mắt hoạt hình sau nhiều năm làm việc với chúng. Học hỏi, thử, cải thiện và tiếp tục học hỏi. Nếu không, bạn có thể nhận được một bộ sưu tập hoạt ảnh mang lại trải nghiệm người dùng kém và thậm chí ảnh hưởng đến khả năng truy cập trang web của bạn Quá nhiều CSS có thể làm chậm trang web không?Khi trình duyệt của bạn gặp CSS, trình duyệt sẽ ngừng hiển thị trang, phân tích cú pháp CSS và xây dựng CSSOM (Mô hình đối tượng CSS). Vì vậy, ngay cả khi bạn thu nhỏ, nén và hợp nhất các tệp CSS của mình, số lượng CSS quá mức vẫn có thể làm chậm trang web của bạn .
CSS có làm chậm quá trình tải không?Vì CSS đang chặn hiển thị nên việc tải tất cả CSS cho mọi khách truy cập trên mỗi trang thường sẽ khiến tốc độ trang web chậm hơn .
CSS có tốt cho hoạt hình không?Cả chuyển tiếp CSS và hoạt ảnh đều có thể được sử dụng để viết hoạt ảnh . Mỗi người đều có kịch bản người dùng riêng. Chuyển đổi CSS cung cấp một cách dễ dàng để tạo hoạt ảnh giữa kiểu hiện tại và trạng thái CSS kết thúc, v.v. g. , trạng thái nút nghỉ và trạng thái di chuột.
Bạn có nên sử dụng hình ảnh động trên trang web của bạn?Hoạt hình trên web là một công cụ mạnh nhưng phải thận trọng khi sử dụng. Nếu bạn muốn khách hàng của mình thích những gì họ thấy, thì bạn chỉ nên sử dụng hoạt ảnh một cách tiết kiệm và khi thực sự cần thiết . Nếu không, nó có thể dễ dàng phản tác dụng với bạn và khiến họ bỏ đi thay vì thu hút họ đến với doanh nghiệp của bạn. |
