Fluent Design System

редактировать
Приложение Calendar в Windows 10, демонстрирующее аспекты Fluent Design, такие как акрил и более тонкие границы окон. Fluent и Office Online «Домашний» экраны, которые можно увидеть в версиях Windows Office 365 и Office 2019.

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

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

Содержание
  • 1 По сравнению с Metro и Aero
  • 2 Текущее приложения Fluent
    • 2.1 Light
      • 2.1.1 Выявить выделение
      • 2.1.2 Показать фокус
    • 2.2 Глубина
    • 2.3 Движение
      • 2.3.1 Добавить / удалить анимацию
      • 2.3.2 Подключенные анимации
      • 2.3.3 Переход содержимого
      • 2.3.4 Drill
      • 2.3.5 Fade
      • 2.3.6 Parallax
      • 2.3.7 Press Feedback
    • 2.4 Материал
      • 2.4.1 Акрил
    • 2,5 Масштаб
    • 2,6 Не определено
  • 3 См. Также
  • 4 Ссылки
  • 5 Внешние ссылки
По сравнению с Metro и Aero

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

Текущие применения Fluent

Light

Выявить выделение

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

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

Показать фокус

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

Глубина

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

Движение

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

Добавление / удаление анимации

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

Подключенные анимации

Подключенные анимации - это переходы элементов. Во время изменения содержимого элемент кажется продолжающим перемещаться по приложению.

Переход содержимого

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

Drill

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

Затухание

Постепенное появление и затухание для добавления и удаления элементов из поля зрения.

Параллакс

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

Обратная связь по нажатию

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

Материал

Акрил

Новые значки с акриловыми материалами были созданы для программ Microsoft, начиная с приложений Office и Chromium - на базе Microsoft Edge в 2018 и 2019 годах соответственно. Предварительные версии окончательных значков были замечены в видео «Знакомство с новыми значками для Office 365» до того, как было замечено больше, когда была представлена ​​Windows 10X, до того, как они были официально представлены 12 декабря 2019 г. Эти значки начали появляться через Microsoft Store обновляет эти приложения, начиная с Mail и Calendar.

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

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

Масштаб

Масштаб приложений в различных форм-факторах , размерах дисплея и от 0D до 3D. Элементы адаптируются к размеру экрана и доступны во многих измерениях. Сознательные элементы управления также классифицируются в рамках Scale (например, полосы прокрутки и вводы, которые адаптируются к различным методам вызова)

Неопределенный

  • Пространственный звук
См. Также
Ссылки
Внешние ссылки
Последняя правка сделана 2021-05-20 09:29:20
Содержание доступно по лицензии CC BY-SA 3.0 (если не указано иное).
Обратная связь: support@alphapedia.ru
Соглашение
О проекте