Tek arayüz dili

1) Tek bir arayüz dili nedir ve neden gereklidir?

Birleşik Arabirim Dili (NEI), tasarımcılar, mühendisler, analistler ve içerik yazarları tarafından paylaşılan ortak bir kavram, görsel kurallar ve etkileşim sistemidir.

• Tutarlılık - Ürünler ve ekipler arasında aynı bileşenler ve terimler.
• Hız: hızlı yapılar, daha az holivar, daha hızlı onboarding.
• Kalite: tutarlı UX kalıpları, kullanılabilirlik "varsayılan olarak".
• Ölçeklenebilirlik: "UI hayvanat bahçesine" ayrılmadan güvenli evrim.

2) Tek bir dilin katmanları

1. Belirteçler (renk, tipografi, boyutlar, gölgeler, girintiler, yarıçaplar, animasyonlar).
2. Bileşenler (düğmeler, giriş alanları, tablolar, grafikler, modaller, tostlar, sekmeler).
3. Desenler (formlar, doğrulama, adım adım sihirbazlar, listeler/tablolar, bildirimler).
4. İçerik (mikro metin yazarlığı, terminoloji, hata mesajları).
5. İkonografi ve resimler (aile, stil, boyutlar ve çizgiler).
6. Kullanılabilirlik ve i18n/RTL (A11y kuralları, çevrilebilirlik, yerel ayarlar).
7. Süreçler (sürümler, kılavuzlar, yorumlar, linters, vitrinler ve örnekler).

3) Tasarım belirteçleri (dışavurumculuğun temeli)

Belirteçler, tüm ürünlerde yeniden kullanılan değerler olarak adlandırılır.

3. 1 Belirteç yapısı (örnek)

json
{
"color": {
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"accent": { "primary": "#2F6BFF", "warning": "#FF9F1A", "critical": "#E53935", "success": "#2EAE60" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 },
"radius": { "sm": 8, "md": 12, "lg": 16, "pill": 1000 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "sm": 12, "md": 14, "lg": 16, "xl": 20 } },
"motion": { "duration": { "fast": 120, "base": 200, "slow": 320 }, "curve": { "inout": "ease-in-out" } }
}

3. 2 Adlandırma belirteçleri

Genelden özele: 'Renk. aksanlı. Birincil ', не' birincil 'Mavi'.
Adlandırmada bir markaya bağlı olmadan (marka bir token adı değil, bir konudur).
Geçişler: 'fg. Sessiz ',' fg. Birincil ',' fg. Ters '. Sistem olmadan adına ('blue500') parlaklık kodlamayın.

3. 3 Tema belirteçleri

Açık, koyu, zıt: değerleri değiştirir, isimleri değil.
Temalar - geçersiz kılma katmanı, UI tutarlı kalır.

4) Bileşenler: Sözleşme, Durumlar, Kullanılabilirlik

Bileşen = Görsel + Davranış + Sahne Sözleşmesi + A11y.

4. 1 Düğme sözleşme örneği

ts type ButtonProps = {
kind: "primary"      "secondary"      "tertiary"      "danger";
size: "sm"      "md"      "lg";
icon?: "plus"      "download"      "trash";
disabled?: boolean;
loading?: boolean;
ariaLabel?: string;
onClick?: (e: MouseEvent) => void;
};

Durumlar: 'default/hover/active/focus/disabled/loading'.
Kullanılabilirlik: odak halkası, hedef boyutları ≥ 40-48 px, geçiş için 'aria-preslenmiş'.

4. 2 Bileşen garantileri

Kararlı boyutlar (çizgi yüksekliği, dolgular).
Kutudan erişilebilirlik (roller/arya, klavye, kontrast).
Değişmezler: Alanın içindeki hata her zaman en altta ve 'aria-description by'ile.

5) UX kalıpları (tekrarlanabilir mantık)

Formlar: sol/üst etiket, yer tutucu ≠ etiket, yan yana + özet hataları, giriş maskeleri ve istemler.
Modaller: bir ana CTA, 'Esc' kapanır, odak tuzağı, odak geri dönüşü.
Tablolar/listeler: sıralama, yapışkan başlık, sayfalama, dışa aktarma.
Filtreler: açık Uygula düğmesi, sıfırlama, kaydedilmiş hazır ayarlar.
Bildirimler: Tost ≤ 3-5 s, odakta duraklama, 'rol =' durum/uyarı ''.
Panolar: en iyi içgörüler - bağlam - grafikler - CTA.

6) Ortak terminoloji ve mikro metin yazarlığı

6. 1 Sözlük

Tek bir iş ve UX terimleri sözlüğü bulundurun. Her arayüz makalesi onu referans alır.
Çiftler için - aramada eşanlamlı olarak bir kelime ("cüzdan" vs "denge"), ikincisi seçin.

6. 2 Metnin kuralları

Kısaca ve konu hakkında; jargondan kaçının.
Hatalar - ne yapılacağını açıklayın: "YYYY-MM-DD biçiminde tarihi belirtin".
Başlıklar isimlerdir; düğmeler - fiiller ("Kaydet", "İptal").
Tutarlı birimler: UTC veya yerel ayardaki tarih/saat, kodlu para birimleri (EUR, USD).

7) İkonografi ve illüstrasyonlar

Aile izomorftur: tek açı, çizgi kalınlığı, ızgara 24 × 24.
Statüler ve semantik: renk - ikincil; Şekil/simge + metin - birincil.
Ölçeklendirme: Piktogramlar farklı yoğunluklarda "yüzmez" (1 ×/2 ×/3 ×).

8) Kullanılabilirlik (A11y) ve yerelleştirme (i18n/RTL)

Bileşenler WCAG AA'ya tabi tutulur: kontrast, klavye navigasyonu, odak, 'tercih edilen-azaltılmış hareket'.
Çevrilmiş dizeler - kaynaklarda, kodda değil. Yer tutucular ve sayı/tarih formatı yerelleştirilebilir.
RTL: yansıtma simgeleri, doğru Sekme sırası, klavyeden DnD mantığı.

9) Sayılar, tarihler, para birimleri ve formatlar

Tarihler/saat: ISO-8601, gerçek zaman noktası - UTC; kullanıcı - yerel ayar.
Para birimi: küçük birimler/ondalık dizeler; her zaman bir kod belirtin (örneğin, "€12. 34" veya "12. 34 EUR" - yerel ayarla).
İlgi: '12. %3've '+ 1 noktaları. 2 pp 'açıkça ayırt.
Yuvarlama: önemli basamaklara; Büyük sayılar için'k/m ".

10) Yönetişim: Roller, Eserler, Kanallar

Tasarım Dili Konseyi (DLC): Belirteç/bileşen sahipleri, RFC iddiaları.

• İçerik Merkezi (Figma/Kod) + Örneklerle Canlı Katalog.
• Dokümantasyon: kılavuzlar, desenler, A11y, içerik kılavuzu.
• Tarihleri, seviyeleri olan Changelog (eklendi/değiştirildi/silindi/kaldırıldı/düzeltildi).
• Kanallar: haftalık tasarım lavabosu, Slack kanalı, uygulama vitrinleri.

11) Sürüm ve evrim

Bileşen paketi için SemVer: 'MAJOR. MINÖR. PATCH '.
MINOR - katkı maddesi: yeni belirteçler, varsayılanları olan aksesuarlar, yeni bileşenler.
MAJOR - kırma: sahne kaldırma, semantik değiştirme - geçiş kılavuzları.
İndirimler: uyarılar, 90 gün ≥ pencere, uyumluluk bayrakları.

12) Linters ve otomatik kontroller

UI-linter: belirteçlerin dışındaki yasak renkler, anti-desenler (düğme-diva, devre dışı anahat).
A11y-checks: kontrast, roller/arya, odak, klavye.
i18n-linter: Koddaki "sert" çizgiler, yanlış yer tutucular.
Ekran görüntüsü testleri: bileşenlerin görsel regresyonları.
Görselleştirme API sözleşmeleri (varsa): veri türleri, aralıklar, imzalar.

13) Bileşen vitrini (hikaye kitabı/sandbox)

Prop denetimleri, kod, durumlar, A11y-checker ile canlı örnekler.
"Tarifler": kayıt formu, adım 3 sihirbazı, masa + filtreler, modalka + tost.
"Yerellerin sanal alanı": anahtarlama dili/formatları/RTL.

14) Adlandırma ve yapı desenleri

14. 1 Bileşenler (BEM/semantik, CSS örneği)

.btn/basic/
.btn--primary/view/
.btn--danger
.btn--lg/size/
.btn __ icon/part/

Kodda - sahne monoton isimleri: 'boyut','tür ',' devre dışı ',' Tıkla '.

14. 2 Kitaplık dosya yapısı

/tokens
/components
/button
/input
/modal
/patterns
/docs
/changelog

15) Anti-desenler

Belirteçlerin dışındaki "serbest" renkler/girintiler.
Yinelenen bileşenler: "ButtonV2," "PrimaryButtonNew".
Tek alan etiketi olarak yer tutucu.
Anahat ve div düğmelerini devre dışı bırakma.
Öngörülemeyen hover/active/disabled.
Normal çeviri yerine tercüme edilmiş terimler.
Güncellemeler sırasında geçiş kılavuzlarının eksikliği.

16) Tek Dil Kalite Metrikleri

Kapsam - içerik kitaplığını kullanan ekranların oranı.
Tutarlılık Endeksi: Belirteçleri "manuel" stillere karşı yeniden kullanın.
A11y Geçiş Oranı - WCAG AA'yı geçen bileşenlerin yüzdesi.
Defect Escape: 1k taahhüt satışlarındaki UI/içerik kusurları.
Time-to-Ship - DLS'den önce/sonra tipik bir ekran uygulama zamanı.
Benimsenmesi: DAU vitrinler, bileşenleri/desenleri ile PR numarası.

17) Ekran kontrol listesi

• Kullanılan belirteçler (renk/girintiler/yarıçaplar), sert değerler değil.
• Kütüphaneden bileşenler; Özel - yalnızca RFC.
• Erişilebilirlik: klavye/odak/kontrast/roller/arya.
• Birimler: tarihler/para birimleri/yüzdeler - format kılavuzu başına.
• Mikrokopiler: düğmeler = fiiller, hatalar = düzeltilecek eylem.
• Locales/RTL düzeni bozmaz.
• Durumlar: yükleme/boş/hata sağlanır.
• Görsel regresyon testleri güncellendi.

18) Uygulama planı (3 yineleme)

Yineleme 1 - Temel (2-3 hafta)

Belirteçler (renk/tipografi/boşluk/hareket), temel bileşenler (Düğme, Giriş, Seç, Araç Ucu, Modal), içerik kılavuzu (ton, etiketler, hatalar).
Vitrin (hikaye kitabı) ve A11y-checker, belirteç linter.

Yineleme 2 - Desenler ve Lokalizasyon (3-4 hafta)

Formların/tabloların/filtrelerin desenleri, simge paketi 24 × 24, RTL/i18n sanal alanı, sayılar/tarihler/para birimleri için kurallar.
SemVer, changelog, RFC/migration process, autotests (visual + A11y).

Yineleme 3 - Ölçek ve Evrim (Sürekli)

Kompozisyon bileşenleri (Wizard, DataGrid, Chart primitives), temizasyon (açık/koyu/kontrast), kalite metrik raporları, düzenli UX denetimleri.

19) Mini-SSS

"Hepsi bir anda" gerekli mi?
Hayır. Belirteçler ve temel bileşenlerle başlayın, ardından kalıplar ve süreçler ekleyin.

Ekipleri YEI'yi kullanmaya nasıl ikna edebilirim?
Kazançları gösterin: hız, daha az kusur, hazır ekran tarifleri ve kutudan çıkan A11y.

Eski ekranlarla ne yapmalı?
Geçiş planı, belirteçler aracılığıyla köprü stilleri, öncelikli ekranlar - önce.

Toplam

Tek bir arabirim dili sadece bir bileşen kütüphanesi değildir. Bu, belirteçlerin dışavurumculuğu, bileşenleri - davranışı ve kullanılabilirliği, kalıpları - kararların tekrarlanabilirliğini ve yönetişimi ve metrikleri - sürdürülebilir evrimi belirlediği bir kurallar ve süreçler sistemidir. Dilinizi açık, doğrulanabilir ve genişletilebilir hale getirin - ürünleriniz düzgün, hızlı ve güvenilir bir şekilde görünecek ve çalışacaktır.