Trendy w projektowaniu interfejsów użytkowników

8 min czytania
Trendy w projektowaniu interfejsów użytkowników

UI i UX wciąż się rozwija by serwować internautom i użytkownikom aplikacji jeszcze lepsze doznania. UI jest rozwijany i tworzony, tak aby kojarzył nam się z daną marką.

Dlatego w miarę rozwoju interfejsów powstają kolejne trendy, które w miarę popularyzacji zyskują swoje nazwy. W tym artykule chciałbym Ci przedstawić kilka zagadnień związanych z trendami w projektowaniu UI. Omówię takie trendy jak glassmorphism, neumorphism i brutalism.

Glassmorphism – efekt szkła w intefejsie

Glassmorphism UI to najnowszy trend, który pojawił się w interfejsie użytkownika najbardziej znanych i popularnych marek takich jak Apple, Microsoft czy Dripple. Przezroczystość i rozmyte tło to najbardziej atrakcyjne cechy tego nowego interfejsu, który przyciąga wzrok w połączeniu z kolorowymi obrazami i kształtami.

Glassmorphism UI to interfejs oparty na kartach, używany do projektowania interfejsu użytkownika stron internetowych, smartfonów, aplikacji internetowych, aplikacji mobilnych itp. w oparciu o trzy ważne efekty: przezroczystość (frosted-glass), żywe lub pastelowe kolory oraz lekkie obramowanie. Połączenie tych trzech efektów daje w efekcie szklisty styl zwany Glassmorphism UI.

Celem zaprojektowania interfejsu użytkownika z tym wzorem jest dokonanie równowagi pomiędzy trzema elementami:

  • Rozmycie tła
  • Cień
  • Przezroczystość

Zalety stylu Glassmorphism

  • Oferowanie pięknego i minimalistycznego wyglądu
  • Zapewnienie dynamicznego języka projektowania
  • Poprawa UX poprzez utrzymanie zaangażowania i inspiracji użytkowników

Wady stylu Glassmorphism

  • Tworzy problemy z czytelnością, szczególnie dla użytkowników niedowidzących lub nierozrużniających kolorów (daltonistów)
  • Sprawiają, że wszystkie ikony wyglądają jak przycisk akcji

Jakie są główne elementy i cechy Glassmorphism UI?

Ideą projektu Glassmorphism jest stworzenie interfejsu, który wygląda jak seria szklistych paneli unoszących się w przestrzeni tła. Aby ten innowacyjny i zaskakujący styl miał miejsce, wymagane są następujące główne cechy:

Tworzenie przezroczystości przez rozmycie tła

Przezroczystość i rozmycie tła to główne cechy pozwalające na wyświetlenie efektu glassy. Ponieważ jest to interfejs oparty na kartach, więcej światła musi być przyciągane przez „kartę” lub warstwę na górze, aby zwiększyć przejrzystość, podczas gdy głębsza warstwa ma mniejszą przejrzystość. Dodanie subtelnego cienia wokół konturów kart daje wrażenie dodatkowej głębi w tym projekcie.

Styl wielowarstwowy

Jedynym sposobem na zbudowanie Glassmorphism w projekcie interfejsu użytkownika jest stworzenie stylu wielowarstwowego, w którym niektóre kolorowe i przezroczyste warstwy są dobrze dopasowane na rozmytym tle. Użycie rozmytych obiektów na rozmytym tle lub głębszej warstwy wywołuje przestrzeń 3d w układzie perspektywicznym.

Kolorowe, ale subtelne tło

Wybór żywych kolorów dla tła jest niezbędny przy projektowaniu Glassmorphism UI. Użycie kolorowych, ale subtelnych kolorów może podkreślić rozmytą przezroczystość, która odgrywa kluczową rolę w uczynieniu stylu glassy widocznym na tym nowym projekcie.

Istnieje kilka innowacyjnych trendów, które możesz dodać do tła, aby uczynić je bardziej atrakcyjnym dla odwiedzających lub dopasować je do innych elementów, które już istnieją na Twojej stronie internetowej, w tym:

Gradienty

Dobrym pomysłem jest dodanie gradientu o podobnej kolorystyce do tła Twojego stylu Glassmorphism. W ten sposób możesz stworzyć harmonię pomiędzy różnymi elementami, które istnieją w ogólnym wyglądzie Twojego interfejsu.

Elementy geometryczne

Korzystanie z elementów geometrycznych to kolejny trend, który można połączyć z rozmytym tłem, aby uzyskać przyjemny i zaskakujący wygląd. Brzmi to świetnie, jeśli dodasz je również do swojego projektu z oszronionego szkła. Efekt końcowy będzie dla Ciebie zaskoczeniem! Aby lepiej dopasować elementy geometryczne do tła, spróbuj użyć prostych odcieni i edytować promień granicy lub kolory.

Projekty 3D

Ogromne podejście jest w kierunku używania projektów 3D wśród programistów UI/UX dokładnie tak jak Glassmorphism, w tych dniach. Dlaczego nie skorzystasz z obu tych możliwości? Jest to świetna okazja, aby uczynić element 3D wybitnym poprzez użycie nakładki Glassmorphism. Nie ma specjalnej zasady dodawania różnych elementów 3D przed i za nakładką, więc pozwól swojej kreatywności przemówić i ciesz się budowaniem przyciągającego wzrok projektu poprzez połączenie dwóch popularnych trendów 2021 roku.

6 prostych kroków, aby wykorzystać glassmorphism

Biorąc pod uwagę powyższe zasady, jesteś gotowy, aby włączyć Glassmorphism do swojego interfejsu użytkownika, dostosowując kod HTML/CSS w następujący sposób:

  • Znajdź najlepsze miejsce / punkt na swojej stronie lub aplikacji
  • Wybierz jasny i kolorowy gradient dla tła
  • Rozważ kontrowersyjny projekt dla ikon
  • Ustaw odpowiedni stopień przezroczystości za pomocą popularnego narzędzia do projektowania UI, takiego jak Figma
  • Dodaj do swojego projektu delikatne obramowania, aby nadać mu wymiar
  • Dodaj cień pod ikoną, aby nadać jej szklany wygląd

Wskazówki, które ułatwią stosowanie Glassmorphismu

  • Nie stosuj całkowicie efektu rozmycia i przezroczystości w obszarach, które wymagają aktywnych interakcji.
  • Nie stosuj tej estetyki projektu w przyciskach, menu nawigacyjnym i podobnych elementach.
  • Używaj efektów przezroczystości i rozmycia nie tylko dla celów dekoracyjnych, ale dla wzmocnienia ogólnego wyglądu i odczuć.
  • Zastosuj odpowiedni kontrast z kartami w interfejsie, aby zapewnić łatwą dostępność.
  • Twórz odpowiednie odstępy między kartami i grupuj wszystkie obiekty powiązane ze sobą
  • Unikaj problemów z dostępnością związanych z Glassmorphism poprzez wybór właściwego kontrastu i intuicyjnego grupowania kart w układzie projektu

Przykłady projektów z wykorzystaniem Glassmorphismu

Brutalism Design

Podobnie jak minimalizm, brutalistyczny design cyfrowy wywodzi się z wcześniejszego ruchu. Brutalizm internetowy jest inspirowany brutalistyczną architekturą lat 50-tych. Brutalistyczne budynki charakteryzują się ciężkim i „bezlitosnym” wyglądem.

Brutalizm w projektowaniu cyfrowym to styl, który celowo stara się wyglądać surowo, chaotycznie lub bez ozdób. Jest to echo stron internetowych w stylu wczesnych lat 90-tych (pomyśl o Craigslist i Drudge Report). Czasami ten aspekt brutalizmu jest wyrażany jako goła, prawie naga strona HTML z niebieskimi linkami i monochromatycznym tekstem Monospace.

Zarówno w architekturze, jak i w projektowaniu cyfrowym brutalizm jest postrzegany jako reakcja przeciwko sztuczności i lekkości. Zwolennicy chwalą go za szczerość i śmiałość.

Brutalistyczni projektanci chcą oderwać się od nieświeżych, oklepanych, wstępnie przygotowanych stron, które dominują w dzisiejszym Internecie. Chcą, aby sieć była prawdziwa sama w sobie, aby czuć, że jest szczera i nie wymyślona. Brutalistyczna filozofia dzieli ten ostatni cel z flat design, choć te dwa style estetyczne osiągają go na bardzo różne sposoby.

NN/g wykorzystywało ten styl przez wiele lat, celowo stosując zredukowany UI, nawet gdy bardziej wymyślne projekty wizualne (i animacje Flash) stały się popularne w latach 2000. Naszym celem było przedkładanie funkcji nad formę, a także wykorzystanie refleksyjnego efektu emocjonalno-designerskiego, jaki to podejście wywoływało wśród fanów użyteczności, którzy słusznie sprzeciwiali się zbyt krzykliwym projektom.

Przykłady projektów wykorzystujących brutalism

Neumorphism

Neumorfizm narodził się ze skeuomorfizmu i przeszedł do tworzenia całego nowego stylu UX. Projektanci z całego świata widzieli chwytliwe neumorficzne projekty na Dribbble i Behance – a teraz jest to trend sam w sobie.

Neumorfizm to nowe ujęcie projektowania skeuomorficznego. Mimo, że odnosi się do skeuomorfizmu, istnieje nowy nacisk na cały styl projektowania UI z neumorfizmem. Ten nacisk nie jest koniecznie na kontrast lub podobieństwo między światem rzeczywistym i cyfrowym, ale raczej na paletę kolorów.

Tak, dobrze przeczytałeś. Neumorfizm dotyczy koloru całego ekranu i dostarczenia użytkownikom całkowicie unikalnych doświadczeń.

Wyobraź sobie swój klasyczny interfejs iOS lub Android dla odtwarzacza muzycznego. Masz tło, na którym umieszczamy kilka elementów, dodając warstwy i tworząc głębię. Dzięki neumorfizmowi stworzysz miękki interfejs, w którym elementy UI nie są umieszczone na tle – ale za nim.

Daje to poczucie, że elementy takie jak przyciski czy karty są w rzeczywistości wewnątrz tła i są widoczne tylko dlatego, że wystają z wnętrza. Ogólny styl to przede wszystkim jednolite kolory, niski kontrast i odpowiednia gra cieni w projekcie UI.

Neumorfizm to przede wszystkim subtelny kontrast i jednolite kolory. Ale jak stworzyć interfejs, który zapewni efekt „wow” bez żadnych krzykliwych elementów? W neumorfizmie wszystko polega na wykorzystaniu cieniowania i światła.

W szerokim ujęciu, głównym składnikiem jest upewnienie się, że twój element i tło są dokładnie tego samego koloru. Dzięki temu możemy stworzyć wrażenie, że te elementy wychodzą z wnętrza tła, używając cieniowania, aby stworzyć wystający wygląd.

Upewnij się, że kolor tła i komponentów działa dobrze w formie stałej, ponieważ będziesz musiał zastosować ten sam kolor w całym projekcie UI. Aby gra cieni działała, Twoje tło nie może być całkowicie czarne lub białe.

Będziesz potrzebował jakiegoś koloru, aby cień dostarczył wizualnej sztuczki. Gdy masz już główny kolor, możesz następnie poszukać dwóch cieni: ciemnego i jasnego cienia.

Są to dodatkowe szczegóły, które zastosujesz na wszystkich komponentach, tworząc jednolity styl w projekcie UI.

Karty w Neumorfizmie

Karty neumorficzne różnią się od innych znanych nam stylów projektowania, takich jak karty w Material Design, na przykład, ponieważ nie wyglądają, jakby się unosiły. Nie ma cienia, który tworzyłby ten efekt unoszenia się, nawet gdy użytkownik unosi się nad tą kartą.

To dlatego, że wysuwają się z tła, tworząc podniesiony wygląd w projekcie UI.

Przykłady projektów wykorzystujące Neumorphism

15 czerwca, 2022 | Ten od WordPressa | WordPress Developer