Fluent Design System
 | |||||||||||||
 | |||||||||||||
| Тип | Мова дизайну | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Автор | Microsoft | ||||||||||||
| Розробник | Microsoft | ||||||||||||
| Перший випуск | 2017 | ||||||||||||
| |||||||||||||
| |||||||||||||
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]
- Підсвічування (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 — це набір піктограм спроєктованих 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 використовує плоский варіант.
- ↑ Warren, Tom (11 травня 2017). Fluent Design is Microsoft's new Metro UI for Windows and more. The Verge (амер.). Процитовано 20 листопада 2022.
- ↑ Microsoft Design. Microsoft Design (англ.). Процитовано 20 листопада 2022.
- ↑ Staff, Ars (11 травня 2017). New Windows look and feel, Neon, is officially the “Microsoft Fluent Design System”. Ars Technica (амер.). Процитовано 20 листопада 2022.
- ↑ Warren, Tom (16 жовтня 2017). Microsoft shows off its Fluent Design changes to Windows 10. The Verge (амер.). Процитовано 20 листопада 2022.
- ↑ Staff, Ars (15 травня 2017). Microsoft’s Fluent Design System threatens to make Windows look good. Ars Technica (амер.). Процитовано 20 листопада 2022.
- ↑ Warren, Tom (11 лютого 2020). A first look at Microsoft’s new Windows 10X operating system for dual screens. The Verge (амер.). Процитовано 29 січня 2023.
- ↑ а б mijacobs. Reveal highlight - UWP applications | Microsoft Docs. docs.microsoft.com (амер.). Процитовано 10 вересня 2023.
- ↑ Blog, Windows Developer (4 серпня 2017). Creating Materials and Lights in the Visual Layer. Windows Developer Blog (амер.). Процитовано 4 квітня 2023.
- ↑ cphilippona (24 вересня 2020). Reveal focus - UWP applications | Microsoft Docs. docs.microsoft.com (амер.). Процитовано 30 березня 2018.
- ↑ а б Question: Is reveal possible to return? · Issue #4011 · microsoft/microsoft-ui-xaml. GitHub (англ.). Процитовано 15 липня 2021.
- ↑ Bowden, Zac (19 травня 2017). Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System. Windows Central. Процитовано 22 грудня 2017.
- ↑ Joyce, Kevin (20 травня 2017). Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices. VRFocus (амер.). Архів оригіналу за 13 серпня 2020. Процитовано 22 грудня 2017. [Архівовано 2020-08-13 у Wayback Machine.]
- ↑ а б hickeys. Layering and elevation in Windows 11 - Windows apps. learn.microsoft.com (амер.). Процитовано 4 квітня 2023.
- ↑ а б в г jwmsft (17 травня 2022). Motion for Windows apps - Windows apps. learn.microsoft.com (амер.). Процитовано 23 вересня 2023.
- ↑ jwmsft (17 травня 2022). Connected animation - Windows apps. learn.microsoft.com (амер.). Процитовано 23 вересня 2023.
- ↑ jwmsft (17 травня 2022). Page transitions - Windows apps. learn.microsoft.com (амер.). Процитовано 23 вересня 2023.
- ↑ jwmsft (17 травня 2022). Use parallax to add depth and movement to your app. - Windows apps. learn.microsoft.com (амер.). Процитовано 23 вересня 2023.
- ↑ jwmsft (24 червня 2021). Pointer click animations - Windows apps. learn.microsoft.com (амер.). Процитовано 23 вересня 2023.
- ↑ Verma, Adarsh (12 травня 2017). What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?. Fossbytes (амер.). Процитовано 25 вересня 2023.
- ↑ jwmsft (24 жовтня 2022). Scroll viewer controls - Windows apps. learn.microsoft.com (амер.). Процитовано 25 вересня 2023.
- ↑ updated, Mauro Huculak last (29 червня 2017). What's new with Microsoft Fluent Design System 'wave one' for Windows 10. Windows Central (англ.). Процитовано 25 вересня 2023.
- ↑ Friedman, Jon (29 листопада 2018). Redesigning the Office App Icons to Embrace a New World of Work. Microsoft Design (англ.). Процитовано 22 квітня 2023.
- ↑ Warren, Tom (2 листопада 2019). Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer. The Verge (амер.). Процитовано 22 квітня 2023.
- ↑ hickeys. Design guidelines for Windows app icons - Windows apps. learn.microsoft.com (амер.). Процитовано 22 квітня 2023.
- ↑ Meet the new icons for Office 365 (укр.), процитовано 22 квітня 2023
- ↑ #MicrosoftEvent Live (укр.), процитовано 22 квітня 2023
- ↑ Koehn, Christina (20 лютого 2020). Iconic Icons: Designing the World of Windows. Microsoft Design (англ.). Процитовано 22 квітня 2023.
- ↑ Warren, Tom (20 лютого 2020). Microsoft rolls out colorful new Windows 10 icons. The Verge (амер.). Процитовано 22 квітня 2023.
- ↑ hickeys. Iconography in Windows 11 - Windows apps. learn.microsoft.com (амер.). Процитовано 22 квітня 2023.
- ↑ hickeys. Segoe MDL2 Assets icons - Windows apps. learn.microsoft.com (амер.). Процитовано 22 квітня 2023.
- ↑ а б New Fluent Emoji Designs From Microsoft. Emojipedia (англ.). 15 липня 2021. Процитовано 22 квітня 2023.
- ↑ Carrasqueira, João (10 серпня 2022). Microsoft open sources its Windows 11 emoji for everyone to use. XDA Developers (англ.). Процитовано 22 квітня 2023.
- ↑ Design, Microsoft (10 серпня 2022). Designing in the Open(Source). Microsoft Design (англ.). Процитовано 22 квітня 2023.
- ↑ Design, Microsoft (22 листопада 2021). Emotionality at work. Microsoft Design (англ.). Процитовано 22 квітня 2023.
- Fluent Design System. Microsoft. Архів оригіналу за 1 березень 2018. Процитовано 31 серпень 2017.