1. Countup Elementine Genel Bakış

Kuika’nın Countup elementi, kullanıcı arayüzünde sayısal değerlerin belirli bir başlangıç noktasından hedef değere doğru dinamik olarak artmasını sağlar. Özellikle istatistiksel bilgiler, başarı ölçütleri, kullanıcı sayıları, satış rakamları veya görsel olarak vurgulanmak istenen metriklerin etkileyici bir şekilde sunulması için kullanılır.

Countup, sayıyı belirli bir süre içinde, akıcı bir animasyonla artırır. Kullanıcıların dikkatini çekmek ve bilginin önemini vurgulamak için güçlü bir görsel etki sağlar.

Countup elementi yalnızca web uygulamalarında desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Dashboard metrikleri: Toplam kullanıcı, toplam satış, aktif sipariş sayısı gibi anlık artan değerlerin gösterimi.
• İstatistik sunumları: A/B test sonuçları, başarı oranları, rapor özetleri.
• Kampanya performans ekranları: İzlenme sayısı, tıklanma sayısı, geri dönüş oranları.
• Etkinlik sayaçları: Katılımcı sayısı, toplam ziyaret, uygulama içi kazanımlar.
• Progress göstergeleri ile entegrasyon: Countup ile animasyonlu veri artışı, görselleştirmenin etkisini artırır.
• Pazarlama sayfaları: “1.000.000+ kullanıcı” gibi dikkat çekici artış animasyonları.

2. Temel Özellikler

• Belirli bir başlangıç değerinden hedef değere kadar sayısal artışı animasyonlu şekilde gösterir.
• Kullanıcının dikkatini sayısal değişime çekerek, verinin daha anlaşılır ve etkileyici şekilde algılanmasına yardımcı olur.

2.1 Countup Element Özellikleri (Properties) 

Countup elementi, diğer birçok UI elementinin aksine özelleştirilebilir bir Properties paneli sunmaz. Bu nedenle, başlangıç değeri, bitiş değeri, animasyon süresi gibi ayarlar manuel olarak kod içinde veya dinamik veri bağlama yoluyla yönetilir. Bu yapı, elementi sade ve performans odaklı bir hale getirir.

Countup’ın sunduğu temel özellikler şunlardır:

• Animasyonlu Sayısal Artış: Belirlediğiniz başlangıç değerinden hedef değere kadar görsel bir artış animasyonu oluşturur.
• Dashboard Uyumlu Kullanım: KPI, istatistik, performans değeri veya genel metrikleri vurgulamak için kullanılabilir.
• Kolay Entegrasyon: İçine eklenen Label gibi elementlere dinamik değer bağlanarak kullanım sağlanır.

2.2. Countup Elementine Eklenebilen Aksiyonlar

Countup elementi, yalnızca görsel bir sayısal artış animasyonu sunduğu için herhangi bir kullanıcı etkileşimiyle tetiklenen aksiyonları desteklemez. Bu nedenle, elementi seçtiğinizde ADD ACTION butonu görünmez ve Countup’a özel bir event eklenemez.

Countup’ın aksiyon yapısına ilişkin önemli noktalar:

• Kullanıcı etkileşimine bağlı tetikleyici yoktur. Countup bir buton, tablo veya form alanı gibi tıklama/odaklanma olayları üretmez.
• Animasyon, harici bir aksiyonla dolaylı olarak tetiklenebilir. Örneğin: Bir sorgu çalıştıktan sonra gelen yeni değer, Countup animasyonunu otomatik olarak yeniler. Ancak bu tetikleme Countup üzerinden değil, veri bağlandığı element üzerinden gerçekleşir.

3. Countup Elementi Nasıl Kullanılır? 

Bu bölümde Countup elementinin uçtan uca kullanımını örnek bir senaryo üzerinden ele alacağız. 

Senaryo: Uygulama İstatistiklerinin Görselleştirilmesi

Bir sınav uygulamasında, sınav süresinin daha etkileyici biçimde sunulması hedeflenir. Senaryoda:

• Countup elementi ekrana yerleştirildiği anda otomatik olarak çalışır.
• Sayı 0’dan başlayarak animasyonla yukarı doğru artar.
• Herhangi bir veri kaynağına veya aksiyona bağlanmaz.
• Tamamen görsel bir etki sağlar.
  
  

Adım 1 – UI Design Modülünde Countup Elementini Ekleme

• UI Design modülünü açın.
• Countup animasyonunun gösterileceği ekranı seçin (örn. Ana Sayfa / Dashboard).
• Sol panelden Elements bölümüne gidin ve Elements > Container > VerticalStack elementini sayfaya sürükleyip bırakın.
• Vertical Stack elementini VerticalStack > Styling > Layout > Align > Yatayda Ortala olarak ayarlayın.
  

• Vertical Stack içerisine Elements > Display > Icon elementini sürükleyip bırakın.
• İkon şeklini Icon > Properties > Icon > “query_builder” olarak ayarlayın.
  

• Icon boyutunu Icon > Styling > Text > Size > 100 px olarak ayarlayın.
• Icon rengini  Icon > Styling > Text > Color > HEX > D84293 olarak ayarlayın.
  

• Vertical Stack içerisine Elements > Display > Countup elementini sürükleyip bırakın.

Countup elementi sayfaya eklendiği anda otomatik olarak çalışmaya başlar.

Adım 2 – Countup Kullanım Davranışı

• Countup elementi varsayılan olarak 0’dan başlayarak artış animasyonu gösterir.
• Animasyon, sayfa yüklendiğinde otomatik tetiklenir.
• Herhangi bir pageInit Action, SQL Action veya C# Action tanımlanmasına gerek yoktur.

Preview

Uygulama test edildiğinde, kullanıcı sınav ekranına girdiği anda Countup elementi animasyonu otomatik olarak başlar. Değer, 0’dan başlayarak artış animasyonu ile yükselir ve kullanıcıya dinamik bir görselleştirme sunar.

‍

4. Ortak Özellikler (Properties)

Countup 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:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Countup’ı öne çıkarılmak istenen KPI veya metriklerde kullanın. Örneğin: toplam ziyaretçi, satış adeti, başarı oranı, tamamlanan görev sayısı gibi hızlı okunabilir bilgiler için kullanılabilir.

6. Kısıtlamalar

• Countup elementi aksiyon desteklemez. ADD ACTION butonu görünmez ve Countup herhangi bir OnClick/OnChange tetikleyicisine sahip değildir.
• Web ortamı için tasarlanmıştır. Countup elementi yalnızca web uygulamalarında desteklenir; mobil uygulamalarda çalışmaz.