Projektowanie UI: Cienie

0:00Ale nie zawsze mamy przyciski z tekstem.

0:02W wielu interfejsach znajdziemy przecież

0:04przyciski, które składają się z samych ikon.

0:07Mogą służyć do pobierania danych,

0:09drukowania, powiększania okna przeglądarki lub całkowitego jej zamykania.

0:14W aplikacjach mobilnych często zastępują

0:16tekstowe przyciski, bo potrafią oszczędzić mnóstwo miejsca.

0:21Takim idealnym miejscem do podglądania

0:23dużych grup przycisków, które są głównie ikonami, będą np.

0:28edytory tekstowe albo

0:30jakieś programy graficzne, gdzie macie całe mnóstwo toolbar'ów

0:36i innych obszarów, które składają się właśnie z całej masy ikon.

0:41Nie zawsze znaczenie ikony, której użyjemy, będzie oczywiste dla użytkownika.

0:46Żeby uniknąć nieporozumień, możemy tworzyć

0:48przyciski składające się z ikon i z tekstów.

0:52I to będzie zawsze najbezpieczniejsze rozwiązania.

0:55Wybierając ikony do naszych interfejsów

0:58bardzo ważne jest zwracanie uwagi na najdrobniejsze szczegóły.

1:02Tutaj macie przykład kilku kalendarzy,

1:04które na pierwszy rzut oka wyglądają całkiem podobnie.

1:08Ale jeżeli weźmiemy same ikony.

1:14I bardzo je powiększymy.

1:17To zobaczycie.

1:20Że całkiem sporo różnią się między sobą.

1:24Pomijając takie szczegóły jak wypełnienie kolorem czy brak tego wypełnienia,

1:29zwróćcie uwagę na sam kształt ikony i stopień zaokrągleń niektórych elementów.

1:36Ponieważ te zaokrąglenia mogą pojawiać się tylko w takim głównym kształcie

1:42ikony, ale również pozostałe elementy,

1:45które gdzieś tam są dodatkiem, również mogą być zaokrąglone.

1:49Zaokrąglone mogą być również tylko

1:51zewnętrzne części ikony, a wewnętrzne mogą być proste.

1:56Takie szczegóły mają znaczenie w momencie,

1:58kiedy używamy kilku ikon w jednym projekcie interfejsu.

2:02Oczywiście w idealnym świecie mamy czas i

2:06umiejętności, żeby robić własne zestawy ikon do naszych interfejsów,

2:11ale coraz częściej projektanci sięgają po gotowe rozwiązania.

2:15Czy są to darmowe UI kit'y, czy icon kit'y czy płatne rozwiązania, gdzie możecie

2:22kupić całe zestawy ikon w jednym stylu i wykorzystać je w swoich produktach?

2:27To, co jest szalenie ważne w przypadku

2:29wyboru ikon do kilku przycisków, to spójność między nimi.

2:34Jeżeli więc wybieramy ikony, które każdy element w swoim projekcie

2:40mają zaokrąglony, albo wręcz przeciwnie wszystkie kąty to 90 stopni

2:46i tych zaokrągleń po prostu brakuje, to trzymajmy się tych wytycznych i

2:51dobieramy ikony tak lub edytujemy je tak, żeby pasowały do pozostałych.

2:56To sprawi, że nasz interfejs będzie

2:58wyglądał na bardziej spójny i uporządkowany.

3:02Styl ikon powinniśmy również dobierać do typografii.

3:05Bardzo często będziemy używać ikony, które będą występować samodzielnie,

3:10ale będzie zdarzać się również, że te same ikony będą pojawiać się obok tekstu.

3:15Np.

3:15gdy damy przycisk tekstowy, usuń element z jakimś

3:22symbolem kosza obok albo anuluj wybór z symbolem krzyżyka, czy też zamknij z

3:28krzyżykiem, które bardzo często zamyka jakieś okna.

3:31To musimy sprawić jako projektanci i przewidzieć.

3:35Przewidzieć, że w momencie, kiedy ta ikona

3:37będzie łączyła się z tekstem, ona również one będą również do siebie pasować.

3:41Czyli ten styl i charakter naszych ikon powinien być w jakimś stopniu dopasowany

3:46do stylu i charakteru typografii, którą wybieramy.