Gotowa do użycia

Interfejs jako wspólny język

To działający katalog produkcyjnych komponentów używanych w prawojazdy68.

Każdy przykład poniżej pochodzi bezpośrednio z pakietu UI. Płótno pokazuje komponent, jego rolę i właściwy kontekst — bez lokalnych kopii.

Poruszanie

Przeciągaj myszą lub dotykiem. Kółko przesuwa widok, a Control lub Command z kółkiem skaluje do pozycji kursora.

Tokeny semantyczne

Kolor opisuje rolę, nie pojedynczy ekran. Te same nazwy działają w motywie jasnym i ciemnym.

Kolory interfejsu

TłoGłówna powierzchnia strony--background

TekstTreść o najwyższym kontraście--foreground

Akcja głównaNajważniejsza akcja i zaznaczenie--primary

AkcentSpokojne wyróżnienie informacji--accent

SukcesPotwierdzenie poprawnego wyniku--success

OstrzeżenieStan wymagający uwagi--warning

BłądBłąd lub działanie destrukcyjne--destructive

ObramowanieStruktura i rozdzielenie powierzchni--border

Odstępy

Rytm opiera się na wielokrotnościach 4 px. Typowe przerwy to 8, 12, 16, 24 i 32 px.

Promienie

Małe promienie dla gęstych elementów, średnie dla pól i przycisków, większe wyłącznie dla grupowanych powierzchni.

Typografia

Jedna rodzina bezszeryfowa utrzymuje czytelność w narzędziu i długim tekście.

Nagłówek strony · 36 / 40

Pewność przed egzaminem

Nagłówek sekcji · 24 / 30

Najpierw zrozum zasadę

Tekst podstawowy · 16 / 26

Dobra hierarchia prowadzi wzrok, a nie rywalizuje z treścią. Szerokość akapitu pozostaje wygodna do spokojnego czytania.

Etykieta interfejsu · 13 / 18

Ostatnia aktualizacja: dzisiaj

Akcje i statusy

Wariant wynika z wagi działania. W jednej grupie tylko jedna akcja jest główna.

Statusy

AktywneSzkicZaliczoneDo poprawyBłąd

Plan na dzisiaj

Krótka, skupiona sesja przed egzaminem.

Powtórz 12 trudnych pytań, a następnie rozwiąż jeden pełny test.

Pola i postęp

Widoczna etykieta, natywny wybór i jednoznaczny stan skupienia są częścią komponentu.

Nazwa planuKategoria prawa jazdyWybór zachowuje natywną obsługę klawiatury i czytnika ekranu.

Postęp celu

68 z 74 punktów

Do pewnego wyniku brakuje jeszcze 6 punktów.

Treść na żądanie

Disclosure korzysta z natywnego elementu details. FAQ składa ten sam wzorzec w spójną listę.

Dlaczego używamy natywnego rozwijania?

Obsługa klawiatury, fokus i semantyka są dostępne bez odtwarzania zachowania w kodzie aplikacji.

Najczęstsze pytania

Czy komponenty działają w ciemnym motywie?

Tak. Wszystkie kolory korzystają z ról semantycznych zdefiniowanych dla obu motywów.

Czy można zmieniać odstępy lokalnie?

Układ może dostosować rozmieszczenie, ale nie powinien kopiować ani nadpisywać wewnętrznej budowy komponentu.

Gdzie zgłosić nowy wariant?

Najpierw opisz nową intencję i istniejące przypadki użycia. Wariant powinien rozwiązywać powtarzalną potrzebę.

System długich treści

Te same bloki obsługują blog, podręcznik i strony objaśniające.

Jak podejść do trudnego pytania

Zatrzymaj się przy informacji, która rzeczywiście zmienia pierwszeństwo lub dopuszczalną prędkość. Dopiero potem porównaj odpowiedzi.

Sprawdź trzy rzeczy

znaki i sygnalizację przed skrzyżowaniem
kierunek ruchu każdego uczestnika
wyjątki wynikające z rodzaju pojazdu

Krótka procedura

1Nazwij zasadę własnymi słowami.
2Odrzuć odpowiedzi sprzeczne z tą zasadą.
3Wybierz odpowiedź dopiero po ponownym przeczytaniu pytania.

Porównanie trybów nauki

Tryb	Cel	Czas
Nauka	Zrozumienie zasad	10–15 min
Egzamin	Sprawdzenie gotowości	25 min

Pusty stan

Brak danych powinien wyjaśnić sytuację i wskazać najlepszy następny krok.

Nie ma jeszcze trudnych pytań

Pytania pojawią się tutaj po oznaczeniu ich podczas nauki lub po błędnej odpowiedzi.

Zasady kompozycji

Komponent daje zachowanie i język wizualny. Ekran odpowiada za hierarchię i kontekst.

Stosuj

Wybieraj wariant według intencji działania.
Używaj tokenów semantycznych zamiast surowych kolorów.
Zachowuj widoczne etykiety i logiczną kolejność fokusu.

Unikaj

Nie kopiuj komponentu, aby zmienić pojedynczy odstęp.
Nie umieszczaj kart wewnątrz kart bez potrzeby.
Nie używaj koloru jako jedynego nośnika stanu.