İlham olarak kullanılacak UI tasarım veri tablolarına örnekler
Web geliştirmenin başlangıcından bu yana veri tablosunu kullandılar. Bu, bir web tasarımının önemli bileşenlerinden biridir. Yapısı yıllar içinde pek değişmedi. Ancak, son değişikliklerin ardından, UX tasarımcıları tasarımda mükemmel bir gelişme sağladı. Aynı kalan tek şey tablo okunabilirliğinin yapısıdır. Veri tablosu tasarımının en iyi uygulamasını öğrenmek için izleyicilerin ihtiyaçlarını ve tercihlerini anlamak gerekir. Aşağıdakileri öğrenin:
Okumak istedikleri bilgi miktarı
Ürünleri, hizmetleri veya paketleri karşılaştırmak isteyip istemedikleri
Doğrudan harekete geçme davetine gitmek istiyorlar mı?
Excel uygulamasında masayı görmeyi mi tercih ediyorlar?
İzleyiciyi bilmek, tasarımcıların veri tablolarını en iyi şekilde sunmalarına yardımcı olacaktır. Bu makalede veri tablosunun iki bölümünü tartışmakta ve her örneği vermektedir.
Görsel Tablo Veri Tablosunun bir amacı vardır ve kaos veya rahatsızlıktan arınmış olmalıdır. Tabloları biçimlendirirken, okunabilirliğe öncelik vermek önemlidir. UI tablosu tasarımında ideal renk nasıl seçilir
UI tablo tasarımında asla çok fazla renk kullanmayın. Çok fazla sahip olmak, dikkati masanın gerçek amacından yönlendirebilir. İzleyicilerin mevcut ürünler, hizmetler veya paketler hakkında bilgi edinmelerine yardımcı olurlar. Renk yalnızca belirli nedenlerle kullanın. Örneğin, renk başlığa odaklanabilir. Veya karşılaştırma olarak olumsuz ve olumlu ayrıntıları vurgulamak için kullanın.
Hatırlanması gereken bir şey asla koyu renkler kullanmaktır. Daha karanlık nüanslar mesajı kapsayabilir veya ayrıntıları belirsiz hale getirebilir. Bu risksiz koyu gölgeler için yazı tipleri için koyu gri ve sınır için açık gri kullanın. Zebra şeritleme, UI tablo tasarımında popüler bir stratejidir. Bu stratejiyi kullanırken, tasarımcılar sadece gölgeler ve parlak renkler kullanır. Renkler çok koyu veya çok parlak olmamalıdır, bu yüzden daha açık bir renk kullanmalısınız. UI tablosu tasarımının doğru boyutu nasıl seçilir Tabloyu iyi sunmak için tasarımcı, bilgi miktarı için en iyi yazı tiplerini ve tablo boyutlarını seçmelidir. Bilgiler geniş olduğunda, metin tabloya girmek zor olabilir. Bu durumda, tasarımcılar yazı tipleri ve daha küçük satır yüksekliği kullanabilir. Birkaç öğe veya satır ancak çok fazla bilgi varsa, satırın yüksekliğini çok ayarladığınızdan emin olun. UI tasarım tablolarının okunması kolay ve sezgisel olmalıdır. Çizginin yüksekliğini azaltmak, üst parodaki öğeleri ve sayıları da artırır. Daha kısa hale getirmek için standart boyutu takip edin: hat yüksekliği
Sıkıştırılmış: 40 piksel
Sıradan: 48px
Rahatlayın: 56 piksel
UI tablosu tasarımı için ideal satır stili nasıl seçilir
Satır stilinin ayarlanması okunabilirliği ve tarama yeteneğini artırır. Bu, okuyucunun verileri rahat bir şekilde görüntülemesini sağlar.
Hatırlanması gereken bir şey asla koyu renkler kullanmaktır. Daha karanlık nüanslar mesajı kapsayabilir veya ayrıntıları belirsiz hale getirebilir. Bu risksiz koyu gölgeler için yazı tipleri için koyu gri ve sınır için açık gri kullanın. Zebra şeritleme, UI tablo tasarımında popüler bir stratejidir. Bu stratejiyi kullanırken, tasarımcılar sadece gölgeler ve parlak renkler kullanır. Renkler çok koyu veya çok parlak olmamalıdır, bu yüzden daha açık bir renk kullanmalısınız. UI tablosu tasarımının doğru boyutu nasıl seçilir Tabloyu iyi sunmak için tasarımcı, bilgi miktarı için en iyi yazı tiplerini ve tablo boyutlarını seçmelidir. Bilgiler geniş olduğunda, metin tabloya girmek zor olabilir. Bu durumda, tasarımcılar yazı tipleri ve daha küçük satır yüksekliği kullanabilir. Birkaç öğe veya satır ancak çok fazla bilgi varsa, satırın yüksekliğini çok ayarladığınızdan emin olun. UI tasarım tablolarının okunması kolay ve sezgisel olmalıdır. Çizginin yüksekliğini azaltmak, üst parodaki öğeleri ve sayıları da artırır. Daha kısa hale getirmek için standart boyutu takip edin: hat yüksekliği
Sıkıştırılmış: 40 piksel
Sıradan: 48px
Rahatlayın: 56 piksel
UI tablosu tasarımı için ideal satır stili nasıl seçilir
Satır stilinin ayarlanması okunabilirliği ve tarama yeteneğini artırır. Bu, okuyucunun verileri rahat bir şekilde görüntülemesini sağlar.
Bir masa hazırlamak için seçilebilecek birkaç satır stili vardır. Bundan arındırılmış bir minimalist tablonun görünümünü teşvik eder. Bu, görsel gürültüyü ve diğer gereksiz kaosu azaltmak için tüm böcekleri ortadan kaldırır. Doğru renk tonlarıyla zebra çizgisi olan okuyucu okurken yerini koruyabilir. Her satırın farklı bir arka plan rengi vardır. Bu satır stilinin yatay çizgileri yalnızca yatay çizgiler gösterir. Bu görsel gürültüyü ve gereksiz ızgara kaosunu azaltır. Bu ızgaralar yatay ve dikey çizgileri birleştirir. Bu, Chicago’daki önde gelen web tasarım şirketi tarafından oluşturulan birçok web sitesinde görülen tipik bir tablo yapısıdır.Gaya Bu çizgi veri noktaları arasında bir ayrım sağlar. Tek zayıflık, çok fazla detayınız varsa müdahale edebilmesidir. Tablo numarası
UI tablosu tasarımını optimize ederken, tüm basamaklar aynı dengeye veya alana sahip olmalıdır. Buna “Tablo Numarası” denir. Karşılaştırılması kolaydır, bu da her türlü web sitesi veri tablosu için idealdir. Aynı uzunlukta tarihi veya basamağı biçimlendirdiğinizden emin olun. Örneğin, DD/M/YYYY yerine DD/MM/YYYY kullanın. Değer varsayılan olarak sola bırakılıp kalmadığını kontrol edin. Her zaman bu şekilde görüntülenmelidirler.
Ancak, yüzde, sayı ve tarihin düz olması gerektiğini unutmayın. Bölme terimi bölücü, ekstra netliği artırmak için çok önemlidir, ancak her zaman gerekli değildir. Birbirine çok yakın birçok sütun veya ayrıntı varsa, bölücüyü kullanın. Veri tablosunu kaostan ve temiz tutacaklar. Bölücüleri ortadan kaldırmak için, daha küçük ve daha az dinamik bir tabloya sahip olmak mümkündür. Bir tasarımcı, masayı daha çekici hale getirmek için kullanmayı seçebilir. Tipografi doğru tipografiyi seçmek veri tablosunun tasarımını yapabilir veya yok edebilir. En büyük öncelik olmasa da, ancak görsel sunum daha fazla ziyaretçiyi çekebilir. İdeal veri tabloları oluşturmak için süper lüks tipografi kullanmanıza gerek yoktur. Ancak, mümkün görünmelerine yardımcı olabilecek özel kurallar var. Tipografik bir tasarım yapmak veya seçmek için ipuçları
UI tablosu tasarımını optimize ederken, tüm basamaklar aynı dengeye veya alana sahip olmalıdır. Buna “Tablo Numarası” denir. Karşılaştırılması kolaydır, bu da her türlü web sitesi veri tablosu için idealdir. Aynı uzunlukta tarihi veya basamağı biçimlendirdiğinizden emin olun. Örneğin, DD/M/YYYY yerine DD/MM/YYYY kullanın. Değer varsayılan olarak sola bırakılıp kalmadığını kontrol edin. Her zaman bu şekilde görüntülenmelidirler.
Ancak, yüzde, sayı ve tarihin düz olması gerektiğini unutmayın. Bölme terimi bölücü, ekstra netliği artırmak için çok önemlidir, ancak her zaman gerekli değildir. Birbirine çok yakın birçok sütun veya ayrıntı varsa, bölücüyü kullanın. Veri tablosunu kaostan ve temiz tutacaklar. Bölücüleri ortadan kaldırmak için, daha küçük ve daha az dinamik bir tabloya sahip olmak mümkündür. Bir tasarımcı, masayı daha çekici hale getirmek için kullanmayı seçebilir. Tipografi doğru tipografiyi seçmek veri tablosunun tasarımını yapabilir veya yok edebilir. En büyük öncelik olmasa da, ancak görsel sunum daha fazla ziyaretçiyi çekebilir. İdeal veri tabloları oluşturmak için süper lüks tipografi kullanmanıza gerek yoktur. Ancak, mümkün görünmelerine yardımcı olabilecek özel kurallar var. Tipografik bir tasarım yapmak veya seçmek için ipuçları
Sadece basit bir yazı tipi kullanın.
Metni eğmeyin veya geçmeyin.
Serif yazı tipleri kullanmayın.
Tüm büyük harfleri okumak zordur. Metninizi yazarken kapak kilidi kullanmaktan kaçının.
Boş alanı bir işaretleyici ile doldurun
Hatırlanması gereken bir şey, boş alan olmamasıdır. Veriler belirli hücreler için geçerli değilse, simgeler, çapraz işaretler veya bağlantı işaretleri gibi işaretleyiciler kullanın. Sabit bir satır ayarlayın, ancak sütunun boyutunun boyutunda değiştirilebildiğinden emin olun, okuyucunun verileri kolayca görmesine izin verir. Eksik bilgileri bulmak için yukarı ve aşağı kaydırmaları gerekmez.
Sütunun boyutu değiştirilebilmesi de önemlidir. Kimse yeni bir tablo oluşturmak istemiyor çünkü bazı ayrıntılar veya bilgi eklemeleri gerekiyor. Bunun çözümü, sütunun boyut olarak değiştirilebilmesidir. Farklı boyutlarda çok fazla satır ve sütun varsa UI tasarım tablosu garip görünecektir. Ayrıca dağınık ve düzensiz görünecektir. Yapılandırılmış bilgi, okuyucuların web sitelerinin ne olduğunu anlamalarını sağlar. Boyut olarak değiştirilebilen sütunlarla bile, tüm ayrıntıları bir sütuna yerleştirmeyin. Yalnızca okuyucunun karışıklığına katkıda bulunur. İçerik dışında, tüm satırlar aynı yüksekliğe sahip olmalıdır. Bu, ayrıntıları netleştirmeye ve genel estetiği artırmaya yardımcı olur. Veri tablosu işlevi sezgisel olmalıdır. Bu, ziyaretçilerin her öğenin, paketin veya ürünün verilerini taramasına, analiz etmesine, anlamasına ve karşılaştırmasına olanak tanır. Aşağıdaki bölüm bunun nasıl mümkün olacağını açıklayacaktır. Tablo bölümünü kullanın Tablo bölümünü kullanmayı veya ilgili satırları gruplamak için tabloları gruplandırmayı düşünün. Bu bölüm benzer verileri birleştirirse gereklidir. Aynı sütunun bir koleksiyonunu paylaşmaları gerekir. Bir ülkeyi veya bölgeyi kaydederken grup çizgileri için doğaldır.
Tablo bölümünün kaldırılabileceğinden veya genişletilebileceğinden emin olun. Okuyucunun ihtiyaç duyduğunda bir veri özetini görüntülemeyi unutmayın. Kullanıcıların ve web ziyaretçilerinin tasarım kalıpları ve genel etkileşimleri kalıp bulma eğilimindedir. UX tasarımcıları bunu kullanım problemleri için yeniden kullanılabilecek çözümlerle kalıplar yapmak için kullanırlar. Bu desenler, birisinin hızlı bir şekilde bir masa yapması gerektiğinde de kullanışlıdır. İnsanların yeni bir veri tablosu tasarımı bulmak veya oluşturmak için zamanları yoktur, bu deseni bunun için tek çözüm olarak kullanabilirler. Bir kullanıcı tarafından taşınabilen bir sütun oluşturun, ayarlanabilen bir tablo isteyerek gelecekte daha kolay ayarlamalar sağlar. Özellikle başka bir sayfaya veya diğer sayfa bölümlerine taşıyacaklarsa, çeşitli faydaları vardır. Bu da yeni bir sütunu silmelerini veya eklemelerini sağlar. Bir UX tasarımcısı olarak, kullanıcılara hücreleri ve içeriği taşıma veya yeniden düzenleme yeteneği vermek çok önemlidir. Tablo sütununu ilgi alanlarına, tarihlere veya alfabe verilerine göre sıralamak mümkündür. Tabloyu verileri eklemek veya düzenlemek için ayarlanabilir, amaç bazı verileri eklemek veya düzenlemekse, tablonun yeni verileri düzenleyebileceğinden veya ekleyebileceğinden emin olun. Ancak, veri tablolarını düzenleme veya özelleştirme öncelikli bir görev değilse, yalnızca satır başına düzenleme kullanmaları gerekir. Hataları işlerken, erişilebilirliğe yardımcı olmak için renkleri ve simgeleri kullanmayı deneyin. ‘Masaya hesaplar’ gölgelik koyarak hatlarla satırları görüntülemek çok yararlı olacaktır.
Metni eğmeyin veya geçmeyin.
Serif yazı tipleri kullanmayın.
Tüm büyük harfleri okumak zordur. Metninizi yazarken kapak kilidi kullanmaktan kaçının.
Boş alanı bir işaretleyici ile doldurun
Hatırlanması gereken bir şey, boş alan olmamasıdır. Veriler belirli hücreler için geçerli değilse, simgeler, çapraz işaretler veya bağlantı işaretleri gibi işaretleyiciler kullanın. Sabit bir satır ayarlayın, ancak sütunun boyutunun boyutunda değiştirilebildiğinden emin olun, okuyucunun verileri kolayca görmesine izin verir. Eksik bilgileri bulmak için yukarı ve aşağı kaydırmaları gerekmez.
Sütunun boyutu değiştirilebilmesi de önemlidir. Kimse yeni bir tablo oluşturmak istemiyor çünkü bazı ayrıntılar veya bilgi eklemeleri gerekiyor. Bunun çözümü, sütunun boyut olarak değiştirilebilmesidir. Farklı boyutlarda çok fazla satır ve sütun varsa UI tasarım tablosu garip görünecektir. Ayrıca dağınık ve düzensiz görünecektir. Yapılandırılmış bilgi, okuyucuların web sitelerinin ne olduğunu anlamalarını sağlar. Boyut olarak değiştirilebilen sütunlarla bile, tüm ayrıntıları bir sütuna yerleştirmeyin. Yalnızca okuyucunun karışıklığına katkıda bulunur. İçerik dışında, tüm satırlar aynı yüksekliğe sahip olmalıdır. Bu, ayrıntıları netleştirmeye ve genel estetiği artırmaya yardımcı olur. Veri tablosu işlevi sezgisel olmalıdır. Bu, ziyaretçilerin her öğenin, paketin veya ürünün verilerini taramasına, analiz etmesine, anlamasına ve karşılaştırmasına olanak tanır. Aşağıdaki bölüm bunun nasıl mümkün olacağını açıklayacaktır. Tablo bölümünü kullanın Tablo bölümünü kullanmayı veya ilgili satırları gruplamak için tabloları gruplandırmayı düşünün. Bu bölüm benzer verileri birleştirirse gereklidir. Aynı sütunun bir koleksiyonunu paylaşmaları gerekir. Bir ülkeyi veya bölgeyi kaydederken grup çizgileri için doğaldır.
Tablo bölümünün kaldırılabileceğinden veya genişletilebileceğinden emin olun. Okuyucunun ihtiyaç duyduğunda bir veri özetini görüntülemeyi unutmayın. Kullanıcıların ve web ziyaretçilerinin tasarım kalıpları ve genel etkileşimleri kalıp bulma eğilimindedir. UX tasarımcıları bunu kullanım problemleri için yeniden kullanılabilecek çözümlerle kalıplar yapmak için kullanırlar. Bu desenler, birisinin hızlı bir şekilde bir masa yapması gerektiğinde de kullanışlıdır. İnsanların yeni bir veri tablosu tasarımı bulmak veya oluşturmak için zamanları yoktur, bu deseni bunun için tek çözüm olarak kullanabilirler. Bir kullanıcı tarafından taşınabilen bir sütun oluşturun, ayarlanabilen bir tablo isteyerek gelecekte daha kolay ayarlamalar sağlar. Özellikle başka bir sayfaya veya diğer sayfa bölümlerine taşıyacaklarsa, çeşitli faydaları vardır. Bu da yeni bir sütunu silmelerini veya eklemelerini sağlar. Bir UX tasarımcısı olarak, kullanıcılara hücreleri ve içeriği taşıma veya yeniden düzenleme yeteneği vermek çok önemlidir. Tablo sütununu ilgi alanlarına, tarihlere veya alfabe verilerine göre sıralamak mümkündür. Tabloyu verileri eklemek veya düzenlemek için ayarlanabilir, amaç bazı verileri eklemek veya düzenlemekse, tablonun yeni verileri düzenleyebileceğinden veya ekleyebileceğinden emin olun. Ancak, veri tablolarını düzenleme veya özelleştirme öncelikli bir görev değilse, yalnızca satır başına düzenleme kullanmaları gerekir. Hataları işlerken, erişilebilirliğe yardımcı olmak için renkleri ve simgeleri kullanmayı deneyin. ‘Masaya hesaplar’ gölgelik koyarak hatlarla satırları görüntülemek çok yararlı olacaktır.
ve tıklandığında filtre edin. Tıklanabilecek bir başlık etiketi yapmak için başlık etiketini tıklatabilir, kullanıcıların tabloları sıralamasına ve filtrelemesine izin verir. Okayı sütunun adının yanına yerleştirerek sıralanan tablo sütunu işaretlemek çok önemlidir. Bu, yukarı veya aşağı gidiyor olsun, sıralı sütun sırasını gösterir. Öte yandan, kullanıcıların büyük miktarda veri ile uğraşırken filtrelemeye ihtiyacı vardır. Bu, açılır, radyo düğmesi veya onay kutusunu kullanarak mümkündür. Filtre menüsü altında diğer görevleri bırakırken filtreleri aciliyet ve frekansa göre önceliklendirmek mümkündür. Başlığın tıklanabileceği, kullanıcılar korumak istedikleri filtreyi ayarlayabilir. Ayrıca veri tablosu için eylem üzerinde tam kontrole sahiptirler. Özellikle veri tablosunda çok fazla sütun varsa, bu adımın ilk sütunlarının veya satırının bazılarını dondurmak çok önemlidir. Bu, tablonun tüm bağlamını korurken, diğer tablolar bir kaydırma çubuğu alır. Yatay rulolar için sabit sütunlar, genellikle ilk sütun kimlik bilgileri içerir. Bu ilk sütunun yerinde geliştirilmesi önerilir. Bu, hatların tanımlanmasını izleyiciler tarafından görülebilir hale getirir ve gerekli bağlamı sağlar. Başlık, sütun etiketini her zaman görünür tutar. Kullanıcı dikey olarak dönerken, sütun hala kimlik bilgilerini gösterir. UI Designs Örnekleri DriverReksa Kataloğu Tablo Üst Fonu
Sisyphus – Gösterge Tablosu Tablosunun Filtrelenmesi
Filtre Bileşeni Tablosu – Arka Ofis Backmarket
Fiyat sayfası için sütun veya tablo görüntüleyin
Sisyphus – Gösterge Tablosu Tablosunun Filtrelenmesi
Filtre Bileşeni Tablosu – Arka Ofis Backmarket
Fiyat sayfası için sütun veya tablo görüntüleyin
Segmentlere dayalı finansal tablolar
Kitap kataloğu
Sharefox | Sipariş Sayfası • Masaüstü ve Hücresel
Koyu moda masası
Çevrimiçi dizüstü bilgisayar kataloğu
Fiyat bölümü
Sıcaklık Raporu – Maksimum
Grafikli istatistiksel tablo
PayFit – Masa Bileşenleri (Midnight Tasarım Sistemi)
Çalışan masası
Masa filtresi
Güç menüsü
Fiyatlar – Parlak ve karanlık modlar
Depolanmış ekran
İdari siparişlerin detayları
Genişletilmiş Veri Izgarası – Figma Malzeme Tasarım Sistemi X
Bileşenlerin Tedarikçiler tarafından Tahsisi (Perakende Planlama Web Uygulaması)
İK için veri tablosu
Malzeme Tasarım Sistemi için UI Tablo Şablonu X
Tablolar – Ürün Planlaması (SaaS Web Uygulaması)
Kullanıcı ve Grup Yönetimi
Amondo – Dasbor Curation 4.0
Partshub Bağlamsal Tablo Tasarımı
Sychromedics denetimi
Şirket Performansı – Stok Analizi (Web Uygulaması)
UI tasarımını yapmadan önce, veri tablosu, kullanıcının görme şekli üzerinde önemli bir etkiye sahip olmak için veri tablosunun organize bir UI tasarımına sahiptir. Özelleştirme, temiz ve odaklanmış bir veri tablosu oluşturmak için önemlidir. Bir tablo oluşturmadan önce, kullanıcının neye ihtiyacı olduğunu ve beğendiğini unutmayın. Yalnızca veri tablosuna gereken özellikleri dahil ederek aşırı kullanıcılardan kaçının. Bu tablonun UI tasarımı hakkındaki makaleyi okumak isterseniz, WPDatatables ile nasıl bir Premier Lig tablosu yaptığımızı görmelisiniz. Ayrıca alternatif dataTables, WordPress fiyat eklentileri, WordPress’te tabloların nasıl girilir, eklentiler olmadan WordPress’te tablolar oluşturulacağı, WordPress tablo eklentileri, WordPress tablo jeneratörleri ve eklenti jeneratör tablosu WordPress gibi birkaç ilgili konu hakkında yazıyoruz.
