Przeczytaj uzasadnienie komponentu systemu projektowego

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

O tym wyborze

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 linki/W kolejności wybranej przez kuratora

Link 1angielski

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

Link 2angielski

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

Link 3angielski

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

Link 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.