Как стать автором
Обновить

Комментарии 85

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


(источник)

Угадали бы вы в первом случае?
Хаха. Врятли. На первый взгляд на первом скриншоте таб заблудился. Если бы с трёх сторон оставили хоть миллиметр фона, сомнений бы не было. Хотя оба варианта плоские.
НЛО прилетело и опубликовало эту надпись здесь
Сделайте первый вариант скевоморфичным и все так же останется непонятным.
А вы попробуйте угадайте, какой жест откроет очередное меню. К примеру, список установленных приложений в Google Play на Android 4 я вообще случайно нашёл…

И откуда я знаю, может ту стрелку вниз в комментарии сверху можно вниз протянуть и там ещё какая штука откроется?
так там для особо умных есть всплывающая подсказка при наведении на стрелку)

на счёт андроида, это вроде повсеместно используемое действие для меню.
При наведении пальца?
А при чем тут жесты? Это несколько ортогонально к плоскому дизайну. У эппла в 6й оси тоже много разных жестов.
Увы. Если раньше кнопку все рисовали выпуклой, то в последнее время я всё чаще вижу просто прямоугольник с текстом. То, что это кнопка, приходится угадывать. Причем на сенсорном экране даже hint не прочтёшь — не видит он завешенный над ним палец пока, увы.
Хорошая идея для старт-апа, не? Ну, смотреть какой-нибудь камерой (дополнительной, может быть) на завешенный над экраном палец и выводить подсказку.
Опоздали немного. Есть уже proximity sensor. Думаю, теоретически его тоже можно гранулировать и положить под экран как-то…

А на планшетах и «плафонах» Samsung Galaxy Note есть функция, которая позволяет «видеть» завешенный над экраном стилус. Однако программы всё равно не реагируют.

Нет в Андроиде хинтов. А это шикарная штука, по-моему.
Ну, кстати, к этой функции стилуса было бы здорово прикрутить расширение для браузера (если это возможно, я не в курсе, что там и как в платформе и в местных браузерах), которое по занесённому стилусу выполняет «наведение мыши». Пригодилось бы и для подсказок при серфинге, и для сайтов, на которых плохие люди делают раскрывающиеся по наведению менюшки с ссылкой в области наведения.
Впрочем, подозреваю, что андроидные браузеры не умеют в подсказки (ибо непредуспотрены), так что расширению придётся ещё и самому подсказки рисовать.
Вроде как на Xperia Sola такое есть по приближению пальца.
Дермантин в интерфейсе — это не скевоморфизм, это дермантин с мягким знаком после «р».
Не, у эппла же была натуральная кожа! )
Куда только Гринпис смотрел…
Тот, кто относится к «плоскому» дизайну как к «моде» — дилетант. «Плоский» дизайн — это инженерное решение, продиктованное технологическим контекстом.
Извините, а в чем заключается эта технологическая необходимость? Я могу понять, когда говорят подобные вещи за размеры элементов интерфейса. В маленькую кнопку на сенсорном экране сложно прицельно ткнуть пальцем. Но какая технологическая необходимость именно в стиле рисования?
Лично я ничего против минимализма не имею, даже приветствую его. Но только из-за того, что для меня — он красивый, только и всего…
Писал ниже, возможно причина в векторизации интерфейса (полной, включая иконки).
Вы таки плохо знаете вектор, если думаете, что предел его возможностей — плоские прямоугольники.
Я его вообще не знаю, хотя и видео разные примеры работ. Но знаю, что плоские прямоугольники на нем рисовать намного проще свероморфичных форм.
Согласитесь, что кожа в векторе занимает больше памяти, чем в растре. Так что смысл в этом доводе некоторый есть. Другой вопрос, что растр тоже можно тайлами пустить и прочие извращения делать, что бы он не казался однородным и некрасивым…
эвона как, ядер по восемь, всё в облако — а давайте-ка сэкономим сто килобайт на картинках!
кстати, это тоже свежая тенденция — хайрез фотографии на бекграунде. Раньше это не имело настолько массового характера. Вопрос не в размере изображения. Скорее, из-за кучи разрешений пользовательских экранов встала необходимость делать легко масштабируемые GUI, для чего вектор больше всего подходит. А остальные пошли за этой модой в толпе.
Я говорил о контексте а не о необходимости, тут есть некоторая разница. А контекст заключается в том, что пользователь работает с данными (изображения, текст, видео), которые представлены в визуальной экосистеме приложения, например. Данные — часто первичны и обслуживающий их интерфейс должен обладать «прозрачностью» и достаточным удобством/функциональностью одновременно. Для достижения такого сочетания используется, в частности, минимализм в оформлении UI-элементов. Вообще на эту тему можно написать большую статью (технологических предпосылок плоского дизайна довольно много), не думаю, что ее можно полностью раскрыть в одном комментарии.
Как любое инженерное решение, «плоский дизайн» надо применять в подходящей ситуации и в подходящей степени. Некоторые же с криками «пусть все будет плоским» кидаются перекрашивать все без разбора.

Те же Apple в гайдлайнах iOS7 пишут, что оформление интерфейса не должно отвлекать от контента. Однако, эта мысль слишком нечетко сформулирована, примеры приведены плохие. Результат — поняли все только то, что «все должно быть плоским».
Вы говорите очевидные вещи и не совсем понятно почему именно мне =)
Потому что вы про инженерное решение заговорили :)
Остальное пришлось к слову :)
Я также говорил о дилетантах.
На счет дилетантов я бы сказал иначе. Модным может быть и инженерное решение и решение по оформлению. Наверное, в этом нет ничего плохого, особенно если в моду вошло решение удачное. Дилетантом, скорее, можно назвать того, кто видит в дизайне интерфейсов только графическую составляющую, не замечая заложенных в интерфейсы инженерных решений и информационной архитектуры.
Дельная статья откуда взялись и зачем нужны скьюморфизмы с плоскими дизайнами:
www.smashingmagazine.com/2013/07/16/authentic-design/

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

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

Переход от сквеморфизма к плоскому дизайну обусловлен простыми вещами, сквеморфизм подразумевал какое-то знакомое предсказуемое ощущение (металлические/кожаные кнопки и элементы), плоский дизайн же позволяет самим дофантазировать это ощущение (например, элемент при нажатии краснеет с элементами затухания, что подсознательно ассоциируется с теплом).

Относительно кустарности, да, есть немало дизайнеров, не знакомых с швейцарской типографикой и теорией построения модульных сеток — сейчас ведь достаточно 960gs выучить и штамповать уродов (нет, сетка неплохая, однако реализация решений на них — в большинстве своем весьма посредственна). Я видел как хорошие примеры плоского дизайна, так и отвратительные, это же можно сказать и о сквеоморфизме, уродов хватает везде. Одна из причин появления этих уродов — это техпроцесс, когда разработчики заказывают отдельно дизайны для приложения/лого/сайта на фриланс-биржах у разных исполнителей и в итоге получается каша. И ведь не скажешь человеку что он отдал 10-15 килорублей за логотип, что вариант который он выбрал — просто рисунок в векторе, не основанный ни на какой системе.

Вторая часть комментария относится к комментариям ниже.
Поделитесь ссылками на хорошие примеры плоского дизайна.
Martin Oberhäuser — он несколько опередил тенденцию, все работы очень качественные.
Gibbon — сервис с плейлистами материалов подобранных под интересы.
Как вариант — забейте на бихансе «Flat» в поиск и почти 70% работ очень высокого уровня.
НЛО прилетело и опубликовало эту надпись здесь
Наткнулся на этот сервис когда майнил информацию по образовательным процессам. Сервис ещё развивается, так, например, после моего отзыва о сервисе, для меня были подобраны некоторые материалы по UX, Agile и ведению проектов качеством повыше, нежели базовые программы.
Я возможно соберу много минусов, но мне очень не нравятся некоторые реализации плоского дизайна. Эта бессмысленная и беспощадная редукция всего хоть немного похожего на сложное. Этот упор на ломающую мои глаза сверхтонкую типографику. Эта скучность интерфейсов, которую не украшают даже яркие разноцветные элементы. Эта маниакальная тяга к пиктограммкам без подписей, причем когда нет стандарта этих пиктограммок и каждый дизайнер изобретает свой велосипед. Пытаясь объяснить своими словами, я бы прибегнул к такому эпитету как «скользкий» дизайн, глаза не цепляются за какие-то маячки и мне порой тяжелее найти нужную кнопку, поле ввода или ползунок. С другой стороны, скевоморфизм и близкие к нему течения в дизайне требовали каких-то новшеств и развития. Думаю, со временем мы увидим новую тенденцию в дизайне, которая не будет отрицать любую связь со скевоморфизмом, но и уплощать всё подряд также не станет. Я жду с нетерпением этого.
Все верно. Плоский дизайн тоже не лишен штампов и бездумного копирования, армия «карамельщиков» которые вчера рисовали пламя и глянцевые отражения везде где можно сегодня все как один рисуют «лонг шедоу» (длинные тени), круглую аватарку (Яндекс, Брейнсторэдж, привет) и копируют цветовую схему. Просто это так.

Но как показывает практика людям постарше все еще нужны блики и имитация объёма, кому-то по привычке, а кому-то плоский стиль кажется недостаточно «бохато».
Пардон, люди постарше предпочитают черные буквы на белом фоне любимым шрифтом на стороне клиента.
Неужели дизайн WP8? :-)
Вы им льстите.
Любимым шрифтом любимого размера — повбивав бы «дезайнеров» ставящих фиксированные размеры. Шрифт должен быть дефолтным и размером 100% — пользователь сам сделает, как ему будет удобней.
Всё как обычно.
Главная проблема музыки в России плоского дизайна — в том, что его создание кажется простым. И в результате им нередко занимаются люди, которых нельзя и близко подпускать к дизайну чего бы то ни было.
Плохой плоский дизайн — это в первую очередь плохой дизайн. Скевоморфичный дизайн от того же человека был бы не менее убог в плане удобства, но в придачу к тому ещё и смотрелся бы пугающе (я думаю, никому не надо напоминать «дизайнерские» темы различных программ во времена Windows XP).
Долго думал насчет мотивов apple для ввода подобного дизайна. Освежить, наверное, можно было как-то иначе. Но такой интерфейс как в iOS7 намекает на векторизацию всего, в том числе и иконок. Возможно, iOS 8 именно векторной и будет, аппаратно для этого все есть (графические ускорители, на которые можно отдать прорисовку и hiDPI экраны, на которых незаметны огрехи рендеринга векторных элементов).

Если все так, то возможно текущий плоских дизайн это просто первая версия. Как и у самой первой версии Mac OS X, у нее есть визуальные огрехи. Дизайнерам дали новый инструмент, которым они еще не совсем научились пользоваться.

Если действительно замысел состоит в полной векторизации интерфейса, то я готов потерпеть какое-то время огрехи плоского стиля.
Если гениальная задумка в этом, надо и средства соответствующие давать. Что бы постепенно готовили векторные картинки вместо растра. Сейчас на iOS есть возможность из коробки способ использовать SVG (или иные векторные картинки) в иконках и стандартных компонентах? Я просто не в курсе… Если да — то круто. Смысл есть.
Ну постепенно наверное хотят вводить, сейчас дизайн, а позже векторизацию. Дизайн пока чтобы народ попривык к такому стилю, а то из сквероморфизма в вектор перейти может быть сложно как дизайнерам, так и пользователям (в том числе и из-за дизайнеров). А следующей ОС дадут векторные инструменты и пользователи сильно и не заметят разницу (зато apple сможет выпустить смартфон с другим экраном не учетверяя разрешение). Ну это догадки, конечно. Хотелось бы в это верить, вектор в интерфейсах всем бы очень приходился.
А по-моему это просто тренд в дизайне.
Просто и страшное -> сложное и страшное -> сложное и красивое -> простое и красивое.
Дошли до финала. Просто уже нет нужны маскировать приложения под реальность, они уже её часть и не нужно им лишней мимикрии.
Apple немного отстали… а потом сделали один из лучших плоских интерфейсов. Мне вот дизайн iOS7 нравится, хотя сначала я бы скептичен. А теперь смотреть на скевоморфные заметки мне даже неприятно немного. Чувствуется некая натужность… и ненужность.
Может тренд, но я надеюсь что реально это подготовка почвы для вектора. А со временем вернется сквероморфизм или просто более сложные формы, но уже в векторе (новый виток). Понятно, что упрощение делалось и в том числе чтобы озвужить интерфейс новыми трендами. Но, полагаю, небыло смысла это делать столь радикально, если цель только следовании тренду.
Обсчитывать векторные иконки — так себе идея, мне кажется. Хотя, кто знает.
Ускорители на то есть, да и кэшировать на конкретном экране ничего не мешает.
Вектор не сильно ограничивает возможность подделаться под «реальный мир». Градиенты да полупрозрачности давно уже в SVG записаны:

image
Выглядит так-себе. Понятно, что научатся лучше, если это станет новым трендом, но текущий стиль гораздо проще для векторизации.
Я не пойму, минусующему очень нравится картинка, он не замечает резкого перехода там, где должен быть плавный или эта картинка не у всех отображается одинаково?
То, что вы считаете «резким переходом», на самом деле является резкой границей отражения. Другое дело, что форма отражений подразумевает очень странный отражающийся предмет. Такое ощущение, что ягоды лежат на белом столе с очень кривыми краями. (Минусовал не я)
Ну, скажем так, в качестве демонстраций «неплоского дизайна» в векторе было бы привести другой пример, как по мне. Ладно, неважно, о том, что вектор только для плоского дизайна я и не говорил.
Автор так говорит, как будто плоский дизайн это что-то плохое.
image
У кого-нибудь есть вариант приличной трактовки этого изображения? Собственно, к чему вы это?..

А если серьёзно и по делу, то я думаю, что истина где-то посередине. Если вы обратите внимание, то Google, например, как использовал лёгкие намёки на скеоморфизм, так и использует. И у них-таки неплохой дизайн выходит.
Это где у Гугла нашёлся хороший дизайн?)
Лично я всего один раз долго искал что-то в гугловском дизайне. Это была кнопка «отправить» в Gmail-е, которая торчала у меня прямо перед носом. Я думал, что у нее будет иконка и поэтому 2 секунды тупил.

В целом, все их web-приложения мне кажутся вполне удобными, разумными и структурированными. В отличие от Facebook, Twitter и того же Яндекса (не говоря уже о Mail.ru).

Современный Android (под который я сейчас активно разрабатываю) внешне значительно приятнее, чем iOS 7, который выглядит пёстрым и безвкусным. По поводу usability не скажу. От Apple использую только OS X, которая пока, слава богу, не «поплоскела».
В Gmail и нет дизайна как такового.
Выбеленный интерфейс и всё.
У Вконтакте, например, дизайн вполне есть и функционалу не мешает.
Android — это то, где Google всё-таки сделал что-то интересное(к 4-й то версии). Мне iOS сейчас нравится больше, но это уже вопросы вкуса.
Эм, а как узнать когда интерфейс это уже дизайн, а когда как у гугла? Каковы критерии?
Любопытно же!
Когда страница от белого листа отличается =)
А давайте рассмотрим дизайн на примере cmd!

Консоль спроектирована следующим образом:
Запрос — действие — завершение действия — отчет. Все это отображается моноширным шрифтом, который был разработан специально для ЭВМ, для удобства чтения. Все запросы начинаются с пути размещения файла (чтоб было понятно что мы делаем), отчёты выводятся с отступом слева, чтоб визуально отделить их от запросов, в таблицах итоговые ячейки выровнены по правому краю, что позволяет быстро найти эти самые итоги. Давайте не будем дальше разбирать что и зачем, ведь самое главное лежит на поверхности. Даже консоль имеет дизайн.

И для справки — попробуйте наложить золотое сечение на продукты гугла, фейсбук, да даже в доте 2 оно есть, правда интересно?
Проектирование для консоли — это отдельная интересная задача :) Попадается нечасто, но там тоже есть чем заняться :)
Все известные мне статьи по дизайну сводятся к одной и той же максиме: лучший дизайн — тот, который незаметен. Когда каждый элемент однозначно намекает на свою функцию и не выглядит вычурно, когда ничего не лезет под руку, но всё всегда под рукой. Если один человек при виде чего-то (не важно — web-сайта, или автомобиля) хочет воскликнуть «О! Дизаааайн», значит другой в тот же момент процедит сквозь зубы «На**ячили тут опять какую-то по**ень...»

Как мне кажется, яркая красота оформления (будь то кричащий скеоморфизм, или аскетичный минимализм) имеет смысл только как самостоятельный арт-объект, призванный создать атмосферу. Например, на сайте писателя. Или в картинной галерее. И в этом смысле он должен подходить к содержанию. Вот вам старый пример за авторством Лебедева. 2000-й год, между прочим. Тогда это выглядело очень круто.

А если продуктовый магазин будет оформлен как авторский музей Сальвадора Дали, то клиенты будут приходить туда ровно один раз — чтобы полюбоваться. Но купить там всё равно ничего не смогут — не найдут товар.
В то же время, у продукта должна быть своя эстетика, которая бы его выделяла.
Где я вам говорил про безумие, аналогичное работам Дали?)
Эстетика должна быть у продукта, ориентированного на определенный круг пользователей. А Gmail — система «для всех» в том смысле, что Google ставит себе цель — у каждого жителя Земли должен быть аккаунт в их почте. Поэтому их целевая аудитория — Человек. Следовательно, они не имеют права хоть как-то специализироваться во вкусах. Как я уже сказал — приобретешь клиентов в одной вкусовой группе, потеряешь в другой.

Windows существенно безвкуснее, чем OS X (на мой взгляд). Я начинал работать с Windows 95 и уже 2 года живу на Маке, так что имею право сравнивать. И я заметил одну вещь: есть технические специалисты, которые ненавидят Windows (по разным причинам). Меня самого раздражает его несогласованность со всеми прочими популярными ОС. Но эстетику Windows не ругает почти никто. Потому что ее почти нет. А вот люди, имевшие дело с Маками, четко делятся на два непримиримых фронта — те, кто очень рад внешнему виду и usability (я, в частности) и те, кто от него плюются.

Поэтому Windows популярнее, я думаю.
Сравнивая продукты (почтовые сервисы, ОС, программы) стоит сразу о контексте применения говорить. Например, какой компьютер будет более эффективен для набора большого объема текста или для программирования? А теперь для программирования, например, под Linux? Usability в первую очередь определяется контекстом применения.
Операционная система для меня — среда обитания. Если быть точнее, то я оцениваю всё в комплексе и называю это — «уют». Компьютер (помимо банального web-серфинга, музыки и кино) я использую для программирования, игр (не самых топовых по графике — бродилки не очень люблю), иногда — музицирования, иногда — рисования.

И для меня лично эстетика очень важна. Когда появилась Vista, я, посмотрев, куда движется привычный мне Windows, ощутил, что мне в нем неуютно и «сбежал» в linux. Там я жил 2 года согласно правилам линукса — ставил игры под wine, последние версии программ собирал из сорцов, иногда переконфигурировал что-то. Жил я в Ubuntu. Когда они выкинули привычный и приятный мне в тот момент второй гном и начали делать Unity (которая и по сей день мне кажется сырой), я поглядел-поглядел на это всё и купил себе Mac Mini.

И с тех пор горя не знаю. Игры почти все есть. Софта много. POSIX присутствует (люблю gcc toolchain), хотя на последней версии gdb пришлось компилировать самому — они его выкинули, перейдя окончательно на lldb.

И эстетика маковского unix-минимализма, которая отлично сочетается с красивыми скеоморфными текстурами во многих программах, мне сейчас приятнее всего. Хотя и тут я с тоской смотрю на дизайнерские тенденции. Увы, скоро и на Маке всё будет плоское и прямоугольное.
Есть. Панорамио, но это очень нетипично для гугла, они его как только перекупили стали уродовать: выпилили форум и сделали свои шизофреничные «группы», которые я так и не осилил, галерею стали коверкать. Но в итоге стало вполне удобно и по юзабилити они тоже хорошо прокачали сайт, появились пакетные инструменты доавления тегов и привязки к месту.
Это кошка, трехцветная :)
Чуть-чуть доработайте- эти два круга идеально сочетаются с двумя О в логотипе google…
Вернёмся к теме топика, даже к его заголовку.
В оригинале подразумевалось, что «плоский дизайн» удобнее для разработчиков в большей степени, нежели для юзеров.

Потому что не нужно искать дизайнера и иллюстратора в одном флаконе (чтоб отрисовывать сквеоморфизм тот же) и платить ему большой кост за большое количество работы, потому что эту систему проще понять и проще реализовать (можно вообще обойтись возможностями HTML+CSS), это естественный процесс оптимизации деятельности, поскольку количество заказчиков растёт из года в год, да и иконки те же можно забацать чуть ли не в фотошопе — всё это удешевляет процесс и скорость разработки, но страдает индивидуальность и эмоциональность.

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

Кем, простите, подразумевалось?

Потому что не нужно искать дизайнера и иллюстратора в одном флаконе (чтоб отрисовывать сквеоморфизм тот же)

Выше справедливо заметили, что плохой плоский дизайн — это, в первую очередь, просто плохой дизайн. Если разработчики сэкономят на дизайнерах, дизайн выйдет плохим, что со скеоморфизмом, что без.

страдает индивидуальность и эмоциональность

Это очень индивидуально.

которую сменит импрессионизм

А вот это здорово. С удовольствием посмотрел бы на такой интерфейс!
1. Автором статьи, разумеется.

2. Для того, чтоб разработать дизайн-систему в flat'e дизайнеру не нужны навыки иллюстратора, для сквеоморфизма этот момент играет определяющую, ключевую роль, с чем и связана дороговизна процесса, поскольку дизайнер должен в себе совмещать две специализации. Относительно плохого дизайна: да, бывает, дизайн уродский, но основные задачи пользователя он выполняет, а то что эстетика не очень — ну что уж тут.

3. Перефразирую, в флэте эмоциональность возможно выразить меньшим количеством способов, нежели в других стилях. Точно так же и с иконками и элементами интерфейса. Чтоб было понятнее — новостной сайт/сервис в флэте смотрится неплохо, но там где нужен вау-эффект мы прибегаем к другим стилям.

4. Подобные интерфейсы уже существуют, я даже видел когда-то что-то подобное на одном сервисе картинок, который, к сожалению закрылся.
От системы зависит. В Японии вы на выходе его засунете и вас выпустят. В Германии просто контролер подойдет посмотреть.
Я может путаю, но подземка — это не метро имеется в виду?
В оригинале «subway». Я намеренно не стал писать «метро», чтобы не замыкать читателя на российское метро и избежать вопросов, подобных вашему. Не сработало. ;]
Оказалось, я еще одно упоминание подземки упустил — абзацем выше. Благодаря вам исправил. Спасибо.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории