stringtranslate.com

Плоский дизайн

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

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

Плоский дизайн — это стиль дизайна интерфейса, подчеркивающий минималистское использование простых элементов, типографики и плоских цветов. [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]

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

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

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

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

Критика

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

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

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

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