Soft UI: Jak zrozumieć najnowszy trend w designie
Środa, 4 października 2023
W ostatnim roku pojawił się nowy trend w projektowaniu: Soft UI lub Neumorphism jest wszędzie.
Nawet Apple włączyło się w ten trend; firma wprowadziła wiele zmian w swoich mobilnych i desktopowych systemach operacyjnych, które wykorzystują ten styl. Elementy Soft UI wprowadzone przez Apple odzwierciedlają również różne aspekty projektu Microsoft Fluent UI.
Skoro więc Soft UI to tak wielkie pojęcie, co powinniśmy o nim wiedzieć? Jak działa Soft UI i jakie są plusy i minusy jego stosowania?
Soft UI polega na wykorzystaniu rozjaśnień i cieni w elementach projektu, tak aby wyglądały jakby były ułożone warstwowo na stronie.
Termin neumorfizm wywodzi się z poprzedniego stylu projektowania - skeuomorfizmu, w którym projektanci tworzą coś, co jest jak najbardziej zbliżone do swojego realnego odpowiednika. Jeśli pamiętasz zmianę pomiędzy iOS 6 i 7, to z pewnością pamiętasz też zmianę pomiędzy skeuomorficznymi i płaskimi projektami. Projektowanie neumorficzne nie jest jednak tak drastyczne.
Neumorfizm nie skupia się nadmiernie na takich rzeczach, jak kontrast czy podobieństwa między elementami rzeczywistymi i cyfrowymi. Zamiast tego, ta praktyka "miękkiego UI" tworzy bardziej płynne doświadczenie dla użytkowników.
Dzięki neumorfizmowi można odnieść wrażenie, że przyciski i karty są w rzeczywistości częścią tła, na którym się znajdują. Ten trend usuwa krzykliwe aspekty typowego interfejsu i koncentruje się na delikatnym stylu, który pozostaje spójny w całym projekcie.
Soft UI polega na wygładzeniu doświadczenia poprzez sprawienie, że wszystko jest bardziej połączone. W estetyce nie ma nic nadmiernie surowego, stąd określenie "soft".
Jakich więc cech możesz się spodziewać?
Zaokrąglone rogi: Soft UI usuwa niektóre ostrzejsze części interfejsu, takie jak narożniki modułów i segmentów. Pozwala to na bardziej łagodny wygląd całości. W tym eksperymencie od Iqonic Design, możemy zobaczyć jak zaokrąglone rogi łączą wszystko razem.
Przezroczystość i rozmycie tła: Rozmycie tła i przezroczystość są dziś bardziej popularne, odkąd pojawiło się niesławne rozwiązanie z iOS 7. Większość ludzi nie znosiła wyglądu ultra-minimalizmu w połączeniu z cienkimi czcionkami. Jednak efekt rozmycia tła był bardziej popularny. Rozmycie w soft UI pokazuje, że część okna jest połączona z resztą systemu operacyjnego. Wygląda to tak, jakby części tła w aplikacji przeciskały się na powierzchnię.
Ujednolicone symbole: W projekcie soft UI wszystko musi idealnie pasować. Wszystko, co nie wygląda jakby było częścią tej samej całości, psuje wrażenia. W tym eksperymencie projektowym autorstwa Surja Sen Das Raj, możesz zobaczyć jak wszystkie kolory, cienie i gradienty są spójnie połączone. Dzięki temu, że wszystko jest bardziej jednolite, doświadczenie użytkownika końcowego płynie idealnie.
Jak zatem wygląda neumorfizm w procesie projektowania UI?
Ostatecznie, chodzi o subtelny kontrast i wyrównane kolory. Każda część interfejsu musi wyglądać tak, jakby była częścią tej samej formy. Twój element i tło muszą być tego samego koloru, abyś mógł stworzyć wrażenie, że obiekty wystają z tła.
W przypadku Soft UI, kluczem do sukcesu są cienie i podświetlenia.
Przyjrzyjmy się kilku kluczowym krokom.
Kiedy projektujesz swój interfejs, pamiętaj, że ostre krawędzie sprawiają, że interfejs jest bardziej poważny i formalny. Zaokrąglone rogi są bardziej zabawne i przyjazne.
To, co również sprawia, że projekt wygląda lekko i delikatnie, to duża ilość głębokich cieni i rozjaśnień. Kiedy dodajesz cienie do elementów, tworzysz wizualną hierarchię. Elementy, które rzucają większy, głębszy cień są tymi, które znajdują się najbliżej Ciebie. Dlatego też tylko kilka elementów powinno rzucać intensywny cień. Cała reszta powinna działać w tle.
Spójrz na przykład na ten projekt autorstwa Alexandra Plyuto.
Gradienty są częścią procesu cieniowania i podświetlania w projektach Soft UI . Idealnie byłoby, gdybyś wybrał kolory z tej samej palety, tylko stonowane lub rozjaśnione, w zależności od potrzeb. Gradient powinien być ledwo widoczny, ale na tyle, aby elementy się wyróżniały.
W przypadku białych gradientów, takich jak podkreślenia, użyj bardzo delikatnego koloru gdzieś pomiędzy bielą a odcieniem tła. Na przykład, rozważ ten projekt od Mariny Terichevy.
Na koniec, pamiętaj, że zasada neumorfizmu w projektowaniu polega na drobnych szczegółach.
Wybór czcionki, która wizualnie pasuje do tła jest doskonałym wyborem. Możesz jednak wybrać również coś bardziej kontrastowego, co pomoże wyróżnić się informacjom.
Dodanie odrobiny tła do czcionki również może być odpowiednie. Na przykład, jeśli masz zieloną czcionkę i szare tło, dodaj trochę szarości do mieszanki.
Dodatkowe elementy w projekcie, takie jak umożliwienie przyciskowi przesunięcia się do bardziej zagłębionego stanu po kliknięciu, to świetny sposób, aby uczynić soft UI bardziej angażującym. Wszystko, z czym użytkownik końcowy wchodzi w interakcję, musi sprawiać wrażenie płynnego i doskonale zunifikowanego.
Tylko dlatego, że jakiś proces projektowania jest trendy - nie oznacza, że nie będzie miał swoich problemów.
Neumorfizm to zabawny sposób na nadanie aplikacjom, systemom operacyjnym i stronom internetowym bardziej przyjaznego i nieformalnego charakteru. Jednak to łagodniejsze podejście ma też swój słaby punkt.
Kiedy masz do czynienia z niewielkim marginesem kontrastu i koloru, w którym neumorfizm działa dobrze, trudno jest uzyskać właściwy efekt za każdym razem. Na przykład, ten całkowicie żółty projekt dla Dtail Studio może być dla niektórych przytłaczający.
Niewielkie odchylenie w nasyceniu lub problem z cieniowaniem może sprawić, że cały efekt neumorfizmu stanie się zupełnie bezcelowy.
Kolejną istotną kwestią jest dostępność. Soft UI design wygląda świetnie dla osób, które mają pełny zakres widzenia. Jednak użytkownicy niedowidzący mogą nie dostrzec tych samych korzyści. Każdy, kto nie ma doskonałego wzroku, może zobaczyć, że istotne obiekty znikają w tle.
Twoi użytkownicy nie muszą mieć znacznych problemów ze wzrokiem, aby zmagać się z neumorfizmem. W tym projekcie chodzi o miękkość, która powoduje, że elementy niemal zlewają się ze sobą. Osoby z ekranami o niskiej jakości, które nie mają tak wielu pikseli do pracy, nie zobaczą tych elementów.
Innym ważnym problemem związanym z neumorfizmem jest to, że jego subtelność może prowadzić do problemów z przyciąganiem kliknięć i konwersji. Użyteczność jest najważniejszą kwestią w każdym projekcie UI.
Niestety, kiedy skupiasz się na subtelnych elementach w całym interfejsie, użyteczność czasami traci na znaczeniu.
Weźmy na przykład przyciski - są one niezbędne w każdym interfejsie. Aby ułatwić klientowi podróż, przyciski te muszą być zauważalne i muszą przechodzić w różne stany, kiedy klienci wchodzą z nimi w interakcję.
Aby doświadczenie z przyciskami było doskonałe, użytkownicy muszą natychmiast zauważyć ich wygląd. Jednakże, sedno neumorfizmu obraca się wokół idei, aby nic nie wyróżniało się za bardzo.
To nie jest tylko problem z dostępnością, ale również z konwersją.
Neumorfizm jest łagodny dla oczu, z minimalnym kontrastem kolorów i kilkoma kolorowymi akcentami. Oznacza to, że przyciski CTA nie wyróżniają się tak bardzo, jak powinny. Przyciski niemal wtapiają się w tło, a strona z trudem przyciąga uwagę do obszarów, które najbardziej tego wymagają.
Kluczem do odblokowania korzyści płynących z miękkich interfejsów UI bez gubienia się w negatywnych aspektach - jest właściwe eksperymentowanie. Jak w przypadku każdego nowego trendu w projektowaniu, profesjonaliści i artyści będą musieli nauczyć się łączyć elementy soft UI w sposób, który nie zagraża użyteczności.
Trendy w projektowaniu UI nie mogą skupiać się wyłącznie na estetyce, ponieważ komfort klienta zawsze będzie istotną częścią procesu.
Jeśli chcesz zacząć odkrywać, oto niektóre z najlepszych zestawów i freebies, abyś mógł zacząć:
Świat projektowania i trendy, z których korzystamy, ciągle się zmieniają. Firmy zawsze szukają najlepszych sposobów na nawiązanie kontaktu z użytkownikami. Często oznacza to skupienie się na interfejsie, który naprawdę łączy się z docelową grupą odbiorców i zapewnia najlepsze możliwe rezultaty.
Trend soft UI design ma swoje zalety i wady. Z jednej strony, gładki wygląd każdego elementu na połączonym ekranie może dostarczyć zachwycającej estetyki. Przyciski wydają się mniej narzucające, a elementy są bardziej przyjazne i łatwiejsze w interakcji.
Z drugiej strony, neumorfizm utrudnia również przyciągnięcie uwagi odbiorców w miejscach, w których jest to najważniejsze. Cierpi na problemy z dostępnością i wymaga wiele uwagi i praktyki.
