Mobil Dashboard Ekran Tasarımının Hazırlanması

Önceki öğrenme içeriğinde Tabbar menü ile tasarımına başladığımız Dashboard ekranının, üst bilgi ve gövdesinde bulunan öğelerin tasarımı ile devam edelim.

İlk olarak öğrenme içeriği sonunda tamamlamış olacağımız Dashboard ekranını inceleyerek başlayalım. Bu öğrenme içeriğinde Header, Card yapısı ve Listeleme yapısına sahip bir Dashboard ekran tasarımını tamamlamış olacağız.

Bir önceki öğrenme içeriğinde hazırlamış olduğumuz Tabbar menü tasarımını yaptığımız ekran üzerinden devam ediyoruz.

İlk olarak ekranın en üstünde yer alan Header tasarımını görüntülüyoruz. Header altında personel ve departman sayısının gösterildiği Kart tipinde bir özet görüyoruz. Kart yapısının altında ise son eklenen personellerin listelenmesini sağlayan bir liste yapısı yer almaktadır. Liste yapısını oluşturmak için Data Repeater kategorisinde yer alan Table elementini kullanacağız.

Kart tipinde görünümleri hazırlarken iç içe Row elementleri ile görsel tasarımı hazırlayabilirsiniz. İlk Row elementinden sonra her bir kart yapısı için ayrıca tek kolona sahip bir Row elementi daha oluşturmalısın. Ardından bu kolon içindeki elementleri nasıl eklemek istiyorsan buna göre tekrarlı olarak satır bazındaki görünümler için Row elementi eklemelisiniz.

Şimdi gösterilen bu Dashboard ekranını birlikte hazırlamaya başlayalım.

1. İlk olarak Screens panelini açın ve Tabbar menü tasarımı yaptığınız HomePage sayfasını Dashboard olarak yeniden adlandırın.
2. Header tasarımı ile başlayalım. Sol kenarda Elements paneli ile Header elementini ekran üzerine doğru sürükle bırak ile ekleyin.
3. Şimdi bu Header elementini 2 bölüme ayırabilmek için içine bir Row elementi ekleyelim. Row elementi varsayılan olarak 3 kolon olarak gelir. Elementi eklendikten sonra sağ kenardaki Properties panelinden 2 kolona dönüştürün.
4. Row içindeki sol kolona Label elementini ekleyin.
5. Label’a iki kez tıklayın ve yazıyı Dashboard olarak değiştirin. Styling paneli > Text bölümünden H3 yazı stilini seçerek görsel düzenlemeyi tamamlayalım.
6. Ardından Row elementinin sağ kolonuna bir icon elementi ekleyin.
7. Icon elementi seçili iken sağ kenarda Properties paneli üzerinden ikon kütüphanesinden Logout ikonunu seçin.
8. Ardından Styling paneli Layout alanından ikon elementine 4 yönde 8 piksellik padding değeri verin.
9. Icon elementi font yani yazı tipi temelli bir elementtir. Bu nedenle boyut, renk gibi değişiklikleri Styling panelindeki Text bölümü ile yapabilirsiniz.
10. Text bölümü ile ikonun rengini değiştirin.
11. Ardından ikon elementi seçiliyken Styling paneli > Fill bölümünden ikonun arka plan rengini değiştirin ve Border alanından ikona 4 yönde 4 piksellik Radius verin.
12. Icon elementinin bulunduğu kolon seçiliyken Styling paneli > Layout> Alignment aracılığıyla kolonun içinde yer alan ikonu sağa yaslayın.

Header tasarımını tamamladık. Şimdi Header tasarımı altında yer alan kart tasarımı ile devam edelim.

13. Dashboard’da yer alan ve görselde görülen ikili özet kart görünümünü oluşturmak için öncelikle ekrana Row elementini sürükle-bırak ile ekleyin.
14. Row elementi seçiliyken Properties paneli aracılığıyla kolon sayısını 2 kolon olacak şekilde ayarla.
15. Row içindeki sol kolona bir Row elementini sürükleyip-bırak. Eklenen Row elementini Properties aracılığıyla tek kolona dönüştür. Ardından Row elementi seçiliyken Styling>Fill>Color bölümünden>White rengini seç. Devamında Border>Radius alanından Radius hazır stilini seç. Kartın kendisini hazırladık. Şimdi içeriğinde bulunacak elementleri ekleyelim.
16. Kart görünümü için hazırlanan Row elementi içerisine bir Row elementini daha sürükleyip-bırak. Properties paneli aracılığıyla bu Row elementini iki kolonlu, sol kolonunun sağ kolonundan daha geniş olduğu bir yapıya dönüştür.
17. Ardından Styling>Layout alanından Row hazır stilini kaldırın. Hazır stiller içerisinden None seçin ve Bottom’a 4 piksellik bir padding değeri verin.
18. Ardından Row içerisinde yer alan kolonlarda Styling>Layout alanından Column hazır stilini kaldırın. Hazır stiller içerisinden None seçin.
19. Sol kolon içerisine bir Label elementi ekle. Eklenen Label elementine çift tıkla ve Employees metnini gir.
20. Daha sonra sağdaki kolona personelleri temsil eden bir ikon elementi ekleyelim. Bunun için Icon elementini kolona ekle.
21. Properties paneli aracılığıyla ikon kütüphanesinden bir ikon seçin. Styling paneli>Text>Color aracılığıyla ikon rengini kırmızı olarak değiştir.
22. Daha sonra Icon elementinin yer aldığı kolonu seçerek Styling paneli>Layout bölümünden>Align ile Sağa Yaslı olarak hizala.
23. Karta ikinci bir satır daha ekleyelim. Kart içine ve ilk satırın altına bir Row elementi daha ekleyelim. Properties paneli aracılığıyla bu Row elementini tek kolonlu bir yapıya dönüştür.
24. Ardından Styling>Layout alanından Row hazır stilini kaldırın ve hazır stiller içerisinden None seçin.
25. Ardından Row içerisinde yer alan kolondan da Styling>Layout alanı aracılığıyla Column hazır stilini kaldırın ve hazır stiller içerisinden None seçin.
26. Ardından bu Row içerisine personellerin toplam sayısının yazacağı bir Label elementini ekleyelim. Label elementine çift tıklayarak 255 değerini girin.
27. Styling panelinden Text>Styles>H2 seç.
28. İlk Card yapısının en dışındaki Row’u Item Tree ve/veya Breadcrumb aracılığıyla seç. Context menüden Duplicate ile çoğalt. Çoğalttığınız Kartlardan birini sağdaki ikinci kolona sürükle bırak ile yerleştirin.
29. Sağdaki kartın içeriğini güncelleyelim. Label elementine çift tıklayarak Departments değerini girin.
30. Sonra Icon elementini seç ve Properties panelinden ikonunu değiştir. Styling panelinden Text>Color aracılığıyla ikona turuncu rengini ver.
31. Alt satırda yer alan Label elementine çift tıklayarak 14 değerini gir.

Dashboard'da özet görünümü sağlayacak kart bölümünü tamamladık. İlerleyen derslerde buradaki sayılara veri bağlayarak dinamik olarak değişmesini sağlayacağız.

Şimdi Kart bölümünün altında son eklenen personelleri gösteren bir liste tasarımı yapalım.

16. İlk olarak özet görünümünün altına bir Row elementi ekle. Bu Row elementini tek kolona dönüştür.
17. Row elementi seçiliyken, Styling paneli Layout alanından Top yönünde Padding değerini 0 olarak ayarlayın.
18. Aynı işlemi kolon içerisinde uygulayalım. Column seçiliyken Styling paneli Layout alanından Top yönünde Padding değerini 0 olarak girin.
19. Ardından kolon içerisine bir Row elementi sürükleyip bırakın ve Row’u tek kolona dönüştürün.
20. Row’u seçerek Styling panelinden Fill bölümü ile arka plan rengini beyaz olarak değiştirin. Border bölümünden de Radius hazır stilini seçin.
21. Devamında kolon içine bir Row elementi ekleyin. Bu Row elementini sol kolonun sağ kolondan daha büyük olacak şekilde 2 kolona dönüştür. Bu bölümü listenin başlığı için kullanacağız.
22. Ardından Row’u seçin ve Styling>Layout alanından Row hazır stilini kaldırıp None hazır stilini seçin. Devamında Bottom yönünde 8 piksellik padding değeri verin.
23. Bu işlemi her iki kolon için de uygulayın. Column hazır stilini kaldırıp None hazır stilini seçin ve Bottom yönünde 8 piksellik padding değeri verin.
24. Soldaki kolona bir Label elementi ekleyerek Recently Added Employees metnini gir.
25. Ardından Label elementine Styling>Text bölümünden>H3 stilini ekleyin.
26. İkinci kolona bir icon elementini ekleyerek ikon kütüphanesinde ikon seçimi yapın ve rengini değiştirin
27. Sağda yer alan kolonu seçerek Styling paneli Layout bölümü Align alanından Sağa Yaslı ile icon elementini bulunduğu kolon içerisinde sağa yaslayın ve dikeyde ortalayın. Buraya kadar listenin başlık bölümünü tamamladık.
28. Şimdi başlık bölümündeki Row elementinin altına bir Row elementi daha ekle. Properties paneli üzerinden tek kolona dönüştür. Ardından Row’u seçin ve Styling>Layout alanından Row hazır stlini kaldırıp None hazır stlini seçin.
29. Devamında Row içerisindeki kolonu seçin ve Column hazır stilini kaldırıp None hazır stilini seçin.
30. Kolonun içine Table elementi ekleyin.
31. Table elementi varsayılan olarak bir tablo sütun başlığı ile gelir. Properties panelinde >showHeader alanından >Switch’i kapatarak kolon başlıklarını gizle.

Şimdi Table elementinde görüntülenecek veriler için elementler ekleyelim.

26. Table elementinin ilk kolonuna bir Image elementi ekle. Properties paneli imageFit alanından fill tipini seç.
27. Ardından Styling paneli Layout bölümü Size alanında genişlik ve yükseklik için 32 px değerini gir.
28. Border bölümünden Radius_Full hazır stilini seçin.
29. Image elementinin görsel ayarını yaptıktan sonra Properties paneli Value alanından Uploaded Images aracılığıyla geçici bir görsel ekle.
30. Görsel kütüphanesine bir görsel ekleyebilmek için Uploaded Image seçildikten sonra yükle butonuna tıkla. Açılan alana görseli sürükle bırak ile görsel ekleyebilir veya bilgisayarından seçebilirsin.

Ayrıca görsel eklerken Kuika yapay zeka asistanını kullanarak yeni bir görsel oluşturup, kullanabilirsin.

31. Table elementinin ikinci kolonuna personel isminin yazacağı bir Label elementi ekleyerek, geçici bir isim yazın.
32. Table elementinin üçüncü kolonuna departman isimlerinin yazacağı bir Label elementi ekleyin ve geçici bir departman ismi yazın.
33. Daha sonra Label seçiliyken Styling paneli Text bölümü aracılığıyla Paragraph hazır stilini kaldırıp H6 hazır stilini seçin.
34. Table elementinin dördüncü kolonuna ise personel detayını gösterecek Drawer için bir Icon elementi ekleyin.
35. Properties paneli üzerinden bir ikon seç. Styling paneli Text bölümünden ikon rengini değiştir. Icon elementinin bulunduğu Table kolonunu seç ve Styling paneli Layout bölümüyle ikonu bulunduğu kolon içinde sağa yaslayın.
36. Son olarak Table Row’u seçin ve Styling paneli Border alanında bulunan Border hazır stilini kaldırın. BorderBottom hazır stilini ekleyin.

Bu işlemlerle birlikte Dashboard ekran tasarımını tamamlamış oldun. Dashboard ekranını isteğin doğrultusunda geliştirebilir ve içerik bakımından zenginleştirebilirsin.