Система свободного дизайна - Fluent Design System
 Календарь приложения в Windows 10 , показывая аспекты Fluent дизайна, такие как акрил, и более тонкие оконные границы.
| |||||||||
| Другие названия | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Оригинальный автор (ы) | Microsoft | ||||||||
| Разработчики) | Microsoft | ||||||||
| Первый выпуск | 2017 | ||||||||
| Стабильный выпуск (ы) [±] | |||||||||
| |||||||||
| Предварительный выпуск (ы) [±] | |||||||||
| |||||||||
| Репозиторий | |||||||||
| Написано в | Objective-C , C ++ , C # , TypeScript , Kotlin , Swift , JavaScript. | ||||||||
| Платформа | Android , iOS , MacOS , Windows | ||||||||
| Предшественник | |||||||||
| Тип | Программное обеспечение языка дизайна | ||||||||
| Лицензия | Лицензия MIT | ||||||||
| Веб-сайт | разработчик |
||||||||
| Часть серии по |
| Windows 10 |
|---|
 |
| Связанный |
Система Fluent Design (под кодовым названием Project Neon ), официально представленная как Microsoft Fluent Design System , - это язык дизайна, разработанный Microsoft в 2017 году . Fluent Design - это переработанная версия Microsoft Design Language (широко известного как «Metro»), которая включает рекомендации по дизайну и взаимодействию, используемому в программном обеспечении, разработанном для всех устройств и платформ Windows 10 . Система основана на пяти ключевых компонентах: свет, глубина, движение, материал и масштаб. Новый язык дизайна включает более заметное использование эффектов движения, глубины и полупрозрачности.
Переход на Fluent - долгосрочный проект; аспекты дизайна начали появляться в Windows 10, начиная с «Fall Creators Update», выпущенного в октябре 2017 года, а также с выпущенным вместе с ним обновлением системного программного обеспечения Xbox One . Позже выяснилось, что он разработан совместно с Windows 10X , в дополнение к грядущему обновлению Windows 11 с аналогичным дизайном.
По сравнению с Metro и Aero
Ключевые принципы или «блоки» Fluent (свет, глубина, движение, материал и масштаб) отклоняются от плоской концепции, определенной Metro , и, сохраняя чистый внешний вид, представленный Metro, Fluent обновляет визуальные эффекты Aero , дизайна. подход, представленный в Windows Vista и Windows 7 , включая размытую полупрозрачность, параллакс-анимированные узоры, падающую тень, эффекты выделения после указателя мыши или жестов ввода, а также «искусственные материалы», которые были отброшены в Metro.
Текущие приложения Fluent
Свет
Показать выделение
Цель света - привлечь внимание и осветить информацию. При наведении указателя мыши выделение «Показать» подсвечивает ближайшие скрытые границы на объектах, таких как списки меню навигации гамбургера и кнопки. После выбора, например, щелчком или касанием, быстро появляется белый круговой эффект подсветки. Кроме того, в голографической среде Windows существует закругленный белый указатель .
6 ноября 2017 года сотрудник Microsoft Дэвид Хаз заявил, что планы по применению выделения на панели задач существуют, но по состоянию на июль 2019 года этого не произошло.
С WinUI 2.6 Microsoft отказалась от выделения выделения, чтобы соответствовать своим предложениям для Интернета и мобильных устройств, которые не содержат выделения.
Показать фокус
Фокусируемые элементы со светящейся рамкой через визуальный элемент фокуса.
Глубина
Добавление глубины использует ось z и позволяет дифференцировать контент с помощью слоев. Глубина представлена в виде падающих теней и наслоения по Z-глубине. Это особенно заметно в обновленном приложении Office в 2019 году.
Движение
Движение устанавливает взаимосвязь между элементами пользовательского интерфейса и обеспечивает непрерывность взаимодействия.
Добавить / удалить анимацию
Список анимаций для вставки и удаления элементов из коллекции.
Подключенные анимации
Связанные анимации - это переходы элементов. Во время изменения содержимого элемент, кажется, продолжает летать по приложению.
Переход контента
Используется, когда изменяется только часть содержимого на странице.
Сверлить
Drill используется для более глубокой навигации в приложении. Например, отображение дополнительной информации после выбора элемента.
Тускнеть
Появление и исчезновение, чтобы скрыть элементы из поля зрения.
Параллакс
Параллакс перемещает объекты с разной скоростью. Фон движется медленнее, чем содержимое над ним. Например, список будет прокручиваться быстрее, чем фоновое изображение, создавая эффект глубины в дополнение к движению.
Обратная связь с прессой
При нажатии на элемент он на мгновение отходит на задний план, а затем возвращается в исходное положение. Примеры обратной связи с прессой включают в себя живые плитки меню «Пуск» , быстрые действия в Центре уведомлений и кнопки адресной строки Microsoft Edge .
Материал
Акрил
Новые значки с акриловыми материалами были созданы для программ Microsoft, начиная с приложений Office и Microsoft Edge на основе Chromium в 2018 и 2019 годах соответственно. Предварительные версии окончательных значков были замечены в видео «Знакомство с новыми значками для Office 365», прежде чем были обнаружены другие, когда была представлена Windows 10X, до того, как они были официально представлены 12 декабря 2019 г. Эти значки начали появляться в Microsoft Store. обновления этих приложений, начиная с Почты и Календаря .
Акриловый материал создает полупрозрачный размытый эффект с легким шумовым эффектом. Визуальную иерархию можно создать, используя различные степени непрозрачности. Например, в приложении основные поверхности содержимого часто непрозрачны (за исключением виджетов или легких приложений, таких как Калькулятор ), вторичная панель может содержать 80% фонового акрила, а третичная панель может содержать 60% фонового акрила. Фон Акрил размывает все объекты за активным акриловым материалом. Акрил в приложении размывает содержимое в приложении.
Акрил отключается в определенном окне, когда приложение больше не выбрано. Оба типа Acrylic отключены во всей системе, когда отключена прозрачность, когда включен режим экономии заряда батареи или на оборудовании низкого уровня. Фоновый акрил отключается, когда окно не выбрано, а также в режиме Windows 10 Mobile , HoloLens или планшета.
Слюда
Слюда - это новый непрозрачный материал, представленный в Windows 11, который приобретает оттенок обоев пользователя. В отличие от акрила, который был разработан для переходных поверхностей (например, контекстных меню), Mica разработан для использования на долгоживущих первичных поверхностях.
Шкала
Приложения масштабируются в зависимости от форм-фактора , размеров дисплея и от 0D до 3D . Элементы адаптируются к размеру экрана и доступны во многих измерениях. Осознанные элементы управления также классифицируются в рамках Scale (например, полосы прокрутки и вводы, которые адаптируются к различным методам вызова).
Неопределенный
- Пространственный звук
Смотрите также
Рекомендации
Внешние ссылки
-
Официальный веб-сайт
- «Дизайн и код приложений UWP» . Microsoft.
- Гусморино, Пол; Остойч, Бояна (8 мая 2017 г.). «Знакомство с плавным дизайном» . Канал 9 . MSDN.