Typy komponentów na stronie internetowej i w aplikacjach

6 min czytania
Typy komponentów na stronie internetowej i w aplikacjach

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.

17 czerwca, 2022 | Ten od WordPressa | WordPress Developer