Listeleme Ekran Tasarımı

Bu öğrenim içeriğinde, Bir Fikrim Var adlı örnek web uygulamamızın, kayıtlı kullanıcıları listeleme ekranının tasarımını adım adım yapacağız. 

Öncelikle, kullanıcı listeleme ekranına genel bir bakış atalım. 

Ekranda, kullanıcıları belirli kriterlere göre arayıp filtreleyebileceğiniz bir Arama alanı yer alıyor. Bu Arama alanı, "Input" kategorisinden "Text Input" elementi kullanarak hazırlanmıştır.

Diğer bir element ise listeleme işlevini sağlayacak olan Table elementidir. 

Liste ekranımız, kullanıcıların görsellerini, unvanlarını, departman bilgilerini, toplam fikir sayılarını, mevcut durumlarını ve kullanıcı detaylarına ulaşmayı sağlayan simgesel bir ikonu barındıran bir Table içeriği ile hazırlanmış. Ayrıca, kolay navigasyon ve erişim için sayfalar arasında geçiş yapmayı mümkün kılan bir Pagination elementi de mevcuttur.

Şimdi incelediğimiz bu kullanıcı liste ekran tasarımını birlikte hazırlayalım.

1. Screens paneli aracılığıyla UserList adında yeni bir ekran oluşturun.

Daha önce Dashboard ekranda kullandığımız Header tasarımını kullanıcı liste ekranında da kopyalayarak kullanabiliriz. Kopyalama işlemi öncesinde kullanıcı liste ekranında gerekli işlemleri yapalım.

2. Ekrana bir Header elementini sürükleyin ve bırakın.
3. Header’ın arka plan rengini değiştirin.
4. Dashboard ekranını açın. Header içerisinde yer alan Row’u seçin ve detay menüsü aracılığıyla kopyalayın.
5. Tekrardan kullanıcı liste ekranını açın.
6. Header'ı seçin ve detay menüsü aracılığıyla yapıştırın.

Şimdi listeleme yapısını hazırlayarak ilerleyelim.

7. Header altına bir Row sürükleyip bırakın ve tek kolona dönüştürün. Bu Row Liste yapımız için genel yer tutucu özelliği taşıyacak
8. Kolon içerisine Bir Row sürükleyip, bırakın. Bu Row aracılığıyla ise başlık satırımızı hazırlıyor olacağız.
9. Row’u sağ kolonun daha geniş olduğu iki kolonlu bir yapıya dönüştürün.
10. Styling’de Row stilini kaldırın ve None stilini ekleyin.
11. Sol kolona bir Label sürükleyip bırakın. 
12. Label’in içeriğini değiştirin ve Text Styling’inden Paragraph ve H1 Stilini seçin.
13. Label’in bulunduğu kolonu seçin ve yatayda sola hizalayıp, dikeyde ortalayın.
14. Sağdaki kolona bir TextInput ekleyin.
15. TextInput’un Placeholder metnini güncelleyin.
16. Styling panelinde Layout alanında InputSize stilini ekleyin.
17. Border alanı aracılığıyla ise InputBorder stilini ekleyin.
18. TextInput’un bulunduğu kolonu seçin ve yatayda sağa hizalayıp, dikeyde ortalayın.
19. Şimdi başlık satırının hemen altına bir Row daha ekleyin ve tek kolona dönüştürün.
20. Kolonun arka plan rengini White olarak güncelleyin ve Radius stilini ekleyin.
21. Kolon içerisine bir Row ekleyin ve tek kolona dönüştürün.
22. Row ve Column’u seçerek Varsayılan Layout stillerini kaldırıp, None stillerini ekleyin.
23. Kolon içerisine bir Table sürükleyip bırakın.
24. Varsayılan olarak gelen TableDefaultColumn’u Properties aracılığıyla silip, 5 adet TableTemplateColumn ekleyin.
25. TableRow’u seçin ve BorderTop stilini ekleyin.

Şimdi Table içeriklerini düzenleyerek ilerleyelim.

26. İlk kolon içerisine bir Horizontal Stack ekleyin.
27. Horizontal Stack içerisine bir Image ve bir Label elementi ekleyin.
28. Image elementini seçin. Geçici bir görsel ekleyin.
29. Properties’den ImageFit seçimini güncelleyin ve Layout stili olarak Image32 stilini ekleyip, varsayılan gelen genişlik değerini silin. 
30. Border stili olarak Radius seçimini yapın.
31. Label elementini seçin.
32. Label elementinin içeriğini güncelleyin ve varsayılan olarak gelen 100 piksel değerindeki genişliği sıfırlayın.
33. HorizontalStack’i seçin ve dikeyde ortalayın.
34. Ardından Table kolonun başlık ismini güncelleyin.
35. Şimdi ikinci kolona bir Label ekleyin ve geçici bir unvan ismi girip, kolon başlığını güncelleyin. 
36. Üçüncü kolona bir Label sürükleyip ve geçici bir departman ismi girin. İlgili kolon başlığını güncelleyin. 
37. Dördüncü kolona da bir Label ekleyin ve geçici bir fikir sayısı girin. Table Kolonu seçin ve yatayda sağ hizalayın. Hizalama işlemi sonrası Kolon başlığını güncelleyin.
38. Ardından beşinci kolona 1 adet Icon sürükleyin ve ikonu seçimi yapıp, renk seçimi yapın. 
39. Icon'u duplicate edin ve rengini değiştirin. Burada 2 adet ikon olma sebebi Status’lere göre farklı renkte ikonların gösterilecek olmasıdır. Bu işlemi daha sonra gerçekleştireceğiz.
40. Ardından Table kolonu seçip, yatayda ortalayın ve kolon başlığını güncelleyin.
41. Son olarak en sonda yer alan kolona bir ikon ekleyip, ikon kütüphanesi aracılığıyla ikon seçimi yapın.
42. Kolonu seçin, yatayda sağa hizalayın ve kolon başlığının içeriğini silin.

Table elementi ile çalışmalarımızı tamamladık. Son işlem olarak tabloda sayfalandırma yapısını sağlamak için Pagination elementini ekleyelim.

43. Table elementini hemen altına bir Row ekleyin ve tek kolona dönüştürün.
44. Kolon içerisine bir Pagination elementi sürükleyip bırakın.
45. Pagination elementinin bulunduğu ebeveyn kolonu seçin ve yatayda sağa hizalayın.

Böylece Kullanıcı listelemesini sağlayan ekran tasarımını adım adım birlikte hazırladık.