Język jednego interfejsu

1) Jaki jest język jednego interfejsu i dlaczego jest potrzebny

Ujednolicony język interfejsu (NEI) to wspólny system koncepcji, reguł wizualnych i interakcji współdzielonych przez projektantów, inżynierów, analityków i autorów treści.

• Spójność - te same komponenty i terminy między produktami i zespołami.
• Szybkość: szybkie budowanie, mniej holiwiarów, szybsze wsiadanie na pokład.
• Jakość: spójne wzory UX, dostępność „domyślnie”.
• Skalowalność: bezpieczna ewolucja bez rozpadu na „zoo UI”.

2) Warstwy jednego języka

1. Żetony (kolor, typografia, wymiary, cienie, tiret, promienie, animacje).
2. Komponenty (przyciski, pola wejściowe, tabele, wykresy, modale, tosty, zakładki).
3. Wzory (formularze, walidacja, kreatory krok po kroku, listy/tabele, powiadomienia).
4. Zawartość (mikro-copywriting, terminologia, komunikaty o błędach).
5. Ikonografia i ilustracje (rodzina, styl, wymiary i linie).
6. Dostępność i i18n/RTL (zasady A11y, tłumaczenie, lokalizacje).
7. Procesy (wersje, przewodniki, recenzje, lintery, prezentacje i przykłady).

3) Żetony projektowe (podstawa ekspresji)

Żetony są nazwane wartościami, które są ponownie wykorzystywane we wszystkich produktach.

3. 1 Struktura tokenu (przykład)

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 Nazywanie żetonów

Od ogólnego do konkretnego: 'kolor. akcent. pierwszorzędowe ', невич Морович'.
Bez wiązania z marką w nazewnictwie (marka jest tematem, a nie tokenem).
Gradacje: 'fg. wyciszony „,” fg. pierwotny ',' fg. odwrotnie ". Nie kodować jasności w nazwie ('blue500') bez systemu.

3. 3 Żetony tematyczne

Światło, ciemność, kontrastowanie: zmiana wartości, nie nazwy.
Tematy - warstwa nadrzędna, interfejs użytkownika pozostaje spójny.

4) Komponenty: Kontrakt, stany, dostępność

Komponent = Visual + Behavior + Props Contract + A11y.

4. Przykład kontraktu na przycisk 1

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;
};

Stany: „domyślnie/zawisnąć/aktywny/ostrość/wyłączony/załadunek”.
Dostępność: pierścień ostrości, rozmiary docelowe ≥ 40-48 px, „aria-pressed” do przełączania.

4. 2 Gwarancje składowe

Stabilne wymiary (wysokość linii, okładziny).
Dostępność poza pudełkiem (role/aria, klawiatura, kontrast).
Niezmienne: błąd wewnątrz pola zawsze na dole i z 'aria-descripedby'.

5) wzory UX (powtarzalna logika)

Formularze: etykieta po lewej/górnej stronie, etykieta plakietka, obok siebie + błędy podsumowujące, maski wejściowe i prompty.
Modale: jeden główny CTA, "Esc' zamyka, pułapka ostrości, powrót ostrości.
Tabele/listy: sortowanie, lepki nagłówek, paginacja, eksport.
Filtry: explicit Przycisk, zresetuj, zapisane ustawienia wstępne.
Powiadomienia: toast ≤ 3-5 s, pauza w centrum uwagi, 'rola = „status/alert”'.
Deski rozdzielcze: top insights → kontekst → grafika → CTA.

6) Wspólna terminologia i mikroprocesoryzowanie

6. 1 Słownik

Utrzymuj jeden glosariusz terminów biznesowych i UX. Każdy artykuł interfejsu go odwołuje.
Dla dubletów - wybierz jedno słowo („portfel” vs „równowaga”), drugie - jako synonim w wyszukiwaniu.

6. 2 Zasady tekstu

Krótko i w sprawie; unikać żargonu.
Błędy - wyjaśnić, co zrobić: "Określić datę w formacie RRRY-MM-DD'.
Pozycje to rzeczowniki; przyciski - czasowniki („Zapisz”, „Anuluj”).
Spójne jednostki: data/godzina w UTC lub locale, waluty z kodem (EUR, USD).

7) Ikonografia i ilustracje

Rodzina jest izomorficzna: kąt pojedynczy, grubość linii, siatka 24 × 24.
Statusy i semantyka: kolor - wtórny; kształt/ikona + tekst - podstawowy.
Skalowanie: piktogramy nie „unoszą się” w różnych gęstościach (1 ×/2 ×/3 ×).

8) Dostępność (A11y) i lokalizacja (i18n/RTL)

Komponenty są poddawane WCAG AA: kontrast, nawigacja klawiatura, ostrość, „preferuje zredukowany ruch”.
Przetłumaczone ciągi - w zasobach, a nie w kodzie. Znaczniki i format numeru/daty są zlokalizowane.
RTL: ikony lustrzane, poprawne zamówienie Tab, logika DnD z klawiatury.

9) Numery, daty, waluty i formaty

Daty/godzina: ISO-8601, czas rzeczywisty - UTC; user - locale.
Waluta: niewielkie jednostki/ciągi dziesiętne; zawsze podaj kod (na przykład "€12. 34” lub „12. 34 EUR" - według locale).
Odsetki: '12. 3%'i punkty '+ 1. 2 pp 'cleically odróżnić.
Zaokrąglanie: do znaczących cyfr; "k/m' dla dużych liczb.

10) Zarządzanie: role, artefakty, kanały

Design Language Council (DLC): Token/właściciele komponentów, roszczenia RFC.

• Content Center (Figma/Code) + Katalog na żywo z przykładami.
• Dokumentacja: przewodniki, wzory, A11y, przewodnik po treści.
• Changelog z datami, poziomami (dodane/zmienione/usunięte/usunięte/stałe).
• Kanały: cotygodniowy zlewozmywak projektowy, kanał Slack, prezentacje wdrożeniowe.

11) Wersioning i ewolucja

SemVer dla pakietu komponentów: "MAJOR. DROBNE. PATCH '.
MINOR - dodatek: nowe żetony, rekwizyty z domyślnymi, nowe komponenty.
MAJOR - łamanie: usuwanie rekwizytów, zmiana semantyki → przewodniki migracyjne.
Zmniejszenie: ostrzeżenia, okno ≥ 90 dni, flagi zgodności.

12) Lintery i automatyczne kontrole

UI-linter: zabronione kolory poza żetonami, anty-wzory (przycisk-diva, wyłączony obrys).
A11y-checks: kontrast, role/aria, ostrość, klawiatura.
i18n-linter: „twarde” linie w kodzie, nieprawidłowe znaczniki.
Testy zrzutu ekranu: regresje wizualne komponentów.
Kontrakty API wizualizacji (jeśli istnieją): typy danych, zakresy, podpisy.

13) Prezentacja komponentów (storybook/piaskownica)

Przykłady na żywo z sterowaniem rekwizytami, kodem, stanami, A11y-checker.
„Przepisy”: formularz rejestracyjny, etap 3 kreator, tabela + filtry, modalka + toast.
„Piaskownica lokalizacji”: przełączanie języka/formatów/RTL.

14) Wzory nazewnictwa i struktury

14. 1 Komponenty (BEM/semantyka, przykład CSS)

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

W kodzie - monotonne nazwy rekwizytów: 'size', 'kind', 'disabled', 'onClick'.

14. 2 Struktura plików bibliotecznych

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

15) Anty-wzory

„Wolne” kolory/tiret poza żetonami.
Duplikat komponentów: „ ” „ ButtonNew”.
Placeholder jako jedyna etykieta polowa.
Wyłączanie obrysu i przycisków.
Nieprzewidywalny zawisek/aktywny/wyłączony.
Transliterowane określenia zamiast zwykłego tłumaczenia.
Brak przewodników migracyjnych podczas aktualizacji.

16) Single Language Quality Metrics

Pokrycie - odsetek ekranów korzystających z biblioteki treści.
Wskaźnik spójności: Ponowne użycie żetonów vs „ręcznie” style.
A11y Pass Rate - procent składników przechodzących przez WCAG AA.
Defect Escape: wady interfejsu użytkownika/treści w sprzedaży 1k commit.
Time-to-Ship - czas na wdrożenie typowego ekranu przed/po DLS.
Przyjęcie: prezentacje DAU, numer PR z komponentami/wzorami.

17) Lista kontrolna ekranu

• Używane żetony (kolor/tiret/promień), nie twarde wartości.
• Komponenty z biblioteki; niestandardowe - tylko RFC.
• Dostępność: klawiatura/focus/contrast/roles/aria.
• Jednostki: daty/waluty/wartości procentowe - na podręcznik formatu.
• Mikrokopie: przyciski = czasowniki, błędy = działanie poprawiające.
• Locales/RTL nie łamie układu.
• Państwa: załadunek/pusty/błąd są dostarczone.
• Aktualizacja testów regresji wizualnej.

18) Plan realizacji (3 iteracje)

Iteracja 1 - Fundacja (2-3 tygodnie)

Żetony (kolor/typografia/rozstaw/ruch), podstawowe komponenty (przycisk, wejście, wybierz, podpowiedź, modal), przewodnik treści (ton, etykiety, błędy).
Prezentacja (storybook) i A11y-checker, token linter.

Iteracja 2 - Wzorce i lokalizacja (3-4 tygodnie)

Wzory formularzy/tabel/filtrów, pakiet ikon 24 × 24, RTL/i18n piaskownica, reguły dla numerów/dat/walut.
SemVer, changelog, proces RFC/migracji, autotests (visual + A11y).

Iteracja 3 - skala i ewolucja (ciągła)

Komponenty kompozycyjne (Kreator, Miernik, Mapa prymitywne), temizacja (światło/ciemność/kontrast), raporty mierników jakości, regularne audyty UX.

19) Mini-FAQ

Czy trzeba „wszystko od razu”?
Nie, nie jest. Zacznij od żetonów i podzespołów, a następnie dodaj wzory i procesy.

Jak przekonać zespoły do korzystania z Inicjatywy na rzecz zatrudnienia ludzi młodych?
Pokaż wygrane: prędkość, mniejsze usterki, gotowe przepisy ekranu i A11y poza pudełkiem.

Co zrobić ze spuścizną ekranów?
Plan migracji, style mostu przez żetony, ekrany priorytetowe - pierwszy.

Razem

Pojedynczy język interfejsu to nie tylko biblioteka komponentów. Jest to system zasad i procesów, w którym żetony określają ekspresywność, składniki - zachowanie i dostępność, wzorce - powtarzalność decyzji, a zarządzanie i mierniki - zrównoważony rozwój. Zrób swój język jasny, możliwy do zweryfikowania i rozszerzalny - a Twoje produkty będą wyglądać i działać jednolicie, szybko i niezawodnie.