Спецификация Material Design от Google первоначально была нацелена на платформу Android как способ предложить согласованность дизайна на платформе.
01 из 06Как создать карту дизайна материалов в Adobe Experience Design CC
Когда дизайнеры начали пробираться сквозь него и понимая, что за ним стоит, Material Design спокойно стал одной из самых влиятельных визуальных философий в веб-дизайне и мобильном дизайне. Все, что вам нужно сделать, чтобы посмотреть, к чему мы стремимся, - это сделать поиск материалов на Pinterest, и вы увидите сотни примеров и экспериментов на устройствах, планшетах и даже веб-сайтах.
Увлекательным аспектом Material Design является то, что Google размышляет о том, как приложения должны появляться и работать на мобильных устройствах, но концепции применяются к любому экрану любого размера на любой платформе. Как гласит Google в первом абзаце спецификации: «Мы поставили перед собой задачу создать визуальный язык для наших пользователей, который синтезирует классические принципы хорошего дизайна с инновациями и возможностями технологий и науки. Это материальный дизайн. Эта спецификация является живым документом, который будет обновляться по мере продолжения разработки принципов и особенностей материального дизайна ».
Материал, о котором говорили в общих словах, - это бумага, а отличительной особенностью Material Design является карта. Подумайте об указательной карточке на поверхности, и вы на правильном пути. Карта - это элемент, содержащий фотографии, видео, текстовые ссылки и т. Д., Но там, где они отличаются от большинства интерактивных проектов, они предназначены для сосредоточения внимания на одном предмете. Карты имеют закругленные углы, содержат слабые тени, указывающие, что они выше поверхности, и если они все находятся на одной плоскости, они называются «коллекцией».
В этом «How To» мы собираемся создать карту на основе спецификации. Вместо того, чтобы создавать карту с различными инструментами визуализации и рисования, мы собираемся прийти к ней с другого направления. Мы собираемся использовать инструменты в Adobe Experience Design, который в настоящее время доступен только для просмотра в Macintosh и является бесплатным. Вы можете скачать это здесь.
Давайте начнем.
02 из 06Создание прототипа Artboard в Adobe Experience Design CC
Нет очевидного способа создания экрана Android с экрана «Пуск» в Design Design CC (XD). То, что мы делали при открытии XD, заключается в выборе опции iPhone 6, и, когда открывается интерфейс, мы выбираем инструмент «Artboard» внизу панели инструментов и выбираем Android Mobile из списка на панели «Свойства» справа. Затем переходим к инструменту выбора, нажимаем один раз на имя художественной панели iPhone и удаляем монтажную область. Больше не надо.
В текущей версии XD рядом с iPhone 6 имеется небольшая стрелка, которая при нажатии открывается раскрывающимся меню. Оттуда вы выбираете версию Android Mobile, и в интерфейсе открывается открытая панель Android Mobile.
Чтобы обеспечить правильное пространство экрана для карты, мы обычно переходим к Sketch 3 и копируем и вставляем панель состояния, панель навигации и панель приложений из шаблона дизайна материалов в монтажную панель. Эскиз 3.2 содержит шаблон дизайна материала (Файл> Создать из шаблона> Дизайн материалов), а другой действительно хороший свободный от Кайла Ледбеттера, который вы можете получить здесь. Если у вас нет Sketch, вы можете скопировать и вставить их с наклеек XD, найденных в Файл> Открыть набор пользовательских интерфейсов> Материал Google, Вы также можете загрузить их из Google для использования в Photoshop, Illustrator, After Effects и Sketch.
03 из 06Добавление карты дизайна материалов в Adobe XD CC Artboard
Одной из наиболее полезных функций XD является включение наборов пользовательских интерфейсов для Apple iOS, материала Google и Microsoft Windows. Во многих отношениях они добавляют слово «Rapid» к термину «Rapid Prototyping». Кроме того, они облегчают работу дизайнера в том, что общие элементы пользовательского интерфейса не обязательно должны постоянно воссоздаваться в приложении Design, например Photoshop, Illustrator или Эскиз.
Элементом пользовательского интерфейса, который нам нужен, была карта. Чтобы добраться до него, мы выбрали Файл> Открыть набор пользовательских интерфейсов> Материал Google и набор был открыт как новый документ. Элемент, который нам нужен, был найден в категории «Карты».
То, что мы любим в этом, - они соответствуют спецификации Material Design, изложенным в спецификациях Content Blocks, а также спецификациям форматирования текста и интервалов, изложенным в спецификации Typography.
Стиль карты, который мы хотели, был тем, что был внизу слева. Мы просто выделяем его с помощью мыши и копируем его в буфер обмена. К сожалению, XD не содержит интерфейс с вкладками для открытых документов. Что мы делаем, так это немного переместить открытое окно документа, чтобы открыть тот, над которым мы работаем, выбрать его и вставить. Другим способом быстрого переключения между открытыми документами XD является нажмите Command- '.
04 из 06Как отредактировать элемент дизайна материала в Adobe Experience Design CC
Когда карта в XD поступает из буфера обмена, не приступает к работе с ней. Первое, что вам нужно сделать заключается в разгруппировке карты потому что вам нужен доступ к бит и частям, составляющим карту. Для этого выберите карту и выберите «Объект»> «Разгруппировать» или же нажмите Shift-Command-G.
Ваша карта теперь состоит из трех частей:
- Светло-серый квадрат для изображения.
- Среднее серое поле для текста
- В качестве фона используется задний ящик.
Первый шаг - удалить светло-серый квадрат. Его единственная цель - действовать как заполнитель для изображения, который делает его, если вы выберете, необязательным.
Ящик с текстом на самом деле темно-серый с непрозрачностью 50%. Этот ящик можно использовать в качестве фонового текста, и вы можете изменить цвет и непрозрачность окна.
Хотя это не сразу видно, светло-серый квадрат следует спецификату Material Design, поскольку его верхние углы закруглены на 2 пикселя. Имейте это в виду, если вы добавляете изображение. Также потребуются закругленные углы, которые могут быть добавлены в приложение для обработки изображений или в XD.
Видя, как это состояние покоя карты, ему также нужна тень. Спектр дает понять, что есть покоящаяся высота карты размером 2 пикселя. Чтобы добавить это, выберите черную форму фона и установите значения Y и B (размытие) равными 2 на панели свойств.
05 из 06Как добавить изображение на карту дизайна материалов в Adobe XD CC
Знание карты - 344 пикселя в ширину, а область изображения - 150 пикселей ( половина высоты светло-серой коробки ) Мы открыли изображение в Photoshop, обрезали его до размера и сохранили его с помощью опции @ 2x в Photoshop Экспорт как диалоговое окно. Изображение было импортировано в Adobe XD.
Затем мы перетащили светло-серый квадрат на изображение на картоне и выбрали Объект> Маска с фигурой, Результатом было изображение, поднимающее закругленные углы формы. Затем мы переместили изображение в конечное положение.
С изображением на месте мы изменили цвет фона в сером поле «Серебристый», изменили текст и цвет текста ссылки.
06 из 06Использование функции Grid CS X
С завершением работы карты теперь необходимо правильно разместить в соответствии со спецификацией Material Design. Это означает, что по обе стороны карты есть 8 пикселей, а карта должна быть на 8 пикселей ниже панели приложений. Для этого нажмите один раз на имя монтажной области и на панели свойств выберите «Сетка». Сетка появляется поверх монтажной панели.
Размер сетки по умолчанию - 8 пикселей, которые имеют одинаковый размер сетки для Material Design. Если вам нужен другой размер, измените значение в области Grid. Если вы хотите изменить цвет сетки, щелкните по цветовой микросхеме и выберите цвет из полученного Color Picker.
Когда сетка видна, щелкните по карте и переместите ее в ее конечную позицию.
Чтобы закончить, мы выбрали карту, нажали кнопку «Повторить сетку» и изменили интервал между картами на 8 пикселей.
