Tasarım Sistemleri ve dokümantasyonu

1) Tasarım sistemi nedir ve neden gereklidir?

Bir tasarım sistemi, bir arayüz için tek bir doğruluk kaynağıdır: UX öngörülebilirliği, geliştirme hızı ve ölçeklenebilirlik sağlayan bir dizi belirteç, bileşen, uygulama ve dokümantasyon.

• Tüm ürünlerde görsel ve davranışsal katmanın tutarlılığı.
• Hız: bileşenleri yeniden kullanın, daha az inceleme maliyeti.
• Kalite: genel A11y kalıpları, yerelleştirme, testler, içerik standartları.
• Yönetilebilirlik: net sorumluluk, sürümler, yol haritası.

2) Tasarım sistemi mimarisi (katmanlar)

1. Tasarım belirteçleri (temel): renkler, tipografi, boyutlar, yarıçaplar, gölgeler, girintiler, durumlar ve anlamsal belirteçler ('renk. yüzey. Uyarı ',' boşluk. xs ').
2. UI bileşenleri: düğmeler, giriş alanları, modal pencereler, açılır pencereler, tablolar, tostlar, afişler, uyarılar, boş durumlar, iskeletler.
3. Desenler ve kompozisyonlar: KYC formları, ödeme akışı, sıfır sonuç, adım ustaları, içerik kartları.
4. İçerik kılavuzu (microcopy): ton, terimler sözlüğü, hata/başarı kalıpları, push/banner.
5. Altyapı: A11y, test etme, yerelleştirme, sürümler, katkıda bulunanlar (katkıda bulunanlar) için kılavuz.

3) Tasarım belirteçleri: ilkeler

Anlambilim> "ham" stil. 'Rengi kullan. metin. '# 6B7280' yerine 'sesini kapattı.
Tema ve platformlar. Kaynak belirteçleri - platform eşlemeleri (Web, iOS, Android, e-posta).
Belirteç düzeyinde açık/koyu tema ve WCAG kontrastı.
Küresel ve bağlamsal ölçekler: 'uzay. 2 ',' yarıçapı. md ',' yükseklik. 1 ',' opaklık. devre dışı bırakıldı.
Belirteç sürümü oluşturma: değişiklikler - kullanımdan kaldırma politikası ve geçiş notları aracılığıyla.

4) Bileşenler: belgelerdeki sayfanın gereksinimleri ve kompozisyonu

• Açıklama ve amaç. Ne zaman kullanılır/kullanılmaz.
• Değişkenler/durumlar. Boyutları, türleri (birincil/ikincil/hayalet), devre dışı, yükleme, yıkıcı.
• Erişilebilirlik. Rol, klavye navigasyon, 'aria-', kontrast, odak halkaları.
• Microcopy metin ve örnekler. Geçerli etiketler/yer tutucular, hatalar, yardım.
• Kod örnekleri. Minimal API'ler, kontrollü/kontrolsüz.
• Formlar ve i18n ile entegrasyon. Uzun satır durumları, sayılar/para birimleri/tarihler.
• Anti-örnekler. Hatalı kullanım şekilleri.
• Test matrisi. Görsel anlık görüntüler, birim/etkileşim, ekran okuyucuları.

5) Kompozisyon desenleri (Tarifler)

Kayıt formları/CUS: adım adım sihirbaz, ilerleme, doğrulama satır içi + özet, hata kalıpları.
Ödeme akışı: yöntem seçimi, ücretler, tarihler, aynı yöntem kuralı, onay ve durum.
Boş durumlar: bağlam + değer + CTA, sıfır arama sonuçları.
Başarı/hata mesajları: durum hiyerarşisi, görsel belirteçler, tost/afiş/modaller.
Gezinme ve filtreler: genel arama, hızlı hazır ayarlar, etiketler.
Desen sayfaları, mikrokopi ve A11y notlarla kopyalanmaya hazır bileşenlerin bir bileşimini göstermelidir.

6) İçerik kılavuzu (ses ve ton, mikrokopi)

Ses: profesyonel, net; Ton içeriğe bağlıdır (onboarding, ödeme, güvenlik).
Birleşik terimler sözlüğü: ödemeler, bonuslar, limitler, KYC - ürün başına bir değer.
Şablonlar: CTA, hatalar, uyarılar, başarılar, boş durumlar, bildirimler.
Yerelleştirme-ilk: hatların uzunluğu için stok, bölgeye göre sayılar/para birimleri/tarihler.
A11y-vocabulary: net etiketler, arya açıklamaları, belirsizlikler olmadan.

7) Sistem standardı olarak erişilebilirlik (A11y)

Temel kriterler: WCAG 2. Kontrast için 1 AA, odak her zaman görünür, klavye navigasyonu.
Roller ve nitelikler: bileşenler 'rol', 'aria-label', 'aria-describby', tost/uyarılar için canlı bölgeleri tanımlar.
Ekrandaki okuyucular: cümle örnekleri, okuma sırası, doğru durumlar ('iddialı/kibar').
Test prosedürleri: otomatik kontroller + manuel komut dosyaları.

8) Yerelleştirme ve uluslararasılaştırma

Bileşen kodunun yanındaki i18n tuşları + bağlam açıklaması.
Formatlama yardımcı programları aracılığıyla sayılar/para birimleri/tarihler; Şablonlarda metin kodlamayın.
Uzunluk testleri: "Uzun Almanca",'dar mobil ", RTL varyantları.
Dillerde ton: kritik adımlar için ton haritası (ödemeler/güvenlik).

9) Belgeler: yapı ve navigasyon

1. Giriş: misyon, ilkeler, sorumluluk alanları.

2. Belirteçler: renkler, tipografi, ızgara, boyutlar, gölgeler, durumlar, temalar.

3. Bileşenler: Filtreli katalog (role, platforma, A11y'ye göre).

4. Desenler: senaryolar (formlar, ödemeler, boş durumlar, başarı/hatalar).

5. İçerik kılavuzu: ses ve ton, sözlük, mikrokopi şablonları.

6. Erişilebilirlik: standartlar, kontrol listeleri, test durumları.

7. Yerelleştirme: ilkeler, örnekler, pazara göre sözlükler.

8. Entegrasyon ve kod: yükleme, sürümler, örnekler, nasıl taşınır.

9. Katkıda bulunmak: süreçlere katkıda bulunmak, tasarım incelemesi, kod incelemesi, bitti tanımı.

10. Changelog ve Yol Haritası: sürümler, amortismanlar, kalkınma planı, bilinen konular.

10) Yönetişim ve süreçler

Roller: Sistem sahibi (DesignOps/UX Platform), bakıcılar (design/FE), danışmanlar (BE, A11y, yerelleştirme).
Değişim Komitesi: Değerlendirme Talebi, Önceliklendirme, API/Token Mutabakatı.
Süreçler: Yeni bileşenler için RFC, dahili sorun formları, hatalar için SLA.
Bitti Tanımı: Tasarım (Figma) ↔ kodu (UI paketi) ↔ dock (örnek + kılavuz) ↔ testleri.

11) Katkıda bulunmak: nasıl eklenir/değiştirilir

RFC şablonu: bir sorun - seçenekler - seçilen karar - A11y - i18n - göç - riskler.
Flow PR: design review ^ code review ^ UX copywriter ^ A11y check ^ release notes.
Geriye dönük uyumluluk kuralları: Tahribatsız, büyük için küçük/yama - mümkünse kullanımdan kaldırma ve otomatik geçiş ile.

12) Sürüm oluşturma, sürümler, geçişler

Paketler için SemVer ('@ company/ds-core', '@ company/ds-forms', '@ company/ds-charts').
Sürüm notları: belirteç değişiklikleri, bileşen API'leri, varsayılan davranış, kesme değişiklikleri, geçiş kılavuzları.
Değer düşüklüğü: dock işaretlemeleri, linter kuralları, kütle ikamesi için kod modları.
Design-tokens pipeline: Tek kaynak (JSON/YAML) - platform yapıları (CSS vars, iOS, Android).

13) Kalite testi

Davranış ve koşulların birim testleri.
Görsel anlık görüntüler (tema/durum regresyonu).
A11y testleri: ekran okuyucunun otomatik + manuel komut dosyaları.
Kritik akış için E2E durumlar (kayıt, ödemeler, KYC).
Perf bütçeleri: paket/render limitleri ve ağır bağımlılık yasakları.

14) Tasarım sistemi olgunluk metrikleri

Benimseme: DS kullanan % ekranlar/depolar.
Hız: Düzenden teslimata kadar geçen süre.
Kalite: 1 sürümüne UI/A11y kusurlar.
Tutarlılık: DS dışındaki'tek kullanımlık "bileşenlerin/stillerin sayısı.
Dokümanlar: dock bileşeni kapsamı, dahili kitle NPS (tasarımcılar/geliştiriciler/analistler).

15) Anti-desenler

Anlambilimi olmayan bir palet olarak belirteçler ("sadece renk").
Dokümantasyon olmadan ve aşırı durum örnekleri olmadan bileşenler.
A11y yok sayma (odak yok, düşük kontrast, 'arya' yok).
Değer düşüklüğü ve geçiş kılavuzu olmadan sürüm oluşturma.
Bileşenlerde gizli mantık (UI davranışı yerine iş kuralları).
API uzantısı yerine dar durumlar için bileşenlerin çoğaltılması.

16) Kontrol listeleri

• Anlamsal isimler ve amaç.
• Her iki temada AA karşıtlığı.
• Skales ve kullanımı belgelenmiştir.

• Seçenekler/durumlar kapsanmaktadır.
• A11y-description, 'aria-', odaklan.
• Mikrokopi örnekleri (etiketler, hatalar, ipuçları).
• Kod örnekleri ve kenar durumları (uzun satırlar, yük, boş).
• Unit/visual/A11y testleri yeşil.

• Önceki/sonraki örneklerle notları serbest bırakın.
• Göç rehberi и değer düşüklükleri.
• Güncellenmiş hikayeler/demolar, dock'ta bağlantılar.

17) Örneklerden önce/sonra

• Farklı ana düğmeler: renkler/yarıçaplar/girintiler eşleşmiyor; Farklı CTA metinleri.

• Belirteçli tek 'Düğme': 'boyut = md', 'varyant = birincil', 'yarıçap = lg', 'boşluk = md', "eylem + nesne" tarzındaki metin.

• Teknik mesajlar, bilgi istemi yok.

• Bileşen ' Geçersiz tarih biçimi. DD kullan. MM. YYYY. '+ otomatik odaklama.

18) Bileşen sayfası şablonu (iskelet)

Adı: Düğme

Açıklama: bir eylem başlatır; Ekran başına 1 ana.
Seçenekler: birincil, ikincil, hayalet, yıkıcı; sm/md/lg boyutları.
Durumlar: hover, focus, active, loading, disabled.
A11y: klavyeden edinilebilir; Değiştirilebilir için 'aria-preslenmiş'.

Microcopy: "Değişiklikleri kaydet", "Doğrulamaya devam et. "Tamam'dan kaçının

Kod (örnek API): 'Button {variant, size, icon, loading}'.
Anti-örnekler: aynı hiyerarşi düzeyinde çift birincil.
Testler: görsel anlık görüntüler, kontrast, odak halkası.

19) Tasarım sistemi uygulama oyun kitabı (sunum)

1. Arayüz denetimi: renklerin/tipografinin/bileşenlerin/desenlerin envanteri.
2. MVP belirteçleri ve ana bileşenler: Button, Input, Select, Modal, Alert, EmptyState, Toast.
3. Dokümantasyon ve öykü kitabı: canlı örnekler, kod parçacıkları, kılavuzlar.
4. Pilot ürün: widget'ları değiştirmek, geri bildirim toplamak.
5. Geçiş kılavuzu: kod modları, kullanımdan kaldırma kuralları.
6. Kümenin uzantısı: tablolar, sayfalama, form forumları, sihirbaz adımları.

7. Ölçeklendirme: ürün kalıpları (ödemeler, KYC), analitik ve A/B ile entegrasyon

8. Destek: soru kanalı, SLA, dahili atölyeler.

20) Hızlı Dokümantasyon Şablonları

• Adı: 'renk. sınır. uyarıyorum '
• Amaç: uyarı çerçeveleri ve afişler Uyarı/Uyarı
• Kontrast: AA karşı 'renk. yüzey. default '
• Yapma: küçük boyutlu metin için kullanma
• İlgili: 'renk. yüzey. Uyarı ',' simgesi. uyarıyorum '

Desen Deseni: Boş Durum (noResults)

Amaç: Bir sorguyu "yanlış" hissetmeden düzeltmek

Kompozisyon: başlık (toptan), metin (1-2 cümle), CTA, ikincil CTA, simge/illüstrasyon

Microcopy: "" {query}'tarafından hiçbir şey bulunamadı Filtreleri sıfırlayın veya sorguyu hassaslaştırın"

A11y: 'rol =' status '', 'aria-live =' kibar ''

Son hile sayfası

Semantik belirteçler + disiplin A11y = temel.
Tam bileşen sayfaları: amaç, varyantlar, A11y, mikrokopi, kod, testler.
Desenler = hazır metinler ve kurallar içeren bileşenlerin kompozisyonları.
Dokümanlar - ürün: sürüm, sürümler, geçişler, katkı süreci.
Olgunluğu ölçün: benimseme, hız, kusurlar, tutarlılık, dahili komutların NPS'si.