web-gelistirme-sc.com

HTML tablosu için en iyi kullanıcı arayüzü.

Sık sık tablo verileri göstermem gerekiyor ve tüm sihri istiyorum. . . sütunları, sayfalandırma, vb sıralama Sütun adını tıklayın ve kullanıcı için sıralama yapılır sütunları kullanmayı tercih ediyorum (genellikle javascript kullanarak sayfalama varsa da daha zor olsa da sadece veri üzerinde sıralama ekranı mı yoksa bu sütuna göre mi yerleştirip ilk sayfaya geri koyar mısınız?) Bunun için iyi bir kullanıcı arayüzü ipucu nedir? Sütun adları nasıl görünmelidir? Ayrıca, diğer tüm sonuçları gri ile renklendirmeyi seviyorum, ancak sonra ekranı çok yüksek parlaklığa sahip birini görüyorum ve satırları ayırt edebilecek kadar gri değil, ancak gri miktarını artırdığımda siyah metni rahatça okumak için yeterli kontrast.

Doğru yapılmış bazı tablo örnekleri nelerdir?

6
tooshel

Geleneksel olarak, "Sırala", artan veya azalan sıralamayı temsil eden yukarı/aşağı oklarla gösterilir. Sütun adları, daha kalın metin veya gölgeli bir arka plan gibi değerlerden daha yüksek bir kontrast düzeyine sahip olmalıdır.

Şahsen, alternatif satırları renklendirirken, genellikle daha koyudan ziyade daha açık hale gelirim, çünkü etki, kullanıcılarınız tabloyla ne kadar uzun süre etkileşime girerse o kadar belirginleşir.

Tablo düzeni seçeneklerine bazı harika örnekler: http://patterntap.com/tap/collection/tables

14
David Perini
  • Yalnızca ekrandaki verileri değil, tüm tablodaki verileri sıralayın. Evet, yeni sıralama düzeninin birinci sayfasından başlamak zorunda kalacaklar, ancak sorun değil - kimliğe göre sıralıyorsanız bir şeyler anlamayı bekler misiniz ve daha sonra sayfa 10'da soyadına göre sıralamaya karar verir misiniz?
  • Sıralanan sütundaki tablo başlığı hücresinin arka planını vurgulayarak sıralandığını belirtin. Daha da ileri gidebilir ve tüm sütunu vurgulayabilirsiniz. Okları daha da belirgin (ve daha erişilebilir) yapmak için kullanın - sıralanmamış için sağa işaret eden oklar ve sıralı için aşağı dönük ok.
  • Sütun adları yalnızca sütun adları olarak ayırt edilebilir olmalıdır. Tablo hücresi içeriğinden biraz daha büyük ve daha cesur olma eğilimindeyim.
  • Her bir sonucu, yalnızca tek tek satırların taranabilirliğini artırmak için yapmanız gerektiğinde gri ile renklendirin. Eğer bunun için tasarlıyorsanız, genel okunabilirliği hafifçe azaltma geliri iyidir, çünkü kullanıcı okuyor, taramıyor. Ve sonuç olarak, her ekran parlaklığı için tasarım yapmak imkansızdır, bu yüzden mutlu bir ortam seçtiğinizden ve buna bağlı kaldığınızdan emin olun.

Şu anda sizin için hemen bir örneğim yok, ancak web uygulamam için tasarladığım, yukarıdaki önerileri/tercihleri ​​takip eden bir tablo örneği:

image of a table

5
Rahul

Tamamen görsel bir bakış açısından, http://www.datatables.net/ (jQuery eklentisi) 'ne bakın. Ana sayfadaki örnek tabloda, bahsettiğiniz özellikler zaten uygulanmıştır.

Teknik olarak, arka uç teknolojinizin ne kullandığına bağlıdır. Bir .Net sunucusunda çalışıyorsanız, ASP 3.5 ve 4'te bulunan denetimlerin jQuery ve eklenti bağımlılığı olmadan açıkladığınız gibi çalışması çok kolaydır.

4
Rob Allen

ExtJS ızgaralarını kontrol edin. http://dev.sencha.com/deploy/dev/examples/#sample-

Gördüğüm herhangi bir JS çerçevesinin en iyi kullanıcı etkileşimi. Marketo'daki başvurumuzda buna çok güveniyoruz.

4
Glen Lipka

"Tüm sihir" ile bir veri ızgarasına ihtiyacınız varsa, dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

Gördüğüm en güçlü JavaScript ızgaralarından biri.

2
Steve E.

Her iki şekilde sıralamak isterseniz, Windows Explorer/gnome nautilus'ta olduğu gibi yukarı/aşağı klasik ok var, genellikle hücreden daha koyu renktedirler.

alt text

1
dierre