19,2
рейтинг
1 августа 2013 в 09:53

Дизайн → И еще один пост про Flat Design, или почему все «кинулись» делать плоские интерфейсы



«Все просто», или краткий пересказ длинной истории с пропусками некоторых важных фактов и обстоятельств



В какой-то момент мне казалось, что не проходило и дня, чтобы среди тех людей, на которых я подписан, или среди источников, которые я читаю, не проскакивало хоть что-то, что касалось бы «плоского» дизайна. Вбейте в Bing, Google, Yandex слова «flat design» или «плоский дизайн» ― и вы легко найдете огромное количество материалов: от обзоров и примеров, до аналитических и исторических измышлений или просто мыслей вслух (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ...).

Я считаю, что это прекрасно. Прекрасно, что мы как сообщество думаем о том, чем мы занимаемся или что мы видим вокруг, и пытаемся это как-то осознать, вербализировать. Нам нужны дискуссии и обсуждения, нам нужны многие и многие статьи и отдельные высказывания, чтобы прочувствовать тот момент, в котором мы находимся.

Кто-то говорит, что плоский дизайн интерфейсов пришел или, точнее, объявил о себе во всей красе благодаря платформе Windows Phone (и Windows 8) с ее революционными стилистически простыми и даже намеренно упрощенными интерфейсами. Это было ново и свежо на фоне повального увлечения скеуморфными, натуралистичными иконками в мире Apple. Это было интересно и необычно, в каком-то смысле, знаково, потому что как минимум резко и необратимо решил поменяться и обновиться такой большой и, казалось, неповоротливый монстр как Microsoft.

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

Кто-то (не обязательно, впрочем, в ответ) говорит о том, что плоские дизайны были всегда, просто они не были на поверхности (для интерфейсов), однако, даже в рамках iOS были многие внешние приложения, которые экспериментировали с формой и интерфейсами и фактически были «плоскими», в отличие от «гайдлайновых» скеуморфных, хотя и совсем не такие, какие мы увидели в Windows Phone. В конце концов, какая-то часть дизайнеров и проектировщиков всегда была склонна к простоте и минималистичности, кто-то интересовался инфографикой и был не прочь экспериментировать, поэтому и «плоские» интерфейсы были (до) и без «metro».

Как бы там ни было, нельзя не отметить тот факт, что именно на фоне появления Windows Phone и впоследствии Windows 8 начало набирать обороты большое индустриальное течение. В какой-то момент Google все-таки сделала вразумительные гайды для Android, потом привела к единообразию кучу своих сервисов, вложив в них новый язык дизайна, ― и кто-то не преминул назвать это «почти плоским» дизайном. Конечно, нашлись и такие, кто махал флажочками и говорил, что «что-то мне это напоминает», подмигивая в сторону Microsoft.

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

Потом, с выходом Windows 8, в лагере MS отказались от codename «metro» в пользу просто (нового) интерфейса Windows, он же Modern UI. Как раз на фоне обсуждения этих событий более менее устоялось именование «плоский» дизайн, апеллирующее к плоскости визуального решения. В толпе, к сожалению, остались неуслышанными многие разумные возгласы о том, что дело не в плоскости или «метрошности».

Масла в огонь подлили слухи о новой iOS7, которая должна была «по версии слухов» стать революционно плоской. Злые языки, конечно, готовились считать и пересказывать, сколько и что именно Apple украла у конкурентов. iOS7 действительно стала более плоской, неоднозначной, а перетирок новых шагов яблочной компании считать не сосчитать.

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

Что я забыл?

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

 

― Постойте, сэр! Неужели они просто взяли и скопировали?



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

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

Признаюсь, я иногда даже позволяю себе ретвитить подобные твиты.

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

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

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

 

На пути к плоскому миру



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

В общем, если бы у меня спросили, я бы определенно был против называть это великолепное явление «плоским», потому что это умаляло бы все другие аспекты. В определенном смысле, это можно было бы назвать просто современным (modern) дизайном, хотя если взять вместе все составляющие и принять неизбежность, у вас не останется ничего другого, кроме как назвать его просто хорошим (актуальным) дизайном (www.toledo2.com/2013/05/02/dont-call-it-metro-call-it-good-design).

Хорошим дизайном, отвечающим современным веяниям времени. А плоскость или не плоскость, или почти плоскость ― это уже детали.


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

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

Почему же сегодня я говорю о неизбежности «плоского» дизайна? Почему хороший дизайн сегодня вдруг оказывается плоским?

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


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

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

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




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

В значительной степени новая, команда начинает работать практически в режиме внутреннего стартапа над тем, что потом назовут Windows Phone. Фактически имея карт-бланш на любое разумное творчество, девочки и мальчики экспериментируют,  смотрят на интересные продукты внутри Microsoft (вроде Zune), смотрят на «правильные» источники, которые могли бы лечь в основу дизайна новой платформы как источники вдохновения, философии и визуального воплощения. Я думаю, там было много чего интересного, что осталось за кадром, но до нас доходят явным образом Баухаус, швейцарская типографика (и вообще огромное внимание к работе со шрифтом и формой), моушен-дизайн (motion design), синематографика, в частности, и инфографика.

Эти отсылки сегодня звучат наружу как основные источники вдохновения. И я, вторя авторам, всем говорю: если вам мало гайдов Windows Phone или Windows, тогда вот вам направления ― читайте, изучайте, вдохновляйтесь и творите. За каждым из них стоит своя логика, своя естественность и в определенном смысле своя неизбежность, которая следует из осознания того, куда мы хотим прийти, или, вернее, какие цели мы перед собой ставим.

Девочки и мальчики экспериментируют, рисуют макеты, строят сетки, формулируют правила и принципы, учатся на ходу, придумывают визуальный язык, элементы интерфейса, поведение операционной системы, базовые приложения и концепты для внешних, составляют гайдлайны и руководства. В конечном счете мы получаем Windows Phone… и большой-большой звоночек. А интерфейс-то получился «плоским»! Конечно, никому и в голову не приходит называть его «плоским». Он минималистичный в смысле элементов оформления, декоративная составляющая сведена к минимуму, необходимому для реализации функциональности. Основой приоритет отдан его величеству контенту!

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

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

Наконец, вам придется подключить анимацию и продумать язык движения, как только вы придете к «упрощенным» интерфейсам, в которых центральное место отдано контенту. А как же иначе, если вы делаете «живые» и подвижные интерфейсы, с которыми предполагаете прямое взаимодействие, и заодно убираете навигационные элементы, интегрируя активацию переходов в сам контент? (К слову, если вы смотрите на гайды iOS7, обратите внимание на использование анимации.)

Контент на фронте волны трансформации!

Поэтому я бы с удовольствием назвал эту трансформацию переходом к контентному дизайну, гмммм… от дизайна интерфейсов. Мы ставим приоритетом номер один сам контент, а не интерфейс прослойки для взаимодействия с ним ― и непременно получаем необходимость минимизировать прослойку, интегрировать взаимодействие в сам контент там, где это возможно и уместно, снять акцент с элементов управления ― и перебросить его на самое ценное. Вот тут и происходит революция «плоского» дизайна… Только она ни разу не про то, как сделать плоским, а про то, как сделать главным контент. Грубо говоря, если объем говорит о том, с чем можно взаимодействовать, то «объемным» должен стать контент, а не кнопки.

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

Во-вторых, это вопрос инертности. Никто не будет сознательно убивать корову, которая дает молоко, если ее еще можно доить и доить. Если есть интерфейсы, которые работают и работают неплохо, нет большого смысла их резко менять. Эволюционный путь тут более уместен, поэтому с каждой новой версией iOS или Android или ранее Windows Mobile мы видели скорее постепенное развитие, нежели резкую смену направления. Microsoft в какой-то момент оказалась в ситуации, в которой не только могла себе это позволить, но и в общем-то не имела другого выхода, как начать с нуля (в смысле дизайна интерфейсов).

В-третьих, это вопрос проекции будущего или попытки его формирования. В Microsoft этим занимаются команды Microsoft Research и продуктовые команды, во времена создания Windows Phone как минимум была еще команда в офисной группе, которая занималась проектами «productivity future», пытаясь представить, не только как могли бы выглядеть будущие интерфейсы, но и в целом как бы выглядел цифровой мир и взаимодействие людей и цифровых объектов. И вот в этих проекциях неизбежным оказывается приоритет контента, прямого взаимодействия, цифрового мира и уничтожения аналоговых атавизмов.

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

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

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

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

Впрочем, главное, чтобы дизайнеры начали делать просто «хороший» дизайн контента.

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

И еще одно: никто не доказал, что будущее будет именно таким, то есть «плоским», а не, скажем, каким-то другим. То есть если, к примеру, вдруг изобретут прямые интерфейсы в мозг с трансляцией образов, то это все уйдет в помойку. Или, если нас захватят пришельцы, у которых по неизвестному недоразумению все интерфейсы скругленные и с галлюциногенными цветами…
Константин Кичинский @kichik
карма
118,9
рейтинг 19,2
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (51)

  • –14
    «Плоский» дизайн и тёмные темы в оформлении — это вынужденные меры в связи с необходимостью экономии энергопотребления девайсов.
    • 0
      Это верно. Но лишь отчасти. OLED еще не так широко распространен и его КПД далек от идеала. Но все к тому идет.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +6
        Погодите, погодите, дайте я это запишу, выучу, и при случае буду использовать как аргумент против рюшечек в спорах с заказчиком.
        • +2
          — Чревато. Заказчик за неумение говорить по-русски может и послать подальше.
      • 0
        Есть не менее хорошее мнение: когда дизайнер не в силах создать красивое оформление в неупрощенном стиле (напр., не умеет подобрать/нарисовать/заказать действительно подходящие иконки и заложить гармоничную сетку), он пытается «родить» что-то в стиле упрощенном, в котором, как ему кажется, за счет плоскости и упрощения элементов ему потребуется меньше вкуса для подбора отдельных элементов.

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

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

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

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

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

        во-вторых давно известно, что то что вы можете считать шумом с точки зрения логики минимализма, с точки зрения нейронной сети далеко не шум. и как пример я приведу вам хорошо известное исследование, что текст, набранный шрифтом с засечками, распознается человеком быстрее нежели тот же текст, набранный шрифтом без засечек.
        • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      как плоский дизайн сэкономит батарею? Темная тема да, но не плоский дизайн.
      • +2
        Могу объяснить, но не скажу % эффективности.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    Мне, как электронику по образованию, после этого параграфа стало тяжело читать. Вроде как и статься интересная, и понимаю что подразумевает автор под термином «аналоговый калькулятор» и «аналоговая клавиатура», но душа не приемлет. Ну не аналоговые они, они такие же цифровые. Да, они не виртуальные, не программные, они «физические», реальные, но от этого они не становятся аналоговыми.
    • +1
      Спасибо, заменил на физические.
  • 0
    Сегодня уже читал что-то подобное от Матиаса Дуарте — qz.com/110613/the-head-of-android-design-small-screens-are-pushing-a-new-wave-in-design/
  • 0
    Плоский дизайн был всегда, просто логичный тренд за который все массово схватились.
  • +1
    Почему-то не упомянули главного — стоимость разработок. Куча «доводок» в скевеморфных приложениях от визуального сахара. Типа двинем пиксель влево, шрифтик че-то не того, гамму малость поменяем, тут слишком маленький пробел, там чуть не так тенька, стежки на бордюре переделаем. А потом вдруг «О Боже! Айфон 5 длиннее айфона 4. НЕЕТ!!!»

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

    Мне нравится то, что делает гугл — без всяких революций и модных тенденций раз за разом делает все лучше и лучше.
  • 0
    Спасибо за заметку о радиокнопке, интересно же как когда-то придумали название этому элементу управления.
  • 0
    Это простая остановка в эволюции. Хороший интерфейс — счезнувший интерфейс, плоский минимализм остановка на пути полного его растворения. Контент просачивается через упаковку и растворяет её, модульная сетка, цветовое решение, графические примитивы растворяются медленнее всего остального, а типографика абсорбирует в себя всю харАктерность и уникальность решения.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.