Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску

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

Определение и цель [ править ]

Эволюция логотипа Volkswagen
Логотип Volkswagen до 1995.svg
<1995
VW logo 2000.png
2000 г.
Логотип Volkswagen 2019.svg
2019 г.

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

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

История [ править ]

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

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

Виджеты с графическим интерфейсом пользователя, созданные в стиле Google Material Design

Android начал перенимать тенденции плоского дизайна с 4.0 «Ice Cream Sandwich» в 2011 году; Матиас Дуарте , вице - президент компании Google по дизайну, считает , что компания Apple «s IOS была слишком skeuomorphic , Windows Phone выглядел как„аэропорт уборная знаки“, и что оба интерфейс был слишком жестко стандартизирован с ограниченной гибкостью для дизайнеров. Новый интерфейс платформы «Holo» был разработан так, чтобы казаться более упрощенным, чем предыдущие версии Android, с неоново-синими акцентами, резкими краями и тенями для глубины. [9] [10] [11] [12]

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

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

Критика [ править ]

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

См. Также [ править ]

  • Минимализм
  • Скевоморфизм

Ссылки [ править ]

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

Внешние ссылки [ править ]

  • Почему 3D-логотипы перестали пользоваться популярностью в одночасье, - объясняет Чеддер . Чеддер. 5 марта 2019 г. - через YouTube.