Detay Ekran Tasarımı

Bu öğrenme içeriğinde kayıtlı bir fikrin detayını gösteren bir ekran tasarımı hazırlayacağız.

Öğrenme içeriği sonunda tasarlamayı hedeflediğimiz ekran tasarımını inceleyelim.

Header tasarımına baktığımızda, daha önce Dashboard ekranında hazırladığımız Header'a benzer şekilde, uygulama logosu ve bildirim ekranını açabileceğiniz bir bildirim ikonu mevcut.

Header altında ise fikir detayları ve fikre yapılan yorumları listeleyen alan mevcuttur. Fikre ait detaylar ve yorumlar Tab elementinde gösterilmektedir.

En altta ise daha önce oluşturduğumuz Tabbar Menü yer almaktadır.

Fikir detay ekranının genel hatlarını inceledik. Şimdi bu ekranı birlikte tasarlayalım.

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

Daha önce Dashboard ekranda kullandığımız Header tasarımını detay ekranında da kopyalayarak kullanabiliriz. Kopyalama işlemi öncesinde detay 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 detay ekranını açın.
6. Header'ı seçin ve detay menüsü aracılığıyla yapıştırın.

Şimdi fikir detay yapısını hazırlayarak ilerleyelim.

7. Ekrana bir Row sürükleyin ve bırakın.
8. Fikir detayını sunmak için Dashboard'da bulunan, GalleryView içerisindeki yapıyı kullanabiliriz.
9. Dashboard ekranını açın.
10. GalleryView içerisindeki Row’u seçin ve kopyalayın.
11. Detay ekranını açın.
12. Ekrana sürükleyip bıraktığınız Row’u seçin ve Detay menüsü aracılığıyla yapıştırın.
13. Ekranda boş olarak duran Row’u silin.
14. Yapıştırdığınız Row’da yer alan kolon içine en alta bir Tab elementi sürükleyin ve bırakın.
15. Tab elementinin bulunduğu kolonu seçin ve varsayılan gelen Padding stilini kaldırıp None seçimi yapın.
16. Tab elementini seçin ve üçüncü Tab öğesini silin.
17. Tab öğelerinin başlıklarını ve seçili sekmenin başlık rengini güncelleyin.
18. Details başlıklı Tab öğesinin içerisine bir Row ekleyin ve tek kolona dönüştürün.
19. Kolonu seçin ve varsayılan gelen Column stilini kaldırın ve None stilini ekleyin.
20. Kolon içerisine Vertical Stack ekleyin.
21. Vertical Stack içerisine bir Label sürükleyip bırakın.
22. Label’in içeriğini güncelleyin ve H3 stilini ekleyin.
23. Label’i Duplicate edin.
24. Alta gelen Label’in içeriğini güncelleyin.
25. Text stillerini kaldırıp, H6 stilini ekleyin.

Details sekmesinin içeriği hazır. Şimdi Comments sekmesinin içeriğini hazırlayarak devam edelim.

26. Comments başlıklı Tab öğesinin içine bir Row ekleyip, tek kolona dönüştürün.
27. Row’da ve Column’da yer alan varsayılan Layout stillerini kaldırın ve None stilini ekleyin.
28. Kolon içerisine bir Table sürükleyip bırakın.
29. Table Header’i gizleyin.
30. Table’de varsayılan gelen Table stilini kaldırıp None seçimi yapın.
31. TableRow’u seçin ve Border stilini kaldırıp, BorderBottom seçimini yapın.
32. TableRow içine bir Row sürükleyip bırakın ve iki kolona dönüştürün.
33. Row’da yer alan Row stilini kaldırıp None stilini ekleyin.
34. İlk kolon içerisine bir Label elementi ekleyip, metni güncelleyin.
35. Label’in Text stilini H6 olarak güncelleyin. 
36. Kolonda hizalama işlemlerini gerçekleştirin.
37. Label’i kopyalayın ve sağdaki kolona yapıştırın.
38. İçeriği güncelleyin.
39. Ebeveyn kolonu hizalayın.
40. TableRow içine bir Row daha sürükleyip bırakın ve tek kolona dönüştürün.
41. Row’da yer alan Row stilini kaldırıp None stilini ekleyin.
42. Kolon içerisine bir Label ekleyin ve içeriğini güncelleyin.

Ekranın tasarımımızı tamamlamak için son yapı olan Tabbar tasarımımızı ekleyerek devam edelim. 

43. Dashboard ekranda hazırladığımız Tabbar menüyü buraya kopyalayalım.
44. Ekrana bir Footer sürükleyin.
45. Dashboard ekranını açın.
46. Tabbar menü tasarımını yer tutucusu olan Row’u kopyalayın.
47. Detay ekranına dönün.
48. Footer’ı seçin ve yapıştırın.
49. İkon renk düzenleme işlemini gerçekleştirin.

İşte mobil uygulamanız için kullanacağınız Detay ekran tasarımınız hazır. Benzer yapıdaki detay ekranlarını hazırlayabilir ve kullanabilirsiniz.