Fluent design windows 11 — Ваш верный помощник с OS Windows

Windows

Create frictionless Fluent experiences on the best Windows yet. Windows 11 incorporates Fluent’s design language and principles for a cohesive look and feel that’s uniquely Microsoft.

To get the building blocks for crafting Windows experiences, use WinUI. These components incorporate Fluent’s design language, so you can be confident you’re building great experiences within the Fluent ecosystem.

Resources

Windows UI kit

WinUI 3 documentation

Источник

Windows 11 представляет новый дизайн для операционной системы и приложений. Fluent Design от Microsoft — язык дизайна, который развивается с каждым выпуском Windows. Это коснулось каждой части Windows и приложений Microsoft.

В Windows 11 Microsoft переосмысливает свой подход Fluent Design и внедряет новый язык дизайна во все свои приложения и окна.

В рамках редизайна Fluent Design в Windows 11 также добавлен новый дизайнерский материал под названием «Mica». Слюда — это динамический материал, который сближает тему и обои рабочего стола, и это заметно, когда вы просматриваете такие приложения, как Параметры или Edge. Материал Mica закрашивает фон нескольких окон приложений и Параметров для создания визуальной иерархии.

В Windows 11 Mica будет наиболее распространенным элементом дизайна и будет отображаться во всех приложениях и в самой ОС. Материал Mica — это не прозрачность. Вместо этого он позволяет фону рабочего стола за окном фокусироваться на размытии.

В предварительных сборках вы можете заметить материал Mica в проводнике, Параметрах, Microsoft Teams и некоторых других местах.

Акрил Fluent Design плотно полупрозрачен, и его эффект прозрачности виден за окнами приложений или фоном рабочего стола. С другой стороны, Mica обновляет окна приложений, добавляя темы и обои рабочего стола, а также раскрашивая фон.

В новом сеансе вопросов и ответов, Microsoft объяснила, что материал Mica не сохраняет обои рабочего стола в каждом кадре. Вместо этого он «размывает изображение только один раз», чтобы обеспечить лучшую производительность и удобство, чем акрил.

Производительность действительно является для нас главным приоритетом, и мы хотим, чтобы все эти забавные новые функции (слюда и закругленные углы) были очень быстрыми и не влияли на ОС. Например, Mica была специально разработана для более низкопроизводительных ПК.

Для закругленных углов мы оптимизировали производительность рендеринга, чтобы вы не заметили никакой разницы по сравнению с квадратными углами — заявили в компании.

Microsoft не копирует Apple

Некоторые люди считают, что элементы дизайна Windows 11, такие как центрированное меню «Пуск» и закругленные углы, вдохновлены macOS. По мнению Microsoft, это неправда.

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

Вы знаете, что это все время меняется, потому что мы просто используем устройства по-новому и комбинируем их… «Вы знаете, что они могут показаться знакомыми, но наша цель состоит в том, чтобы эти вещи действительно казались естественными, нормальными — добавил он.

Реализация элементов управления WinUI, Mica и новых элементов Fluent Design началась с Windows 11 версии 21H2 (обновление за октябрь 2021 г.) , но мы далеки от этого.

Windows находится в процессе большой модернизации, и потребуется несколько обновлений, чтобы полностью реализовать потенциал Fluent Design.

Источник

In an interesting announcement, Microsoft recently provided a teaser about the future aesthetic direction of its Windows operating system. As covered in an article on XDA Developers, the company highlighted the development of a new design language dubbed «Fluent,» which seeks to integrate a more cohesive and engaging visual experience across its software platforms, particularly in Windows 11.

Картинка с сайта: windowsforum.com

The Driving Force Behind Fluent

Developers in the operating system arena pour significant effort into crafting a user interface (UI) that remains consistent across applications. This uniformity enhances user experience, making it easier for users to identify Microsoft-associated apps and services. The aim is to create a distinct «vibe» that resonates with users. Microsoft is poised to roll out an updated look that aligns with this ethos, as indicated by previews showcasing the upcoming Fluent design style, expected to debut in future system updates.
Microsoft’s Fluent design will emphasize several key elements:

Humanity: Striving to create a more relatable and end-user-centered interface.
Color and Gradients: Utilizing more vibrant color palettes and sleek transitions.
Dimension: Introducing depth to the UI to make interactions feel more intuitive and engaging.
Sophistication: Maintaining a polished and professional aesthetic.
Playfulness: Infusing a sense of fun in the user experience.

The incorporation of these elements aims not only to modernize the visual aspects of Windows but also to tackle a significant concern among users—cognitive overload. Microsoft’s previous design strategies often led to confusion due to repetitive elements that compounded the cognitive load during user interaction.

Addressing Cognitive Burden

One of the primary motivations driving this overhaul is Microsoft’s desire to minimize cognitive strain. The company acknowledged that its earlier design philosophies sometimes duplicated written elements, leading to unnecessary mental effort for users. By enhancing the alignment between illustrations and written content, Microsoft aims to deliver a more streamlined experience that resonates well with users while reducing confusion. The Fluent design philosophy could see application across a range of Microsoft products, potentially including both core Windows functionality and various applications in the Microsoft ecosystem. However, while we have glimpses of its direction, the specifics concerning the timing and extent of implementation are still shrouded in uncertainty.

What’s Next for Windows Users?

The forthcoming Windows 11 2024 Update promises a wealth of enhancements. Alongside Fluent, this update is expected to include a variety of performance improvements and support optimizations for ARM-based devices, indicating Microsoft’s commitment to broadening the operational capabilities of Windows. As a member of the Windows community, it’s important to stay tuned for these developments. Not only could this new design language shape the look and feel of Windows applications, but it could also redefine how users interact with their operating system in practical terms.
In the category of curiosity, one could ask—how will these design changes affect third-party applications that currently thrive on their own visual styles? Will the Fluent design encourage more uniformity, or will it spur adaptations where independent developers may find opportunities to innovate around and enhance this new aesthetic?

Recap

In summary, as Microsoft takes steps toward refreshing the Windows 11 visual landscape with its Fluent design philosophy, much is left to anticipation. Users can look forward to a more engaging and less cognitively taxing experience, ideally harmonizing visuals with usability. For those eager to stay ahead of the curve, we encourage exploration of customization options in Windows 11 until the full implementation of these new design principles catapults into the digital workspace.
Feel free to share your thoughts on this proposed design overhaul in the comments! What are your views on the potential cognitive impact of the new visuals? Are you excited about the promised updates on Windows 11, or do you think previous issues are still unresolved?
Source: XDA Microsoft gives a sneak peek into how Windows may look in the future

Источник

</div>

High 74° F <br />

Low 57° F<br />

</div>

Ann Arbor, <br />Michigan<br /><br />

</div>

Tomorrow 74° <i class=»ms-Icon ms-Icon—Sunny» aria-hidden=»true«></i>

</div>

Wednesday 72° <i class=»ms-Icon ms-Icon—Rain» aria-hidden=»true«></i>

</div>

Thursday 72° <i class=»ms-Icon ms-Icon—Fog» aria-hidden=»true«></i>

</div>

<div class=»weatherTemperature«>65° F<br /><small>Cloudy</small></div>

</div>

</div>

Pinned

</div>

<defs>

</radialGradient>

</radialGradient>

</radialGradient>

</radialGradient>

</linearGradient>

</linearGradient>

</defs>

</svg>

Edge

</div>

Word

</div>

Excel

</div>

PowerPoint

</div>

Outlook

</div>

</svg>

Calendar

</div>

</radialGradient>

</radialGradient>

</svg>

Xbox

</div>

</svg>

CodePen

</div>

</svg>

Netflix

</div>

Teams

</div>

Access

</div>

Office

</div>

OneDrive

</div>

OneNote

</div>

Project

</div>

SharePoint

</div>

</linearGradient>

</svg>

Spotify

</div>

</svg>

Photoshop

</div>

Recommended

</div>

</svg>

</div>

Adobe Photoshop <br /> <span class=»lightText«>Recently added</span>

</div>

</div>

2021 Monthly Expenses <br /> <span class=»lightText«>17m ago</span>

</div>

</svg>

</div>

Windows 11 Fluent Design <br /> <span class=»lightText«>2h ago</span>

</div>

</div>

Never Gonna Give You Up<br /> <span class=»lightText«>12h ago</span>

</div>

</div>

Josh Salazar

</div>

</div>

<span class=»lightText«><i class=»ms-Icon ms-Icon—QuickNoteSolid headerTitleIcon» aria-hidden=»true«></i><span class=»headerTitleText«> Welcome</span></span>

</div>

</g>

</svg>

 Windows 11

</div>

<p>Welcome to my build of the Windows 11 UI. I tried my best to recreate the Windows 11 UI based on the Fluent Design documentation and the recently released Windows 11 preview video. At the time of making this, that’s all I had to go off. I’m curious to see how far I missed the mark once Windows 11 is publicly available. Have fun and play around!</p>

<p>Here are some things you can explore:</p>

<ul>

<li>

Check the weather by clicking the cloud in the taskbar

</li>

<li>

Open the Windows start menu

</li>

<li>

Drag windows around, close them, minimize them. Window states will update, z-indexes will update, windows will animate in and out depending on if you’re restoring the window, closing the window, or minimizing the window.

</li>

<li>

COMING SOON: Shut the computer down in the start menu

</li>

<li>

COMING SOON: Open the settings from the taskbar and switch to a dark theme

</li>

<li>

TO DO: Polish! It could use some buffing around the edges to get it more in-line with Fluent Design.

</li>

<li>

TO DO: Clean-up code. It’s a mess. I’ll need to do this before I get dark / light mode working.

</li>

</ul>

</div>

<span class=»lightText«><i class=»ms-Icon ms-Icon—Settings headerTitleIcon» aria-hidden=»true«></i><span class=»headerTitleText«> Settings</span></span>

</div>

</div>

Josh Salazar <br /> <small class=»lightText«>joshua.a.salazar@gmail.com</small>

</div>

<i class=»ms-Icon ms-Icon—System» aria-hidden=»true«></i> System

</div>

<i class=»ms-Icon ms-Icon—InternetSharing» aria-hidden=»true«></i> Bluetooth

</div>

<i class=»ms-Icon ms-Icon—Globe» aria-hidden=»true«></i> Network & internet

</div>

<i class=»ms-Icon ms-Icon—Brush» aria-hidden=»true«></i> Personalization

</div>

<i class=»ms-Icon ms-Icon—AppIconDefaultAdd» aria-hidden=»true«></i> Apps

</div>

<i class=»ms-Icon ms-Icon—People» aria-hidden=»true«></i> Account

</div>

<i class=»ms-Icon ms-Icon—Clock» aria-hidden=»true«></i> Time & language

</div>

<i class=»ms-Icon ms-Icon—Game» aria-hidden=»true«></i> Gaming

</div>

<i class=»ms-Icon ms-Icon—EaseOfAccess» aria-hidden=»true«></i> Accessibility

</div>

<i class=»ms-Icon ms-Icon—Shield» aria-hidden=»true«></i> Privacy & security

</div>

<i class=»ms-Icon ms-Icon—Sync» aria-hidden=»true«></i> Windows update

</div>

</div>

Select a theme to apply

</div>

</div>

Background <br />

<small class=»lightText«>Background image, color, slideshow</small>

</div>

Colors <br />

<small class=»lightText«>Background image, color, slideshow</small>

</div>

Themes <br />

<small class=»lightText«>Background image, color, slideshow</small>

</div>

Themes <br />

<small class=»lightText«>Background image, color, slideshow</small>

</div>

</g>

</svg>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

65°

</div>

</div>

Источник

Привет, друзья. В этой публикации затронем интереснейший вопрос: влияют ли эффекты нового системного интерфейса Windows 11 на её производительность. В Windows 7, 8.1 и 10 при отключении визуальных эффектов можем заметить резко возросшую отзывчивость интерфейса этих систем. Особенно разница в быстродействии заметна при работе с современным функционалом и приложениями в Windows 10: при отключении эффектов Fluent Design, где акцентным является ресурсоёмкий эффект акриловой прозрачности, операционная система чувствует себя гораздо легче. Новая Windows 11 же вся соткана из эффектов: у неё скруглены углы окон и повсеместно реализованы эффекты Fluent Design. Совершенно резонно задаться вопросом, а как всё это сказывается на производительности. Не в угоду ли быстродействию операционной системы реализован весь её шик? Давайте узнаем, что по этому поводу заявляет Microsoft, и покопаемся немного в сути вопроса.

Как утверждает компания Microsoft, ни один из эффектов системного интерфейса Windows 11 не влияет на производительность операционной системы. При создании 11-й Windows Microsoft упорно делала акцент на быстродействии операционной системы и продумала всё так, чтобы пользователю не пришлось выбирать между производительностью и привлекательностью интерфейса. На каком бы компьютерной устройстве мы ни работали, нам не придётся отказываться от эффектов или анимации Windows 11. Можно зайти в приложение «Параметры» по пути «Специальные возможности > Визуальные эффекты», отключить эффекты прозрачности или анимацию и лично убедиться, что никаких изменений в быстродействии системы не произошло.

Можем спокойно наслаждаться всеми красотами внешнего оформления Windows 11 и не думать о высвобождении ресурсов компьютера. В чём же секрет красоты не за счёт производительности Windows 11?

Microsoft утверждает, что закруглённые углы окон никак не отразятся на быстродействии Windows 11, ибо в этой операционной системе оптимизирована производительность рендеринга.

По ощущениям системные приложения в Windows 11 запускаются быстрее, чем в Windows 10. Построенная на новой платформе пользовательского интерфейса системная оболочка Windows 11 более лёгкая и шустрая, и она даёт свои бонусы в отдельных задачах. Однако работают системные приложения точно так же, как в Windows 10. Сторонние ресурсоёмкие программы и игры в Windows 11 запускаются и работают так же, как в Windows 10. Такие обусловлены загрузкой своих программных ресурсов с диска или сети, и влияние на них системного интерфейса и его эффектов незначительно.

Системный интерфейс Windows 11 построен на платформе современного пользовательского интерфейса WinUI 2.6 и WinUI 3. Платформа WinUI 3 создана с целью обновления программ Win32 в Windows 10 и 11, это расширенный интерфейс, фактически полноценная среда UX, она открывает перед разработчиками широкие возможности по реализации в интерфейсе приложений новых стилей и эффектов Fluent Design. Один из новых таких эффектов Fluent Design в Windows 11 – эффект слюды Mica. Microsoft специально его разработала в качестве альтернативы эффекту акриловой прозрачности, используемой в Windows 10, эффект слюды менее ресурсоёмкий.

Эффект слюды Mica — это непрозрачный динамический материал фонового оформления приложений. Он создаёт слабый эффект размытия в фоне и позволяет нам фокусироваться на содержимом приложений. В основе он зависит от системной светлой или тёмной темы и картинки на рабочем столе. И немного играет красками зависимо от того, что находится сзади окна приложения.

При перемещении приложений с эффектом Mica материал немного меняет расцветку размытия, но в сути остаётся стилистически привязанным к теме и обоям рабочего стола.

Эффект слюды активен только при активности окна приложения. Если окно неактивно, эффект исчезает.

Mica создаёт образец фона единожды при смене обоев или системной светлой/тёмной темы. Этот эффект не сохраняет картинки обоев в каждом кадре, как эффект акрила. Поэтому эффект Mica способен обеспечить лучшую производительность, чем эффект акрила. А выглядит Mica не менее стильно и эффектно, чем акрил. Правда, заметен Mica только в тёмной теме оформления, в светлой его сложно разглядеть.

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

Вот, друзья, почему акриловая прозрачность в Windows 11 реализована только в меню «Пуск», панели задач, контекстном меню на рабочем столе и представлении задач.

В функциональных же системных приложениях – проводнике, системных параметрах — применятся скромный в плане потребления ресурсов компьютера эффект слюды Mica. В проводнике, кстати, и вовсе он используется только в шапке окна.

Немногий арсенал системных приложений с реализацией Mica недавно пополнил обновлённый скриншотер «Ножницы».

Повсеместному применению этого эффекта Microsoft даёт зелёный свет: Mica будет присутствовать во многих современных приложениях Windows 11, также этот эффект в будущем планируется к внедрению в браузер Microsoft Edge для большего соответствия стилю 11-й Windows.

Источник