Component design odnosi się do procesu budowania produktu cyfrowego lub strony internetowej w kawałkach. Kawałki to elementy strony, takie jak nagłówek, formularz wyszukiwania i cta.
I o tych elementach opowiem Ci w tym wpisie. Zobacz listę komponentów jakie możesz wykorzystywać na stronie www.
Formularz
Formularze pomagają użytkownikom wprowadzać zestawy powiązanych informacji do systemu i przesyłać je. Pomyśl o wszystkich okienkach z prośbą o podanie szczegółów wysyłki, gdy zamawiasz coś online.
Karty – card
Super popularne w dzisiejszych czasach karty to małe prostokątne lub kwadratowe moduły, które zawierają różne rodzaje informacji – w formie przycisków, tekstu, rich media i tak dalej.
Karty działają jako punkt wejścia dla użytkownika, wyświetlając różne rodzaje treści obok siebie, które użytkownik może następnie kliknąć.
Karty są doskonałym wyborem w projektowaniu UI, jeśli chcesz inteligentnie wykorzystać dostępną przestrzeń i przedstawić użytkownikowi wiele opcji treści, bez konieczności przewijania tradycyjnej listy.
Dropdown
Ten kontrowersyjny element UI pozwala użytkownikom wybrać pozycję z listy, która „spada”, gdy tylko na nią klikniemy. Aby dowiedzieć się więcej o tym, dlaczego ten element ma złą reputację, sprawdź tę niegrzeczną prezentację.
Ikony
Ikony to obrazy używane do przekazywania użytkownikom różnych rzeczy. Mogą pomóc w lepszym przekazaniu treści lub mogą komunikować i wywoływać konkretne działanie.
Stopka
Stopka strony internetowej to obszar znajdujący się na dole każdej strony witryny, poniżej głównej treści. Termin „stopka” pochodzi ze świata druku, w którym „stopka” jest spójnym elementem projektu, widocznym na wszystkich stronach dokumentu.
Okna modalne
Okno modalne to małe pudełko zawierające zawartość lub wiadomość, która wymaga interakcji z nią, zanim będzie można ją zamknąć i wrócić do przepływu.
Pomyśl o tym, kiedy ostatnio usunąłeś jakiś element w swoim telefonie. Mały komunikat, który wyskoczył z prośbą o potwierdzenie, że chcesz go usunąć, to właśnie modal.
Tabele
To zbiór różnych informacji uporządkowanych w kolumnach i wierszach.
Projekt tabeli powinien wspierać cztery typowe zadania użytkownika: wyszukiwanie rekordów spełniających określone kryteria, porównywanie danych, przeglądanie/edycja/dodawanie danych pojedynczego wiersza oraz podejmowanie działań na rekordach.
Akordeony
Akordeony pozwalają użytkownikom rozszerzać i zwijać sekcje treści. Pomagają użytkownikom szybko nawigować po materiale i pozwalają projektantowi UI zawrzeć duże ilości informacji w ograniczonej przestrzeni.
Listy
Listy oferują podejście do prezentacji dużego zestawu elementów lub opcji dla użytkowników w sposób, który pozwala im na efektywne wypełnianie zadań. Wzorzec projektowy listy wspiera użytkowników, prowadząc ich przez kategorie do pożądanej zawartości.
Nawigacja okruszkowa – breadcrumb
Te małe ścieżki linków pomagają użytkownikom zorientować się, w którym miejscu witryny się znajdują. Często znajdują się w górnej części witryny, breadcrumbs pozwalają użytkownikom zobaczyć ich aktualną lokalizację i kolejne strony. Użytkownicy są również w stanie kliknąć na nie, aby przejść między etapami.
Przyciski – buttony
Tradycyjnie wyświetlane jako kształty z etykietą, przyciski informują użytkowników, że mogą wykonać określoną akcję, jak np. przesłanie formularza.
Checkboxy
W projektowaniu UI, pole wyboru pojawia się dokładnie tak, jak sugeruje nazwa: małe kwadratowe pole na ekranie, które użytkownik może zaznaczyć lub odznaczyć.
Pole wyboru pozwala użytkownikom wybrać jedną z wielu opcji z listy, przy czym każde pole wyboru działa jako osobny element. Zaznaczenie pola wyboru zaznacza je małym haczykiem! Niektóre popularne przypadki użycia tego elementu obejmują formularze i bazy danych.
Suwaki / switche / toggle
Pomyśl o toglach jak o włącznikach i wyłącznikach. Pozwalają nam właśnie to zrobić: włączyć lub wyłączyć coś.
Radio buttony
Często mylone z polami wyboru, przyciski radiowe są małymi okrągłymi elementami, które pozwalają użytkownikom wybrać jedną opcję z listy. Kluczem jest tutaj zauważenie, że użytkownicy mogą wybrać tylko jedną opcję, a nie wiele opcji, jak w przypadku pól wyboru.
Inputy
Pola wejściowe są, po prostu, miejscem dla użytkowników do wprowadzania treści do systemu. Nie są one ograniczone tylko do formularzy, również paski wyszukiwania są polami wprowadzania danych.
Divider
Divider to cienka linia, która grupuje zawartość w listach i układach aplikacji / stronach www.
Notificaation
Znajdziesz te małe czerwone kropki wszędzie na interfejsach dzisiaj. Informują nas o tym, że pojawiło się coś nowego, na przykład wiadomość, którą możemy sprawdzić.
Jednak powiadomienia nie tylko informują nas o tym, że ktoś polubił jeden z naszych postów – mogą dać nam znać, że wystąpił błąd lub proces zakończył się sukcesem.
Tag
W projektowaniu UI tagi są w zasadzie etykietami, które pomagają oznaczać i kategoryzować treści. Zazwyczaj składają się z odpowiednich słów kluczowych, które ułatwiają znalezienie i przeglądanie odpowiedniego fragmentu treści. Tagi są często używane na portalach społecznościowych i blogach.
Pickery
Picekry daty i czasu pozwalają użytkownikom wybrać datę i czas. Zaletą stosowania pickerów w porównaniu z polami wejściowymi jest możliwość utrzymania wszystkich danych wprowadzanych przez użytkowników w porządku i spójnym formacie w bazie danych, co sprawia, że informacje są łatwe w zarządzaniu i dostępne.
Loadery
Loadery mogą przybierać wiele form – projektanci lubią być z nimi kreatywni. Loadery są zaprojektowane tak, aby dać użytkownikom znać, że system kończy jakąś akcję w tle i powinni poczekać.
Tooltips
Etykiety narzędzi zapewniają małe podpowiedzi, które pomagają użytkownikom zrozumieć część lub proces w interfejsie.
Komentarze
Dość powszechne w dzisiejszych interfejsach, komentarze wyświetlają treści wprowadzane przez użytkowników do systemu w porządku chronologicznym. Widziałeś je wokół silników mediów społecznościowych i na blogach.
Slidery – karuzele
Karuzele pozwalają użytkownikom przeglądać zestawy treści, takie jak obrazy lub karty, często hiperłącza do większej ilości treści lub źródeł.
Największą zaletą stosowania karuzeli w projektowaniu UI jest to, że umożliwiają one zajęcie tego samego obszaru przestrzeni na stronie lub ekranie przez więcej niż jeden element treści.
Progress bar
Paski postępu pomagają użytkownikom zwizualizować, gdzie są w serii kroków. Najczęściej można je znaleźć w kasach, oznaczając różne etapy, które użytkownik musi ukończyć, aby sfinalizować zakup, takie jak rozliczenie i wysyłka.