Hiệu ứng menu tùy chỉnh: khi chuyển động làm mạnh (hoặc yếu) nhận diện thương hiệu

Mở điều hướng trên một trang thời trang sang trọng và xem điều gì sẽ xảy ra. Menu khổng lồ không chỉ xuất hiện; nó mờ dần trong 400 mili giây với sự giảm nhẹ, nội dung xuất hiện từ trên xuống dưới. Bây giờ mở menu trên cửa hàng của một thương hiệu streetwear. Nó bật mở trong 150 mili giây, các mục trượt vào từ bên trái với một chút nảy nhẹ. Cả hai menu đều hiển thị cùng một loại nội dung. Cả hai đều hoạt động hoàn hảo. Nhưng họ cảm thấy hoàn toàn khác nhau, và cảm giác đó là nhận diện thương hiệu đang hoạt động.

Hoạt ứng là kênh bị bỏ sót nhiều nhất để thể hiện thương hiệu trong điều hướng. Chủ cửa hàng dành hàng giờ để chọn đúng màu sắc, phông chữ và cách diễn đạt nhãn cho menu của họ, sau đó để hành vi chuyển động ở bất kỳ mặc định nào mà chủ đề của họ được gửi kèm. Kết quả: một thiết kế tĩnh được xây dựng thương hiệu cẩn thận chuyển động giống như mọi cửa hàng Shopify khác.

Ba hoạt ứng nguyên thủy

Mỗi hoạt ứng menu, dù nó xuất hiện phức tạp như thế nào, được xây dựng từ các tổ hợp của ba nguyên thủy CSS: opacity (mờ), transform: translate (trượt), và transform: scale (co giãn). Hiểu những gì mỗi cái truyền đạt là nền tảng cho thiết kế chuyển động có ý định.

Mờ

Menu mờ dần chuyển từ trong suốt sang không trong suốt. Đó là mẫu hoạt ứng trung lập nhất vì nó không ngụ ý hướng hoặc lực. Hoạt ứng mờ cảm thấy yên tĩnh, tinh tế và không gây chú ý.

Tốt nhất cho: Thương hiệu sang trọng, thương hiệu tối giản, thương hiệu biên tập. Trải nghiệm web của Aesop sử dụng chuyển tiếp mờ dần rộng rãi. Điều hướng xuất hiện mà không gây chú ý đến cơ chế xuất hiện, như thể nó luôn ở đó và đơn giản là được tiết lộ.

Triển khai điển hình: opacity: 0 đến opacity: 1 trong 250-400ms với đường cong ease-out.

Rủi ro: Hoạt ứng mờ thuần túy có thể cảm thấy không có sức sống nếu chúng quá chậm. Dưới 200ms, hoạt ứng mờ hầu như không thể nhận thấy. Trên 500ms, nó bắt đầu cảm thấy như trang web đang tải chậm hơn là hoạt ứng có ý định.

Trượt

Menu trượt vào từ một hướng (trên, trái, phải hoặc dưới) sử dụng transform: translateX() hoặc translateY(). Hoạt ứng trượt cảm thấy năng động và hướng. Họ hướng dẫn mắt và tạo ra cảm giác mối quan hệ không gian giữa kích hoạt và nội dung.

Tốt nhất cho: Thương hiệu DTC hiện đại, thương hiệu thể thao, thương hiệu hướng tới thanh niên. Điều hướng di động của Gymshark trượt vào từ bên cạnh với tốc độ tự tin, làm mạnh nhận diện thương hiệu năng lượng cao của nó. Hướng của trượt cũng mang ý nghĩa: từ trên xuống gợi ý bậc thả xuống, từ trái sang phải gợi ý tiết lộ theo tiến độ, và từ phải sang trái gợi ý một bảng điều khiển hoặc ngăn kéo.

Triển khai điển hình: transform: translateY(-10px) đến translateY(0) kết hợp với mờ opacity, trong 200-300ms với ease-out.

Rủi ro: Hoạt ứng trượt di chuyển quá xa (hơn 20-30px cho menu thả xuống, hoặc chiều rộng toàn màn hình cho ngăn kéo di động) có thể cảm thấy gây sốc nếu thời lượng quá ngắn, hoặc chậm chạp nếu thời lượng được mở rộng để bù đắp. Tỷ lệ khoảng cách-thời lượng quan trọng.

Co giãn

Menu co giãn từ kích thước nhỏ hơn đến kích thước đầy đủ sử dụng transform: scale(). Hoạt ứng co giãn cảm thấy vui tươi, gây chú ý và hơi bất ngờ. Họ gợi ý sự tăng trưởng và mở rộng.

Tốt nhất cho: Thương hiệu vui tươi, sản phẩm cho trẻ em, thương hiệu có tính cách lãng mạn hoặc sáng tạo. Một cửa hàng đồ chơi có thể phóng to menu của nó từ 95% đến 100% với một chút nảy overshoot để tăng cường tính cách vui tươi của nó.

Triển khai điển hình: transform: scale(0.95) đến scale(1) kết hợp với opacity, trong 200-300ms với cubic-bezier tùy chỉnh có bao gồm nảy nhẹ.

Rủi ro: Hoạt ứng co giãn là khó nhất để có được đúng. Nếu hệ số tỷ lệ quá kịch tính (dưới 0,9), hoạt ứng trông hoạt hình. Nếu nó quá tinh tế (0,98 đến 1,0), nó không nhìn thấy được. Co giãn cũng tương tác kém với kết xuất văn bản; phông chữ có thể xuất hiện mờ trong quá trình chuyển đổi tỷ lệ trên một số trình duyệt.

Đường cong giảm dần là tín hiệu thương hiệu thực

Hoạt ứng nguyên thủy (mờ, trượt, co giãn) cung cấp chuyển động. Đường cong giảm dần cung cấp tính cách. Hai hoạt ứng trượt giống hệt nhau với giảm dần khác nhau cảm thấy như các thương hiệu khác nhau.

Hướng dẫn Material Design của Google khuyến nghị ease-out cho các phần tử nhập cảnh và ease-in cho các phần tử rời đi. Điều này bắt chước vật lý tự nhiên: các vật giảm tốc độ khi chúng đến vị trí nghỉ ngơi của chúng. Thương hiệu tuân theo quy ước này cảm thấy đánh bóng và được xem xét. Thương hiệu lệch (sử dụng đường cong nảy cho một sản phẩm sang trọng, ví dụ) tạo ra sự không hợp lý về nhận thức.

Thời lượng của giảm dần có ý nghĩa như hình dạng của nó. Nghiên cứu về cảm nhận hoạt ứng giao diện người dùng cho thấy rằng các chuyển đổi giữa 200-500ms cảm thấy có ý định với người dùng. Dưới 100ms, hoạt ứng không thể nhận thấy. Giữa 100-200ms, họ đăng ký thành “nhanh” nhưng có ý định. Trên 500ms, họ bắt đầu cảm thấy chậm. Trên 800ms, người dùng cảm nhận họ là vấn đề hiệu suất.

Đối với điều hướng cụ thể, 150-350ms là vị trí ngọt ngào. Menu di động có thể hướng tới 300-400ms cho hoạt ứng ngăn kéo toàn màn hình vì khoảng cách chuyển động lớn hơn biện minh cho thời lượng dài hơn. Menu thả xuống để bàn phím nên ở mức 150-250ms vì khoảng cách chuyển động nhỏ hơn làm cho các thời lượng dài hơn cảm thấy chậm.

Hiệu suất: khi hoạt ứng giúp và khi nó làm tổn thương

Đây là ràng buộc quan trọng: hoạt ứng menu xảy ra ở trên cùng, trên mỗi trang, thường là trong quá trình tương tác đầu tiên. Bất kỳ vấn đề hiệu suất nào trong hoạt ứng menu của bạn đều được phóng đại.

Tin tốt: hoạt ứng CSS sử dụng transform và opacity được tăng tốc GPU trong tất cả các trình duyệt hiện đại. Họ chạy trên luồng trình soạn thảo, có nghĩa là họ không chặn luồng chính và không gây ra tính toán lại bố cục. Mờ CSS hoặc trượt được triển khai tốt thêm hiệu suất chi phí hầu như bằng không.

Tin xấu: nhiều chủ đề Shopify và ứng dụng menu không triển khai hoạt ứng theo cách này. Lỗi hiệu suất phổ biến bao gồm:

Hoạt ứng chiều rộng, chiều cao hoặc trên/trái. Các thuộc tính này kích hoạt tính toán lại bố cục trên mỗi khung hình. Menu hoạt ứng height: 0 đến height: auto buộc trình duyệt phải tính toán lại bố cục của mỗi phần tử bên dưới menu 60 lần mỗi giây. Kết quả: jank, khung hình bị rơi và trải nghiệm chập chờn cảm thấy bị hỏng.

Sử dụng hoạt ứng được điều khiển bởi JavaScript thay vì CSS. jQuery’s .slideDown() và .fadeIn() vẫn phổ biến trong các chủ đề Shopify cũ hơn. Họ hoạt ứng thông qua JavaScript, chạy trên luồng chính và cạnh tranh với các tập lệnh khác. CSS chuyển tiếp và @keyframes luôn hiệu quả hơn.

Thư viện hoạt ứng tải cho các chuyển tiếp đơn giản. Bao gồm một thư viện hoạt ứng 30 KB để đạt được những gì ba dòng CSS có thể làm là một mạng âm tính. Thời gian tải xuống và phân tích cú pháp của thư viện chi phí nhiều hơn lợi ích hình ảnh của hoạt ứng.

Hoạt ứng kích hoạt khi tải trang. Một số chủ đề hoạt ứng thanh điều hướng trong quá trình tải trang ban đầu, điều này có thể can thiệp vào Largest Contentful Paint (LCP). Điều hướng nên hiển thị và tương tác ngay lập tức. Dự trữ hoạt ứng cho các thay đổi trạng thái được kích hoạt bởi người dùng (di chuột, nhấp, mở/đóng menu).

Mẫu hoạt ứng menu an toàn hiệu suất trong CSS:

.mega-menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
  pointer-events: none;
}

.mega-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

Mẫu này hoạt ứng chỉ các thuộc tính thân thiện với trình soạn thảo, sử dụng chuyển tiếp CSS (không hoạt ứng JavaScript loop), và vô hiệu hóa các sự kiện con trỏ khi ẩn để menu vô hình không bắt các nhấp chuột.

Kết hợp hoạt ứng với nguyên mẫu thương hiệu

Đây là cách nghĩ về lựa chọn hoạt ứng như là các quyết định thương hiệu:

Thương hiệu cao cấp và sang trọng nên sử dụng hoạt ứng mờ dần hoặc trượt nhẹ xuống với ease-out easing ở 300-400ms. Lối vào xếp tầng (trong đó các nhóm danh mục con xuất hiện tuần tự, 50-80ms cách nhau) thêm sự tinh tế. Tránh nảy, overshoot hoặc hiệu ứng gây chú ý. Hoạt ứng nên cảm thấy không thể tránh khỏi, không phải sân khấu.

Thương hiệu DTC hiện đại nên sử dụng hoạt ứng trượt với ease-in-out easing ở 200-300ms. Dịch Y-axis nhẹ kết hợp với opacity là vị trí ngọt ngào. Nó đủ đáng chú ý để cảm thấy đánh bóng nhưng đủ nhanh để cảm thấy hiệu quả. Đây là ngôn ngữ hoạt ứng mặc định của các trải nghiệm web đương đại được thiết kế tốt.

Thương hiệu vui tươi và thanh niên có thể thử nghiệm với ease nảy, hiệu ứng tỷ lệ nhẹ và trượt vào xếp tầng với độ lệch thời gian kịch tính hơn. Thời lượng có thể hướng tới 300-400ms vì tính vui tươi của chuyển động là một phần của trải nghiệm thương hiệu. Nhưng kiểm tra trên các thiết bị cấp thấp hơn; các đường cong giảm dần phức tạp với nhiều khung hình chính tính toán CPU nhiều hơn.

Thương hiệu tối giản và dành cho chức năng nên sử dụng hoạt ứng nhanh nhất, đơn giản nhất hoặc không có gì cả. Một mờ opacity 150ms là đủ để ngăn chặn sự bật lên gây sốc của show/hide tức thì mà không thêm trọng lượng hình ảnh không cần thiết. Một số thương hiệu tối giản có ý định sử dụng không hoạt ứng để báo hiệu “chúng tôi không lãng phí thời gian của bạn”.

Kiểm tra với điều chỉnh DevToolsTrước khi hoàn thiện hoạt ứng menu của bạn, hãy mở Chrome DevTools, go to the Performance tab, và bật điều chỉnh CPU ở 4x slowdown. Điều này mô phỏng cách hoạt ứng của bạn cảm thấy trên điện thoại Android mid-range. Nếu nó rơi khung hình hoặc cảm thấy chập chờn ở 4x throttle, đơn giản hóa hoạt ứng hoặc giảm thời lượng. Khách hàng di động của bạn trên các thiết bị ngân sách đang trải nghiệm chính xác điều này.

Hợp đồng prefers-reduced-motion

Khoảng 25-30% của dân số chung trải nghiệm một số hình thức nhạy cảm với chuyển động. Truy vấn phương tiện prefers-reduced-motion cho phép trang web của bạn tôn trọng người dùng đã bật chuyển động giảm trong cài đặt hệ điều hành của họ.

Đối với hoạt ứng menu, điều này là không thể đàm phán:

@media (prefers-reduced-motion: reduce) {
  .mega-menu {
    transition: none;
  }
}

Điều này không có nghĩa là loại bỏ tất cả phản hồi hình ảnh. Bạn vẫn có thể thay đổi opacity ngay lập tức hoặc sử dụng một crossfade rất ngắn (dưới 100ms). Mục tiêu là loại bỏ chuyển động không gian (trượt, tỷ lệ, nảy) cho người dùng tìm thấy chúng khó hiểu.

Tôn trọng prefers-reduced-motion không chỉ là một yêu cầu về khả năng tiếp cận. Đó là một tuyên bố thương hiệu: “chúng tôi quan tâm đến trải nghiệm của bạn hơn các lựa chọn thẩm mỹ của chúng tôi.” Đối với các thương hiệu vị trí bản thân là bao gồm hoặc con người trung tâm, điều này đặc biệt quan trọng để có được đúng.

Triển khai hoạt ứng tùy chỉnh mà không cần mã

Nếu bạn không thoải mái viết CSS, các công cụ như Navi+ cho phép bạn định cấu hình loại hoạt ứng menu, thời lượng và easing thông qua giao diện hình ảnh. Bạn chọn mẫu và thời gian khớp với thương hiệu của bạn, và công cụ tạo ra CSS được tối ưu hóa theo các phương pháp hay nhất về hiệu suất. Điều này loại bỏ rủi ro vô tình hoạt ứng các thuộc tính kích hoạt bố cục hoặc giới thiệu độ trên đầu hoạt ứng dựa trên JavaScript.

Cho dù bạn mã hóa nó tự mình hoặc sử dụng một công cụ, điều quan trọng là quyết định có ý định. Hoạt ứng menu của bạn nên được chọn vì nó tăng cường nhận diện thương hiệu của bạn, không phải vì nó là mặc định chủ đề bạn không bao giờ nghĩ để thay đổi.

Khi bỏ qua hoạt ứng hoàn toàn

Không phải mỗi cửa hàng đều hưởng lợi từ hoạt ứng menu. Nếu phân tích của bạn cho thấy rằng phiên bản trung bình liên quan đến bốn hoặc nhiều tương tác menu hơn, nhanh hơn là tốt hơn. Khách hàng quay lại sẽ thấy hoạt ứng của bạn hàng trăm lần; những gì cảm thấy thanh lịch vào lần thăm đầu tiên trở thành độ trễ vào lần thứ một trăm.

Nếu cửa hàng của bạn phục vụ nhu cầu chủ yếu chức năng (bán buôn B2B, thiết bị kỹ thuật, nguồn cung cấp chuyên nghiệp), khách hàng của bạn coi trọng tốc độ hơn trải nghiệm. Menu xuất hiện ngay lập tức tôn trọng thời gian của họ và báo hiệu hiệu quả, đây là chính nó một hình thức sơ lược thương hiệu.

Và nếu bạn không thể làm cho hoạt ứng mượt mà, bỏ qua nó. Một trượt jank 300ms tồi tệ hơn nhiều so với show tức thì. Chuyển động mà cắt ngắt không báo hiệu bất kỳ tính cách thương hiệu nào ngoại trừ “chúng tôi không kiểm tra điều này”. Mặc định ngay lập tức và chỉ thêm hoạt ứng khi bạn có thể đảm bảo nó hoạt động tốt trên các thiết bị.

Hoạt ứng menu tốt nhất là hoạt ứng mà khách hàng không bao giờ nhận thức được nhưng sẽ bỏ lỡ nếu nó biến mất. Nó tăng cường cảm giác của thương hiệu mà không cần yêu cầu sự chú ý. Đó là mục tiêu nhằm đạt được.

Bài viết này là một phần của hướng dẫn lớn hơn về Thiết kế menu và nhận diện thương hiệu: làm cho điều hướng cảm giác như cửa hàng của bạn.