Dashboard Ekran Tasarımı

Bu öğrenme içeriğinde, daha önce Tabbar Menü tasarımı ile başladığımız mobil uygulamanın Dashboard ekranını hazırlayacağız. 

İlk adım olarak, hedeflediğimiz Dashboard ekranının özelliklerini gözden geçirelim. 

Dashboard ekranı, uygulama logosu ve bildirim ekranını açabileceğiniz bir bildirim ikonu içeren bir Header'a sahiptir. Header'ın altında, hem tüm fikirlerin sayısını hem de yalnızca giriş yapmış kullanıcı tarafından oluşturulan fikirlerin sayısını gösteren bir özet Kart bulunmaktadır. 

Ekranın devamında ise son eklenen fikirlerin gösterildiği liste yapısı yer alır. Bu listeyi oluşturmak için, Data Repeater kategorisinden Gallery View elementini kullanacağız.

Ekranın en altında ise daha önceden oluşturduğumuz ve uygulama içinde gezinmeyi sağlayan Tabbar Menu yer alıyor.

Şimdi incelediğimiz Mobile Dashboard ekran tasarımını birlikte oluşturalım.

Header ile başlayalım.

1. Ekranda yer alan Row elementini silin.
2. Ekrana bir Header elementi ekleyin. [Header elementi tanımı bantta çıkmalı]
3. Header’in arka plan rengini Background seçimiyle değiştirin.
4. Header içerisine bir Row sürükleyip bırakın ve iki kolona dönüştürün.
5. Soldaki kolon içerisine bir Image elementi sürükleyip bırakın.
6. Image elementine geçici bir resim ekleyin.
7. Ardından Image32 stilini seçin ve Border alanından Radius seçimini yapın.
8. Image elementinin bulunduğu kolonu seçin ve hizalama işlemlerini yapın.
9. Sağdaki kolon içerisine bir ikon elementi sürükleyin ve bırakın.
10. İkon seçimi yapın ve ikonun bulunduğu kolonda hizalama işlemlerini gerçekleştirin.

Header tasarımını hazırladık. Şimdi kart yapısını hazırlayalım.

11. Ekrana bir Row sürükleyin ve bırakın.
12. Row elementini iki kolona dönüştürün.
13.  Solda yer alan kolon içerisine bir panel elementi sürükleyip bırakın.
14. Panele Padding hazır stilini ekleyin.
15. Arka plan rengini beyaz olarak seçin ve Radius stilini ekleyin.
16. Panel içerisine bir Row sürükleyip bırakın ve tek kolona dönüştürün.
17. Row hazır stilini kaldırın ve None stilini ekleyin.
18. Kolon içerisine bir Horizontal Stack ekleyin ve Gap değerini 6 olarak ayarlayın.
19. Horizontal Stack elementi içine sırasıyla bir Icon elementi bir de Label elementi ekleyin.
20. Icon elementi için bir ikon seçimi yapın ve ardından Label elementinde yazan metni güncelleyin.
21. Label elementini seçin ve varsayılan olarak gelen 100 piksel değerindeki genişliği sıfırlayın.
22. Paragraph stilini kaldırın ve H6 stilini seçin.
23. Horizontal Stack’i seçin ve dikeyde ortalayın.
24. Horizontal Stack’in ebeveyni kolonu seçin ve yatayda sola, dikeyde ortaya hizalayın.
25. Panel elementi içerisine bir Row daha sürükleyin ve tek kolona dönüştürün.
26. Row hazır stilini kaldırın ve None stilini ekleyin.
27. Kolon içerisine bir Label ekleyin ve içeriğini güncelleyin.
28. Label seçiliyken Paragraph stilini kaldırın ve H1 stilini seçin.
29. Ebeveyn kolonu seçin ve hizalama işlemlerini yapın.
30. Şimdi panel elementini seçin ve duplicate edin.
31. Aşağıya gelen panel elementini sürükleyin ve sağdaki kolon içerisine bırakın.
32. Icon ve Label içeriklerini güncelleyin.

Bu adımlarla kart görünümünü elde ettik. Şimdi son fikirlerin listelenmesini sağlayan galeri yapısını birlikte hazırlayalım. 

33. İ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.
34. Kolonu seçin ve varsayılan olarak gelen Column stilini kaldırıp, None stilini ekleyin.
35. Kolon içerisine bir GalleryView elementi ekleyin.
36. GalleryView içerisine bir Row sürükleyin ve tek kolona dönüştürün.
37. Kolonu seçiliyken White arka plan verin ve Radius stilini ekleyin.
38. Kolon içerisine bir Row ekleyin ve sol tarafın daha geniş olduğu iki kolonlu yapıya dönüştürün.
39. Row’da bulunan, Row stilini kaldırın ve None stilini seçin.
40. Soldaki ilk kolon içerisine bir Horizontal Stack ekleyin.
41. Eklediğiniz Horizontal Stack’i dikeyde ortalayın.
42. Horizontal Stack içerisine bir Image elementi ve bir Vertical Stack ekleyin.
43. Image elementi seçiliyken Properties’den geçici bir görsel ekleyin ve ImageFit seçimini güncelleyin.
44. Styling'de varsayılan gelen genişlik değerini sıfırlayın, Image 32 stilini ve Radius Full stilini seçin.
45. Vertical Stack elementini seçin ve Gap değerini 1 olarak güncelleyin.
46. Styling paneli aracılığı ile yatayda sola hizalayın.
47. Ardından Vertical Stack içerisine bir Label ekleyin Label’i çoğaltın.
48. İlk Label için isim bilgisi girin ve Text stili olarak H3 seçimi yapın.
49. İkinci Label için unvan bilgisi girin ve Text stili olarak H6 seçimi yapın.
50. İkinci kolona bir Label sürükleyin.
51. Label değerini güncelleyin.
52. Label için Layout, Text, Fill ve Border alanlarından ilgili seçimleri yapın ve stil düzenlemelerini gerçekleştirin.
53. Label’in bulunduğu kolonu seçin.
54. 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.

55. GalleryView içerisine bir Row daha ekleyip tek kolona dönüştürün.
56. Row’da bulunan Row stilini kaldırın ve None stilini seçin.
57. Kolon içerisine bir Image elementi ekleyin. Geçici bir görsel ekleyin ve ImageFit seçimini güncelleyin.
58. Image Elementi seçiliyken Layout alanında Width değerini 300 piksel, Height değerini 200 piksel olarak düzenleyin ve Border alanında Radius stilini seçin. 
59. Image elementinin bulunduğu kolona bir Label elementi ekleyin. 
60. Label elementinin içeriğini güncelleyin ve Text alanından H6 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.

61. GalleryView içerisine, Image elementinin bulunduğu Row altına bir Row daha ekleyip sol kolonun sağ kolondan daha geniş olduğu yapıyı seçin.
62. Row’da bulunan Row stilini kaldırın ve None stilini seçin.
63. İlk kolon içerisine bir Horizontal Stack ekleyin.
64. Horizontal Stack’in Gap Değerini 24 olarak güncelleyin.
65. Horizontal Stack içerisine bir Horizontal Stack ekleyin
66. Horizontal Stack elementi içine sırasıyla bir Icon elementi bir de Label elementi ekleyin.
67. Icon elementi için bir ikon seçimi yapın ve ardından Label elementinde yazan metni güncelleyin.
68. Label elementini seçin ve varsayılan olarak gelen 100 piksel değerindeki genişliği sıfırlayın ve H6 seçimini yapın
69. Horizontal Stack elementini seçin ve dikeyde ortalayın.
70. Gap değerini 6 olarak güncelleyin.
71. En içteki Horizontal Stack'i Duplicate edin.
72. Duplicate olarak gelen ikon ve Label’in içeriklerini güncelleyin.
73. Horizontal Stack elementinin ebeveyni kolonu seçin ve onu da dikeyde ortalayın.
74. En içteki Horizontal Stack elementlerinden birini seçin ve kopyalayıp ikinci kolona yapıştırın.
75. İkon ve metin güncellemelerini yapın.
76. Horizontal Stack elementinin ebeveyni kolonu seçin ve dikeyde ortalayın.

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