Плоский дизайн - Flat design

Плоский дизайн это минималист язык дизайна или же стиль дизайна обычно используется в графический пользовательский интерфейс (GUI) (например, веб-приложения и мобильные приложения ), а также в графических материалах, таких как плакаты, рисунки, путеводители и издательская продукция.

Определение и цель

Фольксваген эволюция логотипа
Логотип Volkswagen до 1995.svg
<1995
VW logo 2000.png
2000
Логотип Volkswagen 2019.svg
2019

Плоский дизайн - это стиль дизайна интерфейса, в котором подчеркивается минималистичное использование простых элементов, типографики и плоских цветов.[1]

Дизайнеры могут предпочесть плоский дизайн, потому что он позволяет сделать дизайн интерфейса более рациональным и эффективным. Легче быстро передать информацию, оставаясь при этом визуально привлекательной и доступной.[2][3] Кроме того, это упрощает разработку интерфейса, который отзывчивый для изменения размера браузера на разных устройствах. Благодаря минимальному количеству элементов дизайна веб-сайты могут загружаться быстрее и легко изменять размер, при этом сохраняя четкость изображения на экранах с высоким разрешением.[2] В качестве дизайнерского подхода его часто противопоставляют скевоморфизм[4] и богатый дизайн,[2] хотя плоский дизайн может использовать скевоморфы так же, как и реалистично разработанный пользовательский интерфейс.[5]

История

На плоский дизайн в первую очередь влияют Международный типографский стиль (также известен как Швейцарский стиль), Текстовый интерфейс пользователя, Модернизм, и стили, возникающие из Баухаус.[2][6][7][8] Международный типографский стиль часто считается наиболее существенным влиянием на плоский дизайн, а его появление и популяризация в 1950-х и 1960-х годах рассматривается как отправная точка плоского дизайна, хотя в течение некоторого времени после этого он не появится в цифровом мире. .[9]

В 2002, Microsoft вышел Windows Media Center, а в 2006 г. Zune MP3-плеер, оба из которых содержат элементы плоского дизайна. Дизайн Zune был чистым и простым, с упором на крупную строчную типографику, логотипы в стиле силуэтов и монохромные цвета шрифтов.[9] Microsoft продолжила этот стиль дизайна в выпуске 2010 г. Windows Phone 7, который основан на плоских элементах дизайна, представленных в Zune и оформленных как "Язык дизайна метро ». В дизайне преобладали крупные и яркие формы в сочетании с без засечек типография из Семейство шрифтов Segoe, плоские изображения и меню с рисунком в виде сетки. Впоследствии Metro была принята во все линейки программного обеспечения Microsoft, включая Windows 8 Операционная система ПК.[2]

Виджеты GUI разработан в Google Материальный дизайн стиль

Android начали применять тенденции плоского дизайна с 4.0 «Сэндвич с мороженым» в 2011; Матиас Дуарте, Вице-президент Google по дизайну, считает, что яблоко с iOS был слишком скевоморфный Windows Phone выглядела как «вывеска в туалете аэропорта», и оба интерфейса были слишком жестко стандартизованы с ограниченной гибкостью для дизайнеров. Новый интерфейс платформы Holo был разработан так, чтобы казаться более упрощенным, чем предыдущие версии Android, с неоново-синими акцентами, резкими краями и тенями для глубины.[10][11][12][13]

В 2013 году Apple представила IOS 7, который перешел на плоский дизайн пользовательского интерфейса с использованием более ярких цветов, типографики, а также размытых полупрозрачных наложений.[14][15][16] В следующем году, Mac OS X Йосемити представила пользовательский интерфейс в стиле iOS 7 для Apple Mac OS X Операционная система.[17] Google начал внедрять собственный язык плоского дизайна, известный как "Материальный дизайн "для Android (начиная с Android Lollipop ) и других его платформ, основанных на индексная карточка -подобные листы и использование теней для повышения глубины и иерархии, а также плавной анимации и переходов.[18][19][20][21]

В 2017 году Microsoft представила Система свободного дизайна, новый плоский пользовательский интерфейс. Этот новый интерфейс отличается от своего предшественника, Metro, за счет использования глубины,[22] интерфейс Обратная связь, и новый эффект прозрачности, названный «Акрил».[кем? ]

Критика

Плоский дизайн критиковали за то, что он делал пользовательские интерфейсы не интуитивно понятными и менее удобными. Если сделать все элементы дизайна (меню, кнопки, ссылки и т. Д.) Плоскими, то определить, какую функцию выполняет элемент, может стать труднее, например, определить, является ли элемент кнопкой или индикатором.[23] Исследования показали, что плоский дизайн более популярен среди молодежи, чем пожилых людей. Исследования также показали, что, хотя молодые люди быстрее ориентируются в плоском дизайне, у них также возникают проблемы с пониманием пользовательского интерфейса.[24] В 2013 Якоб Нильсен, эксперт в области дизайна и удобства использования пользовательского интерфейса, назвал плоский дизайн «угрозой удобству использования планшета». Нильсен также предложил альтернативу, а именно золотую середину между скевоморфизм и плоский дизайн.[25] Группа Nielsen провела исследование в 2017 году, которое показало, что использование интерфейсов с плоским дизайном в среднем на 22% медленнее.[26]

Смотрите также

Рекомендации

  1. ^ Кэрри Казинс (28 мая 2013 г.). «Принципы плоского дизайна». designmodo.com.
  2. ^ а б c d е Тернер, Эмбер Ли (19 марта 2014 г.). «История плоского дизайна: как эффективность и минимализм превратили цифровой мир в плоский». Следующая Сеть. Получено 11 апреля, 2014.
  3. ^ Клам, Люк (13 мая 2013 г.). «Взгляд на плоский дизайн и его важность». Журнал UX. Получено 11 апреля, 2014.
  4. ^ Яир Гринберг (11 сентября 2013 г.). «iOS 7, Windows 8 и плоский дизайн: в защиту скевоморфизма». VentureBeat. Получено 13 апреля, 2014.
  5. ^ Беслич, Даниел (9 июня 2018 г.). «Скевоморфный дизайн мертв: миф или реальность?». Коллектив UX. Получено 22 июля, 2020.
  6. ^ Диого Террор (17 июля 2009 г.). «Уроки швейцарского графического дизайна». Разрушающий журнал. Получено 28 марта, 2014.
  7. ^ «Краткая история плоского дизайна». Технические самураи. 31 июля 2013 г.
  8. ^ Ксавье Бертельс (5 марта 2014 г.). «История плоского дизайна». Ксавье Бертельс. Получено 23 декабря, 2014.
  9. ^ а б Таймур Асгар (9 июля 2014 г.). «Истинная история плоского дизайна». Веб-дизайн Ai.
  10. ^ «Эксклюзив: Матиас Дуарте о философии Android и подробный обзор Ice Cream Sandwich». Грани. Vox Media. Архивировано из оригинал 12 февраля 2012 г.. Получено 28 ноября, 2011.
  11. ^ Амадео, Рон (16 июня 2014 г.). «История Android: бесконечные версии мобильной ОС Google». Ars Technica. Condé Nast. Получено 6 июля, 2014.
  12. ^ "Google требует по умолчанию тему Holo на устройствах Android 4.0 для доступа к Android Market". Грани. Получено 25 июля, 2014.
  13. ^ «Выпущен SDK Android 4.0 Ice Cream Sandwich с новыми функциями для разработчиков». Грани. Получено 25 июля, 2014.
  14. ^ Зайферт, Дан (10 июня 2013 г.). «Apple анонсирует iOS 7,« самое большое изменение »с момента появления iPhone, которое выйдет этой осенью». Грани. Получено 6 апреля, 2020.
  15. ^ Павлус, Джон (10 июня 2013 г.). «Почему Джони Айв сглаживает iOS 7». Быстрая Компания. Получено 6 апреля, 2020.
  16. ^ Суппурис, Аарон (11 июня 2013 г.). «Отслеживание влияния iOS 7: Apple делает ремиксы почти для всех в отрасли». Грани. Получено 6 апреля, 2020.
  17. ^ «OS X Yosemite, представленная на WWDC, отличается большим обновлением пользовательского интерфейса». Ars Technica. В архиве из оригинала 3 июня 2014 г.. Получено 3 июня, 2014.
  18. ^ «Новый пользовательский интерфейс Google« Материальный дизайн »появится в Android, Chrome OS и в Интернете». Engadget. Получено 26 июня, 2014.
  19. ^ "Google раскрывает подробности об Android L в Google IO". Анандтех. Получено 26 июня, 2014.
  20. ^ «Новый улучшенный Android от Google предоставит единый язык дизайна». Co.Design. Получено 26 июня, 2014.
  21. ^ «Следующий большой редизайн Android от Google состоится осенью». Грани. Vox Media. Получено 26 июня, 2014.
  22. ^ «Microsoft демонстрирует 3D-функцию« Z-depth Layering »в своей системе Fluent Design». Windows Central. Получено 22 декабря, 2017.
  23. ^ «Почему тренд плоского дизайна вредит юзабилити». Дизайн Vandelay. 7 апреля 2015 г.. Получено 6 июля, 2017.
  24. ^ «Проблема плоского дизайна, по мнению эксперта по UX». Co.Design. 23 марта 2016 г.. Получено 6 июля, 2017.
  25. ^ «Удобство использования планшета: результаты исследования пользователей». www.nngroup.com. Получено 6 июля, 2017.
  26. ^ «Плоские элементы пользовательского интерфейса привлекают меньше внимания и вызывают неопределенность». www.nngroup.com. Получено 8 мая, 2018.

внешняя ссылка