Fluent Design в Windows 10

Компания Microsoft продолжает распространять интерфейс Fluent Design. Он пока добрался не до всех участков системы Windows 10 и приложений Microsoft. Давайте посмотрим, где он уже есть.

Система Microsoft Fluent Design является одним из наиболее интересных проектов в Windows 10. Это новое видение Windows, изменение внешнего вида почти по всем направлениям. Microsoft представила Fluent Design в 2017 году и сообщила тогда, что на внедрение во все продукты потребуется время. Процесс продолжается и система видоизменяется постепенно.

Уже несколько месяцев ведётся разработка обновления Redstone 5. Интересно посмотреть, насколько широко Fluent Design представлен к настоящему времени. Работы остаётся немало, но за последнее время пройден большой путь.

Microsoft обозначила пять участков дизайна в первой волне изменений Fluent Design: материал, свет, масштабирование, глубина и движение. Многие из этих элементов появились в апрельском обновлении Redstone 4. В Redstone 5 их должно стать ещё больше.

Акрил представляет собой наиболее распространённый элемент Fluent Design, которые есть в самой системе и в приложениях. Его прозрачность позволяет видеть объекты позади находящегося в фокусе окна. В последних версиях акрил можно увидеть в нескольких местах, включая меню Пуск, панель задач, центр уведомлений и хаб Люди.

Когда включены Наборы, акрил можно увидеть в панели заголовка приложений, о чём просили многие инсайдеры. Ещё чаще акрил встречается внутри приложений. В предложении Параметры акрил есть в боковой панели, в браузере Edge в заголовке. Также он применяется в универсальном приложение Skype и в Paint 3D.

Калькулятор, Фотографии и Карты также имеют элементы акрила. В картах они находятся наверху окна, где располагается заголовок и меню навигации. В приложении Фотографии акрил также наверху, тогда как прежде был главным образом на фоне.
Калькулятор является лучшим примером применения акрила в Windows 10. Его можно найти в всплывающих уведомлениях на рабочем столе. Эффекты акрил и Reveal можно добавить в адресную строку браузера Edge.

Функция Timeline в последних сборках Redstone 5 получила размытый фон, что отличается от версии Redstone 4.

Ещё один новый элемент дизайна, который следует за курсором при наведении на определённые объекты в операционной системе и приложениях. Сейчас это центр управления, меню Пуск и хаб Люди, также списки и меню на основе XAML.

Microsoft планирует принести Reveal и в панель задач, но вряд ли это случится скоро. Сейчас никакой стабильности в распространении эффекта по операционной системе не наблюдается. В одних меню он есть, в других нет.

Кроме того, само отображение эффекта не отличается постоянством. В одних случаях он отбрасывает свет на окружающие элементы интерфейса, в других такого не происходит. Хочется верить, что Microsoft исправит подобные проблемы.

Эффект Reveal можно встретить и в браузере Edge, в том числе в адресной строке, вкладках, выпадающем меню настроек и Edge Hub. Есть он в программе «Музыка Groove», Калькулятор, Люди и Параметры. Предлагается эффект и в всплывающих уведомлениях, но из-за тонких рамок он не так явно выражен.

С каждой сборкой Reveal встречается всё чаще. В Redstone 4 он появился в предустановленных приложениях и самой операционной системе. С релизом Redstone 5 он будет ещё более распространённым.

ГЛУБИНА, ПАРАЛЛАКС И ДВИЖЕНИЕ

Самые редкие из новых элементов Fluent Design. Движение пока вообще нигде в системе не встречалось, только в некоторых приложениях от Microsoft. Движение призвано повысить привлекательность работы при переключении между разными приложениями или объектами системы.
Эффекты Глубина и Параллакс можно увидеть в магазине, где крупные изображения могут прокручиваться медленнее, чем остальная страница. Это придаёт ощущение интерактивности. Небольшие эффекты можно встретить в приложениях «Музыка Groove» и «Кино и ТВ».
Приложение Фотографии с Story Remix содержит больше всего эффектов движения. Анимация придаёт приложению красоту и изящество. Microsoft предстоит ещё немало поработать над внедрением движения внутри операционной системы и в остальных приложениях, но пока результаты обнадеживают.

СВЕТЛЫЙ И ТЁМНЫЙ РЕЖИМЫ ИНТЕРФЕЙСА

Тёмный и светлый вариант не являются составной частью Fluent Design, но это достаточно крупное изменение, чтобы упомянуть его здесь. По умолчанию используется светлый вариант интерфейса Windows 10, который не блещет стабильностью внешнего вида. В нём есть тёмное меню Пуск, панель задач и центр уведомлений.

Тёмный режим применяется в проводнике и контекстных меню. Он пока далёк от идеального, многие приложения используют собственные оттенки, что портит единообразие внешнего вида. Будем надеяться, что Microsoft устранит расхождения.

FLUENT DESIGN ПРОДОЛЖАЕТ РАЗВИВАТЬСЯ

Распространение Fluent Design началось с прошлогодней версии Fall Creators Update, но до завершения ещё далеко. Microsoft утверждает, что на это может потребоваться несколько крупных релизов Windows 10. Первые элементы дизайна появились даже раньше, в обновлении Creators Update весной 2017 года. Теперь мы ждём Redstone 5 с новыми элементами.

Дизайн Windows 10 был не самой сильной стороной системы, но теперь разработчики стараются исправить этот недостаток.

Анализ Fluent Design System для Windows 10

Новый графический интерфейс Fluent Design System появится в осеннем обновлении Windows 10 Fall Creators Update. Он является одним из главных анонсов Microsoft этого года, связанных с системой Windows 10. Этот интерфейс изменит внешний вид Windows 10 и приложений в ней. В осеннем обновлении Windows 10 будет проведён очередной этап распространение нового интерфейса.

До появления Windows 10 Fall Creators Update осталось несколько месяцев, поэтому уже можно посмотреть, что нас ожидает в плане графики. Microsoft выделила пять ключевых аспектов распространения Fluent Design System: материал, свет, масштаб, глубину и движение. Все эти элементы будут представлены уже осенью, но не все они будут готовы на 100% до конца года.

Материал (акрил)

Акрил является наиболее распространённым элементом Fluent Design, который уже показался во множестве приложений и самой операционной системе. Это полупрозрачный материал, благодаря чему через находящееся в фокусе окно видны объекты за ним. В последних предварительных сборках акрил можно найти в нескольких местах, включая меню «Пуск» и центр уведомлений. Также он есть в приложении «Мои контакты» при выборе информации о контактах. Пока это единственные области операционной системы с акрилом.

Внутри приложений этот материал используется чаще, в том числе в предустановленных приложениях самой Microsoft. В первую очередь это программа «Музыка Groove», где акрил используется с выпущенного в этом году обновления Windows 10 Creators Update. Разработчикам предстоит ещё внести немало изменений в это приложение, в том числе убрать рамки.

Приложения «Калькулятор», «Люди», «Фотографии» и «Карты» также обладают этим материалом. В «Фотографии» и «Карты» акрил находится наверху окна, где располагается заголовок и меню навигации. Приложение «Люди» на 100% покрыто акрилом. «Калькулятор» в данный момент выглядит в Windows 10 наиболее привлекательным благодаря акрилу. Также его можно найти во всплывающих уведомлениях на рабочем столе.

Microsoft планирует принести акрил и в другие участки системы и приложения, например, в браузер Edge.

Свет (Reveal)

Reveal (Отображение) является ещё одним новым элементом дизайна, который следует за курсором, когда он проводится над определёнными элементами операционной системы и приложений. Сейчас Reveal есть только в нескольких местах системы и чаще используется внутри приложений. Этот элемент можно найти в центре уведомлений и хабе «Мои контакты», в списках и меню на основе XAML.

Microsoft планирует принести этот элемент в панель задач и меню «Пуск», но вряд ли это случится к осеннему обновлению. Если же это произойдет, появится заметное расхождение в работе элементов системы при проведении над ними курсором.

Reveal можно найти в некоторых частях браузера Edge, приложениях «Музыка Groove», «Калькулятор», «Люди» и «Параметры». Также элемент встречается в уведомлениях, но поскольку граница у них тонкая, эффект мало заметен.

Сейчас использование Reveal в Windows 10 кажется рандомным. До финальной версии осеннего обновление остаётся несколько недель, за которые Microsoft должна постараться исправить ситуацию.

Глубина и движение

Пока это самые редкие элементы дизайна. Элемент движения в Windows 10 пока не был обнаружен, но был замечен в паре приложений Microsoft. Этот элемент есть при переходе между разными участками системы или приложений.

Эффект глубины можно увидеть в магазине Windows Store, где некоторые крупные изображения прокручиваются медленнее, чем остальная страница. Этот эффект параллакса и придаёт странице ощущение движения. Также подобные незначительные эффекты можно встретить в приложениях «Музыка Groove» и «Кино и ТВ».

Новый дизайн Motion ярче всего проявляется в приложении «Фотографии» в функции Story Remix. Он приносит плавную анимацию, для которой и предназначается. Microsoft предстоит проделать много работы для широкого внедрения этих эффектов в систему и приложения.

Работа над Fluent Design продолжается

Как уже было сказано выше, на 100% ни один из этих элементов дизайна ко времени выхода осеннего обновления готов не будет. Microsoft даёт понять, что это длительный процесс, на его полное завершение потребуется несколько крупных релизов. Технически Windows 10 Fall Creators Update является вторым шагом в этом процессе после Creators Update ранее в этом году.

Хочется надеяться, что несколько следующих версий Windows 10 не будут некрасивым сочетанием старого и нового интерфейсов. Дизайн является одной из слабых сторон Windows 10, но при помощи Fluent Design System Microsoft хочет исправить этот недостаток.

Как в текущей стабильной сборке Windows 10 получить новые значки Fluent Design

Во втором полугодии, примерно в октябре Microsoft должна реализовать в стабильных сборках новый пользовательский интерфейс Windows 10, поучивший название Sun Valley . В рамках нового дизайна планируется замена системных значков, закругление углов кнопок и окон, визуальное улучшение центра уведомлений, смещение панели меню Пуск в центр экрана, добавление новых элементов и анимационных эффектов в системные приложения, а также переработку контекстных меню.

Оценить изменения грядущего обновления можно установив инсайдерскую сборку 21327 или выше, но некоторые элементы доступны для просмотра уже в стабильных сборках.

Вот простой трюк, позволяющий получить их прямо сейчас.

Скачайте по ссылке disk.yandex.ua/d/3NmVk5IkKKTjtg архив с файлами шрифтов и распакуйте их в любое удобное расположение.

Установите все три шрифта из контекстного меню, а затем перезагрузите компьютер или перезайдите в учетную запись.

Открыв приложение «Параметры», вы увидите, что внешний вид значков изменился.

Они стали более простыми и округлыми, соответствующими стилю Microsoft Fluent Design.

Файлы отмены не прилагаем, ведь установка шрифтов никак не влияет на функциональность операционной системы.

В крайнем случае найдите установленные шрифты в папке C:\Windows\Fonts , удалите их, а затем перезагрузите компьютер.

Стиль интерфейса Fluent Design в Windows 10 Spring Creators Update

Spring Creators Update продолжило процесс «переодевания» системного функционала Windows 10 в новый дизайн интерфейса Fluent Design. Этот процесс начался в Fall Creators Update – предыдущем, осеннем масштабном обновлении системы, и в ней обновлённой увидим улучшенный формат самого дизайна, а также его применение к новым системным областям. Что такое Fluent Design в концептуальном смысле, как он прогрессировал со времён предыдущего апдейта, и как его при необходимости отключить – обо всём этом ниже.

1. Что есть Fluent Design в концептуальном смысле?

Fluent Design – это эволюционное продолжение Modern UI , интерфейса в стиле жёсткого минимализма, созданного изначально для Windows 8. Идея Microsoft на резвом коне заехать на рынок планшетных компьютеров и отжать какую-то долю у Google и Apple требовала новых решений в плане создания программного обеспечения, оптимизированного под слабые аппаратные ресурсы планшетных устройств и сенсорное управление. Одним из таких решений, основным стал интерфейс Modern UI. Впоследствии он перекочевал в Windows 10. Для последней интерфейс был переработан под оконный формат, получил название Universal Windows Platform (UWP) и стал универсальной платформой для различных типов устройств на базе этой операционной системы.

Скудность внешнего оформления UWP-приложений «Десятки», по всей видимости, не оправдала планируемых доходов Microsoft от продажи сенсорных маломощных устройств, и компания решила «приодеть» современный функционал системы во что-то более стоящее. Таким стоящим решением стал впервые внедрённый в предыдущий апдейт системы стиль интерфейса Fluent Design.

Fluent Design – это:

• Уход от плоскости оформления Modern UI, сложная многослойная прорисовка элементов интерфейса;
• Более динамическое, более эффектное реагирование интерфейса на подведение пользователем курсора;
• Улучшенная адаптивность под разные размеры экранов.

Основной компонент Fluent Design – эффект акрила, применяемый к отдельным областям штатных приложений «Десятки». Это нечто новой инкарнации Aero Glass Windows 7 – стиль с такой же сутью придания внешнему виду приложений текстуры и свойств физического материала, но на этот раз не стекла, а акрила. Ну и, конечно же, в современном формате лёгкости и ненавязчивости дизайн-решений.

2. Fluent Design внутри Windows 10 Spring Creators Update

Эффект акрила в обновлённой «Десятке» стал более прозрачным, вместе с тем более примечательным. Примечательное акриловое одеяние получили штатные параметры, новые области Microsoft Edge, штатные карты. Панель часов и календаря стала отзывчиво, с эффектами свечения реагировать на подведение курсора – выделением области элементов вокруг него.

А при подведении курсора к определённой области кнопок калькулятора те услужливо прогибаются внутрь в ожидании нашего выбора. Сморится такой «бесконтактный массаж» потрясающе.

В тёмной теме оформления современного функционала «Десятки» эффект акрила чуть более прозрачный, сквозь него немного чётче просвечиваются фоновые объекты.

Напомним, в число штатного функционала, получившего Fluent Design первоочерёдно, с выпуском предыдущего апдейта вошли приложения «Скайп», «Калькулятор», «Фотографии», Paint 3D, «Кино и ТВ», «Запись голоса», «Музыка Groove», «Люди», «Будильник и часы», браузер Microsoft Edge.

3. Обратная сторона медали

Отрисовка эффекта акрила в окнах приложений требует аппаратных затрат. Дополнительная нагрузка ложится на процессор, а, соответственно, и на батарею портативных устройств. Лишние аппаратные затраты, вероятно, и являются причиной, почему акрил присутствует в интерфейсе приложений лишь частично – на боковых панелях, вверху окон, на всплывающих панелях. Даже в калькуляторе, окошко которого полностью покрыто эффектом акрила, а к кнопкам применена динамика реагирования, всё равно плоской и угрюмой остаётся область меню выбора режимов.

Fluent Design автоматически отключается при переходе ноутбуков и планшетов в режим экономии батареи. Но эффектный стиль интерфейса также можно отключить отдельно от режима экономии.

4. Как отключить Fluent Design

В настройках Windows 10 интерфейс Fluent Design как понятие нигде не встречается. В операционной системе фигурирует простой, понятный обывателю термин «эффекты прозрачности». Отключаются такие эффекты прозрачности в разделе параметров персонализации.

В параметрах Spring Creators Update отдельные настройки дисплея продублированы в разделе специальных возможностей, а к ним в довесок подобран ещё ряд опций по упрощению внешнего оформления Windows 10. Здесь также реализован тумблер отключения эффектов прозрачности. Плюс к этому, на совсем уж слабых устройствах дополнительно можем убрать анимацию и обои на рабочем столе.