Kuika’nın Header elementi, uygulamanın veya sayfanın en üst kısmında yer alarak başlık, menü, logo, kullanıcı bilgileri ve aksiyon butonları gibi temel içerikleri barındırır. Kullanıcıların sayfa amacını hızlıca kavramasını sağlar ve navigasyonu kolaylaştırır.
Header elementi hem web hem de mobil uygulamalarda desteklenir.
Kullanım Alanları
Uygulama veya sayfa başlığı göstermek,
Logo ve marka kimliği eklemek,
Kullanıcı bilgileri veya profil ikonunu yerleştirmek,
Menü ve navigasyon barı oluşturmak,
Arama çubuğu veya aksiyon butonları eklemek vb.
Kullanım Senaryosu – E-Ticaret Uygulaması Header’ı
Bir e-ticaret uygulamasında Header:
Sol tarafta logo,
Orta kısımda arama çubuğu,
Sağ tarafta kullanıcı profili ve sepet ikonu içerir.
Bu sayede kullanıcı, uygulamanın hangi sayfada olduğunu görür, hızlıca arama yapar ve profil/sepet erişimine kolayca ulaşır.
UI Design İşlemleri
Header içine farklı elementler eklenebilir:
Row → İçeriği yatayda düzenlemek için
Icon → Menü, bildirim veya sepet ikonları için
Input → Arama çubuğu eklemek için
Image → Logo eklemek için
Content Menu → Navigasyon menüsü oluşturmak için
Senaryo Adımı Tamamlandığında
Ekranın üst kısmında sabit bir Header görünür.
Logo, arama çubuğu ve kullanıcı ikonları düzenli yerleştirilmiştir.
Uzun sayfalarda kaydırma yapılsa bile Header sabit kalır.
Kullanıcı hızlı şekilde arama yapabilir ve profil/sepet erişimine ulaşabilir.
Kısıtlamalar
Header sadece bir kez kullanılabilir.
Çok fazla element eklendiğinde dar ekranlarda karmaşık görünebilir.
İpuçları ve Best Practices
Mobilde sade, web’de daha detaylı Header tercih edin.
Marka kimliği için logoyu sol üstte konumlandırın.
