Плоский дизайн: что это такое, и почему он так популярен
«Мы сделали иконки на экране такими хорошенькими, что вам захочется их лизнуть» - говорил Стив Джобс в 2000 году, комментируя Aqua, на тот момент самый свежий интерфейс операционной системы MacOS. Остальное - история: и разработанный Microsoft в попытках догнать «акву» интерфейс Aero, и целое сообщество, выросшее из энтузиастов стилистики Apple. Казалось, всё вокруг, от логотипов IT-корпораций до интерфейсов меню в банкоматах, разом обрело объём и глянцевость.
Сейчас всё изменилось. Вздумай мы лизнуть иконки свежей мобильной операционной системы от Apple, отделались бы в лучшем случае порезом языка - такие они плоские и остроконечные. Объём разом ушёл не только из логотипов, идентификационных знаков и интерфейсных элементов, но и с упаковок продуктов, ориентирующихся на молодую, условно «модную» аудиторию.
Интерактивный дизайн
Старый, «скеуморфический» внешний вид iOS, и новый - плоский
Началась эта мода на тонкость, плоскость и простоту даже не с iOS 7, выполненной будто в декорациях ночного клуба начала 1980-х, а с попыток переосмыслить будущее интерактивности. «Это просто робкая попытка немного разнообразить статус кво», - комментирует специалист по интерфейсам Виктор Брет достаточно старый уже футурологический ролик Microsoft. Герои видео разговаривают друг с другом при помощи прозрачных WindowsPhone, офисные работники сосредоточенно водят руками по большим стеклянным панелям с данными, а дети, листают интерактивные книжки. «С точки зрения перспектив интерактивного дизайна, это всё довольно ужасно», - резюмирует Виктор.
Сам по себе интерактивный дизайн вырастает из простой логики: любой инструмент должен работать как мостик между скудными ресурсами человека и достижением нужного результата. Кружка удерживает больше жидкости, чем способна вместить человеческая ладонь, одежда на морозе согревает лучше, чем кожа. Иными словами, инструмент преодолевает расстояние между нашими физическими возможностями и нашим желанием что-либо сделать. И в идеальном мире, где профессионалы хорошо знают своё дело, разработанный ими интерфейс инструмента обусловлен исключительно его функцией, а сам инструмент трудно представить задействованным в решении нехарактерной для него задачи.
За стеклом
Однако сегодня множество функций, традиционно принадлежащих самым разным инструментам, апроприировали мультизадачные гаджеты. И, конечно, сделать общий интерфейс для компаса, телефона, книги и почтового ящика таким же простым и незаметным, как у каждого из этих предметов в отдельности - нельзя. Если вы читаете бумажную книгу, то чувствуете вес её страниц - примерно представляете, сколько времени займёт у вас её чтение. А по толщине прочитанной части книги можете судить, как далеко уже продвинулись. Вес же смартфона и его толщина - не меняются, неважно, сколько страниц в книге, что вы в него загрузили - двести или две тысячи.
Поэтому привычные читателю естественные паузы, задаваемые перелистыванием, имитируются анимацией, а на помощь в определении уже прочитанного объёма приходит специально нарисованная дизайнером шкала.
iBooks на iPad4
Для того, чтобы пользователям было удобнее работать с такими сервисами для «мобильных платформ», максимально приведёнными к одному знаменателю, но функционально разными, саму их видимую часть нужно было максимально конкретизировать, придать ей объём. Стив Джобс, отдавший столько внимания иконкам iOS уже проходил этот путь с персональными компьютерами. Графический интерфейс, который он, согласно легенде, украл у Xerox, чтобы его затем позаимствовали в Windows, был создан именно для этой задачи: показать пользователям иллюзию материального взаимодействия там, где этого взаимодействия нет - за стеклом монитора.
«Путь» в дизайне
Дизайн сервисов начал поворачиваться от округлой, предметной оболочки в сторону плоской, едва намеченной абстракции после появления iPad, а точнее, после того, как арт-директор Скотт Дадич придумал для гаджета первый журнал.
Журнал Wired на iPad
«Нам было важно показать, что Wired App отличается от нашего интернет-сайта» - заявлял Дадич в публичной презентации. Работа над новой, планшетной логикой чтения журнала заняла у его команды и специалистов из Adobe целый год. Однако результатом, с незначительными изменениями пользуются сегодня все.
Описывая отличия приложения от сайта, Дадич пояснял: «Это полноценное издание, у которого есть начало, середина и конец. В отличие от сайта с его вольной навигацией, в электронном журнале есть чёткая структура. Мы хотим провести читателя по определенному пути, над которым тщательно работала редакция».
Из этого пути, а точнее, набора путей - состоит сегодняшняя iOS7. Её пользователю уже не нужно объяснять, что такое App. И без глянцевого блика на иконке он воспринимает приложение как предмет, вещь, которую можно взять в одном месте и переложить в другое. Только вещь невесомую, находящуюся за стеклом.
И сейчас работа над овеществлением приложения сменяется в интерактивном дизайне работой над овеществлением пути. Одна из ключевых особенностьей iOS7 - трёхмерная навигация, которой уже посвящены вопли отвращения пользователей iPhone со всего мира.
Рассказывает Йоаким Формо, специалист Ericsson User Experience Lab.:
«При выборе папки пользователь как будто приближается к ней, а нажатие на иконку заставляет в буквальном смысле нырнуть в нее с головой. И наоборот - нажатие кнопки home возвращает вас на один уровень выше. В структурном смысле перед нами все та же иерархически организованная система, но работа с ней стала гораздо более наглядной. Теперь папки не "открываются" - они увеличиваются или уменьшаются в размерах».
Как нетривиально и ярко продемонстрировал в одном из своих текстов дизайнер Майкл Бьерут, визуальная культура в довольно большой своей части состоит из стиля, навязываемого модой и культуртрегерами. Именно поэтому плоский дизайн стремительно ринулся в мир на крыльях интерфейсов iOS7, Windows 8, Xbox и Play Station 4:
Плоский интерфейс операционной системы Windows 8
Экран Home пользовательского интерфейса PS4
Старый (объёмный) и новый (плоский) логотипы Google
Плоский интерфейс Google
Старый (объёмный) и новый (плоский) логотипы браузера Google Chrome
Новый плоский логотип YouTube
Сейчас всё изменилось. Вздумай мы лизнуть иконки свежей мобильной операционной системы от Apple, отделались бы в лучшем случае порезом языка - такие они плоские и остроконечные. Объём разом ушёл не только из логотипов, идентификационных знаков и интерфейсных элементов, но и с упаковок продуктов, ориентирующихся на молодую, условно «модную» аудиторию.
Интерактивный дизайн
Старый, «скеуморфический» внешний вид iOS, и новый - плоский
Началась эта мода на тонкость, плоскость и простоту даже не с iOS 7, выполненной будто в декорациях ночного клуба начала 1980-х, а с попыток переосмыслить будущее интерактивности. «Это просто робкая попытка немного разнообразить статус кво», - комментирует специалист по интерфейсам Виктор Брет достаточно старый уже футурологический ролик Microsoft. Герои видео разговаривают друг с другом при помощи прозрачных WindowsPhone, офисные работники сосредоточенно водят руками по большим стеклянным панелям с данными, а дети, листают интерактивные книжки. «С точки зрения перспектив интерактивного дизайна, это всё довольно ужасно», - резюмирует Виктор.
Сам по себе интерактивный дизайн вырастает из простой логики: любой инструмент должен работать как мостик между скудными ресурсами человека и достижением нужного результата. Кружка удерживает больше жидкости, чем способна вместить человеческая ладонь, одежда на морозе согревает лучше, чем кожа. Иными словами, инструмент преодолевает расстояние между нашими физическими возможностями и нашим желанием что-либо сделать. И в идеальном мире, где профессионалы хорошо знают своё дело, разработанный ими интерфейс инструмента обусловлен исключительно его функцией, а сам инструмент трудно представить задействованным в решении нехарактерной для него задачи.
За стеклом
Однако сегодня множество функций, традиционно принадлежащих самым разным инструментам, апроприировали мультизадачные гаджеты. И, конечно, сделать общий интерфейс для компаса, телефона, книги и почтового ящика таким же простым и незаметным, как у каждого из этих предметов в отдельности - нельзя. Если вы читаете бумажную книгу, то чувствуете вес её страниц - примерно представляете, сколько времени займёт у вас её чтение. А по толщине прочитанной части книги можете судить, как далеко уже продвинулись. Вес же смартфона и его толщина - не меняются, неважно, сколько страниц в книге, что вы в него загрузили - двести или две тысячи.
Поэтому привычные читателю естественные паузы, задаваемые перелистыванием, имитируются анимацией, а на помощь в определении уже прочитанного объёма приходит специально нарисованная дизайнером шкала.
iBooks на iPad4
Для того, чтобы пользователям было удобнее работать с такими сервисами для «мобильных платформ», максимально приведёнными к одному знаменателю, но функционально разными, саму их видимую часть нужно было максимально конкретизировать, придать ей объём. Стив Джобс, отдавший столько внимания иконкам iOS уже проходил этот путь с персональными компьютерами. Графический интерфейс, который он, согласно легенде, украл у Xerox, чтобы его затем позаимствовали в Windows, был создан именно для этой задачи: показать пользователям иллюзию материального взаимодействия там, где этого взаимодействия нет - за стеклом монитора.
«Путь» в дизайне
Дизайн сервисов начал поворачиваться от округлой, предметной оболочки в сторону плоской, едва намеченной абстракции после появления iPad, а точнее, после того, как арт-директор Скотт Дадич придумал для гаджета первый журнал.
Журнал Wired на iPad
«Нам было важно показать, что Wired App отличается от нашего интернет-сайта» - заявлял Дадич в публичной презентации. Работа над новой, планшетной логикой чтения журнала заняла у его команды и специалистов из Adobe целый год. Однако результатом, с незначительными изменениями пользуются сегодня все.
Описывая отличия приложения от сайта, Дадич пояснял: «Это полноценное издание, у которого есть начало, середина и конец. В отличие от сайта с его вольной навигацией, в электронном журнале есть чёткая структура. Мы хотим провести читателя по определенному пути, над которым тщательно работала редакция».
Из этого пути, а точнее, набора путей - состоит сегодняшняя iOS7. Её пользователю уже не нужно объяснять, что такое App. И без глянцевого блика на иконке он воспринимает приложение как предмет, вещь, которую можно взять в одном месте и переложить в другое. Только вещь невесомую, находящуюся за стеклом.
И сейчас работа над овеществлением приложения сменяется в интерактивном дизайне работой над овеществлением пути. Одна из ключевых особенностьей iOS7 - трёхмерная навигация, которой уже посвящены вопли отвращения пользователей iPhone со всего мира.
Рассказывает Йоаким Формо, специалист Ericsson User Experience Lab.:
«При выборе папки пользователь как будто приближается к ней, а нажатие на иконку заставляет в буквальном смысле нырнуть в нее с головой. И наоборот - нажатие кнопки home возвращает вас на один уровень выше. В структурном смысле перед нами все та же иерархически организованная система, но работа с ней стала гораздо более наглядной. Теперь папки не "открываются" - они увеличиваются или уменьшаются в размерах».
Click to viewКак нетривиально и ярко продемонстрировал в одном из своих текстов дизайнер Майкл Бьерут, визуальная культура в довольно большой своей части состоит из стиля, навязываемого модой и культуртрегерами. Именно поэтому плоский дизайн стремительно ринулся в мир на крыльях интерфейсов iOS7, Windows 8, Xbox и Play Station 4:
Плоский интерфейс операционной системы Windows 8
Экран Home пользовательского интерфейса PS4
Старый (объёмный) и новый (плоский) логотипы Google
Плоский интерфейс Google
Старый (объёмный) и новый (плоский) логотипы браузера Google Chrome
Новый плоский логотип YouTube