NộI Dung
Hoạt ảnh có thể là một công cụ thiết kế web rất mạnh mẽ. Nhưng trước khi tạo hiệu ứng cho mọi yếu tố trong thiết kế của mình, chúng ta phải tìm hiểu khi nào và cách sử dụng công cụ mới này. Với sức mạnh to lớn đi kèm với trách nhiệm lớn, v.v. Và vì hoạt ảnh phải cạnh tranh với nhiều mối quan tâm khác về thời gian phát triển và thiết kế, nên việc sử dụng tài nguyên của chúng tôi ở những nơi chúng sẽ đi xa nhất là điều hợp lý.
Bài viết này cung cấp cho bạn một số mẫu hoạt ảnh cốt lõi và chỉ cho bạn cách hoạt ảnh áp dụng cho một hệ thống lớn hơn. Sau đó, bạn sẽ học cách phát hiện các nút thắt về nhận thức và kết quả thấp, tối đa hóa tác động của các hoạt ảnh mà bạn đầu tư vào để cải thiện trải nghiệm người dùng.
- Đây là một đoạn trích từ Hoạt hình của Rachel Nabors tại nơi làm việc - mua nó ở đây
Nếu bạn đã xem nhiều ví dụ về hoạt ảnh trên web và giao diện trong ứng dụng như tôi có, thì một số mẫu nhất định sẽ bắt đầu xuất hiện. Những mẫu này hữu ích cho việc xác định và diễn đạt ngắn gọn mục đích của hoạt ảnh cho người khác.
Dưới đây là các danh mục tôi thấy mình sử dụng nhiều nhất: chuyển tiếp, bổ sung, phản hồi, trình diễn và trang trí.Hãy xem xét từng người trong số họ và xem chúng tác động như thế nào đến trải nghiệm của người dùng.
01. Chuyển tiếp
Chuyển đổi đưa người dùng từ nơi này sang nơi khác trong không gian thông tin hoặc chuyển họ từ nhiệm vụ này sang nhiệm vụ khác. Những điều này có xu hướng có tác động lớn đến nội dung trên trang, thay thế các phần lớn thông tin.
Ban đầu web được thiết kế dưới dạng một chuỗi các tài liệu liên kết. Việc nhấp vào một liên kết khiến trình duyệt xóa sạch màn hình, thường gây ra đèn flash màu trắng, trước khi vẽ trang tiếp theo từ đầu. Mặc dù điều này có ý nghĩa trong bối cảnh của các tài liệu dựa trên văn bản được liên kết, nhưng nó ít có ý nghĩa hơn trong thời đại mà các trang chia sẻ nhiều yếu tố thiết kế phong phú và thuộc cùng một miền. Việc tạo lại nhiều lần cùng một bố cục trang không chỉ là lãng phí tài nguyên của trình duyệt mà còn làm tăng tải nhận thức của người dùng khi họ phải định hướng lại và đánh giá lại nội dung của trang.
Hoạt ảnh, cụ thể là chuyển động, có thể hỗ trợ định hướng của người dùng trong không gian thông tin bằng cách giảm tải nỗ lực đó lên vỏ não thị giác. Sử dụng sự chuyển đổi giữa các thay đổi trong luồng tác vụ hoặc vị trí trong kiến trúc thông tin củng cố một cách lý tưởng nơi người dùng đã ở, nơi họ sẽ đến và hiện tại họ đang ở đâu.
Ví dụ: trên trang SB Dunk của Nike (được hiển thị ở trên), khi người dùng nhấp vào mũi tên điều hướng, giày thể thao hiện tại sẽ di chuyển ra khỏi hướng đi trong khi giày thể thao tiếp theo di chuyển theo hướng ngược lại. Những chuyển đổi này cho người dùng thấy rõ ràng cách họ đang điều hướng dọc theo một chuỗi liên tục tuyến tính của giày thể thao, giúp họ theo dõi vị trí của mình và củng cố mô hình không gian của việc sử dụng hàng giày thể thao trong thế giới thực.
Trên một trang web giày khác, John Fluevog, quá trình chuyển đổi chuyển người dùng từ nhiệm vụ này sang tác vụ khác (xem ở trên). Sau khi người dùng bắt đầu nhập vào trường tìm kiếm, kết quả sẽ được làm động trên phông nền tối hơn. Điều này chuyển người dùng từ bối cảnh duyệt web sang tinh chỉnh kết quả tìm kiếm của họ, hợp lý hóa sự tập trung của họ đồng thời trấn an họ rằng họ có thể quay lại duyệt web mà không cần nỗ lực nhiều.
02. Thuốc bổ sung
Các chất bổ sung mang thông tin vào hoặc ra khỏi trang, nhưng không thay đổi "vị trí" hoặc nhiệm vụ của người dùng. Họ thường thêm hoặc cập nhật các bit nội dung bổ sung trên trang.
Trong khi quá trình chuyển đổi di chuyển người dùng từ trạng thái này sang trạng thái khác, các hoạt ảnh bổ sung mang lại thông tin phụ trợ cho người dùng. Hãy nghĩ đến những thời điểm khi thông tin bổ sung cho nội dung chính của trang xuất hiện hoặc biến mất trong chế độ xem: cảnh báo, trình đơn thả xuống và chú giải công cụ đều là những ứng cử viên tốt cho hoạt ảnh bổ sung khi nhập và thoát.
Hãy nhớ rằng những hình ảnh động này cần phải tôn trọng Cone of Vision của người dùng: họ sẽ nhìn trực tiếp vào chú giải công cụ xuất hiện bên cạnh con trỏ của họ hay sự chú ý của họ cần hướng đến một cảnh báo ở bên cạnh máy tính bảng của họ?
Khi người dùng thêm một sản phẩm vào giỏ hàng của họ trên glossier.com, thay vì đưa họ đến một trang giỏ hàng hoàn toàn mới, trang web chỉ cập nhật cho người dùng về nội dung giỏ hàng của họ bằng cách đưa nó ra dưới dạng thanh bên (ở trên). Trong khi quá trình chuyển đổi sẽ khiến người dùng thoát khỏi chế độ duyệt, hoạt ảnh bổ sung này cho phép người dùng loại bỏ giỏ hàng và tiếp tục mua sắm.
Thanh bên giỏ hàng sử dụng một hoạt ảnh bổ sung bổ sung để thu hút ánh nhìn của người dùng một cách nhanh chóng và tinh tế: đồng hồ đo tiến trình dần lấp đầy để hiển thị số tiền người dùng cần chi để được giao hàng miễn phí.
Quá trình giỏ hàng này có một mô hình hoạt ảnh thứ ba đang diễn ra: nút Thêm vào Túi có biểu tượng xoay tròn khi được nhấp vào, biểu tượng này cung cấp cho người dùng phản hồi về trạng thái tải của nó. Nói về phản hồi ...
03. Phản hồi
Phản hồi cho biết mối quan hệ nhân quả giữa hai hoặc nhiều sự kiện, thường được sử dụng để kết nối tương tác của người dùng với phản ứng của giao diện.
Hoạt ảnh có thể cung cấp cho người dùng phản hồi trực tiếp về các tương tác của họ. Nút nhấn, cử chỉ vuốt - cả hai đều liên kết hành động của con người với phản ứng của giao diện. Hoặc mặt trái: vòng xoay đang tải trên một trang cho biết rằng chúng tôi đang đợi trên máy tính. Nếu không có phản hồi trực quan, mọi người sẽ tự hỏi liệu họ có thực sự nhấp vào nút 'thanh toán ngay bây giờ' hay không hay cuối cùng thì trang có thực sự đang tải hay không.
Trên trang web của Thủy cung Vịnh Monterey, việc di chuột qua một nút khiến màu của nút đó chuyển dần từ đỏ sang xanh lam, cho biết rằng phần tử này có tính tương tác và sẵn sàng phản ứng với thông tin nhập của người dùng. Di chuột qua nút là ví dụ cổ điển cho loại hoạt ảnh này, một phần vì lợi ích của việc cung cấp cho người dùng phản hồi trực quan về các nút rất có thể đo lường và quan trọng đối với doanh nghiệp.
Trang web của studio thiết kế Animal sử dụng một thanh màu trên đầu trang cũng như phiên bản hoạt hình của biểu trưng để biểu thị trạng thái tải và tải của trang, đồng thời mang lại sự quan tâm và củng cố thương hiệu 'hoang dã' của trang.
04. Trình diễn
Thuyết minh giải thích cách hoạt động của một cái gì đó hoặc phơi bày chi tiết của nó bằng cách hiển thị thay vì kể. Đây là cách sử dụng hoạt hình yêu thích của cá nhân tôi. Chúng có thể vừa giải trí vừa sâu sắc.
Những hoạt ảnh này đưa thông tin vào góc nhìn, hiển thị những gì đang xảy ra hoặc cách hoạt động của một thứ gì đó. Điều này làm cho hình ảnh động minh họa trở thành đối tác hoàn hảo cho đồ họa thông tin. Một điều mà tất cả các hoạt ảnh minh họa làm là kể một câu chuyện, như bạn sẽ thấy.
Các trang 'Đang xử lý ...' là cơ hội để giải thích những gì đang xảy ra với người dùng trong khi họ chờ đợi. TurboTax sử dụng tốt các trang xử lý này. Sau khi người dùng gửi biểu mẫu thuế tại Hoa Kỳ, nó sẽ xua tan mọi lo lắng còn lại bằng cách hiển thị cho họ biết thông tin của họ đang hướng đến đâu và những gì họ có thể mong đợi - tất cả đồng thời củng cố sự thân thiện và khả năng tiếp cận của thương hiệu. (Nó cũng giúp hoạt ảnh đánh lạc hướng người dùng khỏi việc tải trang khá dài bằng một thứ gì đó hấp dẫn về mặt hình ảnh!).
Coin nổi tiếng sử dụng các hình ảnh động minh họa để giải thích đề xuất giá trị của thẻ hợp nhất của họ cho những khách truy cập tò mò khi họ cuộn qua trang web - không cần nhấn phát và ngồi xem quảng cáo video hoặc lướt qua các đoạn nội dung phô trương. Trang này là bản chất của "show, don’t tell".
05. Đồ trang trí
Không khó để nhầm hoạt ảnh trang trí với hoạt ảnh minh họa. Nhưng có một sự khác biệt chính: nơi các cuộc biểu tình đưa thông tin mới vào hệ thống, các hoạt ảnh trang trí thì không. Chúng là chất béo và đường của kim tự tháp thực phẩm hoạt hình: chúng tạo ra chất tăng hương vị tuyệt vời, nhưng điều độ là chìa khóa.
Cách tốt nhất để phát hiện một hoạt ảnh trang trí thuần túy là hỏi, “Người dùng có thể học được gì từ hoạt ảnh này? Điều này có hướng dẫn họ hay chỉ cho họ điều gì đó mà họ không biết? " Nếu câu trả lời là không, bạn có thể có một hình ảnh động trang trí trên tay.
Mặc dù họ có một đoạn rap tệ, các hình ảnh động trang trí có thể giúp biến điều bình thường thành điều phi thường. Trang web của Revisionist History sử dụng hình ảnh động trang trí một cách thận trọng để làm cho hình ảnh minh họa phẳng trở nên sống động. Các hình ảnh động tạo thêm sự quan tâm vừa đủ để cho phép nội dung trực quan trên trang trở nên khắc khổ hơn, cho phép người dùng tập trung vào podcast.
Polygon.com thường sử dụng các hình minh họa hoạt hình để tạo trung tâm cho một loạt bài đánh giá bảng điều khiển. Những hình ảnh động trang trí này có thể không thêm thông tin mới, nhưng chúng đã củng cố quan trọng cho thương hiệu Polygon. Họ cũng giúp mỗi bài đánh giá bảng điều khiển nổi bật hơn so với cuộc thi, vào thời điểm đó đã đưa ra những bức ảnh không thể phân biệt được của các thiết bị giống nhau.
Bài viết này là một đoạn trích từ Rachel Nabors ’Animation at Work - một cuốn sách điện tử A Book Apart Briefs hướng dẫn bạn thông qua cấu trúc của hoạt ảnh web, các mẫu và các quyết định giao tiếp giữa các nhóm. Mua nó ở đây.
