Fluent Design (, кодове ім'я Project Neon) — мова дизайну, спроєктована компанією Microsoft. Презентація відбулася 11 травня 2017 на конференції «Build» у Сієтлі. Плавний дизайн покликаний замінити Microsoft Design Language (більш відому як «Metro»), яка включає вказівки щодо дизайну та взаємодії, що використовуються в програмному забезпеченні, розробленому для всіх пристроїв і платформ Windows 10 та Windows 11. Система базується на п’яти ключових компонентах: світло (Light), глибина (Depth), рух (Motion), матеріальність (Material) і масштаб (Scale). Нова мова дизайну включає більш помітне використання ефектів руху, глибини та напівпрозорості.

Перехід на Fluent є довгостроковим проєктом; деякі аспекти дизайну почали з’являтися в Windows 10, починаючи з «Fall Creators Update», випущеного в жовтні 2017 року, а також оновлення системного програмного забезпечення Xbox One, випущеного разом з ним. Пізніше було виявлено, що ця мова використовувалася у Windows 10X та на Windows 11, що має подібний дизайн.

Порівняння з Metro та Aero Ключові принципи або «блоки» Fluent (Світло, Глибина, Рух, Матеріал і Масштабування) відмовляються від плоскої концепції, визначеної Metro, і, зберігаючи чистий вигляд і відчуття, представлені Metro, Fluent оновлює візуальні ефекти Aero, підходу до дизайну, який був представлений у Windows Vista та Windows 7, включаючи розмиту напівпрозорість, анімовані шаблони паралакса, тіні, ефекти підсвічування після рухів вказівника миші чи жестів введення та «фальшиві матеріали», які в Metro було видалено.

Особливості Світло Призначенням світла є привернення уваги та підсвічування інформації. Тому світло встановлює зв'язок між інтерфейсом користувача та курсором або вказівником.

Підсвічування (Reveal Highlight): крім левітації, підсвічування виділяє приховані рамки поблизу таких об'єктів, як списки та кнопки навігаційного меню «гамбургер». Після вибору, наприклад клацання або торкання, швидко з’являється ефект білого круглого підсвічування. Фокус (Reveal Focus): фокусувальні елементи з підсвіченням рамки за допомогою показу фокусу.

З WinUI 2.6, Microsoft припинила підтримку виділення, аби відповідати їхнім веб- та мобільним послугам, які не мають виділення. Крім того, з випуском Windows 11, Microsoft поступово почала повністю прибирати використання світла, впроваджуючи зв'язність через анімації.

Глибина Глибина додається до вмісту через нашарування по осі z. Глибина представлена через тіні та шарування Z-глибини. Це дуже помітно в зміненому застосунку Office в 2019 році. В Windows 11 використання глибини розширене за рахунок накладання різних поверхонь з різною прозорістю матеріалу Mica.

Нашарування: нашарування розділює програми на базу, яка є «полотном», та наповненням, яке плаває поверх бази. Наповнення можу бути представлене як неперервна поверхня або картка. Висота: висота є використанням відокремлення елементів від поверхні програми за допомогою використання тіней. Приклади включають контекстні меню, спливаючі вікна або підказки.

Рух Рух встановлює зв’язок між елементами інтерфейсу і забезпечує безперервність в користувацькому досвіді.

Анімації додавання/видалення: список анімацій для вставки та видалення елементів із колекції. З'єднані анімації: з'єднаними анімаціями є переходи між елементами. Під час зміни вмісту з'являється елемент, який продовжує переміщатися по програмі. Перехід вмісту: застосовується тільки коли змінюється частина вмісту сторінки. Заглиблення: заглиблення застосовується при навігації вглиб застосунку. Наприклад, відображення більше інформації після вибору елемента. Згасання: поява та зникнення показують та прибирають елементи з поля зору. Паралакс: паралакс рухає об'єкти з різною швидкістю. Фон рухається повільніше, ніж вміст на ним. Наприклад, список гортатиметься швидше, ніж зображення фону, створюючи на додаток до руху ефект глибини. Віддача натиснення: натиснувши на елемент, він на мить відходить на задній план а далі повертається до початкової позиції. Прикладами віддачі натиску є живі плитки меню «Пуск», швидкі дії Центру дій та кнопки адресного рядка Microsoft Edge.

Матеріал Матеріали — це візуальні ефекти, що застосовуються до UX-поверхонь. У Fluent Design є два головних види матеріалу: оклюзійний та прозорий. Оклюзійні матеріали, такі як акрил та mica (слюда), формують базу шарів під інтерактивними елементами інтерфейсу. Прозорі матеріали такі, як дим використовуються для підкреслення ефектних поверхонь:

Акрил: акриловий матеріал створює ефект напівпрозорості та розмиття з невеликим ефектом шуму. Коли в Windows 10 акрил використовувався у велеиких поерхнях (наприклад, бокові панелі), то в Windows 11 основні поверхні перейшли акрилу на mica. Натомість, акрилові поверхні використовуються в тимчасових поверхнях, такі як контекстні меню, підказки або прогнози в рядку пошуку. Mica: mica — це новий непрозорий матеріал, представлений в Windows 11, який набуває відтінку шпалер користувача. На відміну від акрилу, який був створений для тимчасових поверхонь, Mica створена для використання в довготривалих поверхнях. Використовуючи різні рівні прозорості, програми можуть створювати візуальну ієрархію. Дим: дим був представлений в Windows 11. Це напівпрозорий чорний фон, незалежно від світлого чи темного режиму, для створення ієрархії між головним вікном і спливаючим вікном.

Масштабування Програми масштабуються в різних форм-факторах, розмірах дисплея та від 0D до 3D. Елементи адаптуються до розміру екрана та доступні в кількох вимірах. Основні елементи керування також класифікуються залежно від масштабу (наприклад, смуги прокручування та рядки введення, які адаптуються до різних методів виклику).

Іконографія

Іконки програм

Нові іконки з акриловими матеріалами були створені для програм Microsoft починаючи з застосунків Office та Microsoft Edge на базі Chromium. Попередні версії кінцевих іконок були помічені у відео «Meet the New Icons for Office 365», а перед цим були помічені після оприлюднення Windows 10X до офіційного введення 12 грудня 2019 року. Нові іконки почали з'являтися після оновлення програм через Microsoft Store починаючи із Пошти та Календаря.

Segoe Fluent Icons

Segoe Fluent Icons — це набір піктограм спроєктованих Microsoft для їхнього використання в продуктах та послугах разом із редизайном шрифту Segoe UI (Segoe UI Variable). Піктограми тепер заокруглені порівнюючи із кутастими та прямими піктограмами епохи «Metro».

Fluent Emojis

15 липня 2021 року Microsoft оголосила про повну зміну в дизайні їхньої бібліотеки емодзі для відповідності Fluent Design. Прагнучи зробити Windows максимально узгодженою та доступною, 10 серпня 2022 рок корпорація Microsoft випустила понад 1500 емодзі у відкритий код. Ці нові емодзі відрізняються від плоского та обведеного стилю попередньої бібліотеки емодзі, яка використовувалася в Windows 10, натомість створюють відчуття 3D Play-Doh. Крім того, Microsoft заявила про свої плани анімувати більшість із них. Тим часом як анімовані емодзі можна побачити в таких програмах, як Microsoft Teams і Skype, Windows 11 використовує плоский варіант.

Примітки

Див. також Flat UI Design Material Design Windows Aero Metro

Джерела