it-swarm-vi.tech

Giao diện người dùng tốt nhất cho bảng HTML.

Tôi thường xuyên cần hiển thị dữ liệu dạng bảng và tôi muốn tất cả các phép thuật. . . sắp xếp các cột, phân trang, v.v. Tôi thích sử dụng các cột nơi bạn nhấp vào tên của cột và việc sắp xếp được thực hiện cho người dùng (thường sử dụng javascript mặc dù khó khăn hơn nếu bạn cũng phân trang dữ liệu màn hình hoặc bạn sử dụng nó theo cột đó và sau đó đặt chúng trở lại trang đầu tiên?) nhưng làm thế nào để tôi chỉ ra nó được sắp xếp? Một gợi ý UI tốt cho điều đó là gì? Tên cột trông như thế nào? Ngoài ra, tôi thích tô màu mọi kết quả khác bằng màu xám nhưng sau đó tôi thấy ai đó có màn hình có độ sáng quá cao và nó không đủ màu xám để họ có thể phân biệt các hàng nhưng nếu tôi tăng lượng màu xám thì không đủ tương phản để thoải mái đọc văn bản màu đen.

Một số ví dụ về các bảng được thực hiện đúng là gì?

6
tooshel

Theo truyền thống, "Sắp xếp theo" được biểu thị thông qua các mũi tên lên/xuống đại diện cho việc sắp xếp tăng dần hoặc giảm dần. Các tên cột phải có độ tương phản cao hơn các giá trị, chẳng hạn như văn bản đậm hơn hoặc nền mờ.

Cá nhân, khi tô màu các hàng xen kẽ, tôi thường đi nhẹ hơn thay vì tối hơn, vì hiệu ứng càng tăng rõ rệt khi người dùng của bạn tương tác với bảng càng lâu.

Dưới đây là một số ví dụ tuyệt vời về các tùy chọn bố trí bảng: http://patterntap.com/tap/collection/tables

14
David Perini
  • Sắp xếp dữ liệu trong toàn bộ bảng, không chỉ dữ liệu trên màn hình. Vâng, họ sẽ phải bắt đầu từ trang một trong thứ tự sắp xếp mới, nhưng không sao - bạn có thể hiểu được mọi thứ nếu bạn sắp xếp theo ID, và sau đó trên trang 10 đã quyết định sắp xếp theo họ?
  • Cho biết nó đã được sắp xếp bằng cách tô sáng nền của ô tiêu đề bảng trong cột đang được sắp xếp. Bạn có thể đi xa hơn và làm nổi bật toàn bộ cột. Sử dụng các mũi tên để làm cho nó rõ ràng hơn (và dễ tiếp cận hơn) - ví dụ mũi tên chỉ cho chưa được sắp xếp và một mũi tên chỉ xuống để sắp xếp.
  • Tên cột chỉ nên được phân biệt là tên cột. Tôi có xu hướng làm cho chúng lớn hơn và đậm hơn một chút so với nội dung của ô bảng.
  • Tô màu mọi kết quả khác với màu xám chỉ khi bạn cần làm như vậy để tăng khả năng quét được của các hàng riêng lẻ. Nếu đó là những gì bạn đang thiết kế, thì sự đánh đổi giảm nhẹ mức độ dễ đọc là tốt vì người dùng đang quét, không đọc. Và cuối cùng, không thể thiết kế cho mọi độ sáng màn hình, vì vậy hãy chắc chắn rằng bạn chọn một phương tiện hạnh phúc và gắn bó với điều đó.

Tôi không có bất kỳ ví dụ ngay lập tức nào cho bạn ngay bây giờ, nhưng đây là ví dụ về bảng tôi thiết kế cho ứng dụng web của mình theo lời khuyên/sở thích ở trên:

image of a table

5
Rahul

Từ góc độ hoàn toàn trực quan, hãy xem http://www.datatables.net/ (plugin cho jQuery). Bảng mẫu trên trang chủ đã có các tính năng bạn đề cập đã triển khai.

Công nghệ khôn ngoan, nó phụ thuộc vào những gì công nghệ back-end của bạn đang sử dụng. Nếu bạn đang chạy trên máy chủ .Net, các điều khiển có trong ASP 3.5 và 4 rất dễ hoạt động như bạn mô tả mà không cần phụ thuộc vào jQuery và trình cắm thêm.

4
Rob Allen

Kiểm tra lưới ExtJS. http://dev.sencha.com/deploy/dev/examples/#sample-

Tương tác người dùng tốt nhất của bất kỳ khung JS nào tôi đã thấy. Chúng tôi dựa vào nó rộng rãi cho ứng dụng của chúng tôi tại Marketo.

4
Glen Lipka

Nếu bạn cần một datagrid với "tất cả các phép thuật", hãy thử dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

Đó là một trong những lưới JavaScript mạnh nhất mà tôi từng thấy.

2
Steve E.

Chà, nếu bạn muốn sắp xếp theo cả hai cách, có một mũi tên cổ điển lên/xuống như trong windows Explorer/gnome nautilus, chúng thường có màu đậm hơn ô.

alt text

1
dierre