Mọi cửa hàng đã có menu trên cùng.
Câu hỏi là
những gì ở dưới cùng.
Bottom navigation đã trở thành tiêu chuẩn di động. Khách của bạn mong đợi nó. Nhưng thành công không phải về thêm nó ở mọi nơi — nó là về quyết định những gì thuộc ở đó, và đặt nó nơi nó thực sự hoạt động. Hướng dẫn này giúp bạn có được quyết định đó đúng.
Vùng an toàn khác nhau trên các thiết bị
Notch iOS, gesture bar Android, và landscape mode đều yêu cầu không gian màn hình. Một menu ở dưới cùng phải tồn tại với những hiện thực phần cứng này, không chiến đấu với chúng.
Bottom navigation cạnh tranh với nội dung
Đặt một thanh ở dưới cùng dành riêng không gian có thể hiển thị hình ảnh sản phẩm hoặc nút thêm vào giỏ. Vị trí sai khiến cuộn khó khăn hơn hoặc ẩn hành động chính.
Nó chỉ hoạt động với một số lượng item cụ thể
Thanh điều hướng 5 item có thể sử dụng được. 7 item trở nên chặt chẽ. Hơn 8 không thể sử dụng được. Bạn cần quyết định những gì thực sự ở đó — không mọi thứ có thể vừa.
Nó tồn tại với điều hướng khác
Hầu hết cửa hàng giữ header trên cùng và drawer menu. Bottom navigation không thay thế chúng — nó lớp lên trên. Làm cho những cái ba này hoạt động cùng nhau yêu cầu lập kế hoạch.
Điều hướng di động hiệu quả đặt các điểm đích quan trọng nhất của bạn vào các vị trí 3-5 ở dưới cùng, tôn trọng vùng an toàn thiết bị, và hoạt động cùng menu trên cùng của bạn — mà không overlap.
Trang chủ, Cửa hàng, Tìm kiếm, Giỏ, Tài khoản — bộ tiêu chuẩn
Hầu hết cửa hàng di động quyết định năm cái này. Trang chủ giúp bạn quay lại nhanh chóng. Cửa hàng là catalog của bạn. Tìm kiếm giúp khách tìm item cụ thể. Giỏ và Tài khoản là giao dịch. Bất cứ thứ gì ngoài năm cái này thường có nghĩa là một thứ gì đó không thuộc.
Tôn trọng vùng an toàn trên điện thoại hiện đại
Chỉ số trang chủ iOS và các vùng gesture Android yêu cầu padding. Thanh di chuyển lên một chút để vẫn có thể sử dụng và có thể chạm được, không bị ẩn sau gesture hoặc OS control.
Hoạt động ở chế độ portrait và landscape
Landscape mode có ít không gian dọc hơn. Một thanh dưới được thiết kế tốt co lại một cách duyên dáng hoặc xếp chồng item mà không phá vỡ bố cục hoặc trở nên không thể đọc được.
Lớp với header và drawer của bạn
Header trên cùng vẫn ở đó cho thương hiệu và tìm kiếm nhanh. Drawer giữ danh mục sâu. Thanh dưới cầu nối — truy cập nhanh vào các trang sử dụng nhiều nhất mà không cần mở menu.
Bỏ qua các loại cửa hàng nhất định
Không phải mọi cửa hàng đều có lợi từ bottom navigation. Cửa hàng sản phẩm duy nhất, thương hiệu xa xỉ với catalog tối thiểu, và cửa hàng nặng desktop có thể không cần nó. Biết các mô hình lưu lượng của bạn trước.
Kiểm tra lưu lượng và mục tiêu cửa hàng
Kiểm tra phân tích. Khách di động truy cập trang nào nhiều nhất? Hành động nào quan trọng nhất cho kinh doanh của bạn? Slot năm điểm đích vào thanh dưới của bạn — không nhiều hơn.
Thiết kế cho các vùng an toàn bạn nhắm mục tiêu
Quyết định điện thoại nào khách của bạn sử dụng nhiều nhất. Lập kế hoạch padding cho notch và gesture bar. Kiểm tra landscape mode. Vài phút lập kế hoạch tiết kiệm friction di động sau này.
Thiết lập bottom navigation của bạn với Navi+
Chọn điểm đích, icon, và màu. Navi+ xử lý vùng an toàn, breakpoint, và phát hiện thiết bị tự động. Xuất bản và trực tiếp trong vài phút.
Bao gồm inset vùng an toàn
Tự động điều chỉnh cho notch iOS, Dynamic Island, và điều hướng gesture Android. Không có phỏng đoán, hoạt động trên mọi loại thiết bị.
Thích ứng với landscape mode
Thanh dưới co lại và reflow khi khách xoay điện thoại. Bố cục vẫn có thể sử dụng, không bao giờ bị chặt chẽ hoặc ẩn.
Lớp chính xác với UI khác
Hoạt động cùng với fixed header, drawer menu, và popover mà không có xung đột z-index hoặc overlap.
Quản lý vị trí
Các vị trí trực quan rõ ràng giúp bạn đặt chính xác những gì quan trọng. Các vị trí chưa sử dụng vẫn trống — không có item filler buộc.
Sẵn sàng đa thị trường
Thích ứng với các ngôn ngữ khác nhau và mô hình điều hướng khu vực tự động. Thanh của bạn vẫn có thể đọc được ở bất kỳ thị trường nào.
Không ảnh hưởng đến hiệu suất
CSS và HTML nhẹ. Không có overhead JavaScript, không có bloat thư viện. Cửa hàng của bạn tải nhanh như trước.
Khi các trang cấp cao cấp nằm trong một thanh hiển thị ở dưới cùng của mọi màn hình, nhiều khách sử dụng chúng. Danh mục được duyệt. Tài khoản được kiểm tra. Danh sách yêu thích được sử dụng. Các mô hình mà khách đã biết từ Instagram và Amazon hoạt động tương tự trên cửa hàng của bạn.
Tab Bar
Thêm Tab Bar điều hướng dưới cùng vào cửa hàng Shopify. Cố định như ứng dụng gốc — tăng tương tác và giảm t...
Mobile Menu
Thay ngăn kéo menu mặc định bằng menu đa cấp. Tích hợp tìm kiếm, đăng nhập tài khoản, danh mục phân cấp mở ...
Floating Button
Thêm nút liên hệ dính vào cửa hàng Shopify. Luôn hiển thị — WhatsApp, điện thoại, email, live chat. Không b...
Miễn phí cài đặt. Hoạt động trong dưới 5 phút. Không cần chỉnh sửa chủ đề.