Nowy trend w projektowaniu interfejsu użytkownika: przegląd neumorfizmu

Projekt neumorficzny to trend wizualny, który zyskał popularność wśród projektantów interfejsu użytkownika i stał się popularnym wyborem estetycznym dla współczesnego oprogramowania, stron internetowych i aplikacji mobilnych. Opierając się na aspektach fotorealizmu i projektowania 3D, neumorfizm przenosi symulowane atrybuty fizyczne — takie jak cienie i tekstury — do interfejsów cyfrowych. Aby w pełni zrozumieć wpływ projektu neumorficznego, przyjrzyjmy się jego początkom.

Początki projektu neumorficznego

Kiedy Apple wypuścił Macintosha w 1984 roku, był to pierwszy komputer osobisty z graficznym interfejsem użytkownika. W tamtym czasie współzałożyciel Apple, Steve Jobs, wierzył, że znajome ikony i symbole, takie jak kosz na śmieci lub folder, pomogłyby początkującym użytkownikom komputerów lepiej zrozumieć, jak poruszać się po interfejsie Macintosha. Jobs opuścił Apple w 1985 r., ale po powrocie w 1997 r. skierował estetykę interfejsu użytkownika w stronę skeuomorfizmu, stylu, w którym komponenty interfejsu odzwierciedlają swoje odpowiedniki w świecie rzeczywistym w najdrobniejszych szczegółach. Zanim Mac OS X został uruchomiony w 2001 r., Apple opracował pełnoprawny system skeuomorficzny o nazwie Aqua — język projektowania o tematyce wodnej z błyszczącymi ikonami, przyciskami i rozwijanymi menu.

Wraz z wprowadzeniem iPhone'a w 2007 roku marka skeuomorfizmu firmy Apple stała się jeszcze bardziej realistyczna. Na początku lat 2010 projekt skeuomorficzny był de facto wyborem dla interfejsów cyfrowych. Jednak w miarę, jak świat stał się bardziej zależny od urządzeń mobilnych, granice skeuomorfizmu stały się jasne: tworzenie skeuomorficznych komponentów projektowych jest czasochłonne i wymaga wysokiego stopnia umiejętności technicznych. I chociaż skeuomorficzne komponenty wyglądają świetnie na komputerach stacjonarnych i ekranach głównych, ich drobne szczegóły zwykle znikają po przeskalowaniu do małych rozmiarów.

Stojąc w ostrym kontraście z realistycznymi gradientami i teksturami skeuomorfizmu, w połowie 2010 roku rozpowszechniono płaskie wzornictwo, ponowne uruchomienie minimalizmu z lat 60. w erze cyfrowej. Płaska konstrukcja pozbawiona elementów interfejsu ze wszystkiego poza ich najważniejszymi elementami — linią, kształtem i kolorem — dzięki czemu jest to szybki i bardzo elastyczny styl, który dobrze pasował do dużych firm, które chcą usystematyzować swoje języki projektowania.

Przez kilka lat skeuomorfizm był dla projektantów przekleństwem, ale z jego popiołów pojawił się nowy trend. Pod koniec 2019 r. pojawił się neumorfizm (skrót od „nowy skeuomorfizm”), który wydawał się oferować to, co najlepsze ze swoich poprzedników. Osiągając równowagę między hiperrealizmem a minimalizmem, neumorfizm wykorzystuje kolory, tekstury i cienie w sposób, który wydaje się realistyczny bez nadmiernej szczegółowości.

Neumorfizm 101

Projekt neumorficzny ma trzy wspólne cechy: monochromatyczne schematy kolorów, niski kontrast i subtelne cienie. Projektanci interfejsu użytkownika są w stanie zastosować te cechy do szerokiej gamy komponentów projektowych, które wykazują miękką estetykę neumorfizmu. Spójrzmy na aplikację kalkulatora, aby zobaczyć, jak działa projektowanie neumorficzne:

W projekcie skeuomorficznym kalkulator jest renderowany z gradientami i światłami, a jego paleta kolorów pomaga oddzielić pierwszy plan od tła. Ma wyglądać i funkcjonować jak kalkulator, który można znaleźć w biurze. Płaska wersja tego samego kalkulatora rezygnuje z reprezentacyjnych technik renderowania skeumorfizmu i opiera się na kształtach i blokach koloru, aby odróżnić jego różne sekcje.

Projekt neumorficzny czerpie zarówno ze skeumorfizmu, jak i płaskiego projektu, łącząc monochromatyczną paletę kolorów z subtelnymi cieniami, które sprawiają, że przyciski kalkulatora wydają się dotykowe. Zmniejszony kontrast między pierwszym planem a tłem nadaje kalkulatorowi miękkie wykończenie, a ogólny efekt to uproszczony realizm.

Przykłady projektu neumorficznego

Teraz, gdy jesteś świadomy jego unikalnych atrybutów, wszędzie zauważysz neumorfizm. Rzeczywiście, projektanci interfejsu użytkownika z różnych branż, takich jak motoryzacja, rozrywka, opieka zdrowotna i finanse, ponownie wymyślili komponenty interfejsu z charakterystycznym wyglądem neumorfizmu:

Plusy i minusy projektu neumorficznego

Wszystkie trendy projektowe mają swoje zalety i wady. Przy przemyślanym zastosowaniu trendy potrafią tchnąć nowe życie w przewidywalne wzorce projektowe, ale trudności pojawiają się, gdy trendy są wymuszane w aplikacjach, w których nie służą użytkownikom. Przyjrzyjmy się zaletom i wadom projektu neumorficznego, aby lepiej zrozumieć jego użyteczność.

Plusy

Ponieważ neumorfizm jest wizualnie prosty, idealnie pasuje do produktów cyfrowych, które często składają się z dziesiątek, jeśli nie setek ekranów i elementów konstrukcyjnych. W projektowaniu produktów cyfrowych prostota ma kilka zalet: ułatwia projektantom tworzenie estetycznie spójnych doświadczeń — niezależnie od tego, ile ekranów ma produkt. Przyspiesza proces konceptualizacji, budowania, testowania i iteracji nowych ekranów. Pomaga projektantom zachować spójność wizualną produktów w miarę ich ewolucji.

Oprócz swojej prostoty, realistyczne cechy neumorfizmu mogą sprawić, że komponenty interfejsu użytkownika będą wydawały się bardziej dotykowe i mogą pomóc w zwiększeniu interaktywności dla użytkowników.

Cons

Chociaż neumorfizm jest popularnym i szeroko stosowanym trendem, wiąże się z problemami dotyczącymi dostępności. Jeśli projektanci zdecydują się na użycie elementów neumorficznych, które są ściśle monochromatyczne, mogą stworzyć problemy dla osób z wadami wzroku, takie jak ślepota barw. Ponadto zależność neumorfizmu od niskiego kontrastu w celu uzyskania miękkiego wyglądu może utrudniać czytelność i utrudniać użytkownikom identyfikację przycisków, ikon, formularzy i innych ważnych funkcji interfejsu.

Neumorficzny projekt jest ponadczasowy

Wdrożony z myślą o potrzebach użytkowników (i dostępności), neumorfizm jest atrakcyjną wizualnie opcją projektowania interfejsu użytkownika dla aplikacji i stron internetowych. Jego dyskretne cienie i miękkie tekstury nadają komponentom interfejsu użytkownika ciepło, które zachęca do interakcji. W świecie designu style przychodzą i odchodzą, ale prostota i właściwości dotykowe neumorfizmu sprawiają, że jest on dobrze przystosowany do przetrwania próby czasu.