Projektowanie UI: Marginesy

0:00Przyciski mogą również rzucać cień na tła, na których się znajdują.

0:03Oczywiście zastosowanie cienia będzie

0:06zależało od stylu graficznego, który nadajemy całemu produktowi.

0:11Cienie mogą sprawić, że projektowi nadamy

0:13wrażenie trójwymiarowości, ale też nie można z nimi przesadzić.

0:18Źle zastosowane mogą nadać naszemu

0:20interfejsowi wygląd aplikacji rodem z późnych lat 90'tych.

0:25No i tu znów chyba, że bardzo zależy nam na tym efekcie.

0:28Oczywiście możemy próbować go odtworzyć

0:32w zależności od tego, jak ustawimy nasz dzień.

0:35Możemy sprawić, że przycisk, który

0:38tworzymy będzie wyglądał na zbliżony do tła, na którym się znajduje, albo wręcz

0:44przeciwnie będzie dawał wrażenie, że trochę nad nim lewituje.

0:49Cienie mają kilka swoich właściwości, o których musimy pamiętać.

0:53Przede wszystkim to barwa.

0:55Jeżeli chodzi o cienie, są dwa najpopularniejsze sposoby na to, jak

0:59dobierać barwę tego cienia, który znajduje się pod obiektem.

1:02Po pierwsze możemy wybrać barwę, która

1:05pochodzi od koloru tła, na którym ten przycisk się

1:10znajduje i w tym przypadku jest to jakiś taki odcień zbliżony do niebieskiego,

1:16ponieważ właśnie na takim tle przycisk się znajduje.

1:19Drugim popularnym sposobem jest pobieranie koloru przycisku, czyli tutaj.

1:24W tym przypadku to może być jakiś bardziej lub mniej intensywny zielony.

1:29Nie jestem największą fanką

1:31wykorzystywania tego drugiego sposobu, ponieważ efekt jaki możemy przypadkiem

1:36uzyskać to wrażenie rozmycia się kształtu przycisku.

1:39Oczywiście możemy temu

1:42spróbować w jakiś sposób zapobiegać, np.

1:46stosując dodatkowe obrysy.

1:50I wtedy widać wyraźną, wyraźną różnicę między tym cieniem a samym kształtem.

1:56Natomiast jest to tylko i wyłącznie

1:58kwestia gustu i ani jeden, ani drugi przykład nie są czymś

2:04rekomendowanym czy wręcz wymaganym w projektowaniu interfejsów graficznych.

2:10Zachęcam do tego, żeby tymi odcieniami cieni się pobawić i raczej rezygnować z

2:16takiego połączenia intensywnego koloru z czarnym, bardzo ciemnym cieniem.

2:23Oprócz tego, że mamy barwę tego cienia,

2:26mamy również taką właściwość jak rozmycie z tym efektem rozmycia.

2:31Na pewno wielokrotnie spotkaliście się,

2:32zwłaszcza jeżeli wcześniej zajmowaliśmy się projektowaniem graficznym.

2:36To coś, co dosyć często stosuje się w w

2:39projektach i z tym blur'em, tym rozmyciem w cieniach.

2:45Możemy oczywiście w wielu programach do projektowania interfejsów sterować, więc

2:50możemy sprawiać, że to rozmycie jest takie większe.

2:55Dzięki temu daje wrażenie takiego płynniejsze przejścia od jednej

3:01do drugiej, czyli od barwy cienia do tła, na którym się znajduje.

3:06Ale oczywiście możemy również sprawiać, że ten blur będzie bardzo mały

3:10i ten cień będzie dawał takie wrażenie jakiegoś kształtu, który znajduje się

3:17niżej albo gdzieś pod tym, pod tym obiektem oprócz barwy i rozmycia.

3:24Mamy również wartości X i Y. Co to znaczy?

3:27To jest nic innego jak ułożenie cienia na osi X i Y.

3:31Jeżeli będziemy sterować wartością X, to

3:33będziemy nasz cień przesuwać trochę w prawo.

3:37Jeżeli będziemy sterować osią Y, to będziemy przesuwać cień np.

3:42w dół.

3:43Oczywiście tutaj również możecie stosować najczęściej również minusowe wartości, co

3:48oznacza, że będziemy przesuwać cień w lewo i w górę.

3:54Jeżeli nadamy tutaj wartość 0, to tak jakbyśmy sprawili, że

3:58jest idealnie pod obiektem, którego dotyczy, czyli ten przycisk.

4:03Jeżeli teraz dalibyśmy bardzo mały blur, właściwie z cieniem byłby niewidoczny.

4:10Natomiast jeżeli ten blur mocno powiększymy, to będziemy dawać wrażenie,

4:14że ten cień idealnie wychodzi właśnie spod tego przycisku i z każdej strony ta

4:18wartość tego cienia, wielkości, tego cienia jest równomierna.

4:22Dobrą zasadą jest rezygnowanie z bardzo kontrastowych kolorów, jeżeli chodzi o

4:27dobór koloru cieni do koloru tła przycisku.

4:32Oczywiście możemy stosować takie zabiegi, jeżeli mamy kolory.

4:39Które są zbliżone do

4:42tła naszego przycisku, bo to wtedy ma jeszcze jakiś sens.

4:48Ale samo połączenie kolorystyczne poszczególnych elementów będzie miało

4:52ogromny wpływ na to, jak będziemy odbierać nasz interfejs, więc rezygnujmy raczej z

4:56tych odcieni, które wydają się mniej atrakcyjne,

5:00mniej przyjemne dla naszych oczu i dzięki temu nasze interfejsy będą po prostu

5:04wydawały się łatwiejsze i przyjemniejsze w użyciu.

5:08Oczywiście tworząc efekty graficzne nie musimy bazować tylko na tym, co jest

5:13dostępne tak po prostu w programie i czasami można trochę pokombinować.

5:18Możecie spotkać się w sieci z różnymi

5:20sposobami na to, jak sprawić, żeby te cienie były bardziej atrakcyjne.

5:24Jednym z takich popularnych rozwiązań jest

5:27stosowanie warstwowych cieni, czyli wybieramy sobie jeden element

5:33mamy tło przycisku, mamy przycisk, który ma określony jakiś cień, a zaraz pod nim

5:40znajduje się kształt, który ma zupełnie inny cień.

5:45Akurat Figma, z której korzystam daje

5:47możliwość tworzenia kilku warstw cieni i osobnego sterowania stylami tych cieni.

5:54Ale nie jest to jednak zbyt popularne

5:56rozwiązanie i wiele programów jeszcze takiej funkcji nie ma.

6:00Dlatego takie stosowanie wielowarstwowych

6:02elementów wielowarstwowych cieni może być jakimś takim rozwiązaniem pośrednim.

6:07Żeby uzyskać efekt, na którym nam zależy.

6:11Oczywiście takie cienie zewnętrzne nie są

6:13jedynym typem cieni z jakimi możecie spotkać się w projektowaniu interfejsów,

6:18bo mamy również bardzo popularne cienie wewnętrzne.

6:21Z tymi rzadziej spotkacie się w przypadku projektów przycisków.

6:25Częściej wykorzystywane są np.

6:26w polach formularzy.

6:28Jeżeli mamy jakiś element, do którego

6:30chcemy coś wpisać, to taki cień może dawać nam do zrozumienia, że to jest coś

6:34wklęsłego, w co możemy coś po prostu wprowadzić w przyciskach

6:39takie wewnętrzne cienie zdarza się

6:41stosować, kiedy projektujemy inne stany interakcji.

6:44O stanach interakcji jeszcze Wam zaraz opowiem.