Fluent Design System

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до навігації Перейти до пошуку
Fluent Design System
Тип Мова дизайну
Автор Microsoft
Розробник Microsoft
Перший випуск

2017; 7 років тому (2017)

Випуск(и)
Платформа ARM, x86-64
Операційна система Android, iOS, macOS, Windows, браузер
Мова програмування Objective-C, C++, C#, TypeScript, Kotlin, Swift, JavaScript
Ліцензія Ліцензія MIT
Репозиторій
Більше інформації
Вебсайт developer.microsoft.com/fluentui

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 було видалено.

Aero
Metro
Fluent

Особливості[ред. | ред. код]

Світло[ред. | ред. код]

Призначенням світла є привернення уваги та підсвічування інформації. Тому світло встановлює зв'язок між інтерфейсом користувача та курсором або вказівником. 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 використовує плоский варіант.

Примітки[ред. | ред. код]

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

Див. також[ред. | ред. код]

Джерела[ред. | ред. код]

Отримано з https://uk.wikipedia.org/w/index.php?title=Fluent_Design_System&oldid=41936093