Tasarım Simgeleri olarak simgeler nasıl uygulanabilir?

Tasarım Simgelerinden bahsederken daha az dikkat çekmelerine rağmen, simge simgeleri çok güçlü olabilir.

Diğer herhangi bir belirteç türü gibi, simge belirteçleri de seviye 1 ve seviye 2 olmalıdır, seviye 3 isteğe bağlıdır.

Simge belirteçleri söz konusu olduğunda bahsetmeye değer en az 2 önemli avantaj vardır:

1. Her ikonun rolü üzerine daha titiz bir düşünce.
2. Daha yapılandırılmış, ölçeklenebilir ve bakım yapılabilir simge seti.

Şu anda geliştirmekte olduğumuz ürün için bu simgeleri seçtiğimizi düşünün.

Onlara nasıl isim verirsiniz?

Sanırım en azından bazılarınız semantik/rol/işlevini seçecektir, yani: Ev, Favori/Beğen, Çöp Kutusu, Düzenle ve Bildirimler.

Bu hiç de yanlış olmasa da, bunu yapmanın göstermelik bir yolu değil.

Tasarım Simgelerinin birinci ve ikinci seviyelerine bakalım:

1. Referans Jetonları

Önce silahlarınızı seçin, canavarlar sonra gelir.

Burası seçimlerimizi belirlediğimiz yer, Örn:

• Bu kırmızı #ff0044'ü seçiyorum ve ona "color.chills" adını vereceğim.
• Comic Sans'ı seçiyorum ve buna "font.lovely" adını vereceğim.

• Bu evi seçiyorum ve adını “icon.100” koyacağım.

• Bu evi seçiyorum ve adını “icon.house” koyacağım.

Gördüğünüz gibi, renkler veya simgeler gibi belirli referans belirteçlerini adlandırmak için iki "okul*" vardır.

*Aslında böyle bir okul yok, sadece referans simgelerini adlandırmak için sıklıkla kullandığım iki yola daha sofistike bir dokunuş vermek istedim.

“ Semantik” okul:

• Bu evi seçiyorum ve adını “icon.house” koyacağım.
• Bu kalbi seçiyorum ve ona “ikon.kalp” adını vereceğim.
• Bu çöp kutusunu seçiyorum ve ona “icon.trash-can” adını vereceğim.
• Bu kalemi seçiyorum ve adını “icon.pencil” koyacağım.
• Bu zili seçiyorum ve ona “icon.bell” adını vereceğim.

• Bu evi seçiyorum ve adını “icon.100” koyacağım.
• Bu kalbi seçiyorum ve ona “icon.120” adını vereceğim.
• Bu çöp kutusunu seçiyorum ve ona “icon.155” adını vereceğim.
• Bu kalemi seçiyorum ve adını “icon.156” koyacağım.
• Bu zili seçiyorum ve ona “icon.172” adını vereceğim.

Lehte ve aleyhte olanlar

" Agnostik " iletişim kurmak ve ezberlemek için çok soyutsa, " anlamsal " referans belirteçlerinin (AKA temel belirteçleri, ilkel belirteçler, küresel belirteçler) kök agnostisizmine aykırıdır.

Referans belirteçleri genellikle "font-weight.100" veya "space.400" olarak adlandırılır. Renkleri ve simgeleri “color.blue” ve “icon.house” olarak adlandırmak taksonomiye uymaz, değil mi?

"icon.100", içindeki simgeyi atmama izin verirken, "icon.house" ile çalışmak 1000 kat daha sezgisel. Yine de ilk seçenek olan “ agnostik ” i kullanmayı tercih ediyorum . İşte nedeni:

Referans belirteçlerimin boş kutular olmasını istiyorum. İçine ne koyarsam koyayım kutuyu şekillendirmesin. Bugün bu kutulardan birini kalp simgesiyle doldurursam, yarın herhangi bir adlandırma çakışması olmadan onu bir yıldıza çevirebilmek istiyorum.

"Anlam" belirteçlerin ikinci seviyesinde, "sistem belirteçlerinde" başlayacaktır.

2. Sistem Jetonları

İşlerin daha da ilginçleştiği yer burası: Kararlar.

Kararlar derken şunu kastediyorum:

• Home için simgem olarak " rt.icon.house " veya " rt.icon.100 "(rt = referans belirteçleri) kullanmaya karar verdim , yani " st.icon.home " (st = sistem belirteçleri).
• Favori simgem olarak “ rt.icon.heart ” veya “ rt.icon.120 ” kullanmaya karar verdim , yani “ st.icon.favorite ”.
• Sil için simgem olarak " rt.icon.trash-can " veya " rt.icon.155 " kullanmaya karar verdim , yani " st.icon.delete ".
• Düzenleme için simgem olarak “ rt.icon.pencil ” veya “ rt.icon.156 ” kullanmaya karar verdim , yani “ st.icon.edit ”.
• Bildirimler için simgem olarak “ rt.icon.bell ” veya “ rt.icon.182 ” kullanmaya karar verdim , yani “ st.icon.notifications ”.

Muhtemelen, geliştiricileri veya diğer tasarımcıları bilgilendirmek için kullanacağınız sistem belirteçleri, kararlar olacaktır: "Hey John, lütfen modal için st.icon.close kullanın".

1. Her ikonun rolüne dair daha titiz düşünceler.

Şimdi, iki ana avantajıma geri dönelim ve bu küçük alıştırmadan sonra, simgelerin seçimi ve atanmasının olağanüstü derecede hassas ve titiz bir süreçten geçtiğini görebilirsiniz.

Kümenize dahil etmek istediğiniz simgeleri dikkatli bir şekilde seçmekle kalmayacak, aynı zamanda onlara tek bir anlamsal işlev atayacak ve böylece fazlalığı ve tutarsızlığı azaltacak ve daha verimli seçimler ve kararlara yol açacaksınız.

2. Daha yapılandırılmış, ölçeklenebilir ve bakımı yapılabilir simge seti.

Bu avantajı açıklamak için tekrar eden bazı durumları hatırlayalım:

Sorun 1: Çarpı simgesini beğenmediniz ve daha ince bir simgeyle değiştirmek istiyorsunuz.

Çözüm: Referans kartınızı açın ve iç şekli değiştirin/ayarlayın.

Sonuç: Bu referans belirtecine işaret eden tüm sistem belirteçleri şimdi güncellenecektir, yani:

• Sil (bir öğeyi silme eylemi için)
• Kaldır (bir öğeyi kaldırma eylemi için)
• Kapat (bir öğeyi kapatma eylemi için).
• Hata (bir hata mesajıyla birlikte)

Çözüm: Yeni bir referans belirteci " icon.trash " oluşturursunuz, ardından " icon.delete " sistem belirtecini yeni "icon.trash" öğesini hedefleyecek şekilde güncellersiniz . Bu, Kaldır, Kapat ve Hata öğelerini olduğu gibi tutacaktır .

Sonuç 1: “ icon.delete ” kullanan herhangi bir bileşen artık bir çöp kutusu gösterecektir.

Gördüğünüz gibi, tüm bu potansiyel esneklik bir noktada işe yarayacak. Öte yandan, ön çalışmanın maliyeti önemli değildir.

Özetlemek için…

Bir rt.icon'u değiştirebilir ve o simgeyi hedefleyen tüm sistem ve bileşen belirteçlerini etkileyebilirsiniz. EG Bir kalp simgesini yıldız olarak değiştiriyorum.

Bir st.icon'u değiştirebilir ve o semantik öğeyi hedefleyen tüm bileşen belirteçlerini etkileyebilirsiniz. EG "Favori" artık bir yıldızla temsil edilirken kalp "beğenmek" için kullanılıyor.

Bir ct.icon'u değiştirebilir ve yalnızca çok özel bir bileşeni etkileyebilirsiniz. EG Karanlık modda kart bileşeni, "favori" için açık modda kullanılan çerçeveli yıldız yerine içi dolu bir yıldız kullanacaktır.

Figma Jetonları

Figma Tokens eklentisi yakın zamanda “varlıkları” desteklemeye başladı. Bununla, logonuzu, görüntülerinizi ve ikonografinizi uzak bir depoda kolayca saklayabilir ve eklenti aracılığıyla ona bağlantı verebilirsiniz. Bu, Figma'daki bir şekle tek tıklamayla bir görüntü eklemenizi sağlarken, bir yaşam tarzı kılavuzunun saklama yerini bildirmesini sağlar.

Yine de, Figma Tokens ekibine göre, halen devam eden çalışmalar olduğu için özelliği kullanmak için çok erken olabilir:

"Şu anda görüntü kaynağının kendi CORS (Kaynaklar Arası Kaynak Paylaşımı) doğrulamasına sahip olması gerekiyor. Bazı web siteleri bunu zaten uygulamıştır (örn. Unsplash), ancak aksi takdirde bunu bir CORS proxy'sinin arkasına koyabilirsiniz. CORS hakkında daha fazla bilgiyi burada bulabilirsiniz . Gelecekteki bir sürümde bir CORS proxy'si ekleyeceğiz." İşte makalenin tamamı.