Fluent-Designsystem ⇐ Васина Википедия

[wiki_de]

 

'''Fluent Design System''' (кодовое название "'''Project Neon'''"),
Переход на Fluent — долгосрочный проект; Некоторые аспекты дизайна начали появляться в Microsoft Windows 10 | Windows 10 с «Fall Creators Update», выпущенным в октябре 2017 года, а также с обновлением системного программного обеспечения Xbox One, выпущенным вместе с ним.
== По сравнению с Метро и Аэро ==
Ключевые принципы или «блоки» Fluent (свет, глубина, движение, материал и масштаб) отходят от плоской концепции, которую определил Metro. Сохраняя чистый внешний вид Metro, Fluent обновляет внешний вид Aero — подхода к проектированию, представленного в Microsoft Windows Vista|Windows Vista и Windows 7. К ним относятся размытая прозрачность, анимированные шаблоны параллакса | параллакса движения, отбрасываемые тени, эффекты выделения, которые следуют за управлением мышью или жестами, а также «искусственные материалы», от которых Metro когда-то отказалась.
== Компоненты дизайна ==

=== Свет ===
Цель света — направить внимание и осветить информацию. Таким образом, свет устанавливает связь между пользовательским интерфейсом и курсором или указателем.
* '''Выделение при наведении:''' При наведении курсора «Показать выделение» подсвечивает ближайшие, скрытые края объектов, таких как значок гамбургер-меню | списки и кнопки меню навигации гамбургера. При выборе, например щелчке или касании, быстро появляется белый круговой световой эффект.
* '''Выделение фокуса:''' Фокусируемые элементы с рамкой, светящейся над визуальным элементом фокуса.
В WinUI 2.6 Microsoft удалила выделение при наведении курсора, чтобы соответствовать своим веб-предложениям и мобильным предложениям, в которых нет выделения.
=== Глубина ===
Глубина добавляется к содержимому путем наслоения по оси Z. Глубина представлена ​​тенями и слоями глубины Z.
* '''Наслоение:''' Наложение слоев делит приложение на основу, которая является «холстом», и содержимое, которое плавает над ним. Содержимое может отображаться в виде непрерывного интерфейса или в виде карты. * '''Высота:''' Высота — это разделение элементов интерфейса приложения с помощью теней. Примерами являются контекстное меню|контекстные меню, всплывающие окна или всплывающая подсказка|Подсказки.
=== Движение ===
Движение создает связь между элементами пользовательского интерфейса и обеспечивает непрерывность взаимодействия
* '''Добавить/удалить анимацию:''' Список анимаций для вставки и удаления элементов из коллекции. * '''Связанные анимации:''' Связанные анимации представляют собой переходы элементов. Во время изменения содержимого элемент пролетает через приложение. * '''Переход контента:''' Используется, когда изменяется только часть контента на странице. * '''Deep:''' Deepen используется при более глубокой навигации по приложению. Например, отображение дополнительной информации после выбора элемента. * '''Затухание:''' Затухание для отображения и скрытия элементов. * '''Параллакс:''' Параллакс — это когда объекты движутся с разной скоростью. Фон движется медленнее, чем содержимое над ним. Например, список прокручивается быстрее, чем фоновое изображение, создавая в дополнение к движению эффект глубины. * '''Обратная связь по давлению:''' При нажатии на элемент он ненадолго отходит на задний план, а затем возвращается в исходное положение. Примеры отзывов о печати включают живые плитки меню «Пуск», быстрые действия Центра действий и кнопки адресной строки Microsoft Edge.
===Материал ===
Материалы — это визуальные эффекты, применяемые к UX-интерфейсам. В Fluent Design есть два основных типа материалов: затемняющие и прозрачные. Скрывающие материалы, такие как акрил и слюда, образуют базовые слои под интерактивными элементами пользовательского интерфейса. Прозрачные материалы, такие как дым, используются для выделения иммерсивных поверхностей:
* '''Акрил:''' Акриловый материал создает полупрозрачный, размытый эффект с небольшим шумом. В то время как в Windows 10 на больших поверхностях (например, боковых панелях) использовался акрил, в основных поверхностях Windows 11 акрил был заменен слюдой. Вместо этого акрил используется на временных поверхностях, таких как контекстное меню|контекстные меню, всплывающие подсказки|подсказки или предложения поиска.
* '''Слюда:''' Слюда — это новый непрозрачный материал, представленный в Windows 11, который принимает цвет фонового изображения пользователя. * '''Дым:''' Дым появился в Windows 11. Это полупрозрачный черный фон, независимо от режима «Светлый» или «Темный», для создания иерархии между главным окном и всплывающим окном.
И Acrylic, и Mica будут отключены в определенном окне, когда приложение больше не будет выбрано. Кроме того, оба режима отключены в масштабе всей системы, когда отключена прозрачность, включен режим энергосбережения или на низкопроизводительном оборудовании. Фоновый акрил отключается, когда окно не выбрано или в режиме Microsoft Windows 10 Mobile|Windows 10 Mobile, Microsoft HoloLens|HoloLens или планшета.
=== Масштабирование ===
Приложения масштабируются в разных форм-факторах (компьютерные технологии)|форм-факторах, размерах дисплея|размерах дисплея и от 0D до 3D. Элементы адаптируются к размеру экрана и доступны в нескольких измерениях.
== Реализация ==
Рекомендации по Fluent Design являются кроссплатформенными и могут быть реализованы с помощью различных платформ.
Категория:Графический интерфейс

Подробнее: https://de.wikipedia.org/wiki/Fluent-Designsystem