Profil Ekran Tasarımının Hazırlanması

Bu öğrenme içeriğinde uygulamaya giriş yapmış personele ait bilgilerin detaylı olarak aktarıldığı mobil ekran tasarımını hazırlayacağız.

Öncelikle tamamlanmış kullanıcı profil ekranını inceleyelim.

Profil ekranının üstünde bir Header bulunmaktadır. Header içerisinde ekran isminin yazdığı bir Label elementi ve uygulamadan çıkışa olanak sağlayan bir çıkış ikonu bulunmaktadır.

Header altında uygulamaya giriş yapmış kullanıcının bilgilerinin yer aldığı bir özet kart yapısı yer almaktadır.

İncelediğimiz profil ekranına benzer bir tasarımı birlikte hazırlayalım.

1. Sol kenardan Screens panelini açın ve Dashboard ekranının üzerine imleç ile gelin.
2. Detay menü aracılığıyla ekranı çoğaltın.
3. Gelen ekranın detay menüsü aracılığıyla ismini Profile olarak güncelleyin.
4. Header’da yer alan Dashboard yazısı üzerine iki kez tıklayın ve Profile olarak yazıyı güncelleyin.
5. Header altında yer alan kart yapısını ve tabloyu içerisinde barındıran Row'ları silin.
6. Header altına bir Row elementi sürükleyip bırakın ve tek kolonlu yapıya dönüştürün.
7. Kolon içerisine bir Row elementi sürükleyip bırakın. Row’u Properties paneli ile sol kolon sağ kolondan daha küçük olacak şekilde iki kolonlu yapıya dönüştürün.
8. Row elementinin arka plan rengini White olarak ayarlayın ve Border alanından Radius hazır stilini ekleyin.
9. İlk kolon içerisine Image elementi ekleyin.
10. Image elementine kullanıcı görselini temsil eden geçici bir resim ekleyin ve ImageFıt alanından Fill seçimini yapın.
11. Ardından Image elementi seçiliyken Styling panelinden Width değerini ve Height değerini 84 Px olarak girin.
12. Image elementine Border alanından Radius_Full hazır stilini ekleyin.
13. Image elementinin ebeveyni kolonu seçin. Yatayda ve dikeyde ortalayın.
14. Sağdaki kolon içerisine bir Vertical Stack elementi ekleyin.
15. Verticak Stack içerisine ilk olarak bir Label elementi sürükleyip bırakın. Label elementinin metin içeriğini geçici bir isim ile değiştirin.
16. Label’in Text stiline H3 hazır stilini ekleyin.
17. Ardından Vertical Stack içerisine bir Horizontal Stack ekleyin.
18. Horizontal Stack içerisine bir icon ve bir label elementi ekleyin.
19. Icon elementi seçiliyken ikon kütüphanesi aracılığıyla icon seçimi yapın ve Styling panelinden ikonun rengini değiştirin.
20. Ardından eklemiş olduğunuz Label içeriğini geçici bir departman ismi ile değiştirin.
21. Departman isminin yazdığı Label için metin stili olarak H6 hazır stilini seçin.
22. Departman bilgilerinin yer aldığı Horizontal Stack’i Duplicate edin.
23. Yeni gelen Horizontal Stack içerisindeki iconu değiştirin. Değiştirdiğiniz Icon'un renk güncellemesini yapın. Ardından Label metnini geçici bir Title ile değiştirin.
24. Horizontal Stack elementini BreadCrumb aracılığıyla seçin ve Duplicate edin.
25. Yeni eklenen Horizontal Stack içerisindeki icon'u değiştirin ve renk düzenlemesini yapın.
26. Label üzerine iki kez tıklayıp geçici bir e-posta adresi girin.
27. Horizontal Stack elementini seçin ve yine Duplicate edin.
28. Ardından ikonu ve ikon rengini değiştirin.
29. Label’a geçici bir telefon numarası girin.
30. Son olarak telefon numarası bilgisinin yer aldığı Horizontal Stack elementini de Duplicate edin.
31. Gelen Horizontal Stack içerisindeki icon'u doğum tarihini temsil eden bir ikonla değiştirin ve ikonun rengini de değiştirin.
32. Label’a geçici bir doğum tarihi girin.
33. Son olarak Tabbar’da yer alan Dashboard ve Profiller metinlerinin rengini değiştirin.

Işte bu kadar!