Display Ekran Tasarımı

Bu öğrenme içeriğinde, kullanıcı bilgilerini detaylı bir biçimde görüntüleyen Display tipi bir ekran tasarımının nasıl yapıldığını adım adım uygulayacağız. 

Öncelikle tasarlayacağımız ekranın genel çerçevesine bir bakış atalım.

Kullanıcı detaylarını sunan ekran Drawer tipinde olduğundan, bu özelliğe uygun bir boyutlandırma ile tasarlandığını görüyoruz. Ekranın üst bölümünde, ekran adını barındıran bir Label ve ekranı kapatmamıza olanak tanıyan bir çıkış ikon butonu ile donatılmış sade bir başlık bulunmaktadır. Bu başlığın hemen altında, kullanıcının temel bilgilerini içeren bir bilgi kartı olacak. Ek olarak, bu bilgi kartının alt kısmında, Dashboard ekranında gördüğümüz benzer bir yapıda, kullanıcının paylaştığı fikirlerin bir listesi yer alacak.

Şimdi, bu kullanıcı detay ekranını nasıl adım adım oluşturabileceğimizi birlikte uygulayalım.

1. Detay ekranı tasarımı için Screens panelinden User Details adında yeni bir ekran oluşturun.
2. Detay ekranı Drawer tipinde bir ekran olacağı için ekranın üstünde yer alan mobil cihaz ikonuna tıklayarak ekranın genişlik ölçüsünü mobil boyut olarak ayarlayın.

Header tasarımı için daha önce form ekranında oluşturduğumuz tasarım burada kullanabiliriz.

3. Ekrana bir Header elementini sürükleyin ve bırakın.
4. New Suggestion isimli form 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.
7. Header’da yer alan ekran ismini güncelleyin.

Şimdi kullanıcı bilgi kartı tasarımını yaparak devam edelim.

8. İlk olarak ekranın arka plan rengini değiştirerek ilerleyelim. Ekranda boş bir alana tıklayın ve Styling panel aracılığıyla ekranın arka plan rengini White olarak güncelleyin.
9. Ekrana bir Row sürükleyip, bırakın. 
10. Row’u tek kolona dönüştürün.
11. Kolon içerisine bir Row ekleyip, kolon özelleştirmesini gerçekleştirin..
12. Row seçiliyken arka plan rengini güncelleyin ve Border stili olarak Radius seçimi yapın.
13. Soldaki kolon içerisine bir Horizontal Stack ekleyin.
14. Horizontal Stack içerisine bir Image elementi ekleyin ve geçici bir resim ekleyin.
15. Image elementini seçiliyken Properties aracılığıyla ImageFit özelliğini Fill olarak değiştirin. 
16. Layout alanından default gelen 100 değerini kaldırın, Image64 stilini ekleyin ve Border alanından Radius seçimini yapın.
17. Horizontal Stack içerisine Image elementinin yanına bir Vertical Stack ekleyin.
18. Vertical Stack içine bir Label ekleyin ve geçici bir isim girin.
19. Label’a H3 hazır stilini ekleyin.
20. Label’ı duplicate edin ve geçici bir departman ismi girin.
21. Tanımlı Text stillerini kaldırın ve Paragraph_Grey hazır stilini seçin.
22. Departman ismi yazılı Label’ı Duplicate edin ve içeriğini geçici bir unvan ile değiştirin.
23. Tanımlı Text stilini H6 ile değiştirin.
24. Vertical Stack’in gap değerini 0 olarak güncelleyin.
25. Horizontal Stack’i seçin ve dikeyde ortalayın.
26. Ardından ebeveyn kolonu seçip, yatayda sola hizalayın ve dikeyde ortalayın.
27. Sağdaki kolon içerisine bir Icon ekleyin ve ikon seçimini gerçekleştirin.
28. Ardından ebeveyn kolonu seçin ve sağa hizalayın.

Kullanıcı bilgi kartını tanımladık. Fikirlerin listelendiği yapıyı oluşturarak ilerleyelim.

29. İlk olarak başlık satırı için ekrana bir Row elementi ekleyin ve tek kolona dönüştürün.
30. Kolon içerisine bir Horizontal Stack ekleyin.
31. Gap değerini 5 olarak değiştirin.
32. Horizontal Stack içerisine bir Label sürükleyin ve içeriğini güncelleyin.
33. Varsayılan gelen 100 genişlik değerini sıfırlayın.
34. Tanımlı Paragraph stilini kaldırın ve Paragraph_Grey hazır stilini seçin.
35. Ardından Label’i duplicate edin ve içeriğini güncelleyin.
36. Başlık satırının altına bir Row elementi ekleyin ve tek kolonlu yapıda kullanın.
37. Kolonu seçin ve varsayılan olarak gelen Column stilini kaldırıp, None seçin.
38. Kolon içerisine bir Table sürükleyip bırakın. 
39. Table’in Header'ını gizleyin.
40. Varsayılan olarak gelen TableDefaultColumn’u Properties aracılığıyla silin.
41. Table Row’u seçin Border stilini kaldırın.
42. Ardından TableTemplateColumn’u seçin ve varsayılan olarak gelen Padding stilini kaldırıp None stilini ekleyin.
43. Şimdi Dashboard ekranı açın.
44. Gallery View içerisinde yer alan ebeveyn (genel yer tutucu) Row’u kopyalayın.
45. Kullanıcı detay ekranına dönün.
46. TableColumn’u seçin ve yapıştırma işlemini gerçekleştirin.
47. Yapıştırdığınız Row içinde yer alan beyaz arka plana sahip Child kolonu seçin ve arka plan rengini güncelleyin.
48. Son olarak Table elementini seçin Hover arka plan rengini kaldırın.

Böylece kullanıcı detay ekranınız hazır.