«Все просто», или краткий пересказ длинной истории с пропусками некоторых важных фактов и обстоятельств
В какой-то момент мне казалось, что не проходило и дня, чтобы среди тех людей, на которых я подписан, или среди источников, которые я читаю, не проскакивало хоть что-то, что касалось бы «плоского» дизайна. Вбейте в 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"-дискет. Дискет нет, а иконка есть. Где-то от иконки отказываются в пользу просто надписи «сохранить», где-то сохраняют в облако, но суть в том, что функция сохранения как таковая сегодня не нужна и разрешается в сторону двух взаимосвязанных операций, которые должны делаться автоматически: автосохранение и версионность. В будущем нет кнопки «сохранить», вы будете просто хотеть быть уверенным, что у вас есть актуальная версия документа на вашем текущем устройстве, не влезая в какие-либо другие детали.
Важным аспектом проекции будущего является понимание универсальности контента и цифровых объектов. Мир, в котором пользователь может свободно перемещаться от одного устройства к другому, скорее всего, разных форматов, проповедует универсальность контента в противовес интерфейсу обвязки. Весь дополнительный интерфейс должен быть максимально упрощен, символичен, прозрачен и переносим ― с тем, чтобы ничто не смущало и не отвлекало от контента.
В такой ситуации вы будете обязаны думать о проектировании контента и прямых способов взаимодействия с ним, разрешая в сторону минимизации любые побочные элементы. Любые дополнительные элементы будут символичны, просты и минималистичны, переносимыми от одного устройства к другому. В этот момент вас просто не должно волновать, насколько объемные ваши кнопки, в какую сторону наклонены тени под ними или насколько блестящая шерстка на вашей шкурке интерфейса. Блеск шкурки вас должен волновать только в том случае, если она и является контентом, элементом взаимодействия.
Поэтому дизайн неизбежно становится «плоским», точнее контентным и функциональным. Плоскость ― это всего лишь проявление редукционизма, удаления вторичных деталей, интеграции функциональности непосредственно в сущностные объекты, намеченного фокусирования на важных вещах и скрытия всего вторичного. Но «плоскость» не обязательно одинакова и однозначна, «плоскость» многомерна в смысле возможностей реализации, поэтому, несмотря на схожие принципы дизайна, у разных платформ будет разный визуальный язык, и разные детали реализации.
Впрочем, главное, чтобы дизайнеры начали делать просто «хороший» дизайн контента.
И еще: есть мнение, что «плоский» дизайн делать проще, но правда в том, что хороший «плоский» дизайн делать тоже сложно, потому что нужно много внимания уделать деталям и таким вещам как движение, на которые, возможно, раньше вы мало обращали внимания. Гайды и готовые элементы тут тоже помогают.
И еще одно: никто не доказал, что будущее будет именно таким, то есть «плоским», а не, скажем, каким-то другим. То есть если, к примеру, вдруг изобретут прямые интерфейсы в мозг с трансляцией образов, то это все уйдет в помойку. Или, если нас захватят пришельцы, у которых по неизвестному недоразумению все интерфейсы скругленные и с галлюциногенными цветами…
