Какво е плосък дизайн? Лошо нарисувани икони
В тази статия ще ви разкажа за плоския дизайн. Вероятно вече сте чували нещо за това, тъй като плоските се превърнаха в една от водещите тенденции в мрежата през последните няколко години.
Днес ще разгледаме какво е плосък дизайн, как се е появил и какво ви трябва, за да създадете чист, ярък и отзивчив дизайн.
можете да намерите добри примериплосък дизайн на уебсайта http://market.envato.com/. Има тонове оформления, икони и шаблони, които ще ви дадат ясна представа за това как изглежда модерният дизайн .
1. Какво е плосък дизайн?
Плосък дизайн - модерен стил потребителски интерфейс, както и графичен дизайн, характеризиращ се с минимализъм. Плоският дизайн се характеризира с използването на минимум елементи и отсъствието различни ефектитекстури, сенки и светлини, например: смесени цветове, градиенти, акценти и т.н.
Плоското се противопоставя на скевоморфизма( Скевоморфизмът е принцип на проектиране, когато на един продукт се придава външен вид на друг, т.е. когато различни елементи на интерфейса се копират от реални обекти - прибл. превод.) , както и богат дизайн.Въпреки това си струва да се каже, че плоският дизайн изобщо не е толкова прост, колкото изглежда на пръв поглед. Той включва някои характеристики на скевоморфизма, но ще говорим за това малко по-късно.
Като цяло плоският помага да се съсредоточи потребителят върху съдържанието, без да се разсейва визуални ефекти. Плоският дизайн подчертава простотата на елементите, като в същото време прави интерфейса по-отзивчив, приятен и лесен за използване.
2. Малко история
Плоският дизайн, както знаете, съществува много преди да се превърне в световна тенденция в мрежата. Плоският дизайн беше доста популярен през 80-те години поради факта, че технологията по това време все още не беше достатъчно развита, за да поддържа сложни ефекти, текстури и сенки. Но дори и тогава дизайнът се стреми към скеуфоморфизъм, опитвайки се да направи елементите на интерфейса възможно най-реалистични.
Плоският дизайн, във вида, в който го виждаме сега, започна да набира популярност, след като Microsoft започна да произвежда продукти в така наречения метро стил. Metro е UI дизайн от Microsoft, който е поразителен със своя стил и простота.
В 2010 Microsoft пусна Windows Phone 7, който използва плосък дизайн с остри ръбове и прости графики, наследени от един от по-ранните продукти Microsoft (Zune). По-късно, вдъхновени от успеха, Microsoft пусна операционната система Windows система 8, базиран на същия плосък стил на метрото.
В края на краищата плоският дизайн достигна своя връх на популярност през 2013 г., когато Apple пусна iOS 7 демонстрира фундаментално нов дизайнс напълно преработени елементи на потребителския интерфейс, включително икони и шрифтове. Apple компаниясъздадено визуални принципи на UI и дизайн на икони .
Скоро след това Google също започна да използва плоския стил в своите приложения и уеб страници, наричайки го Материален дизайн. Google дори има цял раздел, посветен на този стил, включващ описание на целите на уеб дизайна, неговите принципи и инструкции за създаване на различни дизайнерски обекти: икони, оформления и т.н.
Оттогава плоският се превърна в ключова тенденция в уеб дизайна, правейки уебсайтовете, приложенията и елементите на интерфейса елегантни, изчистени и стилни.
Така има три глобални примера за плосък дизайн от компании, без които е трудно да си представим модерен святтехнологии:
Дизайнът на Metro на Microsoft
Дизайн на Apple iOS 7
Материалният дизайн на Google
3. Не забравяйте да сте чисти
Плоският дизайн очевидно се нарича „плосък“ поради липсата на триизмерни елементи и реалистични ефекти като градиенти, текстури, акценти, полутонове, сенки. Не забравяйте, че плоският стил е двуизмерен (плосък) начин за изобразяване на обекти.
Освен това при плоския дизайн обектите се изобразяват по много опростен и стилизиран начин.
А понякога дори се използва само силуетът или контурите на обекта, т.е. достатъчно, за да направи обекта разпознаваем, но не го претоварвайте с незначителни детайли.
Минимализмът се превърна в глобална тенденция в наши дни: простотата на формите и използването на остри ръбове създават изчистен и приятен дизайн. Прости формипо-разбираеми и по-лесни за разбиране. Това поддържа дизайна минималистичен и чист, без да му придава натоварен, разхвърлян вид.
4. Доведете го до съвършенство
Знайте, че когато става въпрос за създаване на плоски икони и елементи на потребителския интерфейс, трябва да ги направите да изглеждат ясни, спретнати и съвършени в пикселите, т.е. колкото се може повече. Освен това, това се отнася както за растерна, така и за векторна графика.
С програмата Адобе Фотошоптук всичко е ясно: работи с растерна графика, който е базиран на пиксели.
Относно Програми на Adobe Illustrator използва векторна графика, съставена от криви и линии, наречени вектори, които се определят от математически формули.
Имало едно време Adobe Illustratorне беше много удобна програмаза създаване на перфектна като пиксел графика. Добрата новина е, че най-новите версииИлюстраторска стомана страхотен инструментза създаване на добра графика.
Трябва да кажа това Векторна графикаосновно включва работа с прости, плоски форми, чисти цветове и мрежи. Adobe Illustrator е много гъвкав в настройките и ви позволява да адаптирате мрежата към вашите нужди, да подравнявате обекти и да използвате Различни видовещракване. Това улеснява създаването на перфектния дизайн, който изглежда изчистен и стилен на всеки дисплей. Ако искате да научите как да създавате перфектни графики, тогава трябва да прочетете статията: Как да създадете перфектни за пиксели произведения на изкуството с помощта на Adobe Illustrator .
5. Цвят
Един от най специфични особеностиплосък дизайн, в допълнение към сенките, е използването на цвят. Повечето от цветовете, които плоският дизайн използва в своите елементи, се състоят само от няколко основни цвята.
Цветът в плоския дизайн е ярък, наситен и богат.Плоската цветова схема не се ограничава до няколко специални цвята, тя съдържа много нюанси и изборът им зависи само от това, което изобразявате, било то икони на сладкиши или предмети в ретро стил в изтънчена ретро палитра.
Да приемем, че сте дизайнер на потребителски интерфейс и сте добре запознати с цветовите палитри, експериментирате с цветния панел в Програми за фотошопи Illusstartor, смесвайки цветове, както желаете. Този процес обаче е доста сложен и изисква добра интуиция, опит и умения. Тук ще намерите някои инструменти, които могат да ви помогнат да създадете своя собствена цветова палитра.
Някои от тях са подходящи за всякакъв вид дизайн и илюстрация, не само за плосък дизайн. Например Adobe Color CC, по-известен като Cooler. Днес има достъп до него, както през уебсайта, така и директно чрез продуктите на Adobe. Cooler е много гъвкав инструмент, който ви позволява или да създадете своя собствена цветова палитра, или да изберете от персонализирана палитра от библиотека.
Друг прост и удобен генератор на цветова палитра е Coolors. Просто натиснете интервала и програмата ще генерира цветова палитра, можете да регулирате цветовете, има и функция за експортиране.
Има няколко други подобни услуги с персонализирани палети, които могат да бъдат полезни. Има обаче един инструмент, създаден специално за плосък дизайн FlatUIColors.com от Designmodo - услуга с набор от „плоски“ цветове, много удобни за работа. Този сайт стана много популярен сред дизайнерите, които търсят добри цветови решения за перфектен дизайн. Опитай!
Освен това можете да намерите по-голямо разнообразие от цветове и палитри Ръководство за материален дизайн на Google.
6. Дълги сенки
Както бе споменато по-горе, плоският дизайн се характеризира с простота и много свободно пространство - поради което плоският дизайн отхвърля използването на каквито и да е ефекти. Има обаче един ефект, който е типичен за плоския дизайн. Този ефект се превърна в тенденция и характерна особеностплоска.
Сега говорим за дълги сенки. Те имат някои типични характеристики, които правят този ефект разпознаваем, а именно: наклон от 45 градуса и голям размер(сянката може да бъде няколко пъти по-дълга от самия обект. В резултат на това дългите сенки придават на плоскостта някакъв ефект на дълбочина.
Този ефект прави обекта по-триизмерен, но в същото време го запазва в контекста на плоския дизайн.
7. Работа с шрифтове
Типографията играе голяма роля в плоския дизайн. Често текстът се превръща в основен елемент на композицията.
Плоските дизайни обикновено използват прости стилове на шрифтове, което прави целия дизайн като цяло чист и четлив. Можете да намерите много безплатни шрифтовев Adobe Typekit, ако използвате продукти на Adobe. Ще намерите и много добри безплатни шрифтове във Font Squirrel. Но не забравяйте да прочетете лиценза, ако възнамерявате да използвате шрифта за търговски цели.
Най-често в плоския дизайн е обичайно да се използват главни букви и контрастни цветове, което прави текста по-четлив.
Използвайте шрифтовете умерено, като не забравяте, че те трябва да допълват и допълват дизайна, а не да изглеждат като отделен елемент. Това не означава, че не можете да използвате серифни или ръкописни сложни шрифтове. Само не забравяйте да бъдете минимални и да поддържате всичко в баланс. Въпреки това, flat все още често използва sans-serif шрифтове, тъй като изглеждат по-строги и спретнати.
8. Плюсове и минуси на плоския дизайн
Въпреки че плоският дизайн стана толкова популярен поради многото си предимства, все още има някои недостатъци, с които се сблъскват дизайнерите, когато използват този стил. Нека да разгледаме плюсовете и минусите.
професионалисти
Популярност
Плоският дизайн се превърна в тенденция, получава все повече и повече положителни отзиви от дизайнери и уеб дизайнери и изглежда изобщо не губи позициите си. Напротив, тя се разпространява все повече и повече, придобива нови форми и характеристики, става все по-креативна.
Простота
Плоският дизайн е семпъл, минималистичен и изчистен. Flat on the web помага на потребителите да се съсредоточат върху съдържанието, вместо да се разсейват от визуални елементи. Това работи и за интерфейси мобилни приложения: изчистен дизайн с големи копчетаизползва мобилни устройстваперфектен.
Яркост
Цветът е друг готин плюс в плоския дизайн. Ярките и богати цветове изглеждат привлекателни и изчистени, а липсата на градиенти прави дизайна стилен. Освен това такива чисти цветове го правят по-позитивен и представителен; плоският дизайн създава правилното настроение.
недостатъци
Плоският има много повече предимства, но никой дизайн не е перфектен и не можем да го идеализираме. Ето някои недостатъци на плоския дизайн, които трябва да споменем:
Липса на реакция
Понякога отсъствие важни подробностиили визуални ефекти затрудняват процеса на създаване на удобен за потребителя интерфейс и това обикновено прави целия дизайн неотзивчив. Не всички потребители се чувстват комфортно с плоски, защото може да е трудно да се намерят елементи на уеб страница, които трябва да щракнете или докоснете на екрана мобилен телефонзащото не са интерактивни.
Проблеми с типографията
Както споменахме по-рано, не всеки шрифт може да бъде подходящ за плосък дизайн. Понякога такъв богат шрифт с остри ръбове изглежда наистина балансиран и стилен. Ако обаче шрифтът е избран неправилно, това може да развали целия дизайн. Трябва да имате наистина добра представа кои шрифтове са подходящи за флет и кои не.Липсата на опит прави избора на шрифт много труден.
Слаба визуализация
Поради ограничения в използването на ефекти, цветове и шрифтове, плоските дизайни могат да изглеждат твърде прости и студени. Неговият минимализъм може да бъде и основният му недостатък - други плоски дизайни в крайна сметка изглеждат абсолютно същите като вашите. Така че е много трудно да направите вашите икони или уеб страници да изглеждат различно от дизайна на някой друг, защото използвате същите опростени форми, ограничени цветни палитрии подобни шрифтове. В резултат на това плоският дизайн може да стане скучен с времето.
9. Бъдещи тенденции в плоския дизайн
Не може да се каже, че плоският дизайн се е оформил напълно и е спрял, може би поради недостатъците му, посочени по-горе, плоският дизайн се стреми към развитие и промяна, придобивайки нови функции и повишавайки визуалната изразителност.
Ако се вгледате внимателно последен примерплосък дизайн, можете да забележите, че наистинапостепенно се отдалечава от строгите си инструменти и започва да добавя фини ефекти като: градиенти, сенки, осветление и други визуални ефекти.
Тези малки щрихи придават на плоския дизайн някаква дълбочина, без да са прекалено детайлни като скевоморфните дизайни. Тези фини подобрения правят апартамента по-отзивчив и удобен, а също така внасят свеж вид, правейки апартамента по-гъвкав и многофункционален.
Така плоското не губи своите характеристики, а става по-интересно и гъвкаво- той наистина се подобрява.
заключения
Така обсъдихме някои факти от историята на плоския дизайн и говорихме за цветове, форми и типография. Разгледахме различни гледни точки, фокусирахме се върху предимствата и недостатъците на апартамента и научихме някои от основните принципи за създаване на добър дизайн.
Надявам се, че сте научили за себе си нова информацияот тази статия или поне ви е било интересно. Дължите го на себе си да опитате да създадете плосък дизайн, ако не сте го правили преди.
В края на краищата, какво друго има да се спомене за плоския дизайн?
Ако наистина харесвате плоското с неговите остри ръбове, наситени цветове и ясни шрифтове, неговата изчистеност и минимализъм, тогава давайте!
Модерен е, но както при всеки графичен стил, не се ограничавайте само до една техника. Това, че плоското е модерно, не означава, че не можете да използвате други стилове в проекта си. Скевоморфизмът с неговите малки детайли и текстури също може да стане добро решение. Основното нещо е да запомните, че дизайнът е различен за всеки проект, той трябва да изразява своя дух, цел, същност, като същевременно остава удобен и функционален. Напред!
Революцията на „плоския дизайн“ продължава да набира скорост, откакто беше представена на Windows платформаТелефон 2010г. Не е трудно да се разбере защо: интерфейс с този дизайн изглежда по-интуитивен, подходящ е за адаптивни елементи, модерни рамки и изглежда привлекателен, когато се изпълнява правилно.
Плосък дизайнзапочва да съществува като противотежест на вездесъщия скевоморфен стил, но оттогава се е превърнал в много повече от просто „Вариант Б“.
Първоначално апартаментът беше изключително двуизмерен с пълен фокус върху минимализма. Modern flat 2.o използва сенки, градиенти и други елементи, за да изглежда „почти плосък“.
5 характерни компонента на модерния плосък дизайн:
1. Дълги сенки
Дългите сенки добавят дълбочина и измерение към изображенията, без да се налага да жертвате минималистичните детайли на иконите, които правят интерфейса привлекателен. 
2. Динамични цветове
Допълването на оскъдни визуални елементи е лесно с енергични цветове, особено светли нюанси.
Различните цветове на фона в контраст с основния цвят на елементите правят страницата с мозаично меню по-жива.
Уеб сайтът Flat UI Colors съдържа най-ефективните цветови модели за плоски. 
3. Проста типография
Изборът на шрифт in flat се основава на един критерий: четливост. Обикновено се използват безсерифни шрифтове с постоянна ширина на линията. 
4. Прозрачен бутон
Един от модерните елементи в съвременния уеб дизайн. Причината е, че не привлича много внимание, но ясно се разпознава като копче. 
5. Минимализъм
Равнището и минимализмът вървят ръка за ръка, използвайки едни и същи принципи: простота и фокус върху съдържанието.
Може да изглежда, че използването на плосък дизайн е универсално решение, но минимализмът е труден за прилагане: колкото по-малко работни елементи, толкова повече внимание изискват.
Без значение колко страхотен може да изглежда плосък дизайн, няма гаранция, че той ще работи за вашия сайт. Вижте основните му предимства, за да видите дали си струва да планирате глобален редизайн.
Предимства:
използва се в отзивчив интерфейс;
опростява навигацията за потребителя;
ясна структура и схема визуални елементиподчертават вътрешната логика на страницата;
бързо зарежданестраници, поради простотата на графиките;
Познатата типография подобрява четливостта.
Плоският дизайн е свързан с простота и минимализъм, което от друга страна затруднява предаването на визуално сложни послания. Ето защо, преди да се втурнете стремглаво към опростяване на интерфейса, трябва внимателно да обмислите взаимодействието между сайта и потребителя.
Въз основа на книга с тенденции в уеб дизайна.
Плоският дизайн е ключова посока в дизайна за следващите години, затова ви каним да го опознаете по-добре и да научите 5-те основни принципа, които формират неговата основа.
Опознаване плосък дизайном
На руски плоският дизайн се превежда като „плосък дизайн“ и след това стана абсолютен фаворит Apple презентации iOS OS. Фокусът беше върху минималистичен подход към дизайна на използваемостта. Фокусът е върху удобството на потребителя. Това е подчертан протест срещу “сквеформизма” (визуализация на обектите като в действителност). Изборът падна върху по-опростени и в същото време по-прости естетически решения. Потребителите, уморени от реалистични визуализации, посрещнаха тази посока с удоволствие и все повече и повече уеб проекти преминават към този формат.
Бих искал да отбележа, че „плосък“ не означава „скучен“. Плоските дизайнерски решения могат да бъдат красиви, те са по-сложни, изчистени, лишени от излишък, превръщайки се в „остров на спокойствието“. Те най-накрая правят съдържанието разбираемо. Остава само да научите основните принципи, за да ги приложите на практика.
Принцип No1: Без ненужни ефекти„Плоският“ дизайн не се стреми да предава обеми, затова се основава на двуизмерна визуализация. Това означава, че няма да виждате никакви сенки, отражения или акценти с текстури (с изключение на дългите сенки). Само прехвърляне на контури и нищо повече.
Препоръчително е да се използват едносрични фигури в дизайна, както и да се следи яснотата на контурите, което има за цел да подчертае лекотата и безтегловността. В допълнение, такива лаконични елементи добре имитират сензор, генерирайки желание за взаимодействие с обекта (покана за натискане, докосване). Простотата на елементите обаче не е равна на простотата на дизайна като цяло - това важи само за очертанията. В резултат на това всичко, което потребителят вижда, му е ясно и той може да го използва с лекота.
Плоският дизайн изисква изключително внимание при работа с шрифтове. Тоест техният характер трябва да допълва дизайнерската схема, без да й противоречи. Освен това в плоския дизайн шрифтът също е ключов навигационен елемент.
Не само шрифтът, но и цветът е съществена част от „плоския“ дизайн. По-голямата част от палитрите се основават на 2-3 цвята, въпреки че, разбира се, има изключения. Обикновено се избират богати и ярки, но в същото време чисти цветове. Както беше отбелязано, няма градиенти или ненужни преходи.
Плоският дизайн е ярък примертакава глобална тенденция като минимализъм. Дизайнерите отказват ненужните звънци и свирки, отдалечават се от сложни и имплицитни подходи към визуализацията, което дава плодове под формата на потребителска активност.
Равен или почти равен? Търсим компромис!
В заключение бих искал да отбележа, че днес има синергия между плоския и неплоския дизайн. Говорим за „почти плосък“ дизайн. Това е най-често срещаното приложение на описаната концепция, когато заедно с прости и стегнати елементи и двуизмерно пространство дизайнерите използват 1-2 техники за дълбочина и перспектива.
Също така тенденция през 2017 г. беше Semi Flat Design - полу-плосък дизайн. Повлиян от Material Design, той стана малко по-пространствен. Появяват се леки сенки, които правят дизайна да изглежда полуплосък. Плоският дизайн е актуален и днес, поради сенките той е станал по-дълбок и сложен, но основната концепция не е нарушена.
Плоският дизайн е една от основните тенденции днес, както в областта на уеб дизайна, така и в технологиите за създаване на потребителски интерфейси. От последните примери най-забележителният би бил: решителната стъпка на Microsoft в тази посока с нейния Windows 8 и новата Google дизайн, с ясна демонстрация на желание за ровене в минимализма.
Ето примери за елементи, които определят .
Живот след Web 2.0
Под формата на заоблени форми на елементи с всякакви ефекти - 3D, сенки, светлини и отражения, градиенти, релеф. С една дума всичко, което създава дълбочина и обем. Големи, ярки контроли, блясък, текстури и други подобни изрази отстъпват място на прости, двуизмерни представяния на визуални обекти.
Поплавъчен дизайн
Типографията в основата на стила
Моля, имайте предвид, че това е основата за изграждане на „плосък“ сайт. Опростеността на елементите на плоския дизайн, както и самите принципи на минимализма, засилват значението на типографията. Текстово съдържаниепо принцип е възможно да се заменят някои от тежките графики или изображения. Днес в много уебсайтове типографията се е превърнала в дизайн. Естествено, тъй като плоският дизайн често е минималистичен, естеството на шрифтовете трябва да бъде в съответствие с обща схема, стил и композиция. Например главни букви често се използват за елементи или заглавия.
Coderwall
Прочетете също: 12 основни цвята и примери за тяхното възприемане от потребителите
Цветова палитра с плосък дизайн
Плоският дизайн също върви към по-голямо цветово разнообразие. Уеб дизайнерите все по-често използват цветови палитри, за да приложат може би най-основния принцип на дизайна: един уебсайт трябва да е различен от своите връстници.
Минимална маймуна
Свободно пространство, големи елементи
От началото до края има минималистична основа, което означава, че възприема основните си принципи: големи блокове съдържание, големи елементи, свободно пространство, липса на излишно суетене и претенциозност.
Дизайн на брада
Плосък дизайн на икони, бутони, илюстрации
Бутоните, иконите, значките и илюстрациите също придобиват 2D вид. Те трябва да съответстват на зададения стил на всички страници на сайта, да предават настроението на самия сайт и да бъдат лесни за разбиране за всеки потребител.
Изборът на цветове за иконите, както и самите икони, не е лесна задача. Можете да използвате чисти цветове. В опит да украсите дизайна, трябва да помислите как да направите сайта лесен за използване. От една страна е важно да не се нарушава стила, но от друга страна е необходимо иконите да бъдат забележими. В илюстрациите се стремим към минимализъм, като избягваме популярните преди това 3D ефекти.
Прочетете също: 20+ вдъхновяващи уебсайта с плоски илюстрации в дизайна
Примери за шаблони на уебсайтове с плосък дизайн Flat UI
Примери за сайтове в стил Flat дизайн
Идентичност
83 Design Collective
Откачено
Групата Umbrella 
Фондация Slcl 
Моят филц
Бехзад
Атлант 
Просто като мляко 
Семейство Веранда
Който разработва мобилни приложения и уебсайтове, написа колона за нас и постави всичко на мястото му по отношение на плоския и материалния дизайн.
Като цяло разликата между плоския дизайн и материалния дизайн е фина. За човек, който няма задълбочени познания по графичен дизайн, те наистина могат да изглеждат много сходни. В тази статия ще се опитам да „хвърля светлина“ върху някои от разликите между тях. Ще получите допълнителни знания, които са толкова необходими, за да не нараните случайно деликатната природа на дизайнера.
Малко история
Преди да започнем да говорим за разликите между двете най-популярни тенденции в дизайна, нека разберем откъде идват те. Има мнение, че материалният дизайн е създаден на базата на плосък. Тогава откъде идва плоският дизайн?
Скевоморфизъм
Когато става дума за потребителски интерфейс и уеб дизайн, концепцията за скевоморфизъм се отнася до подход, чиято основна идея е имитация. Без да навлизаме в много подробности, нека просто си спомним интерфейсите на Apple преди iOS 7 с техните „реалистични текстури, осветление и бомбастични ефекти“.
Опитвам се да направя цифрови обектиподобно на техните събратя в реалния свят беше оправдано от необходимостта да се улесни взаимодействието на потребителя с устройството. Всъщност именно поради тази причина доминираха всички интерфейси с реалистични текстури дигитален святв продължение на много години. Скеуоморфният дизайн върши страхотна работа, като помага на потребителите безпроблемно да преминат от реалния към цифровия свят.
Въпреки това, с разцвета мобилни технологиипостепенно възниква необходимостта да се съсредоточи основно върху удобството и лекотата на използване. Съгласете се, в тази област има нужда от създаване мобилни решения, Достъпен от различни устройства, нараства значително. И точно в този момент простотата се превръща в новия стандарт за дизайн.
Забележка: В никакъв случай не мислете, че скевоморфизмът е напълно изчезнал. Той се използва широко в игри, където е необходимо да се създаде реалистичен свят и да се помогне на играчите да почувстват своя характер, за да се потопят дълбоко в процеса на игра.
Плосък дизайн
Този стил е напълно лишен от всякакви триизмерни обекти. Грубо казано, плоският дизайн няма такива стилистични елементи като падащи сенки, текстури, градиенти, но обръща внимание на играта на шрифтове и цветове и икони. Но защо беше необходимо всичко това? Отговорът е лесен.
Първо, плоският дизайн значително намалява времето за зареждане на страницата. Липсата на „тежки“ скевоморфни детайли (помислете: слоеве, серифни шрифтове, градиенти) прави плоски елементи„по-лек“ дизайн, което от своя страна значително ускорява времето за зареждане. Освен това плоските елементи изглеждат еднакво привлекателни и на двата екрана. с висока резолюция, и с ниска.
второ, прости изображенияможе да предаде вашата идея на потребителите по-бързо от подробните илюстрации: те са схематични и следователно доста лесни за разбиране.
И разбира се, плоски иконисъс сравнително с прост шрифтможе да насочи вниманието на потребителите към наистина важно съдържание.
Днес плоският дизайн получи заслужено признание, но все още има своите проблеми. Най-очевидният пример за такива проблеми беше Издание на Windows 8 от Microsoft. Тази операционна система се счита за пионер на плоския дизайн и поддържа концепцията за Metro дизайн. Това, което доведе до проблемите, беше, че компанията сметна за необходимо да обърне повече внимание на типографията, отколкото на самата графика.
Резултатите от тест за използваемост на Windows 8, проведен от NN Group, показаха, че потребителите изпитват трудности при разграничаването на обекти, върху които може да се кликне, от обекти, върху които не може да се кликне. Потребителите се оплакаха, че обектите, които изглеждат статични, всъщност могат да се кликнат. В резултат основната мисия на компанията - да помогне на потребителите правилно да интерпретират системата - се провали.
Друга компания, която често се свързва с плоския дизайн, е Apple. Те се отдалечиха от скевоморфните дизайнерски елементи в мобилната операционна зала iOS система 7, издаден през 2013 г. Този път преходът беше приет малко по-добре, главно поради факта, че компанията не се опита да актуализира напълно концепцията на потребителския интерфейс, а просто добави няколко промени към плосък дизайн. Това даде възможност на потребителите да използват продукта, като разчитат на предишния си опит с операционна системаи уебсайтове.
Материален дизайн
Нека изясним веднага: материалният дизайн е по-скоро марков продукт, отколкото спонтанна дизайнерска тенденция, която е получила широко признание. Това основно го отличава от плоския му дизайн.
Като наричам дизайнерски материал „маркиран“, имам предвид, че той има цял набор от ясно дефинирани препоръки и принципи, които всеки уважаващ себе си дизайнер следва. Съвсем очевидно е защо Google представи своя материален дизайн: имаше нужда от унифициране на дизайна, така че приложенията да изглеждат еднакво на всяко от многото устройства с Android.
Въпреки че е доста функционален, плоският дизайн все още се смята за труден за разбиране. Истината е, че плоските обекти на екрана могат да объркат потребителите (особено тези, които нямат опит в използването на мобилни и уеб интерфейси). Следователно материалният дизайн се опитва да върне елементите на скевоморфизма, но в много опростена форма. Изображенията изглеждат плоски, особено що се отнася до цветовете, но все пак са многоизмерни благодарение на наличието на Z-ос.
С други думи, материалният дизайн може да се нарече подобрена версия на плоския дизайн с елементи на скевоморфизъм - анимация, сенки и слоеве. По този начин можете да направите продукта по-интуитивен по отношение на навигацията и да избегнете ненужната сложност в общия стил.
Плюсове и минуси на плоския дизайн
Нека оставим зад гърба си историята на еволюцията на стиловете и да преминем към нещо по-значимо - нека изброим силните и слаби страниплосък дизайн.
- Минимализъм и стил
- Интуитивност. Ще ви бъде по-лесно да предадете идеята си на потребителите.
- Спестяване на време и ресурси. Страниците се зареждат много по-бързо с по-малко потребление на честотна лента.
- Съсредоточете се върху съдържанието. Интерфейсът е лишен от ненужни подробности, които могат да отвлекат вниманието от наистина ценна информация.
- Изглежда еднакво добре на различни устройства, било то браузър за компютър или смартфон.
- Ускорява процеса на разработка на дизайн на уебсайт или приложение, като елиминира ненужните щрихи в дизайна.
- Минималистичен стил.
- Доста интуитивно на интуитивно ниво. Материалният дизайн ще бъде също толкова лесен за възприемане опитни потребители, и за начинаещи.
- Умерен скевоморфизъм. Всичко изглежда по-реалистично благодарение на използването на Z-ос (уникална концепция на Google).
- Има набор от ръководства, които се актуализират постоянно. Следователно всеки дизайнер винаги може да се обърне към тях, ако възникнат трудности по време на работния процес.
- Насърчава се анимация за уеб решения. Няма нужда да ви напомняме колко много хората обичат движението. В допълнение, анимацията ви позволява да направите интерфейса по-ясен и интуитивен.
- Има собственик (компания Google). Следователно, всички въпроси и предложения за подобрение трябва да бъдат адресирани до собственика.
- Поради оста Z процесът на проектиране може да отнеме повече време за завършване.
- Анимираните елементи изискват повече ресурси.
- Твърдото спазване на указанията може да ограничи оригиналността на дизайна.
Обобщете
Всъщност, единият от разглежданите дизайнерски подходи не трябва да се счита за явно предимство пред другия, тъй като плоските и материалните стилове вървят рамо до рамо. И двамата са невероятно популярни и са лишени от прекален реализъм. Материалният дизайн е наследник на плоския дизайн, докато самият плосък дизайн беше реакция на решения, които бяха твърде тежки и реалистични. Материалният дизайн добави нещо, от което плоският дизайн винаги се е опитвал да се отдалечи - малко скевоморфизъм. Въпреки че едно нещо винаги ще бъде различно между тези подходи: материалният дизайн е патентован продукт Google, а плоският дизайн е резултат от сливането на няколко дизайнерски практики, които се стремят предимно към цялостна простота.
Всъщност плоският дизайн се разви много през годините. последните години: От напълно „плосък“ стил до „полу-плосък“. Сега позволява използването на слоеве и фини сенки, за да позволи на обектите да изглеждат по-дълбоко, отколкото са изглеждали преди. И така, вие и аз сме щастливи съвременници на плоския дизайн 2.0.
И накрая, нищо не ви пречи да опитате да комбинирате тези два подхода, за да създадете наистина функционален и удобен за потребителя продукт. Така че, почерпете малко вдъхновение от гурутата на плоския и материалния дизайн и се захващайте за работа!