UI & Mobile Design

UI & Mobile Design

UI – User Interface – budowa interfejsu oraz nawigacji.

Optymalizacja witryn internetowych pod kątem elementów nawigacyjnych i graficznych jest nieuchronna. W procesie tworzenia witryny istotnym elementem jest ustalony schemat takich elementów.

Sytuacja taka wymaga ujednoliconego interfejsu i warto ustalić tego typu schemat na początku tworzenia profesjonalnej witryny np. opartej na Bootstrap. Możemy to wykonać po ustaleniu layoutu głównego, opierając się na kolorystyce.

Warto skorzystać z kilku porad, aby projekt był przejrzysty i przyjazny UI.

Łatwo jest podnieść ręce i powiedzieć: „Nigdy nie będę w stanie sprawić, żeby wyglądało to dobrze, nie jestem artystą!”. Okazuje się, że jest mnóstwo sztuczek, których można użyć do podniesienia poziomu witryny internetowej.

pch-net-pl-300x600px

Użyj koloru i wagi czcionek, zamiast rozmiaru.

art-1-01

Częstym błędem podczas stylizowania tekstu dla interfejsu UI jest zbyt wiele zależności od rozmiaru czcionki.

  • „Czy ten tekst jest ważny? Zwiększmy to.”
  • „Czy ten tekst jest drugorzędny? Zróbmy to mniejsze.”

Zamiast wykonywać ciężkie podnoszenie rozmiaru czcionek, spróbuj użyć koloru lub wagi czcionek, aby wykonać tę samą pracę.

  • „Czy ten tekst jest ważny? Zróbmy to odważniej.”
  • „Czy ten tekst jest drugorzędny? Użyjmy jaśniejszego koloru.”

Warto zastosować wyłącznie dwa lub trzy kolory:

  • Ciemny ( ale nie czarny ) – kolor dla głównej treści ( np. nagłówek artykułu )
  • Szary dla zawartości dodatkowej ( np. data opublikowania artykułu )
  • Jaśniejszy szary dla zawartości pomocniczej ( może być informacja o prawach autorskich w stopce )

Użyj koloru i wagi czcionek, zamiast rozmiaru.

art-1-02

Waga czcionek posiada kilka typów własności absolutnych dla typów „normal” oraz „bold”.

  • normal – czcionka podstawowa ( wartość absolutna 100, 200, 300, 400 )
  • bold – czcionka pogrubiona ( wartość absolutna 500, 600, 700 )

Normalna grubość czcionki to 400 lub 500 dla większości tekstu.
Cięższy krój czcionki to 600 lub 700 dla tekstu, który chcemy wyróżnić.

art-1-03

Staraj się uważać na czcionki poniżej 400 dla interfejsu użytkownika. Mogą pracować dla dużych nagłówków, lecz są zbyt trudne do odczytania przy mniejszych rozmiarach.
Jeśli rozważasz użycie mniejszej wagi czcionek, użyj zamiast tego jaśniejszy kolor lub mniejszy rozmiar czcionki.

Nie używaj szarego tekstu na kolorowym tle.

art-1-04

Tworzenie tekstu o jaśniejszym odcieniu szarości jest świetnym sposobem na zmniejszenie akcentowania na białym tle, lecz nie wygląda to dobrze na kolorowym tle.
Dzieje się tak dlatego, że efekt, który widzimy z szarym kolorem zmniejsza kontrast.

Zbliżanie tekstu do koloru tła pomaga w tworzeniu hierarchii, nie czyniąc jej jasnoszarą.

art-1-05

Istnieją dwa sposoby na zmniejszanie kontrastu podczas pracy z kolorowym tłem:

Nie używaj szarego tekstu na kolorowym tle.

1. Zmniejsz krycie białego tekstu.

art-1-06-1

Użyj białego tekstu i zmniejsz krycie. Dzięki temu kolor tła ujawnia się, zmniejszając nacisk na tekst, który nie koliduje z tłem.

2. Wybierz ręcznie kolor bazujący na kolorze tła.

art-1-06

Działa to lepiej niż zmniejszenia krycia, gdy tło jest obrazem lub wzorem. Zmniejszanie krycia powoduje, że tekst jest zbyt tępy lub sprany.

Wybierz kolor, który ma taki sam odcień jak tło, dostosowując nasycenie i jasność, dopóki nie będzie dobrze wyglądać.

Przesuń cienie.

art-1-07

Zamiast używać dużych wartości rozmycia i rozrzutu, aby cienie boxów były bardziej zauważalne, dodaj pionowe przesunięcie.

Wygląda to o wiele bardziej naturalnie, ponieważ symuluje źródło światła świecące z góry, tak jak jesteśmy przyzwyczajeni do oglądania w prawdziwym świecie.

Odnosi się to również do wewnętrznych cieni np. dla formularzy.

art-1-08

Przesuń cienie.

Używaj mniej ramek oddzielających.

art-1-09

Gdy chcesz odseparować dwa elementy, spróbuj wykorzystać narzędzie odstępu.

Odstępy to świetny sposób na odróżnienie elementów od siebie. Nie są one jedynym sposobem, użycie zbyt wielu może sprawić, że Twój projekt będzie zagracony.

Gdy następnym razem będziesz analizował projekt nawigacji UI, wypróbuj jeden z tych pomysłów:

Używaj mniej ramek oddzielających.

1. Użyj cień dla boxa

Cienie boxa świetnie nadają się do zaznaczenia elementu wrażliwego, lecz mogą być bardziej subtelne i osiągnąć ten sam cel, nie będąc tak mocno rozpraszającym.

art-1-10

2. Użyj dwóch różnych kolorów tła

Nadanie sąsiadującym elementom nieco odmiennych kolorów tła jest zwykle wszystkim, czego potrzeba, aby stworzyć różnicę pomiędzy nimi.

Jeśli używasz już odmiennych kolorów tła i obramowań, spróbuj usunąć obramowania. Efekt może być niesamowity i bardzie przyjazny UI.

art-1-11

3. Dodaj dodatkowe odstępy

Czy istnieje lepszy sposób oddzielenia elementów niż po prostu zwiększenie odstępu?

Rozdzielenie elementów na większą odległość to świetny sposób na rozróżnienie grup elementów bez wprowadzania żadnego nowego interfejsu użytkownika.

art-1-12

Nie powiększaj ikon, które mają być małe.

art-1-13

Jeśli projektujesz coś, co może zawierać duże ikony ( np. sekcja „Funkcje” strony docelowej ), możesz pobrać bezpłatne zestawy ikon np. Font Awesome i podnieść rozmiar, dopóki nie spełni Twoich oczekiwań.

W końcu są to obrazy wektorowe, więc jakość nie ucierpi jeśli zwiększysz rozmiar.

Chociaż to prawda, że obrazy wektorowe nie będą tracić jakości, gdy zostaną powiększone. Jednak ikony, które zostały zaprojektowane w rozmiarze 12-24px, nigdy nie będą wyglądały profesjonalnie, jeśli powiększysz 3x lub 4x niż zamierzone. Brakuje im szczegółów i zawsze wydają się nieproporcjonalnie „grube”.

Nie powiększaj ikon, które mają być małe.

art-1-14

Jeśli masz małe ikony, spróbuj umieścić je w innym kształcie i nadać im kolor tła.

art-1-15

Użyj obramowań akcentujących, aby dodać kolory do "mdłego" projektu.

art-1-16

Jeśli nie jesteś grafikiem a pragniesz dodać odrobinę polotu do interfejsu użytkownika, który nie jest tak pięknie przygotowany jak np. przy pomocy zdjęć lub fotografii. Skorzystaj z obramować akcentujących.

Jedną z prostych sztuczek, które mogą zrobić dużą różnicę to dodanie kolorowych krawędzi. Kolor krawędzi można wybrać zgodnie z charakterem elementu ( np. informacyjny, ostrzeżenie, ważne… ).

Na przykład obok komunikatu alertu:

art-1-17

...lub aby podświetlić aktywne elementy nawigacyjne:

art-1-18

Użyj obramowań akcentujących, aby dodać kolory do „mdłego” projektu.

Dodając obramowanie akcentujące nie potrzeba wykonywać wielu zmian w obecnym systemie nawigacji, a można znacznie poprawić wizualny efekt pod kątem Design UI.

Czy trudno jest zbierać kolory? Spróbuj skorzystać z kilku narzędzi, które pozwolą wyszukiwać kolory, aby uniknąć uczucia przytłoczenia, nieskończonymi możliwościami tradycyjnego próbnika kolorów.

Inspiracje kolorystyczne – dribbble.com
Próbnik kolorów – hslpicker.com

Nie każdy przycisk wymaga kolorowego tła.

art-1-19

Kiedy istnieje wiele czynności, które użytkownik może wykonać na stronie, łatwo wpaść w pułapkę projektowania w oparciu wyłącznie o semantykę.

Framework np. Bootstrap zachęca do wykorzystania menu stylów semantycznych do wyboru, gdy dodajesz nowy przycisk.

Nie każdy przycisk wymaga kolorowego tła.

art-1-20

„Czy to pozytywne działanie? zmień kolor na zielony.”

„Czy to usuwa dane? Zmień kolor na czerwony.”

Semantyka jest ważną częścią projektowania przycisków, ale istnieje ważniejsza cecha, o której powszechnie się zapomina to: Hierarchia.

Każda akcja na stronie znajduje się w piramidzie ważności. Większość stron ma tylko jedną prawdziwą akcję podstawową, kilka mniej ważnych działań dodatkowych i kilka rzadko używanych działań trzeciorzędnych.

Podczas projektowania hierarchii przycisków warto uzgodnić każdy element np. na podstawie takich warunków:

  • Działania pierwszorzędne – powinny być oczywiste. Solidne kolory tła o wysokim kontraście działają tutaj doskonale.
  • Działania drugorzędne – powinny być jasne. Styl kontur lub kolory tła o niższym kontraście to świetna opcja.
  • Działania trzeciorzędne – powinny być możliwe do wykrycia, ale nie rzucające się w oczy. Stylizowanie tych przycisków to wykorzystanie linków tekstowych jako najlepsze rozwiązanie.
art-1-21

„A co z działaniami destrukcyjnymi, czy zawsze powinny być czerwone?”

Niekoniecznie! Jeśli działanie destrukcyjne nie jest podstawowym działaniem na stronie, lepszym rozwiązaniem byłoby nadanie hierarchii przycisku np. drugorzędnej lub trzeciorzędnej.

art-1-22

Zachowaj dużą, czerwoną i odważną stylizację, gdy działanie destrukcyjne jest w rzeczywistości główną akcją w interfejsie, np. w oknie dialogowym potwierdzenia.

art-1-23