Wprowadzenie do projektowania atomowego dla projektantów stron internetowych

Atomy nie są po prostu elementami HTML, ale także ich przynależne style: czcionki, kolory, wymiary i inne zasady stylu CSS. Z własnymi słowami Brada, atomy “pokaż wszystkie swoje podstawowe style na pierwszy rzut oka”.

Atomy - przykład

Oto przykład z naszej strony internetowej. Nagłówki zalecanych postów mogą stanowić podstawę jeden typ atomu; używają ten sam kod HTML i CSS i może być łatwo odróżnić od reszty treści.

Zauważ, że Hongkiat.com nie został zaprojektowany z myślą o projektowaniu atomowym, tutaj jest używany tylko do celów demonstracyjnych.

Istotą projektowania atomowego jest zaprojektuj interfejs użytkownika od dołu, używając tych pięciu etapów, nie identyfikować później komponentów projektu atomowego.

2. Cząsteczki

ZA cząsteczka jest uformowany przez grupę atomów. Cząsteczki stanowią kolejny etap hierarchii projektowania atomowego. Pomyśl o prostszych elementach interfejsu użytkownika, które już są wykonane z więcej niż jednego elementu HTML, np. formularz wyszukiwania lub zalecany post na pasku bocznym.

Bycie zorganizowanym w cząsteczkę daje cel do każdego atomu. W większej grupie (cząsteczce) atomy muszą wsparcie i uzupełnienie nawzajem muszą dobrze współpracują w celu stworzenia użytecznego projektu.

Na przykład tytuł (jeden atom) musi uzyskać większy nacisk (większe czcionki, większa waga itp.) niż nazwisko autora (inny atom) w zalecanym bloku postu. W ten sposób dwa atomy są “Oznaczało” do pracować jako drużyna aby uzyskać najlepszy wynik.

Cząsteczki - przykład

Używając naszego poprzedniego przykładu, możesz zobaczyć, że na pasku bocznym Hongkiat jeden blok zalecanego postu może być postrzegany jako cząsteczka. Zalecana cząsteczka postu to zbudowany z trzech atomów: miniaturka, tytuł i nazwa autora.

3. Organizmy

Organizmy składają się z a grupa cząsteczek, atomów (i czasami inne organizmy). W projektowaniu stron internetowych są organizmy bardziej złożone komponenty interfejsu użytkownika które reprezentują ostateczne sekcje strony, takiej jak nagłówek, stopka lub pasek boczny.

Organizmy mogą być albo zbudowane z różne typy cząsteczek, na przykład pasek boczny może składać się z paska wyszukiwania i różnego rodzaju widżetów lub ta sama cząsteczka powtarzana kilka razy, na przykład garść powiązanych bloków pocztowych pod sobą. I może to być połączenie tych dwóch.

Organizmy - przykład

Na stronie internetowej Hongkiat pasek boczny może być organizmem. Składa się z pasek wyszukiwania (jeden typ cząsteczki, wyświetlany tylko raz) i kilka polecanych postów (inny typ cząsteczki, wyświetlany wielokrotnie).

Organizm paska bocznego można jednak również postrzegać jako skład a cząsteczka (pasek wyszukiwania) i inny organizm (zalecany widget postu z kilkoma zalecanymi postami). Projekt atomowy to elastyczny model, zasady nie są zbyt rygorystyczne, więc w tym przypadku możemy zdefiniować ten sam blok konstrukcyjny zarówno jako cząsteczkę, jak i organizm.

4. Szablony

Kolejny etap w hierarchii projektowania atomowego to szablony. Jak widać, jest to wtedy, gdy projekt atomowy przestaje używać analogii chemii. Brad powstrzymuje się od terminologii w tym momencie, ponieważ uważa, że ​​tak mniej zrozumiałe dla klientów i innych interesariuszy, i zasadniczo są to dwa ostatnie etapy (szablony i strony), które projektanci muszą sprzedać.

Szablony są zbudowane z organizmów. Oni są obiekty na poziomie strony ale bez ostatecznej treści. Celem szablonów jest reprezentują strukturę podstawowej treści.

Szablony wyświetlają, jak różne atomy, cząsteczki, organizmy “funkcjonują razem w kontekście układu”. W zasadzie reprezentują szkielet strony.

Szablony - przykład

Na przykład pomyśl o a szablon strony głównej z obrazami zastępczymi i blokami tekstu lorem ipsum.

Poniżej znajduje się przykład z książki Atomic Design. Jest to szablon strony głównej magazynu TimeInc. Atomy, cząsteczki i organizmy są na swoim miejscu, ale tylko z treścią schematu.

5. Strony

Strony stanowią ostatni etap hierarchii projektowania atomowego. Strony są “konkretne wystąpienia szablonów”. Na etapie strony szablony otrzymują wypełniony prawdziwą treścią (kopia, mikrokopia, obrazy, filmy itp.), tak jak pojawią się w prawdziwym interfejsie użytkownika.

Strony pozwalają projektantom zobaczyć, jak końcowe wrażenia użytkownika będzie wyglądać, do przetestuj projekt z prawdziwymi użytkownikami i do zmierzyć, jak dobrze działa pod względem użyteczności, konwersji, dostępności i innych wskaźników.

Strony i odmiany szablonów

Innym celem etapu strony jest wykonanie odmiany szablonu możliwy. Mówimy o odmianach szablonów, gdy bazowy szablon jest taki sam ale zaludniający treść jest (nieco) inna. Na przykład, jeśli chcesz wyświetlać różne treści różnym grupom użytkowników (np. Odwiedzającym kontra zalogowanym), lub gdy jeden nagłówek jest znacznie dłuższy niż inne.

Używanie odmian szablonów jest kluczowe, jeśli chcemy je stworzyć spójny i odporny interfejsy użytkownika. Mniejsze składniki (atomy, cząsteczki, organizmy) muszą działają dobrze w różnych scenariuszach.

Na przykład przycisk musi wyglądać na klikalny niezależnie od otaczających elementów. Jeśli w określonej wariacji nie wygląda to na działanie, musisz przeprojektować atom przycisku, aż do tego momentu pasuje do wszystkich przypadków użycia.

Strony - przykład

Poniżej możesz zobaczyć etap strony poprzedniego szablonu strony głównej TimeInc. Wygląda inaczej, co? To tylko jedna odmiana szablonu, chociaż. Aby mieć skuteczny interfejs użytkownika, zespół projektowy musi się mocno zastanowić co może się zmienić w prawdziwej witrynie. Następnie muszą również przetestować projekt dla tej odmiany szablonu (strony).