Kuika’nın Icon elementi, kullanıcı arayüzünde bilgiyi hızlı, sade ve etkili bir şekilde iletmek için kullanılan küçük ancak güçlü bir görsel elementtir. İkonlar, belirli bir işlevi, durumu veya temayı simgeleyen grafiksel işaretlerdir ve kullanıcı deneyimini hem estetik hem de işlevsel açıdan zenginleştirir.
Icon elementi, web ve mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Navigasyon Menülerinde: Alt menü (tabbar), yan menü (sidebar) veya üst menüde sayfalar arası geçişleri temsil etmek için ikonlar kullanılır (örneğin: Home, Settings, Profile).
Aksiyon Butonlarında: Silme, düzenleme, kaydetme, paylaşma gibi işlemleri kullanıcıya daha hızlı anlatmak için ikonlar butonlarla birlikte kullanılır.
Durum ve Uyarı Göstergelerinde: Başarı, hata, bilgi, uyarı gibi mesajların yanında ilgili ikonları göstererek anlaşılabilirliği artırır.
Formlarda ve Girdi Alanlarında: Arama çubuğundaki büyüteç ikonu, parola alanındaki göz ikonu veya takvim seçici ikonları gibi fonksiyonel yardımcı görseller.
Kart ve Liste İçeriklerinde: Favori ekleme (kalp), paylaşma (share), yorum (comment) veya daha fazla seçenek (three dots) gibi aksiyonları temsil eder.
Harita ve Konum Tabanlı Uygulamalarda: İşaretçi (pin), yön (arrow), konum (location) gibi anlamlı ikonlarla kullanıcıya hızlı yönlendirme sağlar.
Sosyal İçerik Gösterimlerinde: Beğeni, yorum, paylaşım, takip gibi etkileşim öğeleri için ikonların kullanımı yaygındır.
Başlık ve Bilgi Alanlarında: Bir bölümün amacını vurgulamak için başlık yanında veya içerik bloklarında ikon kullanılabilir.
2. Temel Özellikler
Geniş ikon kütüphanesi desteği: Kuika içerisinde sunulan çok sayıda hazır ikon arasından seçim yapılabilir. Böylece farklı işlevler için uygun grafiksel semboller hızlıca eklenebilir.
Boyut (size) özelleştirme: İkonun büyüklüğü kolayca ayarlanabilir. Farklı ekran boyutları veya tasarım gereksinimlerine göre ikonlar küçültülebilir veya büyütülebilir.
Renk (color) yönetimi: İkon rengi, tasarıma uygun olacak şekilde statik veya dinamik olarak belirlenebilir. Durum bazlı renk değişimleri (örneğin aktif/pasif) tasarlanabilir.
Hizalama seçenekleri: İkonun bulunduğu alan içindeki konumu (sol, sağ, merkez) kolayca ayarlanabilir.
Metin veya elementlerle birlikte kullanım: İkonlar label, button veya diğer elementler ile bir arada kullanılabilir; böylece daha açıklayıcı ve işlevsel arayüzler oluşturulabilir.
2.1. Icon Elementi Özellikleri
Icon elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.
Icon elementi, kullanıcı etkileşimini destekleyen bir bileşendir ve tıklama işlemine bağlı olarak aksiyon tetikleyebilir. Bu nedenle, Icon elementini seçtiğinizde ADD ACTION butonu aktif hale gelir ve aşağıdaki tetikleyici kullanılabilir:
onClick
Kullanıcı ikona tıkladığında çalışır. Bu tetikleyici, ikonun yalnızca görsel bir unsur olmasının ötesine geçerek etkileşimli bir element haline gelmesini sağlar.
Kullanım Senaryoları:
Bir sayfaya veya ekrana yönlendirme yapmak
Modal veya Drawer açmak
Bir listeyi filtrelemek
Bir değeri güncellemek (örn. favori ikonuna tıklayınca durum değiştirmek)
Bir API çağrısını tetiklemek
Menü yapılarında sekme değişimi gerçekleştirmek
3. Icon Elementi Nasıl Kullanılır?
Bu bölümde Icon elementinin, form tabanlı bir kullanıcı kayıt ekranında nasıl kullanıldığını örnek bir senaryo üzerinden ele alacağız.<
Senaryo: Sayaç Ekranında Icon Kullanımı
Sayaç ekranında kullanılan ikonlar, geri sayımın amacını ve durumunu kullanıcıya görsel olarak ifade eder. Icon elementleri; sayaç bilgisini destekleyici şekilde konumlandırılarak, sürenin aktif, devam eden veya sona yaklaşan bir durumu temsil ettiğini metin okumaya gerek kalmadan sezgisel biçimde kullanıcıya aktarır.
Adım 1 - UI Design Modülü İşlemleri
UI Design modülünü açın.
Sol panelden Elements > Display > Icon elementini seçin.
Icon boyutunu Icon > Styling > Text > Size > 100 px olarak ayarlayın.
Icon rengini Icon > Styling > Text > Color > HEX > D84293 olarak ayarlayın.
İkon üzerine gelindiğinde görünmesini istediğiniz içerik bilgisi için Icon > Properties > Tooltip > Fixed Value > “Geçen Süre” düzenlemesini yapın.
Preview
Uygulama test edildiğinde:
Her input alanı, ilgili ikonu ile birlikte görüntülenir.
Kullanıcı, hangi alana ne girmesi gerektiğini metin okumadan anlayabilir.
Şifre görünürlük ikonu sayesinde kullanıcı girişini kontrol edebilir.
Kayıt ekranı daha sade, anlaşılır ve modern bir görünüm kazanır.
4. Ortak Özellikler (Properties)
Icon elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Tutarlı ikon setleri tercih edin. Farklı sayfalarda aynı stile sahip ikonlar kullanmak arayüzün profesyonel görünmesini sağlar.
İkona metin desteği eklemeyi düşünün. Özellikle mobil arayüzlerde, ikonun altında kısa bir açıklama (“Profil”, “Ayarlar” vb.) kullanmak anlaşılabilirliği artırır.
6. Kısıtlamalar
İkonlar tek başına anlam ifade etmeyebilir. Bazı kullanıcılar yalnızca ikonla temsil edilen işlevi yorumlamakta zorlanabilir; gerektiğinde metin veya tooltip eklenmelidir.
Görsel stil farklı cihazlarda değişebilir. Web ve mobilde aynı ikonun boyutu veya hizalaması farklı algılanabilir, bu nedenle responsive tasarım kontrol edilmelidir.
onClick dışında başka aksiyon tetikleyicisi yoktur. Icon elementi yalnızca tıklama olayı üzerinden aksiyon çalıştırabilir.
