Навіщо нам Fluent design?

У травні минулого року Microsoft представила систему оформлення графічних інтерфейсів Fluent design System. Це мова дизайну UI з новітнім художнім стилем та концепціями, яка, за словами Microsoft, стане відповіддю на швидкий розвиток сучасного досвіду взаємодії. Вона повинна повністю замінити мову дизайну Metro, яка застосовувалась Майкрософтами для розробки інтерфейсів Metro UI для сімейства Windows: Windows 8, Windows 10, Windows Phone, Xbox One, для веб-сайту компанії та інших відносно нових продуктів.

Так, стиль та принципи Metro UI дещо застаріли — довгі шрифти та прямокутники по всьому інтерфейсу вже не відповідають вимогам сучасних цифрових пристроїв, та й гуглівський Material Design сьогодні виглядає набагато веселіше та перспективніше, але чи потрібні нам такі кардинальні зміни? Fluent Design справді покликаний покращити нашу взаємодію із сьогоднішніми та завтрашніми пристроями чи це лише своєрідне бачення майбутнього Майкрософтами?

Fluent Design System презентували як новий стиль майбутнього дизайну взаємодії, в якому закладені принципи, що допоможуть проектувати якісні інтерфейси для сучасних та майбутніх пристроїв із сенсорами, віртуальною та доповненою реальністю. Нова філософія дизайну від Microsoft має 5 особливостей:

Світло. Елементи інтерактивного інтерфейсу підсвічуються для привернення уваги користувача. Курсор тепер є невеликим джерелом освітлення, яке поширюється на наведені елементи інтерфейсу. Таке світло виділяє допоміжні деталі елементів тоді, коли користувач у них зацікавлений.



Правильно направлене світло, як в кінематографі, так і в дизайні, створює атмосферу та відчуття місця.

Глибина. Розміщення елементів в просторі на різних рівнях від користувача для створення ілюзії фізичного середовища.


Цей компонент виводить юзера за межі площини дизайну за допомогою інструмента “перспективний паралакс”, матеріалу "акрил" та об’ємного звуку.

паралакс

акрил

Рух. Створює динамічність елементів при взаємодії користувача з інтерфейсом, не відволікаючи його увагу. Компонент забезпечує живий UI, в якому всі елементи рухаються відносно один одного. Рух елементів покликаний утримувати увагу користувача і показувати йому щось активне, з чим можна взаємодіяти.


Матеріальність. Цей компонент відповідає за реалістичний, матеріалізований вигляд всього інтерфейсу. Замість кольорів використовуються матеріали, які передають теплоту елементів і роблять їх більш природними. Також від їхніх фізичних характеристик залежить рух елементів на екрані.


Масштабування. Елементи адаптуються під різні рівні інтерфейсів: від екрана смартфона до системи віртуальної чи доповненої реальності. Компонент повинен покращити досвід 2D дизайну завдяки новим технологіям. Так, наприклад, замість затемнення кольорів, об’ємність елементів буде створюватися підсвіченням пікселів у потрібних місцях, а правильний (реалістичний розмір) елементів в цифрових середовищах AR та VR вдосконалить досвід взаємодії. Правильний розмір віртуальних об'єктів має першочергове значення для створення гарного інтерфейсу від першої особи.


Варто зазначити, що деякі з цих особливостей не є нововеденням у цифровому та веб-дизайні. Принципи матеріальності та руху були розроблені компанією Google і є основними компонентами Material Design, а глибина використовується у веб-дизайні з 2011 року. Але у випадку з Fluent design ці принципи модернізованіші та мають інші властивості: реалістичний вигляд досягається не тільки залученням правдоподібних елементів, а й загальним природним виглядом усього інтерфейсу завдяки матеріалам та текстурам, а глибина досягається введенням паралаксу в середину окремих елементів та об’ємним звуком для орієнтації в цифровому просторі. Тим не менш, Microsoft зазначили, що інтерфейси в стилі Fluent design повинні бути гармонійними, інтуїтивними та інтерактивними. Розробники зможуть використовувати різні анімації, ефекти переходу і матеріали, зокрема Acrylic — невід’ємний компонент Fluent design, який додає глибини.

Переглянувши основні принципи нової мови дизайну, стає зрозуміло, що Microsoft планують пов’язати фізичний світ із цифровим, зробити віртуальність більш реальною та інтуїтивною. Можливо, новим дизайном корпорація привчатиме нас до дотиків і фізичної взаємодії з елементами, яка стане 100% актуальною при масовій доступності приладів доповненої реальності. І Microsoft потроху почали це робити - всі основні компоненти Fluent design вже доступні для перегляду та тестування у них на сайті.



Більше того, компанія активно спонукає розробників використовувати Fluent design у своїх проектах.



Для цього вони створили навчальні сторінки на сайті, де можна дізнатися, як правильно залучати компоненти Fluent design в інтерфейси.



Загалом, все виглядає перспективно, естетично та “по-майбутньому”, але виникають питання: “Як зміниться цифровий світ з мовою Fluent Design System?”, “Якою буде наша взаємодія з інтерфейсами, побудованими за принципами цього дизайну? Залишається чекати і дивитися, що буде на практиці. Вже в березні цього року Microsoft обіцяють випустити велике оновлення для Windows 10 із залученням елементів Fluent design в інтерфейси.

Зараз можна тільки стверджувати, що Fluent Design це не концепція і не набір принципів дизайну UI, а самостійна система оформлення зовнішнього вигляду, поведінки, верстки та трансформації додатків у різних середовищах. Всі 5 принципів Fluent design є планомірним результатом розвитку сучасного дизайну з урахуванням доступних цифрових технологій та їхніх середовищ.

У 2015 Майкрософтам вдалося нас вразити з Metro UI і Windows 10, продемонструвавши тогочасне майбутнє у вигляді інтерфейсів. Тоді вони дали зрозуміти, що прагнуть розвивати свій UI у напрямку індивідуального затишного простору користувача. Сьогодні вони розширюють вплив своїх ідей, відкриваючи великий креативний потенціал для дизайнерів. Становлення нової філософії дизайну сприяє появі новітніх естетичних програм, додатків та сайтів, сучасний функціонал Flent Design System створює широкий простір для фантазії щодо вигляду майбутніх інтерфейсів. Хтозна, можливо, саме Fluent Design стане в найближчому майбутньому найбільш зручною та досконалою мовою для інтерфейсів новітніх технологій та середовищ. Тому не зволікайте і починайте вивчати нову мову дизайну від Microsoft, тим паче, корпорація сама цьому сприяє.