👋 Heya! Roman burada.
Ben bir çevrimiçi girişimci ve UI tasarımcısıyım. Figma için UI kitleri yapmaya başlayalı 3 yıldan fazla oldu. Setproduct.com böyle kuruldu. Bu web sitesinin misyonu, şirketlerin ve serbest çalışanların, ürünlerini çok daha hızlı piyasaya sürerek bir tasarımda paradan ve zamandan tasarruf etmelerine yardımcı olmaktır.
20 yılı aşkın süredir grafik tasarımcı olarak çalışıyorum. Son yıllarda her gün binlerce farklı bileşen, ekran ve uygulamaya baktım. Ve bunu yaptım çünkü bir hedefim vardı – uygulamalar ve bunların bileşenleri, şablonları vb. tasarlama konusunda kapsamlı bir kitap yapmak.
Son zamanlarda Avatarlar ile ilgili 1. bölümün yayınlanması sayesinde nihayet bu sürece başlayabildiğim için çok mutluyum. Çeşitli sosyal ağlarda olumlu geri bildirimler almak güzeldi, makalemden birkaç popüler tasarım kaynağında bahsedildi. Bu bana başladığım şeye devam etmem için motivasyon veriyor.
Okuyucularıma içerikten yararlanıp yararlanmadıklarını sorduğum bir anket oluşturma fikri de aklıma geldi. Önceden oluşturulmuş bir anket widget’ı kullandığım için sonuçları izlemek kolaydı.
https://setproduct.com/blog/avatar-ui-design
Sonuçlar oldukça ilham vericiydi! En az 44 kullanıcı makaleyle ilgilendi ve baştan sona okudu. Ve ne olduğunu tam olarak anlamayan en az iki kullanıcı vardı 🤣
Neyse şimdi yazının içeriğine geçelim. Burada size açıklayacağımız çok sayıda küçük UI detayına sahibiz.
👇 Hadi başlayalım!
Akordeon (Genişletme paneli olarak bilinir), dikey olarak yığılmış ve ilgili ek içeriği göstermek veya gizlemek için genişletilebilen/daraltılabilen seçeneklerin bir listesidir.
EssentialsContainer’ın StilleriKullanıcı Deneyimi ve Kullanılabilirlik Durum örnekleri 📱/💻
Devletler
Akordeon bileşeni için varsayılan durumlar aşağıdaki gibidir:
🔽 daraltılmış🔼 genişletilmiş🖱 üzerinde durulmuş👀 odaklanmış🚫 devre dışı
Chevron simgelerinin yerleşimi
Akordeon’a tıkladıktan sonra, Chevron, öğenin başarıyla genişletildiğini belirtmek için döner. Tekrar tıklandığında, Chevron’u ilk konumuna döndüren bir çökme meydana gelir.
Chevron yerine şu sembolleri de kullanabilirsiniz:
Ek semboller
Akordeonun sağ taraflı olduğu durumlarda anlamı vurgulamak için ek semboller kullanabilirsiniz. Ancak bileşenin içeriğini aşırı yüklemek mümkün olduğundan dikkatli olun.
Öğeleri görsel olarak ayırmak için bazen renkleri de kullanabilirsiniz:
Genişletilmiş öğe
Birden fazla Akordeon kullanılıyorsa, genişletilmiş durumun vurgulanması gerekir. Bu sayede kullanıcının hangi Akordiyon öğesinin açıldığını anlamasına yardımcı oluyoruz. Vurguyu nasıl stilize edeceğiniz aşağıda açıklanmıştır:
Yükseklik ile gölgeArka plan dolgusuAnahat kenarlığı
Yükseltinin beyaz ve açık gri yüzeylerde harika görünmesine rağmen, genişletilmiş Akordeon öğesinin arka planını %8 ila 12 opaklıkla doldurmak harika bir ektir. Beyaz yüzeylerle de iyi çalışır. Gerekirse, bir anahat kontur ekleyebilirsiniz.
İçerdiği Akordeon
Vakaların büyük çoğunluğunda, kapalı bir Akordeon kullanmak isteyebilirsiniz. Öğelerini biraz fark edilebilir bir ayırıcı ile bölün. Bu yaklaşım biraz dikey alan kazandıracaktır.
ayrılık ile akordeon
Bazen Akordeonlar önemli bir boşlukla ayrılabilir. Bu yaklaşım, dikey alandan tasarruf etmeniz gerekmediğinde iyidir.
Ön bilgi olarak altyazı
Alt yazı, kullanıcıyı Akordeon’u ortaya çıkarmadan önce ne beklemesi gerektiği konusunda bilgilendirmek için güzel bir çözümdür. Altyazılarla, Akordeon öğesi daraltıldığında kullanıcının seçimini de gösterebilirsiniz.
Ön bilgi olarak rozet
Rozet, Akordeon daraltılırken kaç öğenin seçildiğini göstermenin başka bir yoludur.
yardımcı metin
Bu özellik, Akordeon daraltıldığında kullanıcı seçimlerini organik olarak görüntülemek için kullanışlıdır. Özellikle mobil görünüm alanları için geçerlidir.
Tam genişlikte kullanım
Tam genişlikte Akordeonların kullanımı en yaygın uygulamadır.
yan menü
Alt menü öğelerini açmak için Akordeon’u Navigasyon çekmecesine entegre edin.
Filtreler
Kenar çubuklarının Akordeonlarla birlikte kullanımı, filtreleri, özellikleri ve daha fazlasını uygulamak için en yaygın modeldir.
taraflı menü
Mobil görünüm pencerelerine benzer şekilde, panolar, masaüstü uygulamaları vb. için Akordeon tabanlı yan gezinme gerçekleştirebilirsiniz.
Filtreler
Mizanpajınızın masaüstü yapısının ne olduğuna bağlı olarak, Akordeonlar (filtreler gibi) sola veya sağa yerleştirilebilir.