Płaska konstrukcja podbiła świat designem w ciągu kilku lat, w których się znajdowało, ale żaden ruch wzorniczy nigdy nie pozostaje w 100% czysty dla swoich korzeni i ideałów. Dokładnie to samo dzieje się z płaskimi projektami: stopniowo pojawiają się subtelne, choć znaczące zmiany w oryginalnej iteracji.

Te zmiany były wystarczające, aby obserwatorzy i eksperci dubowali nową iterację jako Flat Design 2.0. 2.0 jest bardzo interesujący, ponieważ zapewnia doskonałą równowagę pomiędzy zmianami, które wystarczyłyby, aby zmienić wrażenia użytkownika i pozostać wiernym pierwotnym zasadom.

Ewolucja Flat na 2.0 była jednak nieunikniona: ponieważ projektanci czuli się bardziej komfortowo z Flatem, mogli to zobaczyć, pomimo całej swojej popularności, niektóre problemy nie zostały odpowiednio rozwiązane . A teraz mamy 2,0, aby rozwiązać niektóre z tych niedociągnięć.

Początki płaskiego projektu

Spójrz na płaski design jako rodzaj buntu przeciwko popularnemu wówczas stylowi projektu skeomomorfizm . Bazuje on na efektach 3D w celu skopiowania rzeczywistych właściwości obiektów 3D jako sposobu wykorzystania znajomości, aby pomóc użytkownikowi. Na przykład, w początkowych iteracjach Kindle Fire w Amazon, w tle była półka z książkami 3D, aby wzmocnić przeznaczenie tabletu do czytania.

001

Kiedy Apple, wielki zwolennik skejomorficznego designu, zdecydował, w 2012 roku, porzucić skeomomorfizm, który zapowiadał pełną parą na mieszkanie, które pozostało bardzo popularne przez ostatnie kilka lat. Nacisk kładziony na minimalizm pomógł również w jego obecnej wszechobecności.

Mieszkanie charakteryzuje się brakiem:

  • podniesione elementy, które oznaczają użytkownikom, że można je kliknąć;
  • puste lub zatopione elementy, które oznaczają użytkownikom, że mogą być wypełnione (pomyśl pola wyszukiwania i inne pola wprowadzania).

Przejście do wersji 2.0

Pomimo sukcesu mieszkania, niektórzy projektanci zaczęli dostrzegać uzasadnione wady, których nie dotyczyło środowisko projektantów. Podczas gdy mieszkanie zyskało dużo pary dzięki swojemu mile widzianemu minimalizmowi, poszło nieco za daleko w surowym kierunku. Charakterystyka niektórych efektów 3D okazała się nadmierna i niekorzystnie wpłynęła na komfort użytkowania.

Tak więc było nieuniknione, że nastąpi kolejna zmiana. Tam właśnie jesteśmy z początkiem płaskiego projektu 2.0.

Problemy z użytecznością Flat Design

Wszystkie problemy z użytkowaniem mieszkania można podsumować w następującym stwierdzeniu: Mieszkanie zazwyczaj handluje potrzebami użytkownika w zakresie estetyki bioder.

Innymi słowy projektanci projektujący interfejs, który ma być "płaski", będą kładli większy nacisk na utrzymywanie rzeczy minimalnych, nie-3D i żywych / odważnych, zamiast na pierwszym miejscu. Zwykle zaczynają się w nim wszystkie złe rzeczy w świecie projektowania, i dlatego mieszkanie ewoluowało do 2.0.

Oto najczęściej spotykane problemy z interfejsem:

  • brak wszystkich ważnych znaczących (gradienty, cienie, podkreślenia itp.);
  • brak znanych wzorów (niebieski, podkreślony tekst dla linków itp.);
  • brak wskazań kontekstowych (umieszczanie CTA, kopia, której można użyć, itp.).

Być może najbardziej znanym przykładem niedawnej pamięci o problemach z użytecznością wszystkich płaskich były wydane przez Microsoft Windows 8 z tak zwanym Metro UI. Ten wzór był uosobieniem mieszkania, ponieważ wszystko było płaskie do ekstremum.

002

The doświadczenie użytkownika było tak złe ponieważ całkowicie płaska konstrukcja oznacza, że ​​użytkownicy nie otrzymują niezbędnych wskazówek, aby powiedzieć im, co można kliknąć, a czego nie można znaleźć w interfejsie. W rezultacie użytkownicy są naturalnie zmuszeni poświęcić dodatkowy czas na eksperymentowanie lub, co gorsza, wykonywanie działań poza błędem, którego nie chcieli w pierwszej kolejności!

Jak widać, ekran Windows 8 jest tak płaski, że ludzie nie mogą powiedzieć, co kliknąć, a czego nie kliknąć. Nawet jeśli użytkownicy znają już podstawową nawigację w witrynie, nie oznacza to, że dobrym pomysłem jest usunięcie wszystkich znaczących (wskazówek, które informują użytkowników, że mogą wchodzić w interakcję z elementami strony) oraz wskazówek dotyczących afordancji (wskazania, w jaki sposób użytkownicy mogą wchodzić w interakcje z elementy strony).

Świetne przykłady Flat Design 2.0

2.0 to subtelna zmiana lub ulepszenie w porównaniu z płaskim, więc może zająć więcej koncentracji, aby wykryć prawdziwe 2,0 w ​​witrynach i interfejsach. Właśnie dlatego przedstawimy kilka aktualnych, dużych przykładów 2.0, które już są w pełni funkcjonalne.

Przewodnik po Dropbox

Przewodnik po Dropbox na początku może wyglądać naprawdę płasko, ale jeśli przyjrzeć się bliżej, zobaczysz sugestie 3D, które wyraźnie informują użytkowników o tym, że niektóre elementy zostały podniesione w stosunku do innych. Jest to widoczne przede wszystkim w obrazach głowy chłopca (po lewej stronie) i śrubokrętów (po prawej stronie). Oba obrazy mają mocne, choć subtelne czarne granice, które przekazują głębię i wrażenie, że siedzą na szczycie tła, zamiast mieszać się z nim.

003

Lody Tolia

Strona Tolia jest pełen subtelnych, podnoszonych efektów, które dają wyraźne wrażenie trójwymiarowości, podczas gdy ogólny projekt jest nadal płaski i minimalny. Wywołane wrażenie pojawia się w nagłówku, pod-nagłówku i opisie (tj. W kopii strony). Jest również obecny w przycisku wezwania do działania i kopii CTA wewnątrz przycisku. Możesz podziękować subtelnemu użyciu delikatnych cieni wokół krawędzi tych elementów, aby wywołać to wrażenie.

004

Google Santa Tracker

Jak można się było spodziewać, Google jest na fali 2.0 i jej Santa Tracker strona pokazuje, jak można zintegrować 2.0 w zabawny i użyteczny sposób. Subtelności 2.0 obfitują na stronie we wszystkim, począwszy od gradientów i cieni na różnych budynkach i pop-upów (kiedy użytkownicy zawisną na każdym budynku), do wyświetlenia 3D nagłówka u góry strony.

005

Publicis Groupe

Publicis Groupe Strona z okazji 90. rocznicy może pochwalić się 2.0 w dość oczywisty sposób. Jeśli spojrzysz na lewą stronę strony, zobaczysz kombinację cieni i gradientów schodzących i promieniujących na zewnątrz od jasnego koła i niebieskiej sekcji pod nim. Surowy minimalizm wskazuje również, że estetyka jego projektu jest mocno zakorzeniona w czystym mieszkaniu.

006

Jumeirah

Ta strona dla luksusowego hotelu w Zjednoczonych Emiratach Arabskich dominuje gigantyczne wideo w tle, ale nie pozwól, by odciągnęło Cię to od subtelności jego wkładu 2.0. Nagłówek "Jumeirah Inside" zawiera oh-tak-subtelne cieniowanie, które z powodzeniem daje wrażenie 3D, zachowując jednocześnie ogólny, płaski wygląd.

007

Ewolucja według popytu

W świecie projektowania rzeczy zazwyczaj się zmieniają, ponieważ istnieje na nie zapotrzebowanie. Ktoś zauważy, że czegoś brakuje i znajdzie sposób na ulepszenie, albo ktoś inny weźmie koncepcję i przeniesie ją na inny poziom, który logicznie opiera się na pewnej koncepcji.

O ile chodzi o 2.0, to z pewnością jest to połączenie obu, ponieważ braki użyteczności płaskich są ustalane poprzez rozszerzanie oryginalnej koncepcji w sposób, który wciąż honoruje zasady minimalizmu, które definiuje mieszkanie.