Projektowanie UI: Zadanie domowe

0:00No dobra, ale podsumujmy sobie teraz to

0:01wszystko, czego dowiedzieliśmy się dzisiaj o przyciskach.

0:05Przycisk przede wszystkim musi wyglądać jak przycisk.

0:08To jeden z najważniejszych elementów interaktywnych w naszych interfejsach,

0:12więc użytkownik musi wiedzieć, że może w niego kliknąć.

0:15To będzie szalenie ważne w przypadku właśnie linków tekstowych.

0:19Żeby odpowiednio odróżniać je od takich zwykłych tekstów, które znajdują się w

0:23interfejsie, to może być wcześniej wspomniane podkreślenie.

0:27To może być zdanie jakiejś ikony czy nadanie zupełnie innego charakteru.

0:31Starajmy się nie rozróżniać

0:33takich linków tekstowych wyłącznie kolorami, ponieważ osoby, które nie

0:37rozróżniają barw, które mają problemy z widzeniem, nie będą w stanie rozpoznać np.

0:43, że zastosowany kolor jest inny niż ten, który znajduje się w zwykłym tekście.

0:48Pamiętajmy oczywiście o czytelnych fontach.

0:50Jest cała masa krojów pism, które możemy

0:53używać w naszych interfejsach i czasami aż prosi się, żeby wykorzystać coś bardziej

0:58oryginalnego niż takie najprostsze, popularne rozwiązania.

1:04Ale zastanówmy się, czy ten ozdobny krój

1:07pisma faktycznie pomoże naszym użytkownikom w korzystaniu z interfejsu?

1:11Czy nie będzie tak, że będzie im wręcz przeszkadzał?

1:14Jeżeli chcecie wykorzystywać ozdobne kroje

1:16pisma, chcecie trochę pobawić się typografią, to zastanówcie się, czy nie

1:19zrobić tego w takich elementach, które nie są elementami interaktywnymi jak np.

1:24nagłówki albo jakieś wręcz ozdobne teksty, które znajdują się na stronie.

1:29Projektując przyciski myślimy o tym jako

1:31takim zestawie elementów interaktywnych do zaprojektowania.

1:36Jeżeli projektujemy jeden przycisk, to zastanówmy się jak będą wyglądać inne

1:40przyciski, które mogą się obok niego znaleźć.

1:42Jak będą wyglądać stany tego przycisku?

1:45Taki zestaw komponentów zaprojektowanych

1:48powinien dostać developer, który później będzie wdrażać rozwiązanie.

1:52Jeżeli ich nie dostanie, to albo sam zaprojektuje stany, które uzna za

1:57brakujące, albo co jeszcze gorsze w ogóle ich nie wdroży.

2:00I wtedy użytkownik nie będzie widział

2:02czegoś takiego jak efekt najechania kursorem czy wspomniany wcześniej focus.

2:07Pamiętamy o przestrzeni i marginesach i wielkościach.

2:10Te proporcje tekstu względem kształtów

2:13będą bardzo ważne i będą sprawiać, że albo nasz interfejs będzie wyglądał na

2:19dopracowany, taki dopieszczony i uporządkowane, albo wręcz

2:23przeciwnie będzie dawał wrażenie, że gdzieś tam coś się rozjechało, coś się

2:28rozpadło i coś jest po prostu wizualnie nie tak.

2:32I zawsze projektujemy w kontekście.

2:34Nie projektujemy oddzielnie elementów

2:35interfejsu do naszego interfejsu i potem z tego coś składamy.

2:39Czyli nie siadamy do projektowania

2:41przycisków, projektujemy przyciski, a potem dorzucamy je do projektu.

2:45Tylko cały czas projektujemy

2:46wszystko, co jest na naszym ekranie i

2:48komponujemy w taki sposób, żeby tworzyło jednolitą całość.

2:52Tworzymy produkt, tworzymy jakąś aplikację albo stronę internetową i wszystkie

2:57elementy graficzne i efekty graficzne, jakie stosujemy powinny do siebie pasować.

3:02Powinny mieć określone cele i w zależności od funkcji również różnić się od siebie.

3:07I zawsze projektujemy w kontekście.

3:09Bardzo ciężko jest zaprojektować

3:11przyciski, które mają być skuteczne, jeżeli będziemy projektować same

3:15przyciski, a potem wrzucimy je jakoś do projektu.

3:18Bardzo ważny jest kontekst, w jakim ten przycisk będzie się znajdować.

3:21Czy obok tego przycisku będą znajdować się

3:23inne ikony albo inne przyciski, czy będą zdjęcia albo filmiki?

3:28Czy na tym czy pod tym przyciskiem będzie

3:31jakieś tło, które zdjęcie albo bardzo bogatą ilustracją.

3:35Na tej podstawie będziemy wybierać właśnie kształty i wielkości przycisków czy też

3:38style typograficzne, które w przyciskach będziemy wykorzystywać.