Web Uygulama Arayüz Tasarımı

Menü Tasarımı

Bu öğrenme içeriğinde, Master Screen yapısını kullanarak uygulama içindeki navigasyonu sağlayan Menü tasarımını nasıl hazırlayacağımızı öğreneceğiz. 

Bu öğrenme içeriğinde, Master Screen yapısını kullanarak uygulama içindeki navigasyonu sağlayan Menü tasarımını nasıl hazırlayacağımızı öğreneceğiz. 

Önce, menünün en üstünde bulunacak uygulama logosunu içeren bir Image ekleyeceğiz. 

Ardından, kullanıcıların Dashboard, Öneri Listesi, Kullanıcı Listesi ve Departman Listesi ekranlarına yönlendirilmesini sağlayacak temsili ikonları ekleyeceğiz. Bu adımları takip ederek, menü tasarımını adım adım birlikte oluşturacağız. 

Şimdi, bu süreci detaylı bir şekilde uygulayarak hazırlayalım.

  1. Screens Paneli aracılığıyla bir Master Screen oluşturun. 
  2. Açılan ekranda Master Screen’e bir isim verin. İsimlendirmeyi yaratıcılığınız doğrultusunda yapabilirsiniz.
  3. Master Screen'in Properties paneli aracılığıyla sadece Sol Layout’un kalacağı şekilde diğer Layout'ları kaldırın.
  4. Ardından Sol Layout içine bir Row Sürükleyip bırakın ve tek kolona dönüştürün.
  5. Kolon içerisine bir Image elementi ekleyin ve geçici bir resim yükleyin.
  6. Image elementi seçiliyken Image64 stilini seçin.
  7. Ardından Border alanından Radius stilini seçin.
  8. Image Elementinin ebeveyni kolonu seçin, yatayda ve dikeyde ortalayın.
  9. Sol Layout içine bir Row daha sürükleyip bırakın ve tek kolona dönüştürün.
  10. Kolon içerisine bir Menu elementi ekleyin.
  11. Menu elementi seçiliyken Properties paneli aracılığıyla Sub-Menuleri silin ve iki tane daha menü öğesi ekleyin.
  12. Menü öğelerinin her birini tek tek seçerek isimlendirme ve ikon seçme işlemlerini yapın.
  13. Ardından Menu elementini seçin ve Properties paneli aracılığıyla Collapsed Switch’ini aktif hale getirip, Collapsible Switch’ini pasif hale getirin.
  14. Menu elementinin ebeveyni kolonu seçin, yatayda ve dikeyde ortalayın.

Bu işlemlerle birlikte Menü tasarımınız hazır. Artık ihtiyaç duyduğunuz ekranlarda Master Screen’i seçerek hazırladığınız menü tasarımını kullanabilirsiniz.

Bu öğrenme içeriğinde, Master Screen yapısını kullanarak uygulama içindeki navigasyonu sağlayan Menü tasarımını nasıl hazırlayacağımızı öğreneceğiz. 

Bu öğrenme içeriğinde, Master Screen yapısını kullanarak uygulama içindeki navigasyonu sağlayan Menü tasarımını nasıl hazırlayacağımızı öğreneceğiz. 

Önce, menünün en üstünde bulunacak uygulama logosunu içeren bir Image ekleyeceğiz. 

Ardından, kullanıcıların Dashboard, Öneri Listesi, Kullanıcı Listesi ve Departman Listesi ekranlarına yönlendirilmesini sağlayacak temsili ikonları ekleyeceğiz. Bu adımları takip ederek, menü tasarımını adım adım birlikte oluşturacağız. 

Şimdi, bu süreci detaylı bir şekilde uygulayarak hazırlayalım.

  1. Screens Paneli aracılığıyla bir Master Screen oluşturun. 
  2. Açılan ekranda Master Screen’e bir isim verin. İsimlendirmeyi yaratıcılığınız doğrultusunda yapabilirsiniz.
  3. Master Screen'in Properties paneli aracılığıyla sadece Sol Layout’un kalacağı şekilde diğer Layout'ları kaldırın.
  4. Ardından Sol Layout içine bir Row Sürükleyip bırakın ve tek kolona dönüştürün.
  5. Kolon içerisine bir Image elementi ekleyin ve geçici bir resim yükleyin.
  6. Image elementi seçiliyken Image64 stilini seçin.
  7. Ardından Border alanından Radius stilini seçin.
  8. Image Elementinin ebeveyni kolonu seçin, yatayda ve dikeyde ortalayın.
  9. Sol Layout içine bir Row daha sürükleyip bırakın ve tek kolona dönüştürün.
  10. Kolon içerisine bir Menu elementi ekleyin.
  11. Menu elementi seçiliyken Properties paneli aracılığıyla Sub-Menuleri silin ve iki tane daha menü öğesi ekleyin.
  12. Menü öğelerinin her birini tek tek seçerek isimlendirme ve ikon seçme işlemlerini yapın.
  13. Ardından Menu elementini seçin ve Properties paneli aracılığıyla Collapsed Switch’ini aktif hale getirip, Collapsible Switch’ini pasif hale getirin.
  14. Menu elementinin ebeveyni kolonu seçin, yatayda ve dikeyde ortalayın.

Bu işlemlerle birlikte Menü tasarımınız hazır. Artık ihtiyaç duyduğunuz ekranlarda Master Screen’i seçerek hazırladığınız menü tasarımını kullanabilirsiniz.

Dosyalar

Yardımcı kaynaklar

Sözlük