Dashboard Ekran Tasarımı

Bu videoda, önceki öğrenme içeriğinde başladığımız Dashboard ekranının tasarımını, özellikle gövdede bulunan öğelerin tasarımını yaparak devam edeceğiz.

İlk adım olarak, tamamlanacak Dashboard ekranını inceleyerek başlayalım. Bu içerikte, Header, kart yapısı ve listeleme özelliklerine sahip bir Dashboard ekranı tasarımını tamamlayacağız. Önceki içeriklerde oluşturduğumuz Header tasarımı üzerine kurulu olarak, kullanıcıların fikirlerinin özetlendiği kart yapısını ve en son eklenen fikirlerin listelendiği bir liste yapısını ekleyeceğiz. 

Liste yapısını oluşturmak için Data Repeater kategorisinden Gallery View elementini kullanacağız. 

Ayrıca, uygulama içi gezinmeyi kolaylaştıran ve daha önce Master Screen olarak oluşturduğumuz menüyü de gözden geçireceğiz.

Önceki öğrenme içeriklerinde hazırlamış olduğumuz Header tasarımını yaptığımız ekran üzerinden devam ediyoruz. 

1. Homepage isimli ekranı açın.
2. Properties aracılığıyla Master Page olarak olarak kullanacağınız Master Page’i seçin.

Şimdi kart yapısı tasarımına geçelim.

3. Ekrana bir genel bir yer tutucu olması için Row elementini sürükleyin ve bırakın. Row elementini tek kolona dönüştürün.
4. Tek kolona dönüştürdüğünüz Row içerisine bir Row daha sürükleyip bırakın ve bu Row elementini de tek kolona dönüştürün.
5. Ardından Styling’de Row stilini kaldırın ve None stilini ekleyin.
6. Row içerisine bir Label elementini sürükleyip bırakın ve içeriğini Dashboard olarak güncelleyin.
7. Label seçiliyken Styling paneli Text alanından Paragraph stilini kaldırıp H2 stilini ekleyin.

Böylelikle sayfa başlığımız hazırlanmış oldu. Kartların tasarımıyla ilerleyelim;

8. Sayfa başlığımızın hemen altına, genel yer tutucu olan Row içine bir Row elementi daha ekleyin. Row elementini iki kolona dönüştürün.
9. Row stilini kaldırıp, None stilini ekleyin.
10. Soldaki ilk kolon içerisine bir Row elementi daha ekleyin ve tek kolona dönüştürün.
11. Ardından Row elementine White arka plan rengi verin ve Radius stilini ekleyin.
12. Devamında tek kolona dönüştürdüğün bu Row içerisine bir Vertical Stack elementi ekleyin.
13. Vertical Stack elementi içerisine ise bir Horizontal Stack elementini sürükleyip, bırakın.
14. Horizontal Stack elementi içine sırasıyla bir Icon elementi bir de Label elementi ekleyin.
15. Icon elementi için bir ikon seçimi yapın ve ardından Label elementinde yazan metni güncelleyin.
16. Label elementini seçin ve varsayılan olarak gelen 100 piksel değerindeki genişliği sıfırlayın.
17. Vertical Stack içerisine Horizontal Stack’in hemen altına bir Label elementi ekleyin ve geçici olarak içeriğini değiştirin.
18. Label elementi seçiliyken Text Stilini H1 olarak güncelleyin. 

İlk kartımız hazır. Şimdi bu kartı çoğaltarak ikinci kartımızı da hazırlayalım.

19. İlk kart yapısının ebeveyni, beyaz arka plan rengi verdiğimiz, Row’u seçin ve detay menüsü aracılığıyla Duplicate edin.
20. Hemen aşağıya yeni gelen çoğaltılmış Row’u seçin ve sol üst köşesinde yer alan noktalar aracılığıyla sürükleyip ikinci kolona bırakın.
21. İkinci kart yapısının içeriklerini güncelleyerek kart yapısını tamamlayın.

Kart yapısı üzerine çalışmaları tamamladıktan sonra artık son fikirlerin listelenmesini sağlayan galeri yapısını birlikte hazırlayalım.

22. İlk olarak ekrana, kart yapısının hemen altına, bir Row elementi ekleyin ve tek kolona dönüştürün. Bu Row galeri yapısının genel yer tutucusu olarak görev alacaktır.
23. Ardından Row içerisinde bulunan kolona bir Row elementi daha sürükleyin ve tek kolona dönüştürün. Row’da yer alan Row stilini kaldırıp None stilini ekleyin
24. Kolon İçerisine bir Label ekleyin ve değerini değiştirip Paragraph ve H3 stilini ekleyin.

Eklediğimiz bu yapı son fikirler galerisinin başlığını oluşturmaktadır. Galeri yapısı ile devam edelim;

25. Başlık satırının hemen altına bir GalleryView elementi ekleyin.
26. GalleryView ile birlikte varsayılan olarak gelen ebeveyn Row ve Column’u BreadCrumb aracılığıyla seçerek Varsayılan Layout stillerini kaldırıp, None stillerini ekleyin.
27. GalleryView elementini seçin ve Properties’de Desktop’taki kolon sayısını 3 olarak güncelleyin.
28. GalleryView içerisine bir Row sürükleyin ve tek kolona dönüştürün.
29. Kolonu seçiliyken White arka plan verin ve Radius stilini ekleyin.
30. Kolon içerisine bir Row ekleyin ve sol tarafın daha geniş olduğu iki kolonlu yapıya dönüştürün.
31. Row’da bulunan, Row stilini kaldırın ve None stilini seçin.
32. Soldaki ilk kolon içerisine bir Horizontal Stack ekleyin.
33. Eklediğiniz Horizontal Stack’i dikeyde ortalayın.
34. Horizontal Stack içerisine bir Image elementi ve bir Vertical Stack ekleyin.
35. Image elementi seçiliyken Properties’den ImageFit seçimini güncelleyin.
36. Stylinge Image 32 stilini ve Radius Full stilini seçin.
37. Vertical Stack elementini seçin ve Gap değerini 1 olarak güncelleyin.
38. Styling paneli aracılığı ile yatayda sola hizalayın.
39. Ardından Vertical Stack içerisine bir Label ekleyin Label’i çoğaltın.
40. İlk Label için isim bilgisi girin.
41. İkinci Label için unvan bilgisi girin ve Text stili olarak H6 seçimi yapın.
42. İkinci kolona bir Label sürükleyin.
43. Label değerini güncelleyin.
44. Label için Layout, Text, Fill ve Border alanlarından ilgili seçimleri yapın ve stil düzenlemelerini gerçekleştirin.
45. Label’in bulunduğu kolonu seçin.
46. Yatayda sağa hizalayıp dikeyde ortalayın.

Şimdi son fikirlerin görsel ve başlık alanının listelendiği alanı hazırlayalım.

47. GalleryView içerisine bir Row daha ekleyip tek kolona dönüştürün.
48. Row’da bulunan Row stilini kaldırın ve None stilini seçin.
49. Kolon içerisine bir Image elementi ekleyin.
50. Image elementi seçiliyken Layout alanında Image Stilini ve Border alanında Radius stilini seçin. 
51. Image elementinin bulunduğu kolona bir Label elementi ekleyin. 
52. Label elementinin içeriğini güncelleyin ve Text alanından Paragraph_Grey seçimini yapın.

Görsel ve fikir başlığı alanı sonrasında fikirle ilgili desteklerin (oyların), yorumların ve ilgili kişilerin bilgisini içeren alanın tasarımını yapalım.

53. GalleryView içerisine, Image elementinin bulunduğu Row altına bir Row daha ekleyip kolon genişliklerini ayarlayın.
54. Row’da bulunan Row stilini kaldırın ve None stilini seçin.
55. İlk kolon içerisine bir Horizontal Stack ekleyin.
56. Horizontal Stack’in Gap Değerini 6 olarak güncelleyin.
57. Horizontal Stack elementi içine sırasıyla bir Icon elementi bir de Label elementi ekleyin.
58. Icon elementi için bir ikon seçimi yapın ve ardından Label elementinde yazan metni güncelleyin.
59. Label elementini seçin ve varsayılan olarak gelen 100 piksel değerindeki genişliği sıfırlayın.
60. Horizontal Stack elementini seçin ve dikeyde ortalayın.
61. Horizontal Stack elementinin ebeveyni kolonu seçin ve onu da dikeyde ortalayın.
62. Tekrardan Horizontal Stack elementini seçin ve kopyalayıp ikinci kolona yapıştırın.
63. İkon ve metin güncellemelerini yapın.
64. Horizontal Stack elementinin ebeveyni kolonu seçin ve dikeyde ortalayın.
65. Son olarak üçüncü kolona da kopyaladığınız Horizontal Stack’i yapıştırın.
66. Burada ikon ve metin güncellemelerini yapın.
67. Horizontal Stack elementinin ebeveyni kolonu seçin. Yatayda sağa hizalayın ve dikeyde ortalayın.

Bu işlemlerle birlikte Dashboard ekranınız hazır.