Система свободного дизайна - Fluent Design System

В Календарь заявление в Windows 10, показывая такие аспекты Fluent Design, как акрил и более тонкие границы окон.
Свободно и Office Online -вдохновленные "Домашние" экраны, которые можно увидеть в версиях Windows Office 365 и Офис 2019.
Часть серия на
Windows 10
Windows 10 Logo.svg
Связанный

Система свободного дизайна (под кодовым названием Проект Неон),[1] официально представлен как Система Microsoft Fluent Design,[2] это язык дизайна разработан в 2017 году Microsoft. Fluent Design - это переработка Язык дизайна Microsoft 2 (широко известный как "Метро"), который включает в себя рекомендации по дизайну и взаимодействию, используемому в программном обеспечении, предназначенном для всех Windows 10 устройства и платформы. Система основана на пяти ключевых компонентах: свет, глубина, движение, материал и масштаб.[3] Новый язык дизайна включает более заметное использование эффектов движения, глубины и прозрачности.[4]

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

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

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

Текущие приложения Fluent

Свет

Показать выделение

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

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

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

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

Глубина

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

Движение

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

Добавить / удалить анимацию

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

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

Связанные анимации - это переходы элементов. Во время изменения содержимого элемент, кажется, продолжает летать по приложению.[18]

Переход контента

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

Дрель

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

Тускнеть

Появление и исчезновение, чтобы скрыть объекты и скрыть их.[21]

Параллакс

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

Обратная связь с прессой

Когда элемент нажимается, он на мгновение уходит на задний план, а затем возвращается в исходное положение. Примеры отзывов прессы включают Стартовое меню живая плитка, Центр событий быстрые действия и Microsoft Edge Адресная строка кнопки.[23]

Материал

Акрил

Для программ Microsoft были созданы новые иконки с акриловыми материалами, начиная с Офис приложения и Хром -основан Microsoft Edge в 2018 и 2019 годах соответственно.[24][25] Предварительные версии окончательных значков были замечены в видео «Знакомство с новыми значками для Office 365»,[26] прежде, чем было замечено больше, когда была представлена ​​Windows 10X,[27] до официального анонса 12 декабря 2019 г.[28] Эти значки начали появляться через Магазин Microsoft обновления этих приложений, начиная с Почта и Календарь.[29][30]

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

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

Шкала

Приложения масштабируются по разным форм-факторы, размеры дисплея, и 0D к 3D. Элементы адаптируются к размеру экрана и доступны во многих измерениях.[32][33] Осознанные элементы управления также классифицируются в рамках Scale (например, полосы прокрутки и вводы, которые адаптируются к различным методам вызова).[34][35]

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

  • Пространственный звук[36]

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

Рекомендации

  1. ^ «Fluent Design - это новый современный пользовательский интерфейс Microsoft для Windows и не только». Грани. 2017-05-11. Получено 2017-05-11.
  2. ^ «Разработчик Windows в Twitter». Twitter. Получено 2017-05-11.
  3. ^ «Свободный язык дизайна». Microsoft. Получено 2017-05-12.
  4. ^ «Новый внешний вид Windows, Neon, официально признан системой Microsoft Fluent Design."". Ars Technica. Получено 11 мая 2017.
  5. ^ «Microsoft демонстрирует изменения своего свободного дизайна в Windows 10». Грани. Получено 2017-10-29.
  6. ^ «Система Fluent Design от Microsoft угрожает сделать Windows красивым». Ars Technica. Получено 2017-10-29.
  7. ^ «В новом крупном обновлении Xbox One приборная панель заменена на Fluent Design». Грани. Получено 2017-10-29.
  8. ^ «Xbox One сегодня получает серьезное обновление, включая более быструю панель управления». Грани. Получено 2017-10-29.
  9. ^ «Первый взгляд на новую операционную систему Microsoft Windows 10X для двух экранов». Грани. 11 февраля 2020 г.. Получено 19 апреля, 2020.
  10. ^ Instagram. 19 марта 2020 г. https://www.instagram.com/p/B97VqkXg0iN/. Получено 19 апреля, 2020. Отсутствует или пусто | название = (помощь)
  11. ^ mijacobs. «Показать основные моменты - разработчик приложений UWP». docs.microsoft.com. Получено 2017-12-22.
  12. ^ «В меню« Пуск »нет выделения« Свободный дизайн »- обновление Fall Creator». answers.microsoft.com. Получено 2017-12-26.
  13. ^ cphilippona. «Показать фокус - разработчик приложений UWP». docs.microsoft.com. Получено 2018-03-30.
  14. ^ «Microsoft демонстрирует 3D-функцию« Z-depth Layering »в своей системе Fluent Design». Windows Central. Получено 2017-12-22.
  15. ^ «Microsoft Reveal Z-Depth Layering для устройств смешанной реальности Windows 10». VRFocus. Получено 2017-12-22.
  16. ^ mijacobs. «Движение и анимация в приложениях UWP - разработчик приложений UWP». docs.microsoft.com. Получено 2017-12-22.
  17. ^ mijacobs. «Движение и анимация в приложениях UWP - разработчик приложений UWP». docs.microsoft.com. Получено 2018-03-30.
  18. ^ mijacobs. «Подключенная анимация - разработчик приложений UWP». docs.microsoft.com. Получено 2017-12-31.
  19. ^ mijacobs. «Движение и анимация в приложениях UWP - разработчик приложений UWP». docs.microsoft.com. Получено 2018-03-30.
  20. ^ Давидвкимбол. «Переходы между страницами в приложениях WUP - приложениях UWP». docs.microsoft.com. Получено 2019-11-27.
  21. ^ mijacobs. «Движение и анимация в приложениях UWP - разработчик приложений UWP». docs.microsoft.com. Получено 2018-03-30.
  22. ^ mijacobs. «Как использовать элемент управления ParallaxView для добавления глубины и движения в ваше приложение. - Разработчик приложения UWP». docs.microsoft.com. Получено 2017-12-22.
  23. ^ mijacobs. «Анимация щелчка указателя в приложениях UWP - разработчик приложений UWP». docs.microsoft.com. Получено 2017-12-31.
  24. ^ «Переработка значков приложений Office для перехода в новый мир работы». Середина. 29 ноября 2018 г.. Получено 19 апреля, 2020.
  25. ^ «Microsoft представляет новый логотип браузера Edge, который больше не похож на Internet Explorer». Грани. 2 ноября 2019 г.,. Получено 19 апреля, 2020.
  26. ^ «Встречайте новые символы Office 365». 29 ноября 2018 г.. Получено 19 апреля, 2020.
  27. ^ «#MicrosoftEvent Live». 2 октября 2019 г.,. Получено 19 апреля, 2020.
  28. ^ "Иконка-калейдоскоп". Середина. 12 декабря 2019 г.,. Получено 19 апреля, 2020.
  29. ^ «Иконические иконки: проектирование мира Windows». Середина. 20 февраля 2020 г.. Получено 19 апреля, 2020.
  30. ^ «Microsoft выпускает новые красочные значки Windows 10». Грани. 20 февраля 2020 г.. Получено 19 апреля, 2020.
  31. ^ mijacobs. «Акриловый материал - разработчик приложений UWP». docs.microsoft.com. Получено 2017-12-22.
  32. ^ «Система свободного дизайна». fluent.microsoft.com. Архивировано из оригинал на 2018-03-01. Получено 2018-02-18.
  33. ^ Верма, Адарш (12 мая 2017 г.). «Что такое система Fluent Design? Как Microsoft создает самую красивую операционную систему?». Fossbytes. Получено 2018-02-18.
  34. ^ задумчивый. «Элементы управления средством просмотра прокрутки - разработчик приложений UWP». docs.microsoft.com. Получено 2017-12-22.
  35. ^ «Что нового в Microsoft Fluent Design System 'wave one' для Windows 10». Windows Central. 2017-06-29. Получено 2017-12-22.
  36. ^ «Пространственный звуковой дизайн». developer.microsoft.com. Получено 2017-12-22.

внешняя ссылка