Тип | Мова дизайну | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Автор | Microsoft | ||||||||||||
Розробник | Microsoft | ||||||||||||
Перший випуск | |||||||||||||
| |||||||||||||
|
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] що має подібний дизайн.
Ключові принципи або «блоки» Fluent (Світло, Глибина, Рух, Матеріал і Масштабування) відмовляються від плоскої концепції, визначеної Metro, і, зберігаючи чистий вигляд і відчуття, представлені Metro, Fluent оновлює візуальні ефекти Aero, підходу до дизайну, який був представлений у Windows Vista та Windows 7, включаючи розмиту напівпрозорість, анімовані шаблони паралакса, тіні, ефекти підсвічування після рухів вказівника миші чи жестів введення та «фальшиві матеріали», які в Metro було видалено.
Призначенням світла є привернення уваги та підсвічування інформації. Тому світло встановлює зв'язок між інтерфейсом користувача та курсором або вказівником. light establishes a relationship between the UI and the cursor or pointer.[7]
З WinUI 2.6, Microsoft припинила підтримку виділення, аби відповідати їхнім веб- та мобільним послугам, які не мають виділення.[10] Крім того, з випуском Windows 11, Microsoft поступово почала повністю прибирати використання світла, впроваджуючи зв'язність через анімації.[10]
Глибина додається до вмісту через нашарування по осі z. Глибини представлена через тіні та шарування Z-глибини.[11][12] Це дуже помітно в зміненому застосунку Office в 2019 році. В Windows 11 використання глибини розширене за рахунок накладання різних поверхонь з різною прозорістю матеріалу Mica.
Рух встановлює зв’язок між елементами інтерфейсу і забезпечує безперервність в користувацькому досвіді.[14]
Матеріали — це візуальні ефекти, що застосовуються до UX-поверхонь. У Fluent Design є два головних види матеріалу: оклюзійний та прозорий. Оклюзійні матріали, такі як акрил та mica (слюда), формують базу шарів під інтерактивними елементами інтерфейсу. Прозорі матеріали такі, як дим використовуються для підкреслення ефектних поверхонь:
Програми масштабуються в різних форм-факторах, розмірах дисплея та від 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 — це набір піктограм спроєктованих Microsoft для їхнього використання в продуктах та послугах разом із редизайном шрифту Segoe UI (Segoe UI Variable).[29] Піктограми тепер заокруглені порівнюючи із кутастими та прямими піктограмами епохи «Metro».[30]
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 використовує плоский варіант.