Skip to content

Використовуйте Adobe Experience Design CC для створення картки дизайну матеріалів

22 de Липень de 2021

Специфікація Material Design від Google спочатку була спрямована на платформу Android як спосіб запропонувати послідовність дизайну на цій платформі. Після того, як дизайнери почали роздумувати над ним і розуміти, що за ним стоїть, Material Design спокійно став однією з найвпливовіших візуальних філософій в Інтернеті та мобільному дизайні. Все, що вам потрібно зробити, щоб побачити, до чого ми добираємося, – це зробити пошук матеріалів у Pinterest, і ви побачите сотні прикладів та експериментів на пристроях, планшетах і навіть веб-сайтах. Захоплюючим аспектом Матеріального дизайну є те, що Google думає про те, як програми повинні з’являтися та працювати на мобільних пристроях, але концепції застосовуються до будь-якого екрану будь-якого розміру на будь-якій платформі. Як зазначає Google у початковому параграфі специфікації, «ми поставили перед собою завдання створити візуальну мову для наших користувачів, яка синтезує класичні принципи гарного дизайну з інноваціями та можливостями технологій та науки. Це матеріальний дизайн. Ця специфікація є живим документом, який буде оновлюватися в міру того, як ми продовжуватимемо розробляти принципи та особливості матеріального дизайну “. Матеріал, про який говорять, у загальних рисах – це папір, а візитною карткою Матеріального дизайну є листівка. Подумайте про індексну карту на поверхні, і ви на правильному шляху. Картка – це елемент, що містить фотографії, відео, текстові посилання тощо, але там, де вони відрізняються від більшості інтерактивних дизайнів, вони призначені для фокусування на одній темі. Картки мають закруглені кути, містять слабкі тіні, що вказують, що вони знаходяться над поверхнею, і якщо всі вони знаходяться на одній площині, їх називають “колекцією”. У цьому “Як це” ми збираємося створити картку на основі специфікації. Замість того, щоб створювати листівку з різноманітними інструментами для зображення та малювання, ми збираємось прийти до неї з іншого напрямку. Ми будемо використовувати інструменти в Adobe Experience Design, який наразі є загальнодоступним попереднім переглядом лише для Macintosh і є безкоштовним. Ви можете завантажити його тут. Давайте розпочнемо.

Створення прототипу монтажної області в Adobe Experience Design CC

Том Грін
Немає очевидного способу створити екран Android на початковому екрані в Experience Design CC (XD). Що ми робили, коли ми відкривали XD, – це вибирати опцію iPhone 6 і, коли інтерфейс відкривається, ми вибираємо Інструмент для монтажної області внизу Панель інструментів і виберіть Android для мобільних пристроїв від вибору на панелі властивостей праворуч. Потім ми переходимо до інструменту виділення, клацнемо один раз на Назва монтажної дошки iPhone і видаліть монтажну область. У поточній версії XD біля iPhone 6 є маленька стрілка, яка при натисканні відкриває спадне меню. Звідти ви вибираєте Мобільна версія Android і вибрана монтажна область Android Mobile відкриється в інтерфейсі. Щоб переконатися, що для картки відкрито належний простір на екрані, ми зазвичай переходимо до ескізу 3 і копіюємо та вставляємо панель стану, панель навігації та панель додатків із шаблону матеріального дизайну на монтажну область. Ескіз 3.2 містить шаблон Матеріального дизайну (Файл > Нове із шаблону > Дизайн матеріалу), а ще один дуже хороший безкоштовний – від Кайла Ледбеттера, який ви можете отримати тут. Якщо у вас немає Sketch, ви можете скопіювати та вставити їх із наклейок XD, знайдених у Файл > Відкрийте набір інтерфейсу користувача > Матеріал Google. Ви також можете завантажити їх із Google для використання у Photoshop, Illustrator, After Effects та Sketch.

Додавання картки дизайну матеріалів до монтажної області Adobe XD CC

Відображається набір інтерфейсу матеріалу та вибирається карта, яку потрібно використовувати.

Том Грін
Однією з найкорисніших функцій XD є включення наборів інтерфейсу для Apple iOS, Google Material та Microsoft Windows. Багато в чому вони додають слово “Rapid” до терміна “Rapid Prototyping”. Крім того, вони полегшують роботу дизайнера, оскільки загальні елементи інтерфейсу не повинні постійно відтворюватися в програмі дизайну, такі як Photoshop, Illustrator або Ескіз. Елементом інтерфейсу, який нам потрібен, була картка. Щоб дістатися до неї, ми вибрали Файл > Відкрийте набір інтерфейсу користувача > Матеріал Google і комплект відкрився як новий документ. Елемент, який нам потрібен, був знайдений у Картка категорії. Що нам найбільше подобається, це те, що вони дотримуються специфікації Material Design, викладеної в специфікаціях Content Blocks, а також специфікацій форматування та інтервалів, викладених у специфікації Typography. Стиль листівки, який ми хотіли, – це той, що внизу зліва. Ми просто виділяємо його за допомогою миші та копіюємо в буфер обміну. На жаль, XD не містить інтерфейсу з вкладками для відкритих документів. Що ми робимо, це трохи зрушити відкрите вікно документа, щоб відкрити те, над яким ми працюємо, вибрати його та вставити. Інший спосіб швидкого переключення між відкритими документами XD – натискання Команда+.

Як редагувати елемент дизайну матеріалу в Adobe Experience Design CC

Три елементи картки розділені на монтажній області.

Том Грін
Коли картка в XD надходить з буфера обміну, не починайте з нею весело працювати. Перше, що вам потрібно зробити полягає в тому, щоб розгрупувати картку, оскільки вам потрібен доступ до біта та частин, що складають карту. Для цього виберіть картку та виберіть Об’єкт > Розгрупувати або натисніть Shift+Команда+Г.

Тепер ваша картка складається з трьох частин:

  • Світло-сіра рамка для зображення.
  • Середньо-сіре поле для тексту.
  • Задня панель, що використовується як фон.

Першим кроком є ​​видалення світло-сірого вікна. Його єдина мета – виконувати роль заповнювача для зображення, що робить його, якщо ви вирішите, необов’язковим. Поле з текстом насправді є темно-сірим із непрозорістю 50%. Це поле можна використовувати як фон тексту, і ви можете змінити колір та прозорість поля. Хоча це видно не відразу, світло-сірий блок відповідає специфікації Material Design, оскільки його верхні кути округлені на 2 пікселі. Майте це на увазі, якщо ви додаєте зображення. Йому також знадобляться закруглені кути, які можна додати до програми візуалізації або в XD. Бачачи, як це стан спокою на карті, вона також потребує тіні. Характеристика чітко дає зрозуміти, що рівень спокійної карти становить 2 пікселі. Щоб додати це, виберіть чорний фон фігури і встановіть значення Y та B (Розмиття) на 2 на панелі властивостей.

Як додати зображення на картку дизайну матеріалів у Adobe XD CC

Зображення знаходиться в лівій частині екрана, а сіре вікно використано для маскування зображення.

Том Грін
Знаючи, що ширина карти становить 344 пікселі, а область зображення – 150 пікселів (половина висоти світло-сірої коробки) Ми відкрили зображення у Photoshop, обрізали його до розміру та зберегли, скориставшись опцією @ 2x у діалоговому вікні Експортувати у Photoshop. Зображення було імпортовано в Adobe XD. Потім ми перетягнули світло-сіре поле над зображенням на картоні та вибрали Об’єкт > Маска з формою. Результатом стало зображення, що підбирає закруглені кути фігури. Потім ми перемістили зображення у його кінцеве положення. Помістивши зображення, ми змінили колір тла середньо-сірого вікна, змінили текст та колір тексту посилання.

Використання функції Adobe XD CC Grid

Накладання сітки показано на монтажній області.

Том Грін
Після комплектації картки тепер її слід правильно розмістити відповідно до специфікації Material Design. Це означає, що по обидві сторони картки є 8 пікселів, і вона повинна бути на 8 пікселів нижче панелі програми. Для цього натисніть один раз на назва монтажної області і, в Панель властивостей, виберіть Сітка. Сітка з’являється над монтажною областю. Розмір сітки за замовчуванням – 8 пікселів, що, як видається, є однаковим розміром сітки для Material Design. Якщо вам потрібен інший розмір, змініть значення в області Сітка. Якщо ви хочете змінити колір сітки, клацніть на кольоровий чіп і виберіть колір з отриманого Підбір кольору. Коли сітка видно, натисніть на картки і перемістіть його у кінцеве положення. Щоб закінчити, ми вибрали картку, клацнули на Повторіть сітку і змінив інтервал між картками на 8 пікселів.