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

Специфікація Material Design від Google спочатку була націлена на платформу Android як спосіб запропонувати узгодженість дизайну на платформі.

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

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

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

У цьому «How To» ми збираємося створити карту на основі специфікації. Замість того, щоб створювати карту за допомогою різних інструментів для роботи з зображеннями і малюванням, ми розглянемо її з іншого боку. Ми збираємося використовувати інструменти в Adobe Design Experience, який в даний час знаходиться в загальнодоступному попередньому перегляді тільки для Macintosh і є безкоштовним. Ви можете завантажити це тут.

Давайте почнемо.

Створення прототипу артборду в Adobe Experience Design CC

Не існує очевидного способу створення екрана Android на початковому екрані в Experience Design CC (XD). Коли ми відкривали XD, ми зазвичай вибирали iPhone 6, а коли інтерфейс відкривається, ми вибираємо інструмент Artboard в нижній частині панелі інструментів і вибираємо Android Mobile з варіантів на панелі «Властивості» праворуч. Потім ми перемикаємося на інструмент вибору, натискаємо один раз на ім'я артборда iPhone і видаляємо артборд.

У поточній версії XD поруч з iPhone 6 є маленька стрілка, яка при натисканні відкриває меню, що розкривається. Звідти ви вибираєте версію Android Mobile, і обраний артборд Android Mobile відкривається в інтерфейсі.

Щоб переконатися, що у нас достатньо місця на екрані для карти, ми зазвичай переходимо до ескізу 3 і копіюємо і вставляємо рядок стану, панель навігації та панель програми з шаблону оформлення матеріалу в монтажну область. Sketch 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, викладеної в специфікаціях блоків контенту, а також специфікацій форматування і розміщення тексту, викладених у специфікації Typography.

Стиль карти, який ми хотіли, був у лівому нижньому кутку. Ми просто виділяємо його мишкою і копіюємо в буфер обміну. На жаль, XD не містить інтерфейсу з вкладками для відкритих документів. Те, що ми робимо, це трохи опускаємо відкрите вікно документа, щоб показати те, над яким ми працюємо, виберіть його і вставте. Інший спосіб швидкого перемикання між відкритими документами XD - натиснути Ctrl + ".

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

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

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

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

Першим кроком є вилучення світло-сірого поля. Його єдина мета - виступати як заповнювач для зображення, що робить його, якщо ви виберете, необов'язковим.

Поле з текстом насправді темно-сірий з непрозорістю 50%.