Bir Tablo Nasıl Tasarlanır: Düzeltmek için Doğru Kılavuz
Dijital ürünler ve gösterge panoları tasarlarken tablolar ve ızgaralar kullanmak yaygındır. Veri tablosu, bilgilerin çoğunun ayarlanmasına yardımcı olur. Verileri okunması ve anlaması daha kolay bir şekilde sunarlar. Ayrıca önemli verileri vurgulamaya ve veri görselleştirmesini artırmaya yardımcı olurlar. Tablolar genellikle UI bileşenleri olarak kullanılır, ancak veri tabloları tasarlarken hala hata yapan birçok kişi vardır. Bazı masa tasarımları görsel veya çok karmaşık bozukluklarla doludur, bu da kötü kullanıcı deneyimlerine neden olur. Doğru kullanıcı arayüzü tasarımını elde etmek Daha iyi bir görselleştirme ve verilerin karşılaştırılması. Tabloları doğru şekilde tasarlamak onu ilginç hale getirir ve okunabilirliği artırır.
Bu kılavuz, veri tablosu tasarımının nasıl optimize edileceğini ve tablo işlevselliğini nasıl geliştireceğini gösterir. Veri tablolarını doğru şekilde tasarlama Tablo tasarımlarını planlarken, yapılması gereken iki şey vardır: tablo stili ve tablo işlevselliği. Tablo stili tablo verilerini hizalar
Görüntü kaynağı Metni sayısal verilerden ayırmak için metni sola ve sağa doğru düzleştirmek için. Bu hizalama, iki farklı veriyi karşılaştırmayı kolaylaştırır. Tablo başlığı ayrıca yapılandırılmış bir tablo tasarımı için sütun verilerine paralel olmalıdır. Bazı tablo hücrelerinin açıklamalar gibi birkaç metin çizgisi olabilir. İçerik için dikey seviyelendirme yukarıda olmalıdır.
Değilse, sütun verileri birbirine paralel olmayacaktır. Üstün bir bölüm ekleyin
Değilse, sütun verileri birbirine paralel olmayacaktır. Üstün bir bölüm ekleyin
WPDatatables ile yapabileceğiniz fiyat tablosu, önde gelen bölüm, yazarın vurgulamak istediği tablo, satır veya hücrenin sütunudur. Bu genellikle fiyat tablosuna veya bir abonelik paketi karşılaştırılırken uygulanır. Tablodaki önemli bilgileri vurgulamak için üstün bölümü kullanın. Bu, örneğin liste arasında en iyi değer planı veya popüler unsur olabilir. Üstün bir rol yapmak için hücre biçimlendirmesini değiştirin. Örneğin, öne çıkacak hücrelerin rengini veya metin yazı tipi boyutunu değiştirin. Renk verilerinin uygulanmasının çok fazla rengi olmamalıdır. Yalnızca tablo başlıkları, negatif ve pozitif eğilimler ve üstün parçalar için kullanın. Çok fazla renk eklemek görsel bozukluklar yaratır. Bu, vurgulanması gereken unsurları ayırt etmeyi zorlaştırır. Yazı tipi rengi için daha koyu gri bir renk ve kenar rengi için normal siyah renkten daha parlak bir gri renk kullanın. Daha yumuşak bir siyah renk kullanmak, daha az yoğun hale getirir ve göz gerginliğini azaltır. Kategorileri ayırt ederken veya en yüksek ve en düşük değeri vurgularken değişen renkler uygulayın. Masadaki belirli parçaları vurgulamak için, öne çıkması için daha parlak veya daha cesur bir dolgu rengi kullanın.
Sırayla satırın rengi
WPDatatables Renkleri ile yapabileceğiniz kombine hücrelere sahip tablolar sırayla okunabilirliği arttırır. Bu görsel ipuçlarını düzenler, insanların bilgi listesini takip etmesine ve verileri bağlamasına yardımcı olur. Bu, büyük bir veritabanı oluştururken çok kullanışlıdır. Ayrıca küçük veri tabloları için de iyi çalışır. Beyaz dolgu rengini açık gri gibi daha koyu bir renkle değiştirerek ‘zebra hattı’ efekti oluşturun. Başka renkler kullanıyorsanız, parlak doldurma renklerini kullanın ve biraz daha koyu bir renkle değiştirin. Daha yapılandırılmış bir tablo tasarımı için Monospace yazı tipi kullanarak, sayısal veriler için Monospation yazı tipi kuvvetini kullanın.
WPDatatables Renkleri ile yapabileceğiniz kombine hücrelere sahip tablolar sırayla okunabilirliği arttırır. Bu görsel ipuçlarını düzenler, insanların bilgi listesini takip etmesine ve verileri bağlamasına yardımcı olur. Bu, büyük bir veritabanı oluştururken çok kullanışlıdır. Ayrıca küçük veri tabloları için de iyi çalışır. Beyaz dolgu rengini açık gri gibi daha koyu bir renkle değiştirerek ‘zebra hattı’ efekti oluşturun. Başka renkler kullanıyorsanız, parlak doldurma renklerini kullanın ve biraz daha koyu bir renkle değiştirin. Daha yapılandırılmış bir tablo tasarımı için Monospace yazı tipi kullanarak, sayısal veriler için Monospation yazı tipi kuvvetini kullanın.
Tablo veya Monospace yazı tipi, her karakter için sabit bir genişliğe ve alana sahiptir. Bu tipografiyi ve okunabilirliği artırır. Monospace yazı tiplerine örnekler arasında Courier, Courier New, Lucida konsolu ve Monaco bulunmaktadır. Simetriyi daha da arttırmak için, örneğin tarih gibi aynı uzunlukta sayıları biçimlendirdiğinizden emin olun. 15/15/2019 yazmak yerine, tarih biçimi 15/03/2019 olarak. Tablo verilerini görselleştir
Sütun verilerini yatay bir çubuk diyagramına değiştirin. Bu, verileri görselleştirmeye ve genel bir resim üretmeye yardımcı olur. Yatay çubuk grafiği, kullanıcıların veri koleksiyonlarını karşılaştırmasına ve bunları kolayca yorumlamasına olanak tanır. Her gövde, temsil ettiği, dikey olarak hizalanan verilerin yanındaki sütunda bulunur ve birkaç satıra bölünür.
Kök diyagramı eklemek genellikle sütunu çok genişletir. Bu nedenle, sadece önemli değerleri görselleştirmek için bıçakları görüntülemeyi düşünün. Tablo verilerini görselleştirmek için bir başka yöntem de bir ısı haritası kullanmaktır. Isı haritası, hücre arka planının arka plan rengini ayarlar veya rengi hücredeki sayısal değere göre doldurur ve bir renk gradyanı oluşturur. Sayısal değer ne kadar yüksek olursa, içeriğin rengi o kadar koyu olur. Tablo fonksiyonları, farklı cihazlarda etkili bir veri duyarlılığının iyi çalışmasını sağlar. Akıllı telefonlarda, tabletlerde ve dizüstü bilgisayarlarda açıldığında verileri okunabilecek şekilde göstermelidir.
Kök diyagramı eklemek genellikle sütunu çok genişletir. Bu nedenle, sadece önemli değerleri görselleştirmek için bıçakları görüntülemeyi düşünün. Tablo verilerini görselleştirmek için bir başka yöntem de bir ısı haritası kullanmaktır. Isı haritası, hücre arka planının arka plan rengini ayarlar veya rengi hücredeki sayısal değere göre doldurur ve bir renk gradyanı oluşturur. Sayısal değer ne kadar yüksek olursa, içeriğin rengi o kadar koyu olur. Tablo fonksiyonları, farklı cihazlarda etkili bir veri duyarlılığının iyi çalışmasını sağlar. Akıllı telefonlarda, tabletlerde ve dizüstü bilgisayarlarda açıldığında verileri okunabilecek şekilde göstermelidir.
Tabloyu daha küçük bir ekranda görmek, masa tasarımında birçok değişiklik gerektirir. Büyük bir masaüstünde yapılan tablo tasarımı daha küçük cihazlarda çalışmayabilir.
Mobil cihazlarda masa testi. Kullanıcının durmadan kaydırma yapmadan bilgileri tarayabildiğinden emin olun. Büzülen sütunlara ve gizli metinlere dikkat edin, çünkü bu zayıf kullanıcı deneyimi üretir. Unutmayın, daha küçük bir ekranda, dar bir sütun daha iyidir. Daha ince bir sütun yapmanın çeşitli yolları vardır. Bu, simgeler, kısaltmalar, daha kısa sayı formatları ve yuvarlak sayısal verilerin kullanılmasını içerir. Yani 2.500.000 yerine 2.5m ve 0.3241 yerine 0.3.
Mobil cihazlarda masa testi. Kullanıcının durmadan kaydırma yapmadan bilgileri tarayabildiğinden emin olun. Büzülen sütunlara ve gizli metinlere dikkat edin, çünkü bu zayıf kullanıcı deneyimi üretir. Unutmayın, daha küçük bir ekranda, dar bir sütun daha iyidir. Daha ince bir sütun yapmanın çeşitli yolları vardır. Bu, simgeler, kısaltmalar, daha kısa sayı formatları ve yuvarlak sayısal verilerin kullanılmasını içerir. Yani 2.500.000 yerine 2.5m ve 0.3241 yerine 0.3.
Sütun yeniden düzenlemesini etkinleştirin
Büyük veri tablolarının boyutu ve sakladığı bilgi miktarı nedeniyle bazen okunması zordur. Sütunu yeniden düzenlemek için kullanıcıları etkinleştirmek, okumaları gereken sütuna odaklanmalarını sağlar. Bu aynı zamanda bunu ileri geri kaydırmadan yapabilecekleri anlamına gelir. Bu, kullanıcıların kaosu en aza indirmesine, küçük bilgileri sindirmelerine ve sütunları ihtiyaçlarına göre yönetmelerine yardımcı olur. Veri tablosunda ilk birkaç sütunun ankrajı varsa, WPDatatables ile yapabileceğiniz sabit bir satır yüksekliğine sahip olmayı düşünün. Bu, kullanıcı tüm tabloyu kaydırdığında bağlamı koruyacaktır.
Büyük veri tablolarının boyutu ve sakladığı bilgi miktarı nedeniyle bazen okunması zordur. Sütunu yeniden düzenlemek için kullanıcıları etkinleştirmek, okumaları gereken sütuna odaklanmalarını sağlar. Bu aynı zamanda bunu ileri geri kaydırmadan yapabilecekleri anlamına gelir. Bu, kullanıcıların kaosu en aza indirmesine, küçük bilgileri sindirmelerine ve sütunları ihtiyaçlarına göre yönetmelerine yardımcı olur. Veri tablosunda ilk birkaç sütunun ankrajı varsa, WPDatatables ile yapabileceğiniz sabit bir satır yüksekliğine sahip olmayı düşünün. Bu, kullanıcı tüm tabloyu kaydırdığında bağlamı koruyacaktır.
Ayarlanabilen bir sütunun olması şiddetle tavsiye edilir. Ancak tablonun satırının simetriyi korumak ve okuyucuyu karıştırmaktan kaçınmak için sabit bir yüksekliği olmalıdır. Verilerin yanı sıra, satırın yüksekliği hala UI tablosunun tasarımını ve görsellerini arttırır. Uzun Veri Tabloları için Pagination kullanın
WPDatatables ile yapabileceğiniz sayfalama tablosu, veri tablosunun masaüstü ekranından daha uzun olmaması gerektiğine dair yazılı olmayan kurallar vardır. Ancak, veri tablosu uzunsa bu mümkün değildir. Uzun veri tablolarının çoğu web sayfasını işgal ettirin ve boş alanı en üst düzeye çıkarın. Bunu sayfalandırma özelliğini etkinleştirerek yapın.
Ayrıca okuyucuları tablolar aracılığıyla yönlendirmeye ve gezinmelerine yardımcı olmaya hizmet eder. Sayfa kullanırken, kaç sayfa olduğunu ve okuyucu tarafından hangi sayfaların okunduğunu göstermek için sayfa numarasını ekleyin. Ayrıca, kullanıcılara daha fazla kontrol sağlamak için, sayfa başına kaç satırın görüleceğini ayarlamalarına izin verin. Tablo sıralama özelliklerini ekleyin
Kullanıcıların Veri Tablosu Artışı UI Tasarım Tablosu üzerinde daha fazla kontrole sahip olmalarına izin verin. Tablo çok fazla bilgi içeriyorsa, okuyucuların ihtiyaç duydukları verileri bulmasına yardımcı olmanın bir yolu, sıralama özellikleri eklemektir. Sıralama, kullanıcıların belirli mantıksal dizilere göre veri ayarlamalarını sağlar. Bu, alfabe, tarih ve saat değiştirilmiş, yukarı, aşağı ve daha fazlası şeklinde olabilir. Ne kadar çok seçenek, o kadar iyi. Verileri sıralamanın bir başka yolu da arama sütununa girmektir. Bu, okuyucuların şirket adları, konumlar, ürünler ve diğerleri gibi belirli verileri bulmalarını sağlar. DataTabel’i WPDatatables filtre verileri ile yapabileceğiniz filtrelerle filtreleme, veri tablosu işlevselliğini iyileştirmenin başka bir yoludur. Kullanıcılar büyük miktarda veriyi sindirebilir, eğilimleri anlayabilir ve karşılaştırma yapabilir. Ayrıca belirli bilgileri bulabilir ve karmaşık verileri analiz edebilirler. Bu esas olarak sayısal veri tablosu için geçerlidir. Kullanıcının belirli bir sütun için parametreyi veya bir filtre koleksiyonunu ayarlayabildiğinden emin olun. Ayrıca, ileride kullanılmak üzere yaptıkları bir filtre koleksiyonunu depolamak için gelişmiş filtreleme seçenekleri ekleyin. Bağlamı koruyun, sabit bir başlık ve dondurulmuş bir sütun kullanın
