iTrack. Корпоративный блог компании.

http://www.itrack.ru

Previous Entry Поделиться
В тренде - плоское и тонкое
itrackblog
В тренде — плоское и тонкое

За прошлые несколько лет мы наблюдали быстрые изменения в дизайне интерфейсов программного обеспечения от 3D и скевоморфизма до плоских форм и минимализма. Хотя эта тенденция стала почти повсеместной, давайте остановимся чтобы взглянуть на пройденный путь и посмотреть, какое влияние эта тенденция оказывает на дизайн интерфейсов в целом. Кроме того, я дам некоторые подсказки и обобщения для проектирования плоских интерфейсов.


01
Интерфейсы Windows Phone 8 и Apple’s iOS 7.


Что произошло?

Так как же получилось, что коллективное сознание перешло от любви ко всему текстурированному, выступающему и затененному к стремлению к плоским цветам и простому оформлению? Толчком послужило множество факторов, но некоторые стали ключевыми.

Информационная перегрузка

Мы живем в культуре, где принято постоянно находиться на связи, а поэтому мы имеем дело с безостановочным потоком информации, частью важной и релевантной, а по большей части — нет. Мы постоянно оцениваем входящую информацию, фильтруем и, конечно, сами создаем информационный поток, контент — все это со временем становится довольно утомительным. Кроме того, сегодня мы по большей части потребляем контент с устройств с маленькими экранами, чем усиливаем чувство перегрузки. Слишком легко оказаться задавленным таким потоком информации, поэтому упорядочивание пользовательского интерфейса (UI) может создать немного визуального «дзена».
02
Элементы Джекобоарда визуализированы таким образом, чтобы облегчить восприятие ключевых данных

«Золотая простота»

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

03
Красиво и минималистично: Погодное приложение Blue от Oak.

Содержание — снова в почете

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

Технологическая грамотность

После повсеместного распространения смартфонов разработчики стали меньше беспокоиться по поводу очевидности средств управления. Когда-то мы боялись, что пользователи могут пропустить кнопку, если она не торчит на экране, теперь мы готовы к более тонким взаимодействиям. Windows 8 и Chrome для Android даже поддерживают команды, которые запускаются при прикосновении и не имеют визуального индикатора.

04
Приборная панель Fitbit’s - яркая, смелая, и легко достижимая визуальная идентичность.

Влияние технологий

Большая часть программного обеспечения будет ограничена платформой, на которой оно установлено. Размеры экрана и плотность пикселей — ограничивающие факторы, которые накладывает «железо». Минималистическому интерфейсу соответствует очень ограниченная цветовая палитра, в которой каждый элемент должен «заиграть». Типографский масштаб и плотность шрифта по большей части и определяют эстетику и удобство использования плоского дизайна.
Если ваши устройства не справляются с такими нюансами, вы проиграли. В то время как размер экрана и плотность пикселей мобильных устройств продолжают увеличиваться, более миниатюрные и тонкие версии устройств могут быть представлены с большей четкостью. Конечно, поддержка @font-face также повысила внимание к минималистичному дизайну с акцентом на типографику.

05
Мониторинг продаж в реальном времени Wallmob: сохраняет данные с любых устройств, где установлен браузер

Отзывчивый дизайн

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

06
Невесомый: OnSite. (Расширенный вид)

Лучшие кейсы

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

Прежде чем вы начнете

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

Процесс

Довольно важно следовать определенному алгоритму, независимо от того какой стиль вы утвердили. Вот некоторые идеи, которые стоит иметь в виду, если вы стремитесь к простоте.
  • Проектируя минималистичный интерфейс, я часто ищу вдохновение в периоде до изобретения PC, когда дизайнеры и художники делали больше с меньшими ресурсами. Это - прекрасная возможность пересмотреть работы некоторых великих дизайнеров, таких как Йозеф Мюллер-Брокман и Вим Крувель. Я обращаюсь и к живописцам-миниалистам, таким как Эллсуорт Келли, архитекторам вроде Мис ван дер Роэ и промышленным дизайнерам таким как Дитер Рамс.

  • Полезно делать перерывы в процессе работы. Минималистичный дизайн — это нюансы. Ненадолго оторваться, чтобы позже вернуться со свежим взглядом часто более эффективно, чем работать не покладая рук.


  • Пошаговое сравнение версий тоже полезно. После перемещения линии вверх и вниз на 5 пикселей в течение 20 минут, я сохраню обе версии и сравню их; сразу становится понятно, какая лучше.

  • Поскольку относительный масштаб объектов играет решающую роль, протестируйте концепции проекта на всех устройствах, на которых предполагается последующая работа, чтобы убедиться, что все работает.

  • Во время работы спрашивайте себя: «Мне действительно это нужно?». Привязаться к опции, которую вы считаете интересной, довольно легко, но нужно всегда стараться сократить или упростить детали. Отказ от чего-то, на что вы потратили столько сил, всегда труден, но редактирование важно.


07
Global Closet: интерактивная игра разработана The Workshop для National Geographic Education.

Сетка

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

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


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


  • Экспериментируйте с более плотной сеткой, чем та, к работе с которой вы привыкли. Когда вы существенно уменьшаете визуальную палитру, вы можете обнаружить, что дизайн поддерживает гораздо более сложную структуру без ощущения беспорядочности. Постарайтесь увидеть, какую дополнительную информацию в можете передать через одно только расположение объектов.

08
Приложение Live School iPad app созданное Rossul Design.

Цвет


  • Понятно, что цвет — это всегда ключевой компонент визуального дизайна. С минималистичными интерфейсами его важность возрастает.

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

  • Устанавливая палитру, протестируйте, как отображаются выбранные вами оттенки по всему спектру. Они должны нормально выглядеть и в светлой, и в темной версии.

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


09
Ошеломляющая цветовая палитра TriplAgent.

Типографика


  • Когда дело доходит до сайтов ориентированных на контент и с плоским дизайном, типографика выходит на первый план.

  • Конечно, шрифты — ваш личный выбор, но san шрифты почти всегда выглядят чище.

  • Ищите семейство шрифтов с большим разнообразием размеров и стилей. Вы, конечно, не должны использовать их все, но широкий выбор поможет вам четче определить структуру. Обратите внимание, что определенные значения шрифтов в разном окружении смотрятся по-разному.

  • Для создания визуального порядка не бойтесь соединять шрифты абсолютно различные по размеру и значению. Попытайтесь соединить укрупненный ультратонкий шрифт для заголовков с мелким шрифтом среднего значения для основного текста.

  • Следите за четкостью в шрифтах. Звучит глупо, я знаю, но спрос с выбранных вами шрифтов будет высок, поэтому удостоверьтесь, что они выглядят четко в любом масштабе.


10
Чистая и четкая типографика Siteleaf.

Интерактив


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

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

  • Удобное расположение тоже помогает. Если вы используете тонкую стрелку для значка возврата, помещайте ее в левый верхний угол, где пользователи ожидают найти кнопку «назад».

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

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


11
Элементы оформления представлены в простой выкладке и с оптимальным контрастом: Taasky.

Заключение

Я не верю в непреложные правила в дизайне. Просто удивительно наблюдать за дизайнерами, вкладывающими усилия в создание ясных и простых пользовательских интерфейсов. Подразумевает ли плоский дизайн полное отсутствие теней и градиентов? Конечно, нет. Одна из самых интересных работ, виденных мной в последнее время, балансировала между плоскостью и объемностью, разумно представляя контент и сохраняя интуитивность взаимодействия.
В очень динамичном, информационно-насыщенном и полном различных «фишек» мире цифровых технологий, котором мы живем, всплеск интереса к минимализму в дизайне — это глоток свежего воздуха.
Это никоим образом не панацея во всех случаях (независимо от общей стилистики), но при вдумчивом и ответственном подходе многое дает в плане работы с диджитал.
Фото: Engadget
Автор: Николь Ли
16 апреля 2014 г.
Источник:
http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/

?

Log in