Плоский дизайн против плоского дизайна
Плоский дизайн против плоского дизайна
12 декабря 2013

Многие сайты уже перешли на плоский дизайн. Его можно увидеть в каждом цифровом устройстве. Но большее влияние он оказывает на дизайнеров.

Одной из самых горячих тем в дизайне является плоский интерфейс. Многие дизайнерские блоги и веб-сайты писали об этом и получали разную реакцию от аудитории по всему миру. Мы также можем видеть, что многие сайты уже перешли на плоский дизайн. Его можно увидеть в каждом цифровом устройстве, поскольку он оказал большое влияние на мировые технологии. Но большее влияние он оказывает на дизайнеров.

Плоский дизайн против плоского дизайна

Все западные графические дизайнеры, а по большей части уже и русские, обсуждают и делают дизайн интерфейсов в «плоском стиле» (так называемый «Flat Design» или «Flat UI»). Это одно из самых быстро завоевавших популярность течений в дизайне, которые мне только приходилось видеть (разве что после «минимализма»). Но около 100% дизайнеров не понимает, зачем нужен «плоский» дизайн, пользуется им исключительно как визуальным стилем и с пеной у рта молчит от незнания причин, подтолкнувших повиноваться общему веянию. Давайте разберёмся.

Плоское увлечение

Массовое и повальное увлечение плоскостнёй началось спустя какое-то время после того, как Микрософт представила операционную систему Windows Phone, в которой был новый и интересный интерфейс Metro. Основной идеей Микрософта при создании такого интерфейса была мысль, что лишнее графическое оформление мешает понимать и использовать интерфейс.

Именно тогда разные дизайнеры по всему миру придумали слово «сквеморфизм» (skeumorphism) и стали катить на него бочку, аргументируя, что предметы в реальной жизни — это одно, а цифровые интерфейсы — другое, и не нужно во втором копировать первое.

В этих дискуссиях была доля рационального: чтобы изобразить почтовое приложение или музыкальный плеер, совсем необязательно показывать картинку с почтовым ящиком или граммофоном.

Если с граммофоном как таковым нужно сначала разобраться перед тем, как пользоваться им, то его виртуальный клон — это ещё более сложная и неорганичная штука. Если «крутилки» вроде элементов управления громкостью, температурой кухонной плиты или воды в кране — это привычные в жизни штуки, то в цифровых интерфейсах крутилки — сущий кошмар, так как пользователь не ощущает их оси вращения, а поэтому не понимает, то ли нужно двигать их курсором по окружности, то ли достаточно захватить и тянуть в одну сторону.

Это всего пара примеров, а в целом идея споров — отходить ли от клише копирования предметов из реальной жизни в экраны электронных устройств или нет. Электронные интерфейсы можно сделать гораздо более интуитивными как раз за счёт их возможности динамически меняться, но предметы из жизни привычны и узнаваемы.

Flat Design vs. Skeumorphism

В этих же дискуссиях родилась идея впредь создавать интерфейсы в «плоском» стиле и большинство дизайнеров запустили свои фотошопы. Но так как люди по своей сути — животные, а многие к тому же не очень-то отличаются от них, то и среди дизайнеров подобных оказалось большинство. Со словами «ы, флэт юай рулит» такие дизайнеры стали клепать «плоские» интерфейсы в самом ложном и в самом превратном понимании, напрочь наплевав на великолепную идею ребят из Микрософта. Вот, к примеру, один из концептов нового дизайна для приложения «Напоминания», выполненный неким Деном Лебовицем:

Эта картинка — апогей пустозвонных споров «сквеморфизм против плоского дизайна», потому что оба скриншота, и слева, и справа, изображают дизайн в стиле «сквеморфизма», однако первый «граммофон» похож на настоящий, а другой уродливо плоский.

Запомните и передайте другим: «плоский» стиль — это не противоположность сквеморфизма. Можно изобразить граммофон в плоском стиле, а можно нарисовать весьма выпуклый музыкальный проигрыватель с бликами, тенями, текстурами, обводкой, отражениями и иконками, но при этом не копирующий граммофон и работающий гораздо более удобно.

Дизайнеры подумали, что плоские кнопки круто смотрятся, да к тому же почему-то все так рисуют, но не задались вопросом, как не загромождать такой простой элемент интерфейса графическим мусором. Наша жизнь, так уж получилось, трёхмерная, и почти любая кнопка к жизни выпуклая, отбрасывает тень, вдавливается при нажатии и так далее, но цифровые интерфейсы двухмерные, и там все эти качества настоящей кнопки моментально теряют смысл. Дизайнеры скопировали у Микрософта лишь внешний вид, а переделать структуру интерфейсов не удосужились.

Всё дело в том, что по пути из голов одной группы дизайнеров в головы других потерялась сама суть «плоского» дизайна в широком смысле слова и сейчас он стал лишь простым, скудным и малопривлекательным визуальным стилем, в котором нет совершенно никакого иного смысла кроме слепого следования моде. Единицы понимают абсурдность происходящего и даже делают смешные руководства по созданию «плоских» интерфейсов: выделяешь в фотошопе все слои и выбираешь меню «Clear layer style».

Желание быть в тренде довело горе-дизайнеров до того, что они стали копировать друг друга. Таким образом «плоский» дизайн приобрёл узнаваемые черты: «туманные» сиреневый, зелёный, розовый и другие цвета, плоские контролы, шрифт Proxima Nova, неподчёркнутые ссылки, большое количество пустого пространства, отсутствие сложных эффектов, квадратные фотографии и т. д. Копирование дошло до того, что компания LayerVault потребовала у GitHub заблокировать страницу с комплектом готовых элементов «Flat UI», который другая компания Designmodo «позаимствовала» у LayerVault.

Типичный представитель «плоского» дизайна

Я до сих пор не имею ничего против приложения «Контакты», выполненном как настоящая телефонная книжка, или против эппловских «Подкастов», которые когда-то изображали катушечный проигрыватель. Он был прекрасен: катушки крутились при воспроизведении, лента подёргивалась при паузе, все мельчайшие детали были с любовью прорисованы и действовали как в настоящем проигрывателе. Эппл переделала приложение после ухода Скотта Форстола (говорят, якобы он там всем насильственно прививал любовь к сквеморфизму). Что они сделали? Убрали из «Подкастов» катушечный проигрыватель. То есть, лучше не сделали, но единственную красоту, которая там была, убрали.

Если уж дизайнер задумался изобразить «плоский» интерфейс, для этого должна быть причина. И если уж у него получится сделать «плоский» интерфейс удобнее, чем «сквеморфический», то он будет большим молодцом, однако наложит ли он на кнопки текстуры и блики или нет, — не имеет значения, ведь они не влияют на её удобство.

Хорошо, что большинство «плоских» дизайнов пока что остаются концептами, потому что если все слепо кинутся воплощать их в жизнь, мир интерфейсов на ближайшие несколько лет качественно провалится в огромную яму скудных копирующих друг друга фиолетово-зелёно-розовых панелек, плоских кнопок и квадратных фотографий.

Источник: talala.ru/blog/2013/05/03/1/

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
Как создать визуальные эффекты, призывающие к действию
Как создать визуальные эффекты, призывающие к действию

Как сделать ваши Call-to-Action элементы более эффективными.

27.06 0
5 UX трендов, которые вы увидите в 2016 году
5 UX трендов, которые вы увидите в 2016 году

Какие тренды только зарождаются в UX? Читайте об этом и о будущем UX в данном материале.

27.06 0
Как улучшить навигацию и подготовиться к эре мобильного интернета?
Как улучшить навигацию и подготовиться к эре мобильного интернета?

В этой статье речь пойдёт о небольших советах касательного того, как оптимизировать мобильную навигацию.

22.06 0
8 худших UX ошибок и как их не делать - Комментарии экспертов
8 худших UX ошибок и как их не делать - Комментарии экспертов

Специалисты в UX делятся своим взглядом на то, какие самые большие ошибки все ещё допускают в дизайне интерфейсов.

28.05 0
Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.