it-swarm-vi.tech

Thực hành tốt nhất

Tôi không chắc chắn về cách tốt nhất để xử lý một số phân trang mà tôi cần thực hiện trên một bảng có khả năng rất lớn (5.000 hàng cộng).

Câu hỏi đầu tiên của tôi là số lượng hàng được hiển thị trên mỗi trang chỉ được quyết định bởi bố cục hay số lượng trang cũng sẽ được xem xét. Ví dụ: tôi có nên nói <1000 hiển thị 20 hàng,> = 1000 hiển thị 30 hàng không?

Câu hỏi tiếp theo là làm thế nào tốt nhất để điều hướng giữa các trang, giả sử người dùng đã lọc bảng nhiều nhất có thể và họ còn lại 50 trang thông tin, họ có nên lấy hộp đầu vào để chuyển sang trang 45 không? Hoặc nên bỏ qua (1) bỏ qua (5) nút đủ? Tại thời điểm này, tôi không biết người dùng cuối sẽ sử dụng các bảng như thế nào nên tôi không chắc chắn về tùy chọn nào để cho họ thử trước.

Cuối cùng, có ai có bất kỳ ví dụ tốt về phân trang được thực hiện ngay mà họ có thể chia sẻ không? Tôi luôn luôn tìm kiếm tài liệu tham khảo tốt!

25
Toby

Điều này có thể hoặc không thể phân trang được thực hiện đúng, nhưng đây là cách tôi thực hiện phân trang trong ứng dụng web của mình:

|< First, << Previous, Page [5] of 12, Next >>, Last >|

Bốn tùy chọn bên ngoài là các liên kết, trong khi Page [5] of 12 là một hình thức, với [5] là trường đầu vào. Đối với người dùng đã bật JavaScript, tôi ẩn nút gửi và gửi biểu mẫu về sự kiện không tập trung hoặc nhập phím nhấn. Người dùng có tùy chọn về số lượng hàng họ muốn hiển thị, họ có thể chọn từ menu thả xuống: 10, 20, 50, 100, Tất cả. Tôi cũng cung cấp sắp xếp và lọc kết quả ngoài phân trang, mặc dù điều đó có thể không có ý nghĩa trong mọi tình huống.

Chỉnh sửa:

Đây là một đoạn trích từ một mockup của ứng dụng web của chúng tôi để cho bạn ý tưởng tốt hơn. Trong phiên bản này, các từ đã bị bỏ qua khỏi các nút, nhưng xuất hiện dưới dạng một chú giải công cụ khi di chuột sau một chút chậm trễ. Tuy nhiên, bạn có thể thấy rằng việc giữ lời sẽ dẫn đến mức độ tiện dụng cao hơn.

Virtuosi Media's Pagination Example

Một vài điều khác để chỉ ra:

  • Các nút "Đầu tiên" và "Trước đó" đã bị tắt vì đây là trang đầu tiên.
  • Màu xanh biểu thị các nút hoạt động (tôi sẽ phải chạy chủ đề cụ thể này thông qua trình kiểm tra màu để đảm bảo rằng người dùng mù màu có thể cho biết sự khác biệt).
  • Các nút luôn luôn duy trì, ngay cả khi chúng bị vô hiệu hóa. Điều này mang lại sự nhất quán cho giao diện.
  • Tôi đã chọn một trường đầu vào thay vì hộp chọn thả xuống vì tỷ lệ. Nếu bạn có 3000 trang, bạn không muốn cuộn xuống để tìm trang
  • Phân trang được nhóm trong một thành phần trực quan duy nhất để chỉ ra sự tương tự trong mục đích.
27
Virtuosi Media

Xin lỗi vì câu trả lời như vậy, nhưng nó phụ thuộc . Bạn có loại nội dung nào và người dùng đang tìm kiếm cái gì? Mục tiêu của người dùng là gì? Nó là một trang web hoặc một ứng dụng?

Trong nhiều trường hợp, bạn hoàn toàn có thể tránh phân trang bằng cách sử dụng cuộn vô hạn (xem kết quả tìm kiếm của tìm kiếm hình ảnh của Google ).

Vấn đề với phân trang là bản thân các trang không có ý nghĩa. Tại sao tôi nên đến trang 45? Tại sao không 38? Nếu nội dung được sắp xếp, bạn có thể cố gắng đặt cho các trang tên có ý nghĩa (như chữ cái của bảng chữ cái hoặc phạm vi ngày hoặc bất cứ điều gì khác có ý nghĩa). Số lượng hàng trên mỗi trang phải càng lớn càng tốt vì việc cuộn thường mang lại trải nghiệm tốt hơn nhiều so với điều hướng qua các trang (tuy nhiên đó không phải là quy tắc chung và có một số ngoại lệ).

Và đối với các ví dụ và thực tiễn tốt ở đây là một bài viết tuyệt vời .

12
Kostya

Nói chung, số lượng mục trên mỗi trang là thứ bạn xác định dựa trên các tiêu chí sau:

  • Tôi đang hiển thị loại dữ liệu nào và số lượng mục nhất định sẽ tạo trang như thế nào?
  • Các mục X trên trang có ảnh hưởng gì đến hiệu suất của ứng dụng?
  • Tôi có muốn cho phép người dùng tùy chỉnh số lượng mục được hiển thị trên mỗi trang không?
  • Nếu tôi quan tâm đến điều hướng giữa các trang (ví dụ: người dùng có quan tâm đến việc đi đến trang cụ thể số 512 không?), Số lượng mục trên mỗi trang sẽ ảnh hưởng đến khả năng điều hướng của phân trang như thế nào?
  • Những kiểm soát phân trang có sẵn cho tôi?

Nếu bạn trả lời các câu hỏi trên, họ sẽ dẫn độc đáo vào câu trả lời cho câu hỏi thứ hai của bạn. Phân trang là một sản phẩm của dữ liệu bạn có và số lượng mục bạn đang hiển thị. Lời khuyên của tôi là xác định xem người dùng của bạn có muốn chỉ định trang nào họ muốn xem hay không. Bạn có thể tìm ra điều này bằng cách kiểm tra người dùng cũng như suy nghĩ về loại thông tin nào đang được liệt kê. Chẳng hạn, kết quả tìm kiếm hiếm khi đủ cụ thể để có thể nói "Tôi muốn đi đến trang 47" vì chúng thường được sắp xếp theo thuật toán mờ, khó hiểu. Nhưng nếu bạn đang liệt kê, giả sử, các tên theo thứ tự bảng chữ cái, đi đến trang 47 có thể rất trực quan.

Tương tự, kiểu dữ liệu bạn đang hiển thị cũng có thể ảnh hưởng đến điều hướng và bạn có thể muốn xem xét mẫu thiết kế điều hướng theo khía cạnh để đơn giản hóa mọi thứ. Trong ví dụ tôi vừa đưa ra về tên bảng chữ cái, bạn có thể xem xét phân trang bằng cách sử dụng các chữ cái (A | B | C | D, v.v.) và các trang trong mỗi chữ cái nếu bạn có nhiều dữ liệu.

Cụ thể:

  • Tôi không khuyên bạn nên cung cấp cho người dùng quá nhiều quyền kiểm soát cụ thể trừ khi bạn biết thực tế đó là điều họ muốn
  • Thay vào đó, hãy cung cấp phần đệm xung quanh trang hiện tại (1 .. 7 8 [9] 10 11 .. 28)
  • Bao gồm các trang đầu tiên và cuối cùng nếu bạn sắp xếp theo thuật toán, trừ khi bạn không thể vì lý do hiệu suất.
  • Nếu sắp xếp theo thuật toán, hãy xem xét các tùy chọn sắp xếp khác nhau (chẳng hạn như đảo ngược thứ tự sắp xếp) - tùy thuộc vào loại dữ liệu

Ví dụ về phân trang được thực hiện đúng:

  • Flickr - phân biệt rõ ràng giữa trạng thái được chọn, không hoạt động và liên kết; màu sắc dễ tiếp cận; liên kết đệm với các mục tiêu nhấp tốt; đệm tốt xung quanh trang hiện tại; không quá phức tạp. Một yêu thích cá nhân.
  • Funda.nl - Trang web bất động sản Hà Lan với thiết kế tuyệt vời, đơn giản, dễ đọc cũng được phản ánh trong phân trang
  • Bing - không có BS, thiết kế kiểu chữ tối giản có nghĩa là phân trang rất tinh tế nhưng đồng thời dễ sử dụng
  • Google (rõ ràng) - hơi phô trương, nhưng mặc dù có rất nhiều lựa chọn, vẫn cảm thấy đơn giản và thậm chí mang lại nụ cười trên khuôn mặt của bạn
  • Chris Messina có một vài bức ảnh đẹp về phân trang trong album mẫu thiết kế của anh ấy trên Flickr.
6
Rahul

Mẫu chiếu:

Đối với câu hỏi đầu tiên của bạn - Tôi là một người hâm mộ tính nhất quán (và hầu hết người dùng cũng vậy). Đừng nhầm lẫn người dùng và khiến họ nghĩ tại sao họ lại thấy nhiều hàng hơn ... Bạn thậm chí có thể cho phép họ chọn "các mục trên mỗi trang", đây là cách làm rất phổ biến và hữu ích.

3
Dan Barak

Người dùng thích di chuyển sau đó phân trang. Điều khiển bánh xe cuộn dễ dàng hơn nhiều so với việc nhắm vào các liên kết điều hướng nhỏ.

Morea về phân trang so với cuộn

1
Miki