Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску
Календарь приложения в Windows 10 , показывая аспекты Fluent дизайна, такие как акрил, и более тонкие оконные границы.
«Домашний» экран, вдохновленный Fluent и Office Online , который можно увидеть в версиях Office 365 и Office 2019 для Windows .
Часть серии по
Windows 10
Windows 10 Logo.svg
Связанный

Свободный дизайн системы (кодовое название Project Neon ), [1] официально представлен в качестве Microsoft System Design Fluent , [2] является язык дизайна разработан в 2017 году по Microsoft . Fluent Design - это обновленная версия Microsoft Design Language 2 (широко известного как «Metro»), которая включает рекомендации по дизайну и взаимодействию, используемому в программном обеспечении, разработанном для всех устройств и платформ Windows 10 . Система основана на пяти ключевых компонентах: свет, глубина, движение, материал и масштаб. [3] Новый язык дизайна включает более заметное использование эффектов движения, глубины и полупрозрачности. [4]

Переход на Fluent - долгосрочный проект; аспекты дизайна начали появляться в Windows 10, начиная с «Fall Creators Update», выпущенного в октябре 2017 года, а также с выпущенным вместе с ним обновлением системного программного обеспечения Xbox One . [5] [6] [7] [8] Позже выяснилось, что он разработан совместно с Windows 10X , [9] в дополнение к будущему обновлению Windows 10 с аналогичным дизайном. [10]

По сравнению с Metro и Aero [ править ]

Ключевые принципы или «блоки» Fluent (свет, глубина, движение, материал и масштаб) отклоняются от плоской концепции, определенной Metro , и, сохраняя чистый внешний вид, представленный Metro, Fluent обновляет визуальные эффекты Aero , дизайна. подход, представленный в Windows Vista и Windows 7 , включая размытую полупрозрачность, параллакс-анимацию, падающую тень, эффекты выделения после указателя мыши или жестов ввода, а также «искусственные материалы», сброшенные Metro.

Текущие приложения Fluent [ править ]

Свет [ править ]

Показать выделение [ править ]

Цель света - привлечь внимание и осветить информацию. При наведении указателя мыши выделение «Показать» освещает ближайшие скрытые границы на объектах, таких как списки меню навигации гамбургера и кнопки. При выборе, например при нажатии или касании, быстро появляется белый круговой эффект подсветки. [11] Кроме того, в среде Windows Holographic есть закругленный белый указатель .

6 ноября 2017 года сотрудник Microsoft Дэвид Хаз заявил, что планы по применению выделения на панели задач существуют, но по состоянию на июль 2019 года этого не произошло. [12]

Показать фокус [ править ]

Фокусируемые элементы со светящейся рамкой через визуальный элемент фокусировки. [13]

Глубина [ править ]

Добавление глубины использует ось z и позволяет дифференцировать контент с помощью слоев. Глубина представлена ​​в виде падающих теней и наслоения глубины Z. [14] [15] Это особенно заметно в обновленном приложении Office в 2019 году.

Движение [ править ]

Движение устанавливает взаимосвязь между элементами пользовательского интерфейса и обеспечивает непрерывность взаимодействия. [16]

Добавить / удалить анимацию [ править ]

Список анимаций для вставки и удаления элементов из коллекции. [17]

Подключенные анимации [ править ]

Связанные анимации - это переходы элементов. Во время изменения содержимого элемент, кажется, продолжает летать по приложению. [18]

Переход контента [ править ]

Используется, когда изменяется только часть содержимого на странице. [19]

Дрель [ править ]

Drill используется при более глубокой навигации в приложении. Например, отображение дополнительной информации после выбора элемента. [20]

Fade [ править ]

Появление и исчезновение объектов, чтобы скрыть элементы из поля зрения. [21]

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

Параллакс перемещает объекты с разной скоростью. Фон движется медленнее, чем содержимое над ним. Например, список будет прокручиваться быстрее, чем фоновое изображение, создавая эффект глубины в дополнение к движению. [22]

Отзыв о прессе [ редактировать ]

Когда элемент нажимается, он на мгновение уходит на задний план, а затем возвращается в исходное положение. Примеры отзывов прессы включают в себя живые плитки меню «Пуск» , быстрые действия в Центре действий и кнопки адресной строки Microsoft Edge . [23]

Материал [ править ]

Акрил [ править ]

Новые значки с акриловыми материалами были созданы для программ Microsoft, начиная с приложений Office и Microsoft Edge на основе Chromium в 2018 и 2019 годах соответственно. [24] [25] Предварительные версии последних значков были замечены в видео «Знакомство с новыми значками для Office 365», [26] прежде, чем были обнаружены другие, когда была представлена ​​Windows 10X, [27] до того, как они были официально представлены на 12 декабря 2019 г. [28] Эти значки начали появляться в обновлениях Microsoft Store для этих приложений, начиная с Почты и Календаря . [29] [30]

Акриловый материал создает полупрозрачный размытый эффект с легким шумовым эффектом. Визуальную иерархию можно создать, используя разные степени непрозрачности. Например, в приложении основные поверхности содержимого часто непрозрачны (за исключением виджетов или легких приложений, таких как Калькулятор ), вторичная панель может содержать 80% фонового акрила, а третичная панель может содержать 60% фонового акрила. Фон Акрил размывает все объекты за активным акриловым материалом. Акрил в приложении размывает содержимое в приложении.

Акрил отключается в определенном окне, когда приложение больше не выбрано. Оба типа Acrylic отключены во всей системе, когда отключена прозрачность, когда включен режим экономии заряда батареи или на оборудовании низкого уровня. Фоновый акрил отключается, когда окно не выбрано, либо в Windows 10 Mobile , HoloLens или в режиме планшета. [31]

Масштаб [ править ]

Приложения масштабируются в зависимости от форм-фактора , размеров дисплея и от 0D до 3D . Элементы адаптируются к размеру экрана и доступны во многих измерениях. [32] [33] Сознательные элементы управления также классифицируются в рамках шкалы (например, полосы прокрутки и вводы, которые адаптируются к различным методам вызова) [34] [35]

Не определено [ править ]

  • Пространственный звук [36]

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

  • Материальный дизайн
  • Плоский дизайн
  • Windows Aero
  • метро

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

  1. ^ «Fluent Design - это новый современный пользовательский интерфейс Microsoft для Windows и не только» . Грань . 2017-05-11 . Проверено 11 мая 2017 .
  2. ^ «Разработчик Windows в Twitter» . Twitter . Проверено 11 мая 2017 .
  3. ^ "Свободный язык дизайна" . Microsoft . Проверено 12 мая 2017 .
  4. ^ «Новый внешний вид Windows, Neon, официально является« Microsoft Fluent Design System » » . Ars Technica . Дата обращения 11 мая 2017 .
  5. ^ «Microsoft демонстрирует изменения своего Fluent Design в Windows 10» . Грань . Проверено 29 октября 2017 .
  6. ^ «Microsoft Fluent Design System угрожает сделать Windows красивым» . Ars Technica . Проверено 29 октября 2017 .
  7. ^ «Новое крупное обновление Xbox One меняет панель управления с помощью Fluent Design» . Грань . Проверено 29 октября 2017 .
  8. ^ «Xbox One получает серьезное обновление сегодня, включая более быструю приборную панель» . Грань . Проверено 29 октября 2017 .
  9. ^ «Первый взгляд на новую операционную систему Microsoft Windows 10X для двух экранов» . Грань . 11 февраля 2020 . Проверено 19 апреля 2020 года .
  10. ^ Instagram . 19 марта 2020 г. https://www.instagram.com/p/B97VqkXg0iN/ . Проверено 19 апреля 2020 года . Отсутствует или пусто |title=( справка )
  11. ^ mijacobs. «Показать изюминку - разработчик приложений UWP» . docs.microsoft.com . Проверено 22 декабря 2017 .
  12. ^ «Нет выделения свободного дизайна в меню« Пуск »- Fall Creator's Update» . answers.microsoft.com . Проверено 26 декабря 2017 .
  13. ^ cphilippona. «Показать фокус - разработчик приложений UWP» . docs.microsoft.com . Проверено 30 марта 2018 .
  14. ^ «Microsoft демонстрирует 3D-функцию« Z-depth Layering »в своей системе Fluent Design» . Windows Central . Проверено 22 декабря 2017 .
  15. ^ «Microsoft Reveal Z-Depth Layering для устройств смешанной реальности Windows 10» . VRFocus . Проверено 22 декабря 2017 .
  16. ^ mijacobs. «Движение и анимация в приложениях UWP - разработчик приложений UWP» . docs.microsoft.com . Проверено 22 декабря 2017 .
  17. ^ mijacobs. «Движение и анимация в приложениях UWP - разработчик приложений UWP» . docs.microsoft.com . Проверено 30 марта 2018 .
  18. ^ mijacobs. «Подключенная анимация - разработчик приложений UWP» . docs.microsoft.com . Проверено 31 декабря 2017 .
  19. ^ mijacobs. «Движение и анимация в приложениях UWP - разработчик приложений UWP» . docs.microsoft.com . Проверено 30 марта 2018 .
  20. ^ Давидвкимбол. «Переходы страниц в приложениях WUP - приложения UWP» . docs.microsoft.com . Проверено 27 ноября 2019 .
  21. ^ mijacobs. «Движение и анимация в приложениях UWP - разработчик приложений UWP» . docs.microsoft.com . Проверено 30 марта 2018 .
  22. ^ mijacobs. «Как использовать элемент управления ParallaxView для добавления глубины и движения в ваше приложение. - Разработчик приложения UWP» . docs.microsoft.com . Проверено 22 декабря 2017 .
  23. ^ mijacobs. «Анимация щелчка указателя в приложениях UWP - разработчик приложений UWP» . docs.microsoft.com . Проверено 31 декабря 2017 .
  24. ^ «Переработка значков приложений Office для перехода в новый мир работы» . Средний . 29 ноября 2018 . Проверено 19 апреля 2020 года .
  25. ^ «Microsoft представляет новый логотип браузера Edge, который больше не похож на Internet Explorer» . Грань . 2 ноября 2019 . Проверено 19 апреля 2020 года .
  26. ^ «Встречайте новые значки для Office 365» . 29 ноября 2018 . Проверено 19 апреля 2020 года .
  27. ^ "#MicrosoftEvent Live" . 2 октября 2019 . Проверено 19 апреля 2020 года .
  28. ^ "Иконка Калейдоскоп" . Средний . 12 декабря 2019 . Проверено 19 апреля 2020 года .
  29. ^ «Иконические иконки: проектирование мира Windows» . Средний . 20 февраля 2020 года . Проверено 19 апреля 2020 года .
  30. ^ «Microsoft выпускает новые красочные значки Windows 10» . Грань . 20 февраля 2020 года . Проверено 19 апреля 2020 года .
  31. ^ mijacobs. «Акриловый материал - разработчик приложений UWP» . docs.microsoft.com . Проверено 22 декабря 2017 .
  32. ^ «Система свободного дизайна» . fluent.microsoft.com . Архивировано из оригинала на 2018-03-01 . Проверено 18 февраля 2018 .
  33. ^ Верма, Адарш (2017-05-12). «Что такое система Fluent Design? Как Microsoft создает самую красивую операционную систему?» . Fossbytes . Проверено 18 февраля 2018 .
  34. ^ задумчивый. «Элементы управления средством просмотра прокрутки - разработчик приложений UWP» . docs.microsoft.com . Проверено 22 декабря 2017 .
  35. ^ «Что нового в Microsoft Fluent Design System 'wave one' для Windows 10» . Windows Central . 2017-06-29 . Проверено 22 декабря 2017 .
  36. ^ «Пространственный звуковой дизайн» . developer.microsoft.com . Проверено 22 декабря 2017 .

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

  • Официальный веб-сайт
  • «Дизайн и код приложений UWP» . Microsoft.
  • Гусморино, Пол; Остойч, Бояна (8 мая 2017 г.). «Введение в свободный дизайн» . Канал 9 . MSDN.