0:00 / 0:00

Projektowanie UI: Style przycisków

Komponenty

3 godz. 56 min · Figma · UI, UX i Webdesign

Natalia BieniasHead of Design w Mobee Dick

Czego się nauczysz

Elementy wizualne, które trzeba wziąć pod uwagę przy projektowaniu
Omówienie stanów interakcji na przykładzie popularnych design systemów (Material, Carbon, Fluent)
Przedstawienie często używanych i projektowanych komponentów
Zasady i komponenty, z których składają się formularze
Co robić, a czego nie, gdy projektujemy tabele i listy?
Praktyczne wskazówki do zastosowania w każdym projekcie
Jak można zaprojektować wyskakujące okna?

Szczegóły w projektowaniu UI

Dla UI designera każdy szczegół ma znaczenie. Patrząc na to, z czego składają się interfejsy, można uprościć i powiedzieć, że są to właśnie kształty geometryczne, teksty lub ewentualnie ikony. Do tego dochodzi aspekt stosowania barw i dodatkowych efektów, które mają zbudować hierarchię wizualną w projekcie. Aby budować skuteczne interfejsy, trzeba dokładnie przyjrzeć się każdemu elementowi – a w tym warsztacie omówimy przyciski i linki tekstowe.

Praktyczne wskazówki

Oczywiście, nie będziemy opowiadać o projektowaniu tylko na bazie teorii. W Kursie poznasz wiele praktycznych wskazówek opartych między innymi na popularnym Material Designie. Poznasz porady, które z łatwością zastosujesz w swoich projektach, a także omówimy stany interakcji. Przekonasz się jakie najważniejsze elementy wizualne trzeba wziąć pod uwagę w projektowaniu.

Różnorodne elementy interfejsów

W Kursie omówimy projektowanie takich elementów interfejsu, jak przyciski, formularze, taby i zakładki, listy i tabele czy wyskakujące okna. Przekonasz się jakich zasad warto przestrzegać, tak, by całość była estetyczna i wygodna dla użytkownika.

Praktyczne wskazówki

Dużą część Kursu poświęciliśmy na omówienie praktycznych wskazówek, dzięki którym będziesz sprawnie projektować wygodne interfejsy. Dowiesz się co robić, a czego unikać, tak, by nie powielać częstych błędów w projektowaniu.

Design Systemy

W trakcie Kursu omówimy również stany interakcji na przykładzie popularnych Design Systemów - czyli Material, Carbon czy Fluent. Dowiesz się czym się różnią i jak wpłyną na proces projektowania elementów interfejsu.

Dla kogo jest ten kurs?

Ten Kurs stworzony został z myślą o początkujących projektantach, którzy chcą stosować najlepsze techniki podczas projektowania interfejsów. Kurs pomoże też świetnie ugruntować zdobytą już wiedzę na temat elementów wizualnych.

0:00Role i style przycisków.

0:02Sprawa jest niełatwa, bo co system i środowisko.

0:05Czy książka i podręcznik spotkacie się z

0:07różnymi nazwami rodzajów przycisków i w ogóle z różnym ich podziałem na blogu

0:12swojego czasu też próbowałam to

0:14uporządkować, ale nie jestem jeszcze z tego zadowolona i robię kolejne podejście.

0:19Zacznijmy od roli przycisków w interfejsie.

0:21Tu myślę, że można podzielić je według istotności w procesie, który projektujemy.

0:26Zawsze będziemy mieć jakiś najważniejszy przycisk dla interfejsu, np.

0:31zapisanie danych, przejście w procesie dalej czy zakończenie jakiegoś procesu.

0:36Mówimy wtedy o głównych przyciskach akcji. Tzw.

0:39primary buttons to te, które muszą się mocno wyróżniać,

0:43być widoczne i łatwo dostępne dla użytkownika.

0:47Ale obok głównych przycisków

0:49znajdziemy najczęściej alternatywne ścieżki dla użytkownika.

0:52Jeśli pytamy użytkownika, czy chce na

0:54pewno usunąć jakiś plik, to głównym przyciskiem akcji będzie

0:58potwierdzenie usunięcia, ale damy mu pewnie opcję cofnięcia się

1:02anulowania tego wyboru i wtedy ten drugi przycisk nazwiemy właśnie secondary button

1:09i powinniśmy wizualnie go odróżnić od tego pierwszego, tak żeby użytkownik

1:13przypadkiem nie kliknął w coś, w co nie chciał.

1:16Idąc dokładnie tym tokiem możemy się

1:18spodziewać, że będzie jeszcze jakiś typ przycisków, które określimy jako tertiary, czyli

1:23takie przyciski trzeciego rzędu i to będą np.

1:26grupy wszystkich dodatkowych przycisków, które nie są aż tak istotne.

1:31Oczywiście to jak podzielicie sobie przyciski i jakie style im nadacie będzie

1:35zależało tylko od Was i od typu projektu, który realizujecie.

1:40W różnych przeglądach i podziałach typów przycisków.

1:43Możecie spotkać się również z określeniem CTA, czyli Call to Action wezwanie do działania.

1:49To określenie stosuje się, kiedy chcemy określić jakiś przycisk jako ten

1:53najważniejszy, na którym zależy nam najbardziej, żeby ludzie w niego klikali.

1:58I to ma zastosowanie w przypadku

2:00projektów, które właśnie skupione są na jakiejś jednej ważnej akcji, np.

2:04pobranie pliku albo zapisanie się do newslettera czy coś w tym stylu.

2:08Ale warto pamiętać, że określenie CTA

2:11wcale nie musi ograniczać się do przycisku.

2:14To pojęcie związane z marketingiem.

2:16Stąd jeśli będziecie projektować landing

2:18page, to możecie spotkać się z tym określeniem.

2:21Ale call to action to może być również

2:23bardzo duży numer telefonu z podpisem zadzwoń teraz wydrukowany na plakacie.

2:28Warto o tym pamiętać.