Simgeler ve piktogramlar sistemi

1) Üründeki simgelerin rolü

Simgeler, anlam ve durumun kompakt bir taşıyıcısıdır. Taramayı hızlandırır, yerden tasarruf sağlar ve desen tanımayı artırır. Ürün arayüzlerinde simge, metin ve renkleri değiştirmek yerine tamamlar.

1. Anlam> stil: Her simgenin net bir uygulama senaryosu olmalıdır.

2. Tutarlılık: tek ızgara, kontur, açılar, doldurma ritmi.

3. Kullanılabilirlik: simge tek sinyal değildir; Her zaman bir imza/araç ipucu/arya vardır.

4. Performans: Bir SVG boru hattı, sprite ve renk/boyut belirteçleri.

2) Izgara ve anahtar hatları

Temel çalışma yüzeyleri: 16 × 16, 20 × 20, 24 × 24 (ana), 32 × 32.
Anahtar çizgisi-Optik denge için 1-2 piksel'te yazılı bir daire/kare.
Piksel aralığı: tam sayı koordinatlarını çizin; Kontur 0'ın katıdır. 5 px (genellikle 1. 5 px 24 × 24).

• Köşegenler'daha kalın'daha ince görünür - 0 ekleyin. Sorunlu noktalarda inme için 25 px.
• Anahtar çizginin içindeki keskin köşelerin üst kısımlarını "çıngırak" yapmamak için 1 px hafifçe batırıyoruz.
• Daireler ve noktalar genellikle eşit görsel kütle için + 1 piksel ila çap gerektirir.

Tıklama bölgeleri: Etkileşimli bölge ≥ 40 × 40 piksel (mobil), ≥ 32 × 32 piksel (masaüstü); simge ortalanmıştır.

3) Dizgi stili

• kontur: 1. 5 px (24 × 24), 1. 25 px (20 × 20), 1 px (16 × 16).
• Linecap/linejoin: Dostluk için 'yuvarlak' veya teknik stil için 'gönye' (kılavuzda sabitlenmiştir).
• Geometride yarıçap açıları: 2-3 px (24 × 24 ile).

Dolgulu-Yoğun alanlar ve durum simgeleri için.
Çift ton, açıklayıcı boş durumlar için izin verilir, ancak kritik UI sinyalleri için izin verilmez.

• Anahat - temel durum.
• Doldurulmuş - varlık/tahsis.
• İki tonlu - dekoratif/yardım.

4) Renk ve Kontrast (WCAG)

Temel mod 'currentColor' aracılığıyla tek renklidir: simge metnin/bağlamın rengini devralır.

• 'icon. Hata '↔ arka plan ≥ 3:1, metinle imzalanmış (sadece renk değil).
• 'icon. Yüzeyde '↔ arka plan ≥ 3:1; Küçük boyutlar için hedef 4'tür. 5:1.
• Renk kalıplarında, 'on-' renkleri kullanın (renk sisteminden otomatik kontrast).

5) Durumlar ve etkileşimler

Varsayılan/Hover/Aktif/Engelli/Odak: fark sadece renkte değil - opaklık/dolgu/kalınlık/arka plan hapını değiştirin, odak halkası ekleyin.
Rozetler - Rakam kontrastı ≥ 4. 5:1 ölüye; Rakam boyutu ≥ 10-11 piksel.
Simgeleri değiştir (favoriler, beğen): sadece rengi değil, dolguyu ve/veya iç noktayı da değiştir.

6) Simge + metin

Simgeler, önemli eylemlerdeki etiketlerin yerini almaz. Minimum çift: simge + kısa metin (veya 'aria-label'tarafından araç ipucu). Listelerde ve tablolarda simge, metnin ve satır taban çizgisinin başlık yüksekliğiyle hizalanır.

7) Kullanılabilirlik (A11y)

Dekoratif simgeler için:' role =" img" aria-hidden =" true"' veya akıştan erişilebilirliği kaldırın.
Anlamsal için: '<svg role = "img" aria-labelledby ='id ">' + '<title id ='id"> Description </title>' veya 'aria-label'.
Simge, durumun tek taşıyıcısı olmamalıdır: metin/ipucu/ikonografik desen (form, kontur) ekleyin.
Metin boyutu ve imza kontrastı WCAG (normal ≥ 4'e karşılık gelir. 5:1).

8) SVG boru hattı ve performansı

Neden SVG: vektör netliği, CSS ile şekillendirme, optimizasyon ile hafif.

• Ana dosyaları Figma'da saklayın, SVG'ye seçeneklerle dışa aktarın: ekstra'grup 'olmadan, varsayılan olarak' dolgu kuralı 'olmadan,' viewBox 'özniteliğiyle ve sabit' genişlik/yükseklik 'olmadan (CSS'de geçersiz kılma).
• SVGO (proje profili) üzerinden çalıştırma: meta verileri silme, koordinatları azaltma, yolları birleştirme.
• Simge fontlarını terk etme - erişilebilirlik ve oluşturma sorunları.

1. SVG sprite:

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

Ucuz tekrarlar, − bazı boru hatlarındaki 'çarpma genişliğini' kolayca değiştiremezsiniz.
2. Inline-SVG (React bileşeni): stil ve sahne esnekliği, ağaç sallama.
3. Harici '<img>' - sadece dekoratif/açıklayıcı için.

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) Bileşen API'si (React örneği)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

• Varsayılan olarak, 'size = "1em've' stroke = 1. 5`.
• Eğer 'dekoratif'ise,' aria-hidden = 'true' ekleyin.