Содержание
За последние несколько лет мы увидели как дизайн интерфейсов программ и приложений резко сменился с трехмерного и скевоморфного на плоский и минималистичный. Несмотря на то, что эта тенденция стала практически повсеместной, давайте все же на секунду остановимся и посмотрим, как мы к этому пришли, и какое влияние это оказывает на дизайн интерфейса в целом. Кроме того, я расскажу вам о некоторых хитростях и принципах дизайна плоских интерфейсов.
Интерфейсы на Windows Phone 8 и Apple iOS 7
Что же произошло?
Так как же коллективное сознание перешло от любви к текстурированным скошенным объектам, отбрасывающих тень, к страсти к однотонным цветам и простым шрифтам? На такой переход повлияло много факторов, но некоторые из них особенно выделяются.
Перегрузка информацией
Будучи культурой, постоянно находящейся на связи, мы сталкиваемся с нескончаемым потоком информации, большая часть которой неважна и неактуальна. Мы постоянно оцениваем, фильтруем и, конечно, создаем контент, и все это довольно изнурительно. Кроме того, большая часть контента переместилась на устройства с маленькими экранами, тем самым усиливая это ощущение перегрузки. Перегрузка достигается очень легко, а потомусокращение количества мусора в пользовательском интерфейсе (UI) может создать большую визуальную гармонию.
Ничего лишнего: Визуализации Geckoboard разработаны таким образом, чтобы делать ключевые данные простыми для понимания и чтения.
Золотая простота
Согласно той же тенденции, большое количество успешных веб-приложений и сервисов предлагают высокоспециализированные инструменты, с очень ограниченным набором функций. Так как традиционно разработчики ПО стараются нагрузить свои продукты огромной кучей функций, чтобы оправдать высокие цены, этот переход к специализированным микро-приложениям говорит в пользу простоты перед большим количеством возможностей. Простые приложения подразумевают простые интерфейсы.
Красота и минимализм: Погодное приложение Blue от Oak
Контент – это главное
Как это обычно происходит, при появлении на рынке новых устройств и технологий мы восторгаемся их возможностями и тем, как улучшается интерактивность. После этого ажиотажа вокруг интерфейса обычно следует возвращение к фокусу на контент. Использование информационной среды, будь то текст, аудио или видео, вероятно, это то, чем мы в основном занимаемся на наших устройствах. Именно для этого сценария использования мы хотим, чтобы интерфейс нам не мешал.
Техническая грамотность
После того, как использование смартфонов и планшетов довольно быстро ворвалось в жизнь многих пользователей, мы стали реже думать об очевидности элементов управления. Если раньше мы боялись, что пользователь может не заметить кнопку, если она не выскочит поверх экрана, сегодня мы более склонны изучать более утонченные виды взаимодействия. Windows 8 и Chrome для Android сегодня даже поддерживают жестовые команды, которые появляются на экране без визуальных индикаторов.
Панель инструментов Fitbit – это яркий и простой фирменный стиль
Влияние технологий
Большинство программного обеспечения ограничено платформой, на которой оно запущено. Размеры экрана и плотность пикселей — ограничивающие факторы оборудования. Минималистичный интерфейс требует очень ограниченной палитры дизайна. Это означает, что каждый элемент должен «петь». Масштаб текста и насыщенность шрифта по большей части определяют как эстетику, так и удобство использования плоского дизайна.
Если ваши целевые устройства не могут работать с таким уровнем деталей, вам не повезло. Так как на мобильных устройствах продолжают увеличиваться размеры экранов и плотность пикселей, появляется возможность более точно отображать тонкий и мелкий шрифт. Конечно, поддержка @font-face также существенно усилила привлекательность ориентированного на текст минималистичного дизайна.
Мониторинг онлайн-продаж при помощи Wallmob: следите за показателями с любого устройства, имеющего браузер
Отзывчивый дизайн
С возникновением устройств с различными размерами экранов, пользовательским интерфейсам пришлось стать более гибкими, в результате чего возникло такое движение, как адаптивный дизайн. Такой дизайн не взывает к какой-либо определенной эстетике. Так как отзывчивый дизайн не требует какой-либо определённой эстетики, можно утверждать, что сделать плоский дизайн адаптивным намного проще, чем другие стили. Еще одним преимуществом минималистичного дизайна стало сокращение объема страницы и времени загрузки.
Уместно и невесомо: OnSite
Практические рекомендации
Ладно, хватит теории. Давайте рассмотрим несколько практических примеров. Создать эффективный минималистичный дизайн удивительно сложно. Отметая привычные приемы дизайна интерфейсов (тени, скруглённые углы, текстуры и прочее), в скором времени начинаешь понимать насколько важными становятся оставшиеся элементы. Несмотря на то, что приведенные ниже советы, в основном, универсальны, они особенно актуальны в отношении плоских интерфейсов.
Прежде чем вы начнете
Как и в случае с любым другим проектом, первый шаг состоит в необходимости убедиться, что выбранный вами стиль имеет смысл. Прежде чем углубляться в плоский дизайн, убедитесь, что он соответствует восприимчивости вашей целевой аудитории, платформы, типу устройств и приложения. Следование тенденции не имеет смысла, если для вашего проекта это решение не подходит.
Процесс
Соблюдение процесса имеет большое значение вне зависимости от того, какой стиль вы используете. Вот несколько моментов, о которых нужно помнить при создании простого дизайна.
- Создавая минималистичный интерфейс, я обычно ищу вдохновение в тех временах, когда компьютеров еще не было и дизайнеры создавали больше, имея меньше. Это отличная возможность снова вспомнить о таких великих людях в дизайне как Джозеф Мюллер-Брокман и Вим Кроуэл. Я также просматриваю картины таких художников-минималистов, как Элсворт Келли, архитекторов как Мис ван дер Рое и промышленных дизайнеров как Дитер Рамс.
- Также иногда полезно отдохнуть от работы. Плоский и минималистичный дизайн состоит из деталей. Поэтому сделать перерыв и вернуться позже со свежим взглядом часто дает больший эффект, чем работа днями напролет.
- Полезно параллельно сравнивать версии. Когда я на протяжении 20 минут двигаю строку текста вверх и вниз на 5 пикселей, я сохраняю две версии и сравниваю их; оптимальный вариант находится довольно быстро.
- Ввиду того, что относительный масштаб объектов играет довольно важную роль, лучше заранее проверить свои идеи дизайна на нескольких целевых устройствах, чтобы убедиться в правильности их работы.
- В процессе работы постоянно спрашивайте себя «Это действительно нужно?». Зациклиться на элементе, который кажется вам удачным, довольно легко, однако нужно всегда пересматривать элементы в поисках того, что можно урезать или упростить. Выбросить что-то, над чем вы довольно долго работали, всегда сложно, но, иногда, нужно.
Global Closet: интерактивная игра, разработанная для National Geographic Education компанией The Workshop
Сетка
Сетка играет в дизайне интерфейса очень важную роль, и случай с плоским дизайном не исключение. Когда вы будете пытаться все упорядочить и сделать интерфейс интуитивным для проекта с ограниченным набором визуальных элементов, сетка вам очень пригодится.
- Сетка создает нечто большее, чем просто визуальный порядок. Её можно использовать для определения расположения контента и функциональных групп. Чтобы сгруппировать набор объектов не всегда нужно использовать линии и рамки. Простое выравнивание и размещение рядом могут помочь пользователю понять структуру интерфейса.
- Попытайтесь разбить сетку при помощи элементов с определенным значением, чтобы действительно привлечь внимание пользователя. Без лишних трюков с 3D основные принципы макета, такие как масштаб и размещение, становятся оптимальными элементами для создания визуальной иерархии.
- Поэкспериментируйте с более плотными сетками, чем те, с которыми вы привыкли работать. Если сильно уменьшить визуальную палитру, можно обнаружить, что дизайн поддерживает более сложную структуру без ощущения захламленности. Посмотрите, какую дополнительную информацию можно добавить только благодаря размещению.
Приложение Live School для iPad компании Rossul Design
Цвет
Очевидно, цвет всегда является ключевой составляющей визуального дизайна. В случае с минималистичными интерфейсами он играет даже большую роль.
- Используйте более обширную палитру. Если вы похожи на меня, вы поймете, что ограниченная палитра обычно приводит к созданию более функционального интерфейса. Очень легко сделать пеструю радугу. Здесь у вас есть возможность действительно показать себя; имея меньше элементов, над которыми нужно работать, вы можете смело расширить палитру.
- Настраивая палитру, протестируйте выбранные оттенки на широком спектре значений, чтобы проверить, как они себя поведут в более светлых и темных версиях.
- Наверняка вам захочется поэкспериментировать с наложением тонов и пустыми пространствами. Экспериментируйте со своей палитрой заранее, чтобы убедиться, что у вас достаточно вариантов как для утонченных, так и для высококонтрастных элементов.
В визуальном дизайне TriplAgent используется впечатляющая палитра цветов
Текст
Когда речь идет о сайтах с плоским дизайном, ориентированных на контент, текст становится одним из наиболее важных факторов.
- Шрифт без засечек всегда выглядит чище, чем с засечками, хотя тот и читается лучше.
- Найдите набор шрифтов с большим выбором насыщенности и стилей. Конечно, вы не обязаны использовать все, но обширный выбор поможет вам более четко обозначить иерархию, и, возможно, вы обнаружите, что некоторые виды насыщенности лучше выделяются в различных условиях.
- Не бойтесь сочетать шрифты с сильно отличающимся размером и насыщенностью для создания визуальной структуры. Пробуйте комбинировать огромные шрифты с очень тонкими буквами в заголовках и мелкие шрифты со средними буквами в теле текста.
- Следите за удобочитаемостью шрифтов. Я знаю, это может звучать глупо, но вы будете стараться выжать по максимуму из выбранных шрифтов, поэтому убедитесь, что они читабельны при любом масштабе.
Четкий и удобочитаемый текст на Siteleaf
Взаимодействие
В плоском интерфейсе довольно сложно показать, что элемент активен. Вот несколько моих способов:
- Контраст – это ключ. Если большая часть макета в белом цвете, тогда интерактивным элементам можно придать больше цвета. Если дизайн, в основном, ориентирован на текст, тогда можно использовать простые иллюстрации. Если заголовки большие и все в нижнем регистре, ссылки можно сделать маленькими и в верхнем регистре. Ну, вы поняли.
- Также помогает традиционное расположение. Если вы решили использовать стрелку возврата, поместите её в верхнем левом углу, где пользователи привыкли её видеть.
- Если вы размещаете на странице много функций, нет смысла делать каждый интерактивный элемент в виде кнопки. Интерфейс должен быть как можно более интуитивным. Однако в случае, если взаимодействие получается сложным и неожиданным, сделайте все проще, чтобы было меньше ошибок.
- В плоском дизайне довольно проблематично создавать выпадающие меню, модальные и вылетающие окна и прочие наслаивающиеся элементы. Сделайте больше контраст, усильте границы или сделайте подсветку, чтобы визуально разделить уровни взаимодействия.
Простой макет и оптимальный контраст элементов дизайна: Taasky
Закругляемся
Я не верю в сложные и быстрые правила в дизайне. Видеть дизайнеров, потративших много сил на создание невероятно чистых и простых пользовательских интерфейсов, действительно великолепно. Неужели плоский дизайн обязательно значит полный отказ от градиента или теней? Конечно же, нет. Фактически, некоторые из наиболее интригующих работ, которые я видел, балансировали между плоскостью и объёмом, разумно представляя контент, при этом сохраняя интуитивность взаимодействия.
В этом очень взаимосвязанном, богатом информацией и напичканном функциями цифровом мире, в котором мы живем, повсеместное возрождение минималистичного дизайна стало свежим веянием. Оно ни в коем случае не является правильным решением на все случаи (ни один стиль не является таковым), но если использовать его с умом и должным образом, он помогает создать удобный и комфортный опыт цифрового взаимодействия.
Это перевод статьи под названием “Flat And Thin Are In” от Adrian Taylor.
