Przeczytaj uzasadnienie komponentu systemu projektowego

Czerwone panele modułowe i powtarzające się cienie na elewacji budynku

À propos de cette sélection

Cztery publiczne odniesienia do badania komponentów jako decyzji dotyczących treści, zachowania i dostępu, a nie galerii atrakcyjnych kontroli.

Zrzut ekranu przycisku niewiele mówi o sprawdzaniu poprawności, nawigacji za pomocą klawiatury ani o tym, co się dzieje, gdy etykieta staje się dłuższa. Dobra dokumentacja komponentów wyjaśnia towarzyszące decyzje. Te systemy i artykuły oferują różne skale wyjaśnień, od wzorców usług publicznych po podstawy produktów i szczegółowe zachowanie interfejsu. Zanim wypożyczysz zabieg wizualny, przeanalizuj jeden problem.

Spróbuj najpierw tego

Wybierz wzór, którego faktycznie potrzebuje Twój projekt, na przykład komunikat o błędzie lub ujawnienie. Porównaj jego cel, sformułowanie, zachowanie skupienia i traktowanie na wąskim ekranie. Napisz krótką listę kontrolną akceptacji, a następnie przetestuj własną implementację za pomocą klawiatury i realistycznej treści. Dokumentację źródłową przechowuj obok decyzji, którą podejmujesz.

Pamiętaj

Wzorzec specyficzny dla rządu lub produktu niesie ze sobą swój oryginalny kontekst. Nie kopiuj na ślepo jego sformułowań ani marki. Starsze artykuły pozostają przydatnymi wyjaśnieniami, ale należy sprawdzić szczegóły implementacji pod kątem bieżącego zachowania przeglądarki i wskazówek dotyczących dostępności.

4 liens/Dans l’ordre choisi par le curateur

Lien 1anglais

System projektowania GOV.UK

Przestudiuj style, komponenty i wzorce usług wraz ze wskazówkami dotyczącymi użytkowania. Przeczytaj, kiedy wzór jest odpowiedni, zanim skopiujesz jego przykład.

design-system.service.gov.uk

Lien 2anglais

Amerykański system projektowania stron internetowych

Porównaj wytyczne dotyczące komponentów sektora publicznego i kwestie dostępności. Poszukaj zasad dotyczących treści i interakcji kryjących się za znaną kontrolą.

designsystem.digital.gov

Lien 3anglais

Komponenty włączające

Przeczytaj szczegółowe omówienie wzorców, takich jak powiadomienia, tabele i menu. Użyj rozumowania, aby przejrzeć zachowanie, sprawdzając starszy kod pod kątem obecnych praktyk.

inclusive-components.design

Lien 4–

Adobe Spectrum

Zapoznaj się z podstawami i dokumentacją specyficzną dla platformy systemu projektowania Adobe. Porównaj wspólne zasady z wymaganiami własnego produktu.