UI tasarımında uyulması gereken 10 ikonografi kuralı

0
60

Simgeler, doğru kullanıldığında UI tasarımlarınıza hem biçim hem de işlev ekler. Hemen tanınarak kullanıcı etkileşimlerini hızlandırabilirler ve ayrıca kullanıcı arayüzü tasarımlarınıza stil ve görsel ilgi katabilirler.

Simgeleri kullanmanın karmaşık olması gerekmez. Doğru şekilde yapıldığında birkaç iyi yerleştirilmiş simge bile kullanıcı deneyiminizi iyileştirebilir. Bir sonraki UI tasarımınıza uygulamadan önce bu ikonografi ipuçlarına ve en iyi uygulamalara göz atın.

Muhammed Fakih tarafından

1. Simgeleri basit tutun

Simge tasarımlarınızı fazla karmaşık hale getirmeyin. Bunları mümkün olduğunca basit tutun, özellikle daha küçük boyutlarda. En iyi simgeler, kullanıcıların anında tanımlayabileceği basit şekiller ve piktogramlardır.

2. Onları tanınır hale getirin

Simgeler hemen tanınabilir olmalıdır. Kullanıcılar bir simgenin ne anlama geldiğini merak ederse, amaçlarını bozar. Kullanıcıların bir simgenin ne olması gerektiğini merak etmesine izin vermeyin, çünkü bu yalnızca simgenin amacının ne olduğunu merak etmelerine yol açarak genel kullanıcı deneyimine zarar verir.

UI simgeleri monom tarafından

3. Simgelere anlam verin

Simgeler için kullanılan görseller, kolayca anlaşılabilecek anlamlara sahip olmalıdır. Anlam, ana sayfa için bir ev simgesi gibi doğrudan simgenin işlevine bağlı olmalıdır. Metaforlar bazen kullanıcılar tarafından kolayca çözülürken, daha gerçek simgelerin tanınması genellikle daha hızlıdır.

4. Ölçeklenebilir olduklarından emin olun

Simgeler genellikle küçük boyutlarda kullanılır, ancak bazen daha büyük sürümleri (hatta daha küçük olanları) kullanmak istediğiniz kullanım durumları bulabilirsiniz. Bu nedenle, görüntülendiklerinden bağımsız olarak simgelerinizin iyi göründüğünden emin olun. Boyut büyüdükçe giderek daha karmaşık simgeler kullanabilirsiniz, ancak bunların çok karmaşık olmasına izin vermediğinizden emin olun.

UI Simge tasarımı Açarak

5. Simgeleri erişilebilir hale getirin

Simgelerinize eşlik edecek metin etiketleri kullanmıyorsanız, ekran okuyucu kullanan kişilerin işlevlerine erişmeye devam edebilmeleri için uygun alt etiketleri uyguladığınızdan emin olun.

Benzer bir çizgide, simgelerinizin yeterli kontrasta sahip olduğundan ve erişilebilir olması için yeterince büyük olduğundan emin olun. Ayrıca, ince motor kontrol sorunları olan kullanıcılar için yine de istenen alana dokunmak için simgelerin etrafındaki dokunma hedeflerinin yeterli olduğundan emin olmalısınız.

6. Renk konusunda dikkatli olun

Genel bir kural olarak, simgeler tek bir renk olmalıdır. Ayrıca, onları daha kullanışlı hale getirmeye doğrudan katkıda bulunmadıkça, simgelerinizin her biri için farklı renkler kullanmayın. Çoğu durumda, etkin bir simgeyi belirtmek için farklı bir renk kullanabilirsiniz, geri kalanı ise başka bir renktir.

UI tasarımı için simge tasarımı zsolt hutvagner tarafından

7. Daima vektörleri kullanın

Özel simgeler oluştururken, bunları her zaman vektör görüntü biçiminde oluşturmalısınız. Bu şekilde netlik veya canlılık kaybetmeden kolayca ölçeklenebilirler. Bunları dijital ürünlerde kullanmak üzere kaydederken, simgenin ölçeklenebilirliğini ve şeffaflığını koruduğu için SVG dosya türü en iyi seçimdir.

SVG’ye bir sonraki en iyi alternatif, şeffaflığı koruyacakları ve kalite bozulmayacakları için onları kayıpsız PNG dosyaları olarak kaydetmektir.

8. Simgeleri tek tip tutun

Simgeleriniz stil ve boyut olarak tek tip olmalıdır. Tutarlı bir stili olmayan simgelerin kullanılması, kullanıcıların kafasını karıştıracak ve arayüzünüzün dağınık görünmesine neden olacaktır. Aynı boyutta olmayan simgelerin kullanılması da benzer bir etkiye sahip olacaktır.

Boyut söz konusu olduğunda, görsel ağırlık tam piksel boyutlarından daha önemlidir.

Boyut söz konusu olduğunda, görsel ağırlık tam piksel boyutlarından daha önemlidir. Bu amaçla, daha ağır simgelerden biraz daha büyük görsel ağırlığa sahip simgeler tasarlayabilirsiniz.

Örneğin, yıldız ve kare simgelerini karşılaştırın. Bunları tam olarak aynı piksel boyutlarında yaparsanız, daha sağlam görünümü nedeniyle kare aslında daha büyük görünecektir. Yıldızın kollarını karenin boyutlarının biraz ötesine uzatarak, aynı boyutta görünen simgeler yaratırsınız. Doğru yerleştirme ve aralığın korunması için bunları aynı boyutta kaplara koyduğunuzdan emin olun.

monoline simgeler MyIcons tarafından

9. Açıklığa öncelik verin

Kullanıcılar bir simgenin ne olduğunu, neyi temsil ettiğini merak etmeye bırakılmamalıdır. Kullandığınız görüntülerin kullanıcılar tarafından hemen fark edilebilir olduğundan ve onların simgelerinizin ne olması gerektiğini anlamaya çalışmadıklarından emin olun.

Ayrıca simgelerinizin temsil ettiği işlevlerin net olduğundan emin olmak istersiniz. Evrensel simgeler dışında herhangi bir şey kullandığınızda (bunlara birazdan geleceğiz), simgenin ne yaptığını açıklamak için metin etiketleri eklemeyi düşünün. Yeni kullanıcılar için inanılmaz derecede faydalıdır ve kullanıcıların farklı simgelerin ne yaptığı konusunda kafasının karışmamasını sağlar.

10. Evrensel simgeleri kullanın

İkonografi söz konusu olduğunda, tekerleği yeniden icat etmeye çalışmayın. Elbette, benzersiz, yaratıcı simgeler, kullanıcı arayüzünüze görsel ilgi katabilir. Ancak kullanıcılar bunları anlamıyorsa veya deşifre etmek zorsa, genel kullanıcı deneyimine zarar veriyorsunuz.

Genel işlevler için, insanların tanıdığı simgelere bağlı kalın. İşte evrensel olarak tanınan simgelere birkaç örnek:

Ana sayfa için ev simgesi Bir hamburger menüsünü belirtmek için üç yatay çizgi Arama için bir büyüteç İçeriği düzenlemek veya değiştirmek için bir kalem Bir şeyi beğenmek için bir başparmak yukarıya veya bir kalp Bir şeyi beğenmek için bir kalp veya bir yıldız Bir yer işaretini kaydetmek için bir yer işareti Bir ok geliyor bir şeyi paylaşmak için bir karenin tepesinden dışarı bir şey indirmek için bir kareye doğru aşağıyı gösteren bir ok Ayarlar için bir dişli veya dişli Bir şeyin güvenli olduğunu göstermek için bir kilit simgesi

İçeriğe özgü başkaları da vardır (medya yürütücü kontrolleri için şekiller gibi), ancak bu, başlamak için iyi bir yerdir. Listede belirtilen işlevleri kullanıyorsanız, evrensel olarak tanınan bir simge kullanmak genellikle en iyisidir. Evrensel bir simgeden saparsanız, kullanıcılara yardımcı olmak için bir metin etiketi eklediğinizden emin olun.

evrensel simgeler Anton Lapko tarafından

Başarılı UI simgeleri tasarlamak için bu kuralları kullanın

Her UI tasarımının simgeler içermesi gerekmez, ancak doğru kullanıldığında, web siteleriniz ve diğer dijital ürünleriniz için ek estetik çekicilik sağlarken kullanıcının deneyimini iyileştirebilirler. ■

Courtside blogumuzda daha fazla Süreç hikayesi bulun. Bir önerin var mı? story@dribbble.com ile iletişime geçin.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz