Система Fluent Design

Система проектирования, созданная Microsoft в 2017 году

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

Переход на Fluent — долгосрочный проект; аспекты дизайна начали появляться в Windows 10, начиная с «Fall Creators Update», выпущенного в октябре 2017 года, а также с обновлением системного программного обеспечения Xbox One , выпущенным вместе с ним. ^{[15] [16] [17] [18]} Позже выяснилось, что он был разработан совместно с Windows 10X , ^[19] в дополнение к Windows 11 , которая имеет похожий дизайн. ^[20]

По сравнению с Metro и Aero

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

Компоненты дизайна

Свет

Цель света — привлекать внимание и освещать информацию. Таким образом, свет устанавливает связь между пользовательским интерфейсом и курсором или указателем. ^[22]

• Подсветка раскрытия: При наведении подсветка раскрытия подсвечивает близлежащие скрытые границы на объектах, таких как списки меню навигации гамбургера и кнопки. При выборе, например, щелчком или касанием, быстро появляется эффект белой круговой подсветки. ^{[22] [23]}
• Раскрыть фокус: Фокусируемые элементы с подсветкой границы с помощью визуального фокуса. ^[24]

С выходом WinUI 2.6 компания Microsoft прекратила поддержку функции подсветки, чтобы соответствовать своим веб- и мобильным предложениям, которые не поддерживают функцию подсветки. ^[25] Кроме того, с выпуском Windows 11 компания Microsoft постепенно отказалась от использования световых эффектов в целом, вместо этого предоставив неразрешимую задачу с помощью анимации. ^[25]

Глубина

Глубина добавляется к контенту посредством наложения слоев по оси Z. Глубина представлена ​​посредством теней и наложения слоев по оси Z. ^{[26] [27]} Это особенно заметно в переработанном приложении Office в 2019 году. В Windows 11 использование глубины расширено за счет наложения различных поверхностей с различной степенью непрозрачности материала Mica.

• Слои: Слои делят приложение на базу, которая является «холстом», и контент, который плавает сверху. Контент может быть представлен как непрерывная поверхность или как карта. ^[28]
• Elevation: Elevation — это использование разделения элементов от поверхности приложения с помощью теней. Примерами могут служить контекстные меню , всплывающие окна или подсказки . ^[28]

Движение

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

• Добавление/удаление анимаций: список анимаций для вставки и удаления элементов из коллекции. ^[30]
• Связанные анимации: Связанные анимации — это переходы элементов. Во время изменения контента элемент, кажется, продолжает летать по приложению. ^[31]
• Переход содержимого: используется, когда изменяется только часть содержимого на странице. ^[30]
• Drill: Drill используется при более глубоком погружении в приложение. Например, для отображения дополнительной информации после выбора элемента. ^[32]
• Затухание: постепенное появление и исчезновение элементов для их отображения и скрытия из вида. ^[30]
• Параллакс: Параллакс перемещает объекты с разной скоростью. Фон движется медленнее, чем содержимое над ним. Например, список будет прокручиваться быстрее, чем фоновое изображение, создавая эффект глубины в дополнение к движению. ^[33]
• Обратная связь при нажатии: при нажатии на элемент он на мгновение уходит на задний план, а затем возвращается в исходное положение. Примерами обратной связи при нажатии являются живые плитки меню «Пуск» , быстрые действия Центра уведомлений и кнопки адресной строки Microsoft Edge . ^[34]

Материал

Материалы — это визуальные эффекты, применяемые к поверхностям UX. В текучем дизайне есть два основных типа материалов: окклюдирующие и прозрачные. Окклюдирующие материалы, такие как акрил и слюда, формируют базовые слои под интерактивными элементами UI. Прозрачные материалы, такие как дым, используются для подчеркивания иммерсивных поверхностей: ^[35]

• Акрил: Акриловый материал создает полупрозрачный, размытый эффект с легким шумовым эффектом. В то время как в Windows 10 акрил использовался на больших поверхностях (например, боковых панелях). С Windows 11 основные поверхности отказались от акрила в пользу слюды. Вместо этого акрил используется на переходных поверхностях, таких как контекстные меню , подсказки или подсказки в полях поиска .
• Слюда: Слюда — это новый непрозрачный материал, представленный в Windows 11, который принимает оттенок обоев пользователя. ^[36] В отличие от акрила, который был разработан для временных поверхностей (например, контекстных меню), MMC разработан для использования на долговечных основных поверхностях. Используя различные степени непрозрачности, приложения могут создавать визуальную иерархию.
• Дым: Дым был представлен в Windows 11. Это полупрозрачный черный фон, независимо от светлого или темного режима, для создания иерархии между главным окном и всплывающим окном. ^[35]

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

Шкала

Приложения масштабируются в зависимости от различных форм-факторов , размеров дисплеев и от 0D до 3D . Элементы адаптируются к размеру экрана и доступны в различных измерениях. ^{[38] [39]} Сознательные элементы управления также классифицируются в пределах Scale (например, полосы прокрутки и входы, которые адаптируются к различным методам вызова) ^{[40] [41]}

Иконография

Иконки приложений

Новые значки с акриловыми материалами были созданы для программ Microsoft, начиная с приложений Office и Microsoft Edge на базе Chromium в 2018 и 2019 годах соответственно. ^{[42] [43] [44]} Предварительные версии окончательных значков были замечены в видеоролике «Встречайте новые значки для Office 365» ^[45] , прежде чем были замечены другие значки, когда была представлена ​​Windows 10X ^[46] , до официального представления 12 декабря 2019 года. ^[47] Эти значки начали появляться в обновлениях Microsoft Store для этих приложений, начиная с Почты и Календаря . ^{[48] [49]}

Segoe Fluent Иконки

Segoe Fluent Icons — это набор иконок, разработанных Microsoft для использования в ее продуктах и ​​сервисах наряду с редизайном шрифта Segoe UI (Segoe UI Variable). ^[50] Иконки округлые, в отличие от угловатых и прямых иконок Segoe MDL2, которые преобладали в эпоху Windows 10. ^[51]

Свободные эмодзи

15 июля 2021 года Microsoft объявила о полной переработке своей библиотеки эмодзи для приведения ее в соответствие с Fluent Design. ^[52] Стремясь сделать Windows максимально единообразной и доступной, Microsoft открыла исходный код более 1500 эмодзи 10 августа 2022 года. ^{[53] [54]} Эти новые эмодзи Fluent отходят от плоского и очерченного стиля предыдущей библиотеки эмодзи, используемой в Windows 10, и вместо этого используют ощущение 3D Play-Doh . ^[52] Кроме того, Microsoft заявила о своих планах анимировать большинство из них. ^[55] Хотя 3D-анимированные эмодзи можно увидеть в таких приложениях, как Microsoft Teams и Skype , в Windows 11 используются плоские варианты.

Выполнение

Руководства по дизайну Fluent являются кроссплатформенными и могут быть реализованы с помощью различных фреймворков. ^[56] Fluent UI React — это набор компонентов React , которые реализуют систему дизайна Fluent от Microsoft. Он предоставляет набор готовых компонентов, которые можно использовать для создания приложений для Windows , iOS , Android , macOS и веба . Кроме того, WinUI — это собственный фреймворк пользовательского интерфейса для создания приложений Windows. Он построен поверх системы дизайна Fluent и предоставляет набор готовых элементов управления. ^[57]

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

• Адвайта
• Материальный дизайн
• Плоский дизайн
• Виндоус Аэро
• Метро

Ссылки

1. "Fluent UI React". NPM . 2024-09-06 . Получено 2024-09-09 .
2. "Выпуск Microsoft.UI.Xaml v2.5.0 · microsoft/microsoft-ui-xaml". GitHub . 2020-04-12 . Получено 2024-09-09 .
3. "Выпуск 0.0.11: Merge pull request #44 from microsoft/develop · microsoft/fluentui-android". GitHub . 2021-02-12 . Получено 2021-03-16 .
4. "Выпуск Bumping версий для обновления версии (0.2.3) · microsoft/fluentui-apple". GitHub . 2021-03-09 . Получено 2021-03-16 .
5. "Выпуск Microsoft.UI.Xaml v2.6.0-prerelease.210315002 · microsoft/microsoft-ui-xaml". GitHub . 2021-03-17 . Получено 2021-03-18 .
6. "@fluentui/react-native - npm". npm . 2021-03-15.
7. Команда Microsoft 365 (2020-03-12). «UI Fabric превращается в Fluent UI — блог разработчиков Microsoft 365». Блог разработчиков Microsoft 365. Получено 2021-03-16 .{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )
8. Левкович, Якуб (2020-03-16). "Microsoft преобразует UI Fabric в Fluent UI - SD Times". ST Times . Получено 2021-03-16 .
9. Office Dev (2015-08-15). «Представляем Office UI Fabric — ваш ключ к разработке надстроек для Office — блог Microsoft 365». Блог Microsoft 365. Получено 2021-03-16 .
10. Танг, Лиам (16.03.2020). «Большой рывок Microsoft в области дизайна Fluent: веб-разработчики получают новую инфраструктуру Office UI Fabric». ZDNet . Получено 16.03.2021 .
11. "Fluent Design — это новый современный пользовательский интерфейс Microsoft для Windows и не только". The Verge . 2017-05-11 . Получено 2017-05-11 .
12. "Windows Developer on Twitter". Twitter . Получено 2017-05-11 .
13. "Fluent Design Language". Microsoft . Получено 2017-05-12 .
14. "Новый внешний вид и поведение Windows, Neon, официально является "системой дизайна Microsoft Fluent"". Ars Technica . 11 мая 2017 г. . Получено 11 мая 2017 г. .
15. "Microsoft демонстрирует изменения Fluent Design в Windows 10". The Verge . Получено 29 октября 2017 г.
16. «Система Fluent Design от Microsoft грозит заставить Windows выглядеть хорошо». Ars Technica . Получено 29 октября 2017 г.
17. "Крупное новое обновление Xbox One перестраивает панель управления с помощью Fluent Design". The Verge . Получено 29.10.2017 .
18. "Xbox One сегодня получает крупное обновление, включая более быструю панель управления". The Verge . Получено 29.10.2017 .
19. «Первый взгляд на новую операционную систему Windows 10X от Microsoft для двух экранов». The Verge . 11 февраля 2020 г. Получено 19 апреля 2020 г.
20. "Panos Panay в Instagram: "Команда сделала это видео, чтобы отпраздновать достижение отметки в 1 миллиард MAD на Windows 10, и я хотел поделиться им со всеми вами. Сейчас, когда..."". Instagram . 19 марта 2020 г. Архивировано из оригинала 25.12.2021 . Получено 19 апреля 2020 г. .
21. Parmar, Mayank (2022-02-13). "Microsoft дразнит дизайном Windows 7 Aero-like для Windows 11". Windows Latest . Получено 2023-04-05 .
22. mijacobs. "Раскрыть выделение - приложения UWP | Microsoft Docs". docs.microsoft.com . Получено 22.12.2017 .
23. Блог, Windows Developer (2017-08-04). "Создание материалов и источников света на визуальном уровне". Блог разработчиков Windows . Получено 2023-04-04 .
24. cphilippona (24.09.2020). "Раскрыть фокус - приложения UWP | Microsoft Docs". docs.microsoft.com . Получено 30.03.2018 .
25. "Вопрос: Возможно ли вернуть reveal? · Проблема № 4011 · microsoft/microsoft-ui-xaml". GitHub . Получено 2021-07-15 .
26. Боуден, Зак (2017-05-19). "Microsoft демонстрирует 3D-функцию 'Z-depth layering' в своей системе Fluent Design". Windows Central . Получено 2017-12-22 .
27. Джойс, Кевин (2017-05-20). "Microsoft представляет Z-Depth Layering для устройств смешанной реальности Windows 10". VRFocus . Архивировано из оригинала 2020-08-13 . Получено 2017-12-22 .
28. hickeys. "Наслоение и повышение в Windows 11 - приложения Windows". learn.microsoft.com . Получено 2023-04-04 .
29. mijacobs (2020-09-24). "Движение и анимация в приложениях UWP - приложения UWP | Microsoft Docs". docs.microsoft.com . Получено 2017-12-22 .
30. mijacobs (2020-09-24). "Движение и анимация в приложениях UWP - приложения UWP | Microsoft Docs". docs.microsoft.com . Получено 2018-03-30 .
31. mijacobs (24.09.2020). "Подключенная анимация - приложения UWP | Microsoft Docs". docs.microsoft.com . Получено 31.12.2017 .
32. davidvkimball (2020-09-24). "Переходы страниц в приложениях WUP - приложения UWP". docs.microsoft.com . Получено 2019-11-27 .
33. mijacobs (24.09.2020). «Как использовать элемент управления ParallaxView для добавления глубины и движения в ваше приложение. - Приложения UWP | Microsoft Docs». ​​docs.microsoft.com . Получено 22.12.2017 .
34. mijacobs (24.09.2020). "Анимация щелчка указателя в приложениях UWP - приложения UWP | Microsoft Docs". docs.microsoft.com . Получено 31.12.2017 .
35. hickeys. "Материалы, используемые в приложениях Windows 11 - приложения Windows". learn.microsoft.com . Получено 2023-04-04 .
36. "Материалы, используемые в приложениях Windows 11 - приложения Windows". docs.microsoft.com . Получено 2021-07-05 .
37. mijacobs. "Акриловый материал - приложения UWP | Microsoft Docs". docs.microsoft.com . Получено 22.12.2017 .
38. "Fluent Design System". fluent.microsoft.com . Архивировано из оригинала 2018-03-01 . Получено 2018-02-18 .
39. Верма, Адарш (2017-05-12). «Что такое Fluent Design System? Как Microsoft создает самую красивую операционную систему?». Fossbytes . Получено 2018-02-18 .
40. muhsinking. "Элементы управления просмотрщиком прокрутки - приложения UWP | Microsoft Docs". docs.microsoft.com . Получено 22.12.2017 .
41. "Что нового в Microsoft Fluent Design System 'wave one' для Windows 10". Windows Central . 2017-06-29 . Получено 2017-12-22 .
42. «Перепроектирование значков приложений Office для адаптации к новому миру работы». Medium . 29 ноября 2018 г. Получено 19 апреля 2020 г.
43. "Microsoft представляет новый логотип браузера Edge, который больше не похож на Internet Explorer". The Verge . 2 ноября 2019 г. Получено 19 апреля 2020 г.
44. hickeys. "Руководство по дизайну иконок приложений Windows - приложения Windows". learn.microsoft.com . Получено 2023-04-04 .
45. «Встречайте новые значки для Office 365». YouTube . 29 ноября 2018 г. Получено 19 апреля 2020 г.
46. "#MicrosoftEvent Live". YouTube . 2 октября 2019 г. . Получено 19 апреля 2020 г. .
47. "The Icon Kaleidoscope". Medium . 12 декабря 2019 г. Получено 19 апреля 2020 г.
48. "Знаковые иконки: проектирование мира Windows". Medium . 20 февраля 2020 г. . Получено 19 апреля 2020 г. .
49. "Microsoft выпускает новые красочные иконки Windows 10". The Verge . 20 февраля 2020 г. Получено 19 апреля 2020 г.
50. hickeys. "Иконография в Windows 11 - приложения Windows". learn.microsoft.com . Получено 2023-04-04 .
51. hickeys. "Segoe MDL2 Assets icons - Windows apps". learn.microsoft.com . Получено 2023-04-04 .
52. "Новые Fluent Emoji Designs от Microsoft". Emojipedia . 2021-07-15 . Получено 2023-04-04 .
53. Карраскейра, Жуан (2022-08-10). «Microsoft открывает исходный код своих эмодзи Windows 11 для использования всеми». XDA Developers . Получено 2023-04-04 .
54. Design, Microsoft (2022-08-10). "Проектирование в Open(Source)". Microsoft Design . Получено 2023-04-04 .
55. Design, Microsoft (2021-11-22). "Эмоциональность на работе". Microsoft Design . Получено 2023-04-04 .
56. "Home - Fluent UI". Microsoft . Получено 5 апреля 2023 г. .
57. Бридж, Карл. "Windows UI Library (WinUI) 3 - Windows apps". Microsoft . Получено 5 апреля 2023 г. .
58. "Fluent UI React". FluentUI . Получено 2023-04-05 .
59. VitaRox. "Fluent UI React v9: что нового и отличающегося". Microsoft . Получено 5 апреля 2023 г. .
60. "fluentui/packages/web-components at master · microsoft/fluentui". GitHub . Получено 2023-04-05 .
61. brookdozer. "Обзор веб-компонентов Fluent UI". Microsoft . Получено 5 апреля 2023 г. .

Внешние ссылки

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