- PVSM.RU - https://www.pvsm.ru -
За последние несколько лет мы стали свидетелями быстрого перехода от 3-D и скевоморфизма к плоским формам и минимализму в сферах разработки программного обеспечения и дизайна интерфейсов приложений. Хотя эта тенденция стала практически повсеместной, давайте немного задумаемся о том, как мы пришли к ней и какое влияние она оказывает на дизайн интерфейсов в целом. Кроме того, я поделюсь некоторыми советами и соображения по созданию плоских интерфейсов.
Интерфейсы на Windows Phone 8 и Apple ios 7
Итак, как же коллективное сознание перешло от любви к текстурам, объему и теням к плоским цветам и простой верстке? Этот переход был вызван многими факторами, но вот самые примечательные из них.
Как люди, которые постоянно находятся на связи, мы имеем дело с бесконечным потоком информации, некоторая важна и актуальна, остальная — нет. Мы постоянно оцениваем, фильтруем и, конечно, создаем контент, но все это становится довольно утомительным. Кроме того, большая часть восприятия контента сейчас проходит через устройства с небольшими экранами, что усугубляет это ощущение перегрузки. Оно появляется слишком легко, и устранение ненужного в пользовательском интерфейсе (UI) может создать небольшой визуальный дзэн.
Нет ненужным вещам: визуализации Geckoboard [1] разработаны так, чтобы сделать ключевые данные легко заметными с первого взгляда.
Придерживаясь аналогичной тенденции, множество прорывных веб-приложений и услуг предлагают узкоспециализированные инструменты с очень ограниченным набором функций. Пока традиционные разработчики программного обеспечения, как правило, пытаются запихнуть в свою продукцию множество функций, чтобы оправдать высокие цены, этот сдвиг в сторону специализированных микро-приложений увеличивает ценность простоты работы, а не количества функций. Более простые приложения имеют простые интерфейсы.
Красивое и минималистичное приложение для погоды Blue [2] от Oak.
Как это часто бывает при выходе новых устройств и технологий на рынок, нас буквально очаровывает то, что они могут сделать, и то, как мы можем улучшить интерактивность. Этот безумие обычно сопровождается возвращением к упору на контент. Потребление медиа-контента, будь то текст, аудио или видео, является, вероятно, основным нашим занятием на любых устройствах, и поэтому мы просто хотим, чтобы интерфейс не мешал нам.
Когда смартфоны и планшеты быстро стали популярны у любых пользователей, забота об очевидности элементов управления снизилась. Когда-то мы боялись, что пользователи могут пропустить кнопку, если она не выпрыгнет на середину экрана, но теперь мы готовы изучить более тонкие аспекты взаимодействия. Windows 8 и Chrome для Android даже поддерживают сенсорные команды без визуального индикатора, которые включают экран.
Приборная панель Fitbit [3]представлена ярким, смелым и понятным визуальным образом.
Большая часть программного обеспечения ограничена платформой, на которой оно работает. Размеры экрана и плотность пикселей ограничивают возможности оборудования. Минималистичный интерфейс требует очень ограниченной палитры цветов, поэтому каждый элемент должен бросаться в глаза. Масштаб при верстке и вес шрифта во многом будут определять эстетику и юзабилити плоского дизайна.
Если ваши целевые устройства не могут поддерживать таких нюансов, вам не повезло. Так как размер экрана и плотность пикселей на мобильных устройствах продолжают расти, становится возможным четко отображать все более тонкие шрифты. Конечно, поддержка @font-face [4] также увеличила привлекательность минималистичной верстки.
Мониторинг продаж в режиме реального времени от Wallmob [5]: отслеживает данные с любого устройства, на котором установлен браузер.
С распространением сопряженных устройств различных размеров интерфейсы пришлось сделать более гибким, на что отреагировал адаптивный дизайн. Хотя он и не самый красивый с эстетической точки зрения, можно возразить, что плоские интерфейсы намного легче взаимодействуют с ним, чем многие другие. Другим преимуществом минималистичного дизайна является снижение веса страницы и времени загрузки.
Конкретный и простой: onsite [6] (большой размер [7]).
Ладно, хватит теории. Давайте поговорим о практике. Создать эффективный минималистичный дизайн на удивление непросто. Когда вы уберете обычные приемы пользовательского интерфейса (тени, скосы, текстуры и т.п.), вы быстро поймете, как важны становятся немногие оставшиеся элементы. Хотя следующие советы в основном универсальны, они особенно важны для плоских интерфейсов.
Как и в любом проекте, сначала нужно убедиться, что выбранный вами стиль имеет смысл. Перед погружением в плоский дизайн убедитесь, что он подходит к восприимчивости вашей целевой аудитории и целевой платформе, устройствам и типу приложения. Бессмысленно следовать за трендом, если он не подходит для вашего проекта.
Следование процессу очень важно, независимо от того, какой стиль вы используете. Вот некоторые идеи, которые следует иметь в виду при стремлении к простоте.
Global Closet [8]: интерактивная игра для National Geographic Education от The Workshop [9].
Сетка важна в любом виде дизайна интерфейсов, и минималистичный дизайн не исключение. Если вы пытаетесь навести порядок и сделать юзабилити интуитивным с помощью ограниченного набора визуальных элементов, сетка поможет вам.
Приложение Live School [10] для ipad от Rossul Design.
Очевидно, что цвет является ключевым компонентом визуального дизайна. В минимальных интерфейсах он еще более важен.
Визуальный дизайн triplagent [11] использует потрясающую цветовую палитру.
Типографика выходит на первое место, когда дело доходит до плоских сайтов с контентом.
Чистая и разборчивая верстка на Siteleaf [12].
В плоском пользовательском интерфейсе бывает сложно показать, что элемент интеркативен. Вот несколько методов, которые использую я.
Элементы дизайна в простом макете и с оптимальным контрастом: Taasky [13].
Я не верю в жесткие правила дизайна. И мне нравится, что дизайнеры так сильно пытаются создавать чистые и простые интерфейсы. Исключает ли использование плоского дизайна градиенты и тени? Конечно, нет. На самом деле, некоторые из самых интересных работ, которые я видел в последнее время, балансируют между плоским и объемным дизайном, разумно представляя контент и сохраняя взаимодействие интуитивным.
Мы живем в тесном, информационно богатом и многофункциональном цифровом мире, в котором все сильнее распространяется минималистичный дизайн. Нельзя сказать, что он подходит для всего (никакой стиль не подходит), но если его использовать вдумчиво и к месту, он принесет удобный и приятный опыт работы с цифровыми технологиями.
Примеры хороших плоских интерфейсов:
by Victor Erixon [14]
by Jakub Antalík [15]
by Tiberiu Neamu [16]
Автор: Tan4ikWeb
Источник [17]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/49859
Ссылки в тексте:
[1] Geckoboard: http://www.geckoboard.com/
[2] Blue: http://partlyblue.com
[3] Fitbit: http://www.odopod.com/work/fitbit
[4] @font-face: http://www.font-face.com/
[5] Wallmob: https://www.wallmob.com/
[6] onsite: http://onsite.io
[7] большой размер : http://media.smashingmagazine.com/wp-content/uploads/2013/09/onsiteio_mini.jpg
[8] Global Closet: http://globalcloset.education.nationalgeographic.com
[9] The Workshop: http://www.theworkshop.co.uk
[10] Live School : http://www.rossul.com/portfolio/liveschool-ipad-app
[11] triplagent: http://www.triplagent.com
[12] Siteleaf: http://www.siteleaf.com
[13] Taasky: http://taasky.com
[14] by Victor Erixon: http://dribbble.com/shots/1149909-1-Discover-Backpacker/attachments/148605
[15] by Jakub Antalík: http://dribbble.com/shots/1021224-Profile/attachments/122396
[16] by Tiberiu Neamu: http://dribbble.com/shots/1262636-To-Do-Dashboard/attachments/172917
[17] Источник: http://habrahabr.ru/post/204594/
Нажмите здесь для печати.