Phân trang là một trong những nhu cầu thiết kế nhỏ thường bị bỏ qua. Nhưng đối với blog và các trang web giàu nội dung khác, nó cung cấp một phương tiện điều hướng quan trọng. Một menu được thiết kế tốt có thể khuyến khích người dùng khám phá thêm những gì nó cung cấp.
Tin hay không, có những nhà thiết kế dám đưa phân trang lên một tầm cao mới. Dưới đây là một số đoạn mã rất sáng tạo mà bạn có thể sử dụng để nâng cao trang web của riêng mình.
Hiệu ứng cuộn đơn giản và trực quan
Ví dụ đầu tiên của chúng tôi cho thấy một số hiệu ứng cuộn cơ bản có thể cải thiện đáng kể phân trang chuẩn như thế nào. Phần gạch chân siêu mịn theo con trỏ của bạn làm cho trải nghiệm trực quan hơn nhiều. Ngoài ra, toàn bộ menu rất dễ đọc. Đây là một cách đơn giản để giúp người dùng.
Tài khoản trực tiếp
Một trong những phần khó chịu nhất của phân trang có thể là cách các menu xử lý một số lượng lớn các trang. Đoạn mã này sử dụng jQuery để tự động bọc chính nó để hiển thị số trang liền kề khi bạn nhấp. Đó là một cách dễ dàng hơn nhiều để đi sâu vào một trang web.
Bồn rửa nhà bếp
Đây là một khái niệm rất thú vị. Được thiết kế để phản ứng nhanh và dễ truy cập hơn, giao diện người dùng phân trang này chứa nhiều cách để điều hướng, bao gồm cả thông qua bàn phím. Thanh giống như dòng thời gian ở trên cùng rõ ràng gắn nhãn trang hiện tại và cung cấp một cái nhìn tổng quan tuyệt vời về mọi thứ có sẵn.
Hãy để Yeti chăm sóc điều đó
Họ nói rằng sự giúp đỡ tốt rất khó tìm. Nhưng đoạn trích này cung cấp sự giúp đỡ của Yeti (ít nhất là bàn tay của Yeti) bằng cách nhấp vào số trang. Mặc dù Yetis có thể không phù hợp với mô-típ của mình, đây là một ví dụ về cách chúng ta có thể thêm yếu tố vui nhộn (và bất ngờ).
Tăng cường cho màn hình di động
Trên màn hình nhỏ hơn, phân trang có thể rất khó sử dụng. Các yếu tố điều hướng thường quá nhỏ và khó đọc. Đoạn mã này cung cấp một sự thay thế tuyệt vời cho các thiết bị di động. Mỗi phần tử lớn hơn, vì điều hướng mở rộng theo chiều dọc. Kết quả là người dùng thiết bị di động có thể di chuyển xung quanh mà không cần nheo mắt hoặc phóng to.
Không cần số
Đôi khi, chúng ta không cần đánh số mọi yếu tố trong phân trang. Ví dụ này là tối thiểu hấp dẫn với việc sử dụng điểm, thay vì số. Đó là một giải pháp tốt cho các trình chiếu hoặc điều hướng qua nhiều bảng nội dung.
Liên lạc thân thiện
Giao diện người dùng di động hoạt động tốt nhất khi nó phản ứng với cảm ứng của người dùng. Ở đây chúng tôi có một phân trang cho phép người dùng vuốt để đến mục tiếp theo hoặc trước đó. Sự tiện lợi nhỏ này có thể tạo ra sự khác biệt khi nói đến khả năng sử dụng.
Combo vô hạn cuộn / phân trang
Nhà thiết kế thường sử dụng cuộn vô hạn để thay thế phân trang. Nhưng đây là một khái niệm rõ ràng về cách chúng có thể được kết hợp. Sự thất vọng của cuộn vô hạn là có thể khó quay lại và tìm thấy mục cụ thể đó trong một danh sách dài. Tập lệnh này thêm số trang mới vào điều hướng khi bạn tiếp tục cuộn xuống, làm cho việc quay lại dễ dàng hơn một chút.
Di chuyển phân trang về phía trước
Một thiết kế web tuyệt vời không bỏ qua các yếu tố khác nhau tạo nên một trang. Các chuyên gia trước đây cho thấy rằng phân trang có nhiều hơn để cung cấp khi bạn cố gắng cải thiện nó. Vì vậy, hãy lấy cảm hứng từ những ví dụ này và tạo các menu phân trang trông và hoạt động tốt hơn.
