Menü Tasarımı

Web Arayüz Tasarımına Giriş

About this lesson

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.

Web Arayüz Tasarımına Giriş

Menü Tasarımı

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

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.

Kuika Platformunda yeni bir kullanıcı arayüzüne geçiyoruz ve Kuika Akademi kurslarımızı ve videolarımızı mümkün olan en kısa sürede güncelliyoruz.

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.