75статья

Почти плоский дизайн

Опубликовал Александр Иваничкин, 3 июня 2013

Плоский дизайн – это одновременно яркий и сомнительный вариант в мире пользовательского интерфейса. Компания Microsoft была первой, кто ввел его в массы, и многие последовали ее примеру: LayerVault, The Next Web, и прочие.

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

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


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

Выход

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

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

Gmail (web + iOS), Google Maps (iOS), и Google+ (iOS) представляют собой наиболее яркие примеры того, что можно назвать «Почти плоским дизайном».

Градиент в «Почти плоском дизайне»

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

Тени в «Почти плоском дизайне»

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


В «Почти плоском дизайне» тени и градиент используются для улучшения юзабилити.

Другие примеры «Почти плоского дизайна»

Он используется не только в Google. Новый дизайн MySpace тоже следует этой тенденции благодаря кнопкам, которые кажутся плоскими, пока ты не наведешь на них, и не появится градиент, призывающий нажать. Letterpress, который, как многие утверждают, имеет плоский дизайн, использует тени, чтобы улучшить взаимодействия при создании слов. Даже Facebook, в котором практически не использовался градиент, с 2004 года начал использовать тени, чтобы отделить накладывающиеся или выпадающие окна от остальной страницы.

Наш опыт с «Почти плоским дизайном»

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

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

Это перевод статьи под названием “Almost Flat Design” от Matthew Moore. Перевели в компании UXDepot с одобрением автора Matthew Moore.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂

VK.init({apiId: 2745953, onlyWidgets: true}); VK.Widgets.Like(‘vk_like_6698’, {type: ‘button’, pageTitle: ‘Почти плоский дизайн’, pageUrl:’/almost-flat-design/’, verb: ‘0’}, 6698);

Все комментарии:

    Нет комментариев.


    Оставьте комментарий: