Projektowanie UI: Role przycisków

0:00Na koniec coś niewidocznego, ale szalenie ważnego w naszych przyciskach.

0:04Mowa o marginesach, które stosujemy do każdego elementu w przycisku.

0:07To, w którym miejscu ułożycie tekst i w jakiej odległości znajdzie się ikona,

0:11będzie miało wpływ na atrakcyjność naszego komponentu.

0:14Warto poświęcić im chwilę i przede

0:15wszystkim zadbać o to, żeby spójnie je stosować.

0:20Poza stosowaniem takich marginesów wewnętrznych musimy wziąć pod uwagę

0:24również to, co będzie się działo na zewnątrz naszych przycisków.

0:28Możecie pomyśleć o tym jako takim polu bezpieczeństwa naszego przycisku.

0:33Czyli w tym obszarze nie powinien znaleźć

0:35się żaden inny interaktywny element, żeby użytkownicy np.

0:40przypadkiem nie klikali w coś, w co nie chcą kliknąć.

0:44To będzie bardzo ważne w przypadku przycisków tekstowych, które stosujemy

0:48również w naszych interfejsach, ale co ważniejsze w tym obszarze jest to, że ten

0:54obszar, który teoretycznie jest niewidoczny dla naszego użytkownika,

0:58przynajmniej dopóki w niego nie kliknie, może być elementem interaktywnym.

1:04Czyli możemy wchodzić w interakcję z czymś, czego pozornie nie widzimy.

1:08Myślę, że mogliście spotkać się z takim przypadkiem, kiedy na tekstowym przycisku

1:14ten obszar aktywny był ustawiony wyłącznie na kształt liter.

1:18Co to oznacza?

1:19Jeżeli kursorem nie jedziemy idealnie na literę, która znajduje się w słowie, to

1:24nie będziemy mogli kliknąć na ten link tekstowy.

1:28To jest strasznie irytujące i ciężkie w użyciu.

1:31Dlatego raczej, kiedy mamy właśnie te tekstowe przyciski, stawiamy się ustawiać

1:35ten obszar aktywny na dużo większą powierzchnię.

1:39Czyli zanim jeszcze na jedziemy na sam

1:40napis uaktywnia nam się kursor i pozwala już kliknąć w dany element.

1:46To dobra praktyka, o której warto pamiętać

1:48i na którą warto uczulać również frontend'owców, z którymi pracujecie.

1:53Tak naprawdę tutaj najbardziej rozchodzi się o proporcje, proporcje marginesów,

1:57tych białych, pustych przestrzeni do tego, co znajduje się w środku.

2:01Zwróćcie uwagę, żeby odpowiednio

2:03dopasowywać te odległości od tekstu do krawędzi przycisku.

2:08Jeżeli one będą zbyt długie, ale również proporcja wysokości względem szerokości

2:12będzie zaburzona, to będziemy mieć wrażenie takiego niezdarnego, niechlujnego

2:16przycisku, który przypadkiem się rozciągnął.

2:19Raczej stosujemy również szersze przyciski niż wyższe.

2:24Bardzo rzadko zdarza się, żebyśmy

2:25stosowali przyciski, które mają bardzo zbliżoną wysokość do szerokości.

2:30Poza oczywiście takimi standardowymi

2:32rozwiązaniami jak przyciski z ikonami czy ikony z podpisami, wtedy najczęściej

2:37zdarza się, że są to właśnie przyciski pionowe czy też kwadratowe.

2:42Ale jeżeli mamy takie klasyczne przyciski, które składają się z tekstu

2:46i tła, raczej nadajemy im kształt bardziej szerszy niż wyższy.

2:51Musimy również zwracać uwagę na proporcje tekstu względem tła, żeby te marginesy od

2:57tekstu do krawędzi nie były zbyt duże, bo wtedy będziemy mieć wrażenie właśnie

3:01takiego przeskalowanego zbyt dużego, topornego elementu.

3:07Stosowanie odpowiednich marginesów wewnątrz obiektów

3:11daje poczucie takiego uporządkowania i harmonii w naszych interfejsach.

3:17Czasami bardzo małymi zabiegami właśnie nadawania tego powietrza, tej przestrzeni

3:22wokół elementów takich jak tekst i ikona, może sprawić, że ten przycisk

3:30czy jakiś inny element interfejsu nagle zyska dużo więcej.

3:36Niż kiedy mieliśmy to wszystko takie ściśnięte.

3:40To samo tyczy się ikon i konstrukcji i konstrukcji ikon.

3:43Jeżeli zamykamy ikony w jakiś tłach albo rysach, to również upewnijmy się, że ta

3:48odległość obrysu od samej ikony jest odpowiednio duża.

3:52Czasami takie za duże, przeskalowane elementy wyglądają po prostu niezgrabnie.