Свободная система проектирования
 |
 | |||
| Другие имена |
| ||
|---|---|---|---|
| Оригинальный автор(ы) | Майкрософт | ||
| Разработчик(и) | Майкрософт | ||
| Первоначальный выпуск | 2017 | ||
| |||
| |||
Система Fluent Design (кодовое название « Проект Неон »), [11] официально представлен как Microsoft Fluent Design System , [12] — это язык дизайна , разработанный в 2017 году компанией Microsoft . Fluent Design — это обновленная версия языка дизайна Microsoft (широко известного как «Metro»), которая включает рекомендации по дизайну и взаимодействиям, используемым в программном обеспечении, разработанном для всех устройств и платформ 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]
По сравнению с Метро и Аэро
[ редактировать ]Ключевые принципы 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]
- Высота: Высота — это использование разделения элементов от поверхности приложения с помощью теней. Примеры включают контекстные меню , всплывающие окна или подсказки . [28]
Движение
[ редактировать ]Движение устанавливает связь между элементами пользовательского интерфейса и обеспечивает непрерывность взаимодействия. [29]
- Добавление/удаление анимации: список анимаций для вставки и удаления элементов из коллекции. [30]
- Связанные анимации. Связанные анимации — это переходы элементов. Во время изменения содержимого элемент продолжает перемещаться по приложению. [31]
- Переход контента: используется, когда изменится только часть контента на странице. [30]
- Детализация: Детализация используется при более глубокой навигации по приложению. Например, отображение дополнительной информации после выбора элемента. [32]
- Fade: постепенное появление и исчезновение, чтобы отображать объекты и скрывать их из поля зрения. [30]
- Параллакс: Параллакс перемещает объекты с разной скоростью. Фон движется медленнее, чем содержимое над ним. Например, список будет прокручиваться быстрее, чем фоновое изображение, создавая в дополнение к движению эффект глубины. [33]
- Обратная связь при нажатии: при нажатии на элемент он на мгновение отходит на задний план, а затем возвращается в исходное положение. Примеры отзывов прессы включают живые плитки меню «Пуск» , быстрые действия Центра действий и Microsoft Edge кнопки адресной строки . [34]
Материал
[ редактировать ] | |
Материал Акрил Слюда Дым Различные материалы, используемые в Fluent Design |
Материалы — это визуальные эффекты, применяемые к UX-поверхностям. В свободном дизайне есть два основных типа материалов: закрывающие и прозрачные. Перекрывающие материалы, такие как акрил и слюда, образуют базовые слои под интерактивными элементами пользовательского интерфейса. Прозрачные материалы, такие как дым, используются для подчеркивания иммерсивных поверхностей: [35]
- Акрил: акриловый материал создает полупрозрачный, размытый эффект с легким шумовым эффектом. В Windows 10 акрил использовался на больших поверхностях (например, на боковых панелях). В Windows 11 основные поверхности отказались от акрила в пользу слюды. Вместо этого акрил используется во временных поверхностях, таких как контекстные меню , подсказки или подсказки в окнах поиска .
- Слюда. Слюда — это новый непрозрачный материал, представленный в Windows 11, который принимает оттенок обоев пользователя. [36] В отличие от акрила, который был разработан для временных поверхностей (например, контекстных меню), MMC предназначен для использования на долговечных основных поверхностях. Используя различные значения непрозрачности, приложения могут создавать визуальную иерархию.
- Дым: Дым был представлен в Windows 11. Это полупрозрачный черный фон, независимо от светлого или темного режима, для создания иерархии между главным окном и всплывающим окном. [35]
И Acrylic, и Mica отключаются в определенном окне, когда приложение больше не выбрано. Более того, оба они отключены в масштабе всей системы, когда отключена прозрачность, когда включен режим экономии заряда батареи или на слабом оборудовании. Фоновый акрил отключается, когда окно не выбрано или в режиме Windows 10 Mobile , HoloLens или планшета. [37]
Шкала
[ редактировать ]Приложения масштабируются в различных форм-факторах , размерах дисплеев и от 0D до 3D . Элементы адаптируются к размеру экрана и доступны в нескольких измерениях. [38] [39] Сознательные элементы управления также классифицируются по шкале (например, полосы прокрутки и вводы, которые адаптируются к различным методам вызова). [40] [41]
Иконография
[ редактировать ]Иконки приложений
[ редактировать ]Новые значки из акриловых материалов были созданы для программ Microsoft, начиная с приложений Office и Chromium на базе Microsoft Edge в 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, которые преобладали в эпоху «Метро». [51]
Свободное использование смайлов
[ редактировать ]
15 июля 2021 года Microsoft объявила о полной переработке своей библиотеки смайлов в соответствии с ее Fluent Design. [52] Стремясь сделать Windows максимально единообразной и доступной, Microsoft открыла исходный код более 1500 смайлов. 10 августа 2022 года [53] [54] Эти новые смайлы Fluent отличаются от плоского и контурного стиля предыдущей библиотеки смайлов, использовавшейся в Windows 10, и вместо этого создают ощущение трехмерного пластилина Play-Doh . [52] Более того, Microsoft заявила о своих планах анимировать большинство из них. [55] Хотя трехмерные анимированные смайлы можно увидеть в таких приложениях, как Microsoft Teams и Skype , в Windows 11 используются плоские варианты.
Выполнение
[ редактировать ]Руководства по проектированию Fluent являются кроссплатформенными и могут быть реализованы с помощью различных платформ. [56] Fluent UI React — это набор компонентов React , реализующих систему Fluent Design System от Microsoft. Он предоставляет набор готовых компонентов, которые можно использовать для создания приложений для Windows , iOS , Android , macOS и Интернета . Кроме того, WinUI — это собственная платформа пользовательского интерфейса для создания приложений Windows. Он построен на основе Fluent Design System и предоставляет набор готовых элементов управления. [57]
 |  | |||
|---|---|---|---|---|
| WinUI 2 | WinUI 3 | Свободный пользовательский интерфейс React v9 | Веб-компоненты | |
| UWP | UWP | Win32 | Реагировать | Блазор |
| WinUI 2 — это библиотека элементов управления и стилей для создания современных приложений Windows. Он доступен для использования в любом приложении UWP и предлагает интересные, гибкие и современные элементы управления, такие как NavigationView и TeachingTip. [11] | WinUI 3 — это новое поколение платформы WinUI. Он поставляется с Windows App SDK. WinUI 3 расширяет WinUI до полноценной UX-инфраструктуры и предоставляет унифицированный набор API и инструментов. [12] | Fluent UI React v9 — это последняя стабильная версия Fluent UI React, предлагающая набор утилит, компонентов React и веб-компонентов для создания веб-приложений. [58] Fluent UI React v9 пытается оптимизироваться до своего аналога WinUI . [59] | Веб-компоненты — это набор API-интерфейсов веб-платформы, которые позволяют создавать новые пользовательские, повторно используемые, инкапсулированные HTML-теги для использования на веб-страницах и веб-приложениях. [60] [61] | |
 Элементы пользовательского интерфейса, использующие WinUI |  Элементы пользовательского интерфейса с использованием Fluent UI React v9' |  Элементы пользовательского интерфейса с использованием веб-компонентов | ||
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ "@fluentui/react - npm" . НПМ . 01.04.2021 . Проверено 4 апреля 2021 г.
- ^ «Выпуск Microsoft.UI.Xaml v2.5.0 · microsoft/microsoft-ui-xaml» . Гитхаб . 12 апреля 2020 г. Проверено 16 марта 2021 г.
- ^ «Выпуск 0.0.11: запрос на слияние № 44 из microsoft/develop · microsoft/fluentui-android» . Гитхаб . 12 февраля 2021 г. Проверено 16 марта 2021 г.
- ^ «Выпуск версий Bumping для обновления версии (0.2.3) · microsoft/fluentui-apple» . Гитхаб . 09.03.2021 . Проверено 16 марта 2021 г.
- ^ «Выпуск Microsoft.UI.Xaml v2.6.0-prerelease.210315002 · microsoft/microsoft-ui-xaml» . Гитхаб . 17 марта 2021 г. Проверено 18 марта 2021 г.
- ^ "@fluentui/react-native - npm" . НПМ . 15 марта 2021 г.
- ^ Команда Microsoft 365 (12 марта 2020 г.). «UI Fabric превращается в Fluent UI — блог разработчиков Microsoft 365» . Блог разработчиков Microsoft 365 . Проверено 16 марта 2021 г.
{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка ) - ^ Левкович, Якуб (16 марта 2020 г.). «Microsoft преобразует UI Fabric в Fluent UI — SD Times» . СТ Таймс . Проверено 16 марта 2021 г.
- ^ Разработчик Office (15 августа 2015 г.). «Представляем Office UI Fabric — ваш ключ к разработке надстроек для Office — блог Microsoft 365» . Блог Microsoft 365 . Проверено 16 марта 2021 г.
- ^ Тунг, Лиам (16 марта 2020 г.). «Большой прорыв в дизайне Fluent от Microsoft: веб-разработчики получают новую Office UI Fabric» . ЗДНет . Проверено 16 марта 2021 г.
- ^ Jump up to: а б «Fluent Design — это новый современный пользовательский интерфейс Microsoft для Windows и других систем» . Грань . 11 мая 2017 г. Проверено 11 мая 2017 г.
- ^ Jump up to: а б «Разработчик Windows в Твиттере» . Твиттер . Проверено 11 мая 2017 г.
- ^ «Свободный язык дизайна» . Майкрософт . Проверено 12 мая 2017 г.
- ^ «Новый внешний вид Windows, Neon, официально называется «Системой Microsoft Fluent Design» » . Арс Техника . 11 мая 2017 года . Проверено 11 мая 2017 г.
- ^ «Microsoft демонстрирует изменения Fluent Design в Windows 10» . Грань . Проверено 29 октября 2017 г.
- ^ «Система Fluent Design от Microsoft угрожает улучшить внешний вид Windows» . Арс Техника . Проверено 29 октября 2017 г.
- ^ «Новое крупное обновление Xbox One меняет панель управления с помощью Fluent Design» . Грань . Проверено 29 октября 2017 г.
- ^ «Сегодня Xbox One получает крупное обновление, включая более быструю панель управления» . Грань . Проверено 29 октября 2017 г.
- ^ «Первый взгляд на новую операционную систему Microsoft Windows 10X для двух экранов» . Грань . 11 февраля 2020 г. . Проверено 19 апреля 2020 г.
- ^ «Панос Панай в Instagram: «Команда сделала это видео, чтобы отпраздновать достижение 1 миллиарда MAD на Windows 10, и я хотел поделиться им со всеми вами. Сейчас в то время, когда…» « . Инстаграм . 19 марта 2020 г. Архивировано из оригинала 25 декабря 2021 г. Проверено 19 апреля 2020 г.
- ^ Пармар, Маянк (13 февраля 2022 г.). «Microsoft демонстрирует дизайн Windows 11, похожий на Windows 7 Aero» . Последняя версия Windows . Проверено 5 апреля 2023 г.
- ^ Jump up to: а б миджакобы. «Выделение основных моментов — приложения UWP | Microsoft Docs» . docs.microsoft.com . Проверено 22 декабря 2017 г.
- ^ Блог, Разработчик Windows (04.08.2017). «Создание материалов и источников света на визуальном слое» . Блог разработчиков Windows . Проверено 4 апреля 2023 г.
- ^ cфилиппона (24 сентября 2020 г.). «Раскрыть фокус — приложения UWP | Microsoft Docs» . docs.microsoft.com . Проверено 30 марта 2018 г.
- ^ Jump up to: а б «Вопрос: можно ли вернуть раскрытие? · Проблема № 4011 · microsoft/microsoft-ui-xaml» . Гитхаб . Проверено 15 июля 2021 г.
- ^ Боуден, Зак (19 мая 2017 г.). «Microsoft демонстрирует 3D-функцию «наслоения Z-глубины» в своей системе Fluent Design System» . Центр Windows . Проверено 22 декабря 2017 г.
- ^ Джойс, Кевин (20 мая 2017 г.). «Microsoft Reveal Z-Depth Layering для устройств смешанной реальности Windows 10» . ВРФокус . Архивировано из оригинала 13 августа 2020 г. Проверено 22 декабря 2017 г.
- ^ Jump up to: а б засосы. «Многослойность и повышение прав в Windows 11 — приложения для Windows» . Learn.microsoft.com . Проверено 4 апреля 2023 г.
- ^ mijacobs (24 сентября 2020 г.). «Движение и анимация в приложениях UWP — приложения UWP | Microsoft Docs» . docs.microsoft.com . Проверено 22 декабря 2017 г.
- ^ Jump up to: а б с mijacobs (24 сентября 2020 г.). «Движение и анимация в приложениях UWP — приложения UWP | Microsoft Docs» . docs.microsoft.com . Проверено 30 марта 2018 г.
- ^ mijacobs (24 сентября 2020 г.). «Подключенная анимация — приложения UWP | Microsoft Docs» . docs.microsoft.com . Проверено 31 декабря 2017 г.
- ^ Дэвидкимбалл (24 сентября 2020 г.). «Переходы страниц в приложениях WUP — приложения UWP» . docs.microsoft.com . Проверено 27 ноября 2019 г.
- ^ mijacobs (24 сентября 2020 г.). «Как использовать элемент управления ParallaxView, чтобы добавить глубину и движение в ваше приложение. — Приложения UWP | Microsoft Docs» . docs.microsoft.com . Проверено 22 декабря 2017 г.
- ^ mijacobs (24 сентября 2020 г.). «Анимация щелчков указателя в приложениях UWP — приложения UWP | Microsoft Docs» . docs.microsoft.com . Проверено 31 декабря 2017 г.
- ^ Jump up to: а б засосы. «Материалы, используемые в приложениях для Windows 11 — Приложения для Windows» . Learn.microsoft.com . Проверено 4 апреля 2023 г.
- ^ «Материалы, используемые в приложениях для Windows 11 — Приложения для Windows» . docs.microsoft.com . Проверено 5 июля 2021 г.
- ^ миджакобы. «Акриловый материал — приложения UWP | Microsoft Docs» . docs.microsoft.com . Проверено 22 декабря 2017 г.
- ^ «Свободная система проектирования» . fluent.microsoft.com . Архивировано из оригинала 01 марта 2018 г. Проверено 18 февраля 2018 г.
- ^ Верма, Адарш (12 мая 2017 г.). «Что такое система Fluent Design? Как Microsoft создает самую красивую операционную систему?» . Фоссбайты . Проверено 18 февраля 2018 г.
- ^ мурлыканье. «Элементы управления средством просмотра прокрутки — приложения UWP | Microsoft Docs» . docs.microsoft.com . Проверено 22 декабря 2017 г.
- ^ «Что нового в первой волне системы Microsoft Fluent Design для Windows 10» . Центр Windows . 29 июня 2017 г. Проверено 22 декабря 2017 г.
- ^ «Переработка значков приложений Office для нового мира труда» . Середина . 29 ноября 2018 года . Проверено 19 апреля 2020 г.
- ^ «Microsoft представляет новый логотип браузера Edge, который больше не похож на Internet Explorer» . Грань . 2 ноября 2019 г. Проверено 19 апреля 2020 г.
- ^ засосы. «Рекомендации по дизайну значков приложений для Windows — Приложения для Windows» . Learn.microsoft.com . Проверено 4 апреля 2023 г.
- ^ «Встречайте новые значки для Office 365» . Ютуб . 29 ноября 2018 года . Проверено 19 апреля 2020 г.
- ^ «#MicrosoftEvent Live» . Ютуб . 2 октября 2019 года . Проверено 19 апреля 2020 г.
- ^ «Иконный калейдоскоп» . Середина . 12 декабря 2019 года . Проверено 19 апреля 2020 г.
- ^ «Знаковые значки: проектирование мира Windows» . Середина . 20 февраля 2020 г. . Проверено 19 апреля 2020 г.
- ^ «Microsoft представляет новые красочные значки Windows 10» . Грань . 20 февраля 2020 г. . Проверено 19 апреля 2020 г.
- ^ засосы. «Иконография в Windows 11 — Приложения для Windows» . Learn.microsoft.com . Проверено 4 апреля 2023 г.
- ^ засосы. «Значки ресурсов Segoe MDL2 — приложения для Windows» . Learn.microsoft.com . Проверено 4 апреля 2023 г.
- ^ Jump up to: а б «Новые дизайны Fluent Emoji от Microsoft» . Эмохипедия . 15 июля 2021 г. Проверено 4 апреля 2023 г.
- ^ Карраскейра, Жуан (10 августа 2022 г.). «Microsoft открывает исходные коды своих смайлов Windows 11, чтобы каждый мог их использовать» . Разработчики XDA . Проверено 4 апреля 2023 г.
- ^ Дизайн, Microsoft (10 августа 2022 г.). «Проектирование в открытом(исходном коде)» . Майкрософт Дизайн . Проверено 4 апреля 2023 г.
- ^ Дизайн, Microsoft (22 ноября 2021 г.). «Эмоциональность в работе» . Майкрософт Дизайн . Проверено 4 апреля 2023 г.
- ^ «Главная страница — свободный интерфейс» . Майкрософт . Проверено 5 апреля 2023 г.
- ^ Мост, Карл. «Библиотека пользовательского интерфейса Windows (WinUI) 3 — приложения для Windows» . Майкрософт . Проверено 5 апреля 2023 г.
- ^ «Свободное реагирование пользовательского интерфейса» . FluentUI . Проверено 5 апреля 2023 г.
- ^ ВитаРокс. «Fluent UI React v9: что нового и необычного» . Майкрософт . Проверено 5 апреля 2023 г.
- ^ «fluentui/пакеты/веб-компоненты в мастере · microsoft/fluentui» . Гитхаб . Проверено 5 апреля 2023 г.
- ^ брукдозер. «Обзор веб-компонентов Fluent UI» . Майкрософт . Проверено 5 апреля 2023 г.
Внешние ссылки
[ редактировать ]- Официальный сайт
- «Проектирование и кодирование приложений UWP» . Майкрософт.
- Гусморино, Павел; Остоич, Бояна (8 мая 2017 г.). «Представляем Fluent Design» . Канал 9 . MSDN.
