Используйте Adobe Experience Design CC для создания карты дизайна материала

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

Как только дизайнеры начали пробираться сквозь него и понимать его мышление, Material Design незаметно стал одной из самых влиятельных визуальных философий в веб-дизайне и мобильном дизайне. Все, что вам нужно сделать, чтобы увидеть, к чему мы стремимся, – это выполнить поиск Material Design в Pinterest, и вы увидите сотни примеров и экспериментов на устройствах, планшетах и ​​даже веб-сайтах.

Интересный аспект Material Design заключается в том, что Google думает о том, как приложения должны появляться и работать на мобильных устройствах, но эти концепции применяются к любому экрану любого размера на любой платформе. Как заявляет Google в первом абзаце спецификации: «Мы поставили перед собой задачу создать визуальный язык для наших пользователей, который объединяет классические принципы хорошего дизайна с инновациями и возможностями технологий и науки. Это материальный дизайн. Эта спецификация является живым документом, который будет обновляться по мере того, как мы продолжаем разрабатывать принципы и особенности дизайна материалов ».

Обсуждаемый материал в общих чертах – бумага, а визитной карточкой Material Design – карта. Подумайте об индексной карточке на поверхности, и вы на правильном пути. Карта – это элемент, содержащий фотографии, видео, текстовые ссылки и т. Д., Но если они отличаются от большинства интерактивных дизайнов, они предназначены для того, чтобы сосредоточиться на одном предмете. Карты имеют закругленные углы, содержат слабые тени, указывающие, что они находятся над поверхностью, и если они все находятся в одной плоскости, они называются «коллекцией».

В этом «How To» мы собираемся создать карту на основе спецификации. Вместо того, чтобы создавать карту с помощью различных инструментов для работы с изображениями и рисованием, мы рассмотрим ее с другой стороны. Мы собираемся использовать инструменты в Adobe Experience Design, который в настоящее время находится в общедоступном предварительном просмотре только для 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 содержится шаблон Material Design ( Файл > Новый из шаблона > Material Design ), а другой действительно хороший бесплатный – от Кайла Ледбеттера, который вы можно получить здесь. Если у вас нет 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 – нажать Команда + .

Как редактировать элемент дизайна материала в Adobe Experience Design CC

Когда карта в XD прибывает из буфера обмена, не начинайте с ней весело работать. Первое, что вам нужно сделать , это разгруппировать карту, потому что вам нужен доступ к битам и частям, составляющим карту. Для этого выберите карту и выберите Объект > Разгруппировать или и нажмите Shift + Команда + G.

Ваша карта теперь состоит из трех частей:

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

Первым шагом является удаление светло-серого поля. Его единственная цель – выступать в качестве заполнителя для изображения, что делает его, если вы выберете, необязательным.

Поле с текстом на самом деле темно-серое с непрозрачностью 50%. Это поле может использоваться в качестве фона текста, и вы можете изменить цвет и прозрачность окна.

Хотя это не сразу видно, светло-серая рамка соответствует спецификации Material Design, так как ее верхние углы округлены на 2 пикселя. Имейте это в виду, если вы добавляете изображение. Также понадобятся закругленные углы, которые можно добавить в приложение для обработки изображений или в XD.

Видя, что это состояние покоя карты, ей также нужна тень. Спецификация ясно дает понять, что высота карты составляет 2 пикселя. Чтобы добавить это, выберите фигуру черного фона и установите значения Y и B (размытие) на 2 на панели свойств.

Как добавить изображение на карточку дизайна материала в Adobe XD CC

Зная, что карта имеет ширину 344 пикселя, а область изображения – 150 пикселей ( половина высоты светло-серого прямоугольника ). Мы открыли изображение в Photoshop, обрезали его до размера и сохранили, используя @ 2x опция в диалоговом окне «Экспорт как» в Photoshop. Изображение было импортировано в Adobe XD.

Затем мы перетащили светло-серую рамку поверх изображения на монтажном столе и выбрали Объект > Маска с формой . Результатом было изображение, подбирающее закругленные углы формы. Затем мы переместили изображение в конечную позицию.

После установки изображения мы изменили цвет фона серого поля Medium, изменили текст и цвет текста ссылки.

Использование функции сетки Adobe XD CC

После заполнения карты ее необходимо правильно разместить в соответствии со спецификацией Material Design. Это означает, что на каждой стороне карты есть 8 пикселей, и карта должна быть на 8 пикселей ниже панели приложения. Для этого нажмите один раз на имя монтажной области и на панели свойств выберите Сетка . Сетка появляется над артбордом.

Размер сетки по умолчанию составляет 8 пикселей, что соответствует размеру сетки для Material Design. Если вам нужен другой размер, измените значение в области сетки. Если вы хотите изменить цвет сетки, нажмите цветной чип и выберите цвет из полученного Палитра цветов .

Когда сетка видна, нажмите на карточку и переместите ее в окончательное положение.

Чтобы закончить, мы выбрали карточку, нажали кнопку Повторить сетку и также изменили расстояние между карточками до 8 пикселей.

Оцените статью
Solutics.ru
Добавить комментарий