it-swarm.asia

UI terbaik untuk tabel HTML.

Saya sering perlu menampilkan data tabular dan saya ingin semua keajaiban. . . menyortir kolom, pagination, dll. Saya lebih suka menggunakan kolom di mana Anda mengklik nama kolom dan penyortiran dilakukan untuk pengguna (biasanya menggunakan javascript meskipun lebih sulit jika Anda memiliki pagination juga karena Anda hanya mengurutkan data pada layar atau Anda menggunakan kolom itu dan kemudian meletakkannya kembali di halaman pertama?) tetapi bagaimana saya menunjukkan itu telah diurutkan? Apa petunjuk UI yang bagus untuk itu? Bagaimana seharusnya nama kolom terlihat? Juga, saya suka mewarnai setiap hasil lainnya dengan abu-abu tapi kemudian saya melihat seseorang dengan layar dengan kecerahan terlalu tinggi dan tidak cukup abu-abu bagi mereka untuk dapat membedakan baris tetapi jika saya menaikkan jumlah abu-abu tidak ada cukup kontras untuk membaca teks hitam dengan nyaman.

Apa saja contoh tabel yang dilakukan dengan benar?

6
tooshel

Secara tradisional, "Urutkan Menurut" ditunjukkan melalui panah atas/bawah yang mewakili pengurutan naik atau turun. Nama kolom harus memiliki tingkat kontras yang lebih tinggi daripada nilai, seperti teks tebal atau latar belakang yang diarsir.

Secara pribadi, ketika mewarnai baris bergantian, saya biasanya lebih terang daripada lebih gelap, karena efeknya semakin jelas semakin lama pengguna Anda berinteraksi dengan tabel.

Berikut adalah beberapa contoh bagus dari opsi tata letak tabel: http://patterntap.com/tap/collection/tables

14
David Perini
  • Urutkan data di seluruh tabel, bukan hanya data di layar. Ya, mereka harus mulai dari halaman pertama dari urutan pengurutan yang baru, tetapi tidak apa-apa - akankah Anda berharap dapat memahami banyak hal jika Anda mengurutkan berdasarkan ID, dan kemudian pada halaman 10 memutuskan untuk mengurutkan berdasarkan nama keluarga?
  • Tunjukkan itu telah diurutkan dengan menyorot latar belakang sel header tabel di kolom yang sedang diurutkan. Anda bisa melangkah lebih jauh dan menyorot seluruh kolom. Gunakan panah untuk membuatnya lebih jelas (dan lebih mudah diakses) - panah menunjuk ke kanan untuk tidak disortir, dan panah menunjuk ke bawah untuk diurutkan, misalnya.
  • Nama kolom hanya dapat dibedakan sebagai nama kolom. Saya cenderung membuatnya sedikit lebih besar dan lebih berani dari pada isi sel tabel.
  • Warnai setiap hasil lainnya dengan abu-abu hanya jika Anda perlu melakukannya untuk meningkatkan scannability dari setiap baris. Jika itu yang Anda rancang, maka tradeoff dari sedikit mengurangi keterbacaan keseluruhan baik-baik saja karena pengguna memindai, bukan membaca. Dan akhirnya, tidak mungkin untuk merancang untuk setiap kecerahan layar, jadi pastikan Anda memilih media yang bahagia dan tetap menggunakannya.

Saya tidak memiliki contoh langsung untuk Anda saat ini, tetapi berikut adalah contoh tabel yang saya desain untuk aplikasi web saya yang mengikuti saran/preferensi saya di atas:

image of a table

5
Rahul

Dari perspektif visual murni, periksa http://www.datatables.net/ (plugin untuk jQuery). Tabel sampel pada halaman beranda memiliki fitur yang Anda sebutkan sudah diterapkan.

Secara teknis, itu tergantung pada apa yang menggunakan teknologi back-end Anda. Jika Anda menjalankan server .Net, kontrol yang termasuk dalam ASP 3.5 dan 4 sangat mudah untuk bekerja seperti yang Anda gambarkan tanpa jQuery dan ketergantungan plug-in.

4
Rob Allen

Lihat kisi ExtJS. http://dev.sencha.com/deploy/dev/examples/#sample-

Interaksi pengguna terbaik dari kerangka JS apa pun yang telah saya lihat. Kami mengandalkannya secara luas untuk aplikasi kami di Marketo.

4
Glen Lipka

Jika Anda memerlukan datagrid dengan "semua keajaiban", coba dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

Itu salah satu kotak JavaScript paling kuat yang pernah saya lihat.

2
Steve E.

Nah jika Anda ingin mengurutkan dalam dua arah, ada panah klasik atas/bawah seperti di windows Explorer/gnome nautilus, mereka biasanya dalam warna yang lebih gelap daripada sel.

alt text

1
dierre