Pull to refresh

Comments 51

«Плоский» дизайн и тёмные темы в оформлении — это вынужденные меры в связи с необходимостью экономии энергопотребления девайсов.
Это верно. Но лишь отчасти. OLED еще не так широко распространен и его КПД далек от идеала. Но все к тому идет.
UFO landed and left these words here
Погодите, погодите, дайте я это запишу, выучу, и при случае буду использовать как аргумент против рюшечек в спорах с заказчиком.
— Чревато. Заказчик за неумение говорить по-русски может и послать подальше.
Есть не менее хорошее мнение: когда дизайнер не в силах создать красивое оформление в неупрощенном стиле (напр., не умеет подобрать/нарисовать/заказать действительно подходящие иконки и заложить гармоничную сетку), он пытается «родить» что-то в стиле упрощенном, в котором, как ему кажется, за счет плоскости и упрощения элементов ему потребуется меньше вкуса для подбора отдельных элементов.

Очень часто такой подход неверен. Выбрал «минималистический» подход — будь добр меньшим разнообразием стилей объяснить то же самое, и так, чтобы человек не запутался, что это за иконка получилась из белого прямоугольника на черном фоне — это «Paste», «Copy» или вообще батарейка нарисована на значке запуска настройки энергопотребления.

С другой стороны, и это надо учитывать, если брать за основу нарочито примитивные сетки, то придется и контент под них подгонять. Пример — тот же экран Пуск в Win8 — значки крупные, и на начальном этапе это хорошо. Но когда доходит до втискивания в них чего-то (скажем, изображения рабочего стола) не подходящего по пропорциям, приходится это что-то обрезать. Когда нужно добавить много элементов — тоже не айс получается, меню сильно уезжать пытается, а механизма сворачивания значков (а-ля папки в смартфонах) идеологически не предусмотрено — приходится придумывать визуальные костыли.

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

В общем, вывод прост: чтобы делать дизайн, нужны трудолюбивость и вкус. Если есть и талант — просто супер. И в этом случае все получится, невзирая на стилистику. Но, не имея вкуса, опыта, желания вылизывать, сказать себе — «нарисую-ка я все минималистично, и скажу, что это стильно» — так не прокатит, точнее, на выходе ничего гениального из этого не выйдет.
ага, мне отсутствие шума особенно понравилось когда понадобилось сменить язык в режиме восстановления системы у Windows 8 — там строка вида «здесь вы можете поменять раскладку» была написана обычным текстом и никак не меняла своего состояния при наведении мыши. Пока не догадался что туда можно кликнуть — долго искал кнопку переключения по всем углам. Зато плоское. Ну там еще много веселого, тоже такого — плоского.
Это всего лишь когнитивный диссонанс вызванный либо багом UI, либо вашим личным опытом. При чем тут шум или Flat UI?
вы написали бред.

во-первых к распознаванию образа нейтронной сетью (и мозгом соответсвенно) не подходят метрики классических программ для ЭВМ, такие как например, упоминаемые вами «ресурсы».

во-вторых давно известно, что то что вы можете считать шумом с точки зрения логики минимализма, с точки зрения нейронной сети далеко не шум. и как пример я приведу вам хорошо известное исследование, что текст, набранный шрифтом с засечками, распознается человеком быстрее нежели тот же текст, набранный шрифтом без засечек.
UFO landed and left these words here
как плоский дизайн сэкономит батарею? Темная тема да, но не плоский дизайн.
Могу объяснить, но не скажу % эффективности.

Монохромные текстуры очень компактны в памяти, требуется меньше процессорного времени (читай энергии) на их хранение, транспортировку, прорисовку.
С технологической точки зрения да, но а смысл? Тогда уже не задумываться и ставить монохромный экран.
tl;dr-версия: 1. «плоский дизайн» — это хороший и современный дизайн, ориентированный на контент. 2. Microsoft молодцы. 3. Подтягивание конкурентов к похожим стилям неизбежно т.к. см. пункт 1.

Я правильно ухватил суть статьи?
Коротко о минимализме, Flat и Metro UI.

Flat, очень хорошо играет на контрасте. Metro особенно сильно выделяется в сфере UI.
Можно провести небольшую параллель: посмотрите на это надгробие. Оно прекрасно, не так ли?
image
Крупнее

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

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

В 2010 году, когда на рынке смартов властвовал айфон и самсунг с нагромождёнными интерфейсами, Windows Phone поражал воображение по внешности, дизайну.
Он шокировал, привлекал. Это был телефон из андерграунда, что-то из другого мира.

Теперь же, когда его пытаются всунуть куда ни попадя, кому попало, это уже не то…
И это есть следствие универсального закона «приятности» поступающей в мозг информации. Так, мы называем информацию банальной, когда каждый последующий символ в последовательности мы можем предсказать со 100% результатом. Информацию, в которой каждый последующий символ предсказать невозможно — мы называем оригинальной. Информация будет приятной, если наша способность предугадать последующий символ в последовательности будет где-то около 50%. Это относится ко всему. Естественно и к музыке, фильмам, книгам.
Боюсь что символ, который нельзя предсказать, будет называться непредсказуемым. А непредсказуемым вещам скорее свойственно удивлять, чем нравиться, так что здесь я не совсем понял вашу мысль. Контраст же, является в большей степени выразительным средством. Что касается привлекательности плоского дизайна, то здесь я полагаю она обусловлена свежестью, новизной и как следствие олицетворением прогресса. Объективно я не вижу никаких причин отказываться от объема, так как он замечательно распознается человеком и является дополнительным измерением для творчества.
Мне кажется, пример с надгробьями некорректен, хотя бы потому что надгробья не слишком функциональны, это всего лишь объект, на который можно иногда смотреть. Более того, лично мне как раз более импонирует однотипное и более практичное решение вроде такого: s59.radikal.ru/i165/1212/c1/1283f7489dd2.jpg, нежели полнейшая чехарда и разнообразие. Я бы такое надгробье, как вы показали, на фоне всех остальных назвал бы просто выпендрежем, а не каким-то продуманным дизайном.

В общем кладбище не должно быть разнообразным праздником жизни, оно должно быть не ужасным, а опрятным и строгим. Имхо, конечно.
UFO landed and left these words here
Надо было среди них вставить один как на предыдущей фотографии, чтоб было отчётливо понятно :)
А слово «скеуморфный» настолько общеупотребительно и является языковой нормой, что используется в тексте 5 раз и не требует пояснений и только я один его не знаю? Mithgol -а на вас нет.
Более того, оно на самом деле «скевоморфный»… Не видел, кстати, ни одной статьи, где это слово бы объяснялось (хотя используют его многие — звучит-то круто (: ), так что автор в этом не одинок.
UFO landed and left these words here
Не верю!
Как выше правильно сказали — нельзя чтобы чего-то было много. Сколько бессмысленных статей на тему «хватит юзать бутстрап», а все почему — да потому что берут как есть и используют, забывая о том что фреймворк — это не архитектура, не готовый дизайн, это в первую очередь инструмент для создания чего-то своего красивого и уникального. Есть сотни потрясающих сайтов на бутстрапе — и вы им хотите внушить что не надо использовать бутстрап?
То же и с flat/responsive/adaptive/новое_движение_к_которому_все_шло, если это будут везде сувать как есть, не добавляя уникальных, оригинальных дополнений, через пол года опять появятся статьи «хватит использовть metrotrap»
А на счет контентного дизайна — я так и не понял что вы хотели сказать. По моему ясно, что дизайн — обертка вокруг контента, без контента(читай с рыбой вместо него) невозможно создать приятный дизайн, и плоский интерфейс тут не при чем
В этом вся суть, что слово «плоский» неправильно, потому что делает акцент совсем не на том, что важно. А важен именно контент. В сущности вся статья именно об этом.

Также я безусловно согласен с тем, что когда «все одинаково» — это плохо, потому что нельзя выделиться. Поэтому вопрос не в том, чтобы делать трендово плоско, а в том чтобы делать просто хороший дизайн, отвечающий текущим современным задачам. Более того, если все будет ущербно плоско, это будет отвратительно и никому не понравится. Также есть большое заблуждение, что сделать плоский дизайн легко. На самом деле легко сделать «какой-нибудь» (или «никакой») плоский дизайн, намного сложнее сделать хороший «плоский» дизайн.
То есть по вашему чтобы выделить контент — надо сделать интерфейс плоским, или при чем тут вообще плоскость?
Я нигде не писал, что чтобы выделить контент, надо сделать весь интерфейс плоским. Я написал, что если вы ставите во главу угла контент, прямое взаимодействие с ним и переносимость взаимодействия независимо от устройства/форм-фактора и т.п., то вы будете стремиться убрать или минимизировать все лишние элементы, которые являются поддерживающими конструкциями (например, рамки), операциями над контентом и т.п. Одним из следствий этого является тот факт, что элементы управления, они же обвязка, хром (chrome) и UI в классическом варианте будут становится более символичными, узнаваемыми и плоскими, но это лишь одна из граней, потому что еще есть работа с пространством, цветом, движением, жестами и т.п., а не только плоские картинки.
неверно. Всё зависит от самого контента.

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

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

Дальше вы должны решить, как и в какой степени сообщить пользователю в статичном состоянии (до поднесения пальца) о том, что на что-то можно нажать, а когда этого можно не делать. Эта задача решается разными способами, например, в Windows Phone, несмотря на простоту все кнопки имеют четкий узнаваемый вид, контролы пивотов и панорам имеют довольную быструю кривую обучения и узнаваемость, некоторые действия продублированы (например, в том же пивоте можно как нажимать на заголовки, так и листать). Еще немаловажный момент — это размер экрана относительно рук и соответственно количество действий (энергии), которые надо осуществить на попытку куда-то нажать, на большом экране потеря от неверного предположения больше, чем на маленьком.

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

Акцентируют внимание в простом потоке контента, в основном, четырьмя способами: жирный, курсив, подчёркивание и цвет. Рамки обычно никто не добавляет… пока дело касается простого текста или там серии изображений.

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

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

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

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

А насчёт визуальных подсказок, в wp, например, есть множество вариантов, по которым я как пользователь могу определить активный ли элемент. Например это акцентный цвет, подчёркивание, или тот факт, что это элемент списка. И я не сказал бы, что это делает дизайн менее минималистичным. Это всего лишь показывает, что часть контента обладает несколько другими качествами, нежели окружение. В последнее время я ошибался лишь 2жды. Оба случая были в приложении 2gis:
1) в одном месте они использовали круглую кнопку в качестве иконки, но уже исправили.
2) рядом есть количество организаций, и не совсем очевидно, что оно кликабельно. Выделение его акцентным цветом, подчёркиванием или многоточием улучшило бы ситуацию. Этот косяк они ещё не исправили.

В скевоморфном дизайне я тоже встречал примеры, когда на экране нарисована кнопка, но она не нажимается (фалаут этим страдал, насколько я помню) это просто примеры плохого дизайна.
Возможно, вы правы. Но мы-то про контент…

Что касается сквеоморфного дизайна и неактивных элементов — так это и на реальных предметах встречается, которые дизайн стремится имитировать. Примеров уйма — начать можно от фальшивых декоративных пуговиц в форме гаек на блузке случайной прохожей из фильма «Новые времена», и закончить одним из вариантов корпуса IP-телефонов D-Link DPH-150S, в котором есть элемент, который в реальности просто декоративный, но кажется, что это такое колёсико для управления.
Рококо, барокко, ренессанс, кубизм, абстракционизм, наив… Как по мне мода на дизайн схожа с модой на искусство, тем более и там и там авторами являются люди творческие. Неизбежность плоского дизайна конечно есть, но это временно как и любая мода, как неизбежность дождя весной.

Уже сегодня появляются инструменты позволяющие работать в 3D (даже в CSS3 вводят матричные преобразования), поэтому через годик «Плоский» интерфейс получит перспективу, затем объем, затем реализм. А на хабре будут в моде статьи аля «управление камерой в меню навигации», или «матричные вычисления в галереи изображений».

Вы явно не понимаете, что такое искусство.

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

То, что действительно является искусством, им и будет, вне зависимости от моды. Мода возникает как попытка подражания искусству, ну или просто чему-то новому и оригинальному, и конечно проходит, когда всем надоедает это подражание; а вот оригинал при этом всё равно обычно не устаревает.
В дизайне одежды — то же самое, что и в архитектуре, и в искусстве. Общие тенденции изменений моды — это не попытка подражания, а попытка следовать изменениям в обществе и развитии технологий. Простой наглядный пример — Мэри Куант.
Да? Ну объясните пример с юбками и шортиками.

«Мода» — это не то, что показывают на этих ваших подиумах. «Мода» — это то, что «носят все».
Подиум — это полигон. Ни один тренд не идет в массовое производство без обкатки на подиуме.

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

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

Разумеется, речь не идёт о так называемом «современном искусстве». Современное искусство существует, но не это не то, что принято называть «современным искусством».
Я чуть соврал. Можно ещё пытаться нагнать ажиотаж, «раскрутить» что-то и потом снимать сливки. Это тоже не искусство. Это называется «маркетинг».

Ну и простите за опечатку, я конечно хотел написать «композиторы», просто окончание осталось от другой компоновки предложения ;)
Прочитал, от дальнейшей дискуссии на тему, далекую от топика, уклоняюсь. :)
У интерфейса приложения (сайт в этом отношении — то же самое) две задачи. Первая и главная — сделать работу пользователя с приложением безошибочной, быстрой и удобной с помощью различных способов (цветные кнопки, особые элементы и т.п.). Вторая, второстепенная, но важная с точки зрения маркетинга — сформировать у пользователя положительный опыт. Безусловно, УДОБНЫЙ интерфейс тоже формирует такой опыт, но КРАСИВЫЙ интерфейс делает это вдвойне. А при современном уровне вылизанности интерфейсов «красивый» зачастую означает «новый».
Сдаётся мне, все элементы интерфейса, похожие на реальные объекты, не заставят человека думать, что он и в самом деле пользуется настоящим объектом, нет. Дело не в схожести, дело в визуальной привлекательности. С этой точки зрения возврат к плоским интерфейсам — не уход от имитации реальности. Это попытка сделать что-то новое, выделиться на фоне заполонивших всё интерфейсов, похожих на реальный мир. И да, это по большому счёту не столько забота о пользователях, сколько способ сделать свою продукцию привлекательнее и — таки да — продать больше. Сильно сомневаюсь, что скорость работы с интерфейсом будет зависеть исключительно от того, насколько натуральны натянутые на него текстуры.
Поэтому все цифровые калькуляторы в компьютере похожи на настоящие аналоговые калькуляторы, поэтому цифровая клавиатура повторяет обычную аналоговую,


Мне, как электронику по образованию, после этого параграфа стало тяжело читать. Вроде как и статься интересная, и понимаю что подразумевает автор под термином «аналоговый калькулятор» и «аналоговая клавиатура», но душа не приемлет. Ну не аналоговые они, они такие же цифровые. Да, они не виртуальные, не программные, они «физические», реальные, но от этого они не становятся аналоговыми.
Спасибо, заменил на физические.
Плоский дизайн был всегда, просто логичный тренд за который все массово схватились.
Почему-то не упомянули главного — стоимость разработок. Куча «доводок» в скевеморфных приложениях от визуального сахара. Типа двинем пиксель влево, шрифтик че-то не того, гамму малость поменяем, тут слишком маленький пробел, там чуть не так тенька, стежки на бордюре переделаем. А потом вдруг «О Боже! Айфон 5 длиннее айфона 4. НЕЕТ!!!»

В метро эти все штуки-дрюки посылаются на йух. Главное функция, навигация, размер визуальных целей, метафора взаимодействия с пользователем. Поэтому интерфейс в конечном итоге «довести» быстрее, а главное делается это промышленными методами, без старбакса и марихуаны. Имхо правильно все делают.
Плоский дизайн в духе Windows 8 — это тоже плохо.
Чрезмерное упрощение усложняет восприятие.

Мне нравится то, что делает гугл — без всяких революций и модных тенденций раз за разом делает все лучше и лучше.
Спасибо за заметку о радиокнопке, интересно же как когда-то придумали название этому элементу управления.
Это простая остановка в эволюции. Хороший интерфейс — счезнувший интерфейс, плоский минимализм остановка на пути полного его растворения. Контент просачивается через упаковку и растворяет её, модульная сетка, цветовое решение, графические примитивы растворяются медленнее всего остального, а типографика абсорбирует в себя всю харАктерность и уникальность решения.
Only those users with full accounts are able to leave comments. Log in, please.