Дизайн матеріалу + Стилі Фігми = 🔥

Матеріальна система Google зіткнулася з цим завданням з моменту створення. Його прийняття забезпечило набагато послідовніший досвід роботи як для Google, так і для інших програм Android. Однак, хоча цей досвід переважає у юзабіліті, вони менш успішні в тому, щоб стати пам'ятними розширеннями бренду. Є недоліки, коли всі використовують один і той же набір компонентів.

Введіть наступну еволюцію матеріалу - систему, яка базується на всьому, що було чудовим щодо його першої ітерації, але додає можливість брендам ставити тему на свою систему таким чином, що дозволить додаткам Material відчувати себе менш схожими на рідний досвід інтерфейсу та інше вражаючий досвід бренду.

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

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

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

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

Внесення глобальних змін кольору впливає на кілька компонентів одночасно.

Тип матеріалу - я створив текстові стилі для всіх стилів, визначених у специфікації "Дизайн матеріалу". За замовчуванням вони встановлені на Робото , але можна легко переробити, щоб використовувати шрифт шрифту вашого бренду. Якщо змінити стиль на інший шрифт, миттєво поширюватимуть зміни по всій системі. Майте на увазі, можливо, вам доведеться внести деякі коригування розміру та інтервалу, щоб точно налаштувати розміри в системі. У міру того, як набір розвивається, я планую включити деякі попередньо визначені розміри рекомендацій, які працюють для деяких найпопулярніших шрифтів Google.

Деякі стилі, визначені в комплекті.

Material Elevation - я створив бібліотеку заздалегідь заданих стилів тіні для всіх висот. Змінити висоту елемента настільки ж просто, як вибрати відповідну висоту - це значно спрощує процес нанесення Матеріальних тіней, які іноді є складними комбінаціями до трьох різних тіней.

Матеріальна сітка - Матеріал базується на 4dp базовій сітці, тому я створив і стиль для цього. Ви можете застосувати це до будь-якого кадру чи компонента, і, звичайно, ви можете додати власні сітки для робочого столу, мобільних пристроїв та планшетів та застосувати їх за потребою.

Material Design закликає дизайнерів контролювати форми компонентів інтерфейсу, щоб краще відобразити особистість бренду. Вони дають користувачам можливість налаштувати куточки поверхні, починаючи від гострих прямокутних кутів, до надрізів 45 градусів, до різного рівня округлості.

Використання вкладених компонентів для внесення глобалізованих змін у форму картки та кнопок.

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

Потім ця зміна відображається у всій системі (зауважте: в деяких випадках на поширення зміни через сотні компонентів знадобиться кілька секунд). Оскільки ви можете отримати доступ до вкладених шарів у кожному екземплярі компонента, якщо є конкретні місця, де ви хочете змінити стиль, ви можете зробити цю зміну як переопределення в будь-якому екземплярі.

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