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 đến quan trọng nhất của bạn trong ba đến năm khe ở dưới cùng, và hoạt động cùng với menu trên cùng và menu di động của bạn thay vì thay thế chúng.
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 chiều cao và khoảng cách của riêng bạn
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.
Quyết định những gì xứng đáng có một khe
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 đến, biểu tượng và màu sắc của bạn, sau đó đặt điểm ngắt quyết định khi nào thanh xuất hiện trên di động và khi nào không. Xuất bản và đi vào hoạt động trong vài phút.
Chiều cao và phần đệm bạn kiểm soát
Đặt chiều cao thanh, kích thước biểu tượng và phần đệm của riêng bạn, để nó nằm thoải mái phía trên cạnh dưới cùng trên các thiết bị khách hàng của bạn thực sự sử dụng.
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
Menu đa ngôn ngữ có sẵn trên Business trở lên, vì vậy các nhãn trong thanh của bạn có thể theo ngôn ngữ mà khách truy cập của bạn đang duyệt.
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ủ đề.