Fluent Design (укр.Плавний дизайн, кодове ім'я Project Neon[1]) — мова дизайну, спроєктована компанією Microsoft. Презентація відбулася 11 травня 2017 на конференції «Build» у Сієтлі. Плавний дизайн покликаний замінити Microsoft Design Language (більш відому як «Metro»), яка включає вказівки щодо дизайну та взаємодії, що використовуються в програмному забезпеченні, розробленому для всіх пристроїв і платформ Windows 10 та Windows 11. Система базується на п’яти ключових компонентах: світло (Light), глибина (Depth), рух (Motion), матеріальність (Material) і масштаб (Scale).[2] Нова мова дизайну включає більш помітне використання ефектів руху, глибини та напівпрозорості.[3]
Перехід на Fluent є довгостроковим проєктом; деякі аспекти дизайну почали з’являтися в Windows 10, починаючи з «Fall Creators Update», випущеного в жовтні 2017 року, а також оновлення системного програмного забезпечення Xbox One, випущеного разом з ним.[4][5] Пізніше було виявлено, що ця мова використовувалася у Windows 10X та на Windows 11,[6] що має подібний дизайн.
Порівняння з Metro та Aero
Ключові принципи або «блоки» Fluent (Світло, Глибина, Рух, Матеріал і Масштабування) відмовляються від плоскої концепції, визначеної Metro, і, зберігаючи чистий вигляд і відчуття, представлені Metro, Fluent оновлює візуальні ефекти Aero, підходу до дизайну, який був представлений у Windows Vista та Windows 7, включаючи розмиту напівпрозорість, анімовані шаблони паралакса, тіні, ефекти підсвічування після рухів вказівника миші чи жестів введення та «фальшиві матеріали», які в Metro було видалено.
Призначенням світла є привернення уваги та підсвічування інформації. Тому світло встановлює зв'язок між інтерфейсом користувача та курсором або вказівником. light establishes a relationship between the UI and the cursor or pointer.[7]
Підсвічування (Reveal Highlight): крім левітації, підсвічування виділяє приховані рамки поблизу таких об'єктів, як списки та кнопки навігаційного меню «гамбургер». Після вибору, наприклад клацання або торкання, швидко з’являється ефект білого круглого підсвічування.[7][8]
Фокус (Reveal Focus): фокусувальні елементи з підсвіченням рамки за допомогою показу фокусу.[9]
З WinUI 2.6, Microsoft припинила підтримку виділення, аби відповідати їхнім веб- та мобільним послугам, які не мають виділення.[10] Крім того, з випуском Windows 11, Microsoft поступово почала повністю прибирати використання світла, впроваджуючи зв'язність через анімації.[10]
Глибина
Глибина додається до вмісту через нашарування по осі z. Глибини представлена через тіні та шарування Z-глибини.[11][12] Це дуже помітно в зміненому застосунку Office в 2019 році. В Windows 11 використання глибини розширене за рахунок накладання різних поверхонь з різною прозорістю матеріалу Mica.
Нашарування: нашарування розділює програм на базу, яка є «полотном», та наповненням, яке плаває поверх бази. Наповнення можу бути представлене як неперервна поверхня або картка.[13]
Висота: висота є використанням відокремлення елементів від поверхні програми за допомогою використання тіней. Приклади включають контекстні меню, спливаючі вікна або підказки.[13]
Рух
Рух встановлює зв’язок між елементами інтерфейсу і забезпечує безперервність в користувацькому досвіді.[14]
Анімації додавання/видалення: список анімацій для вставки та видалення елементів із колекції.[14]
З'єднані анімації: з'єднаними анімаціями є переходи між елементами. Під час зміни вмісту з'являється елемент, який продовжує переміщатися по програмі.[15]
Перехід вмісту: застосовується тільки коли змінюється частина вмісту сторінки.[14]
Заглиблення: заглиблення застосовується при навігації вглиб застосунку. Наприклад, відображення більше інформації після вибору елемента.[16]
Згасання: поява та зникнення показують та прибирають елементи з поля зору.[14]
Паралакс:паралакс рухає об'єкти з різною швидкістю. Фон рухається повільніше, ніж вміст на ним. Наприклад, список гортатиметься швидше, ніж зображення фону, створюючи на додаток до руху ефект глибини.[17]
Віддача натиснення: натиснувши на елемент, він на мить відходить на задній план а далі повертається до початкової позиції. Прикладами віддачі натиску є живі плитки меню «Пуск», швидкі дії Центру дій та кнопки адресного рядка Microsoft Edge.[18]
Матеріал
Матеріали — це візуальні ефекти, що застосовуються до UX-поверхонь. У Fluent Design є два головних види матеріалу: оклюзійний та прозорий. Оклюзійні матріали, такі як акрил та mica (слюда), формують базу шарів під інтерактивними елементами інтерфейсу. Прозорі матеріали такі, як дим використовуються для підкреслення ефектних поверхонь:
Акрил: акриловий матеріал створює ефект напівпрозорості та розмиття щ невеликим ефектом шуму. Коли в Windows 10 акрил використовувався у велеиких поерхнях (наприклад, бокові панелі), то в Windows 11 основні поверхні перейшли акрилу на mica. Натомість, акрилові поверхні використовуються в тимчасових поверхнях, такі як контекстні меню, підказки або прогнози в рядку пошуку.
Mica: mica — це новий непрозорий матеріал, представлений в Windows 11, який набуває відтінку шпалер користувача. На відміну від акрилу, який був створений для тимчасових поверхонь, Mica створена для використання в довготривалих поверхнях. Використовуючи різні рівні прозорості, програми можуть створювати візуальну ієрархію.
Дим: дим був представлений в Windows 11. Це напівпрозорий чорний фон, незалежно від світлого чи темного режиму, для створення ієрархії між головним вікном і спливаючим вікном.
Масштабування
Програми масштабуються в різних форм-факторах, розмірах дисплея та від 0D до 3D. Елементи адаптуються до розміру екрана та доступні в кількох вимірах.[19] Основні елементи керування також класифікуються залежно від масштабу (наприклад, смуги прокручування та рядки введення, які адаптуються до різних методів виклику).[20][21]
Іконографія
Іконки програм
Нові іконки з акриловими матеріалами були створені для програм Microsoft починаючи з застосунків Office та Microsoft Edge на базі Chroimium.[22][23][24] Попередні версії кінцевих іконок були помічені у відео «Meet the New Icons for Office 365»,[25] а перед цим були помічені після оприлюднення Windows 10X до офіційного введення 12 грудня 2019 року.[26] Нові іконки почали з'являтися після оновлення програм через Microsoft Store починаючи із Пошти та Календаря.[27][28]
Segoe Fluent Icons
MDL2
Fluent
Segoe Fluent Icons — це набір піктограм спроєктованих Microsoft для їхнього використання в продуктах та послугах разом із редизайном шрифту Segoe UI (Segoe UI Variable).[29] Піктограми тепер заокруглені порівнюючи із кутастими та прямими піктограмами епохи «Metro».[30]
Fluent Emojis
Fluent
15 липня 2021 року Microsoft оголосила про повну зміну в дизайні їхньої бібліотеки емодзі для відповідності Fluent Design.[31] Прагнучи зробити Windows максимально узгодженою та доступною, 10 серпня 2022 рок корпорація Microsoft випустила понад 1500 емодзі у відкритий код.[32][33] Ці нові емодзі відрізняються від плоского та обведеного стилю попередньої бібліотеки емодзі, яка використовувалася в Windows 10, натомість створюють відчуття 3D Play-Doh.[31] Крім того, Microsoft заявила про свої плани анімувати більшість із них.[34] Тим час як анімовані емодзі можна побачити в таких програмах, як Microsoft Teams і Skype, Windows 11 використовує плоский варіант.
