Material Design - Макетирование в xD (Experience Design)⁠⁠

Всем привет!

Выдался свободный от рутины денек, а значит, пора приступить к очередному этапу улучшайдзеров для приложений на Android.

Сегодня поговорим о таких скучных словах как user interface, material design, перекопаем кучу гайдов и вообще, будем немного причесывать приложения в плане юзабилити.

Все телодвижения будем производить за компьютером в приложении experience design от Adobe. Поехали!

Рассматриваемая на сегодняшнем занятии программа - это попытка мега гиганта Adobe заменить такие приложения, как Sketch, Fluid Ui и кучи других.

Попытка получилась однозначной. С одной стороны, здесь есть приятные фишечки, как динамическое проектирование (возможность потыкать сразу), возможность нарисовать красивую картинку, но также из минусов мало инструментов, косяки при импортировании графики непосредственно в слой, и другие болячки.

Но мы сейчас не об этом. Прикидывать новый дизайн будем для клиента интернет магазина Эльдорадо, и немного освежим его.

Открываем новый документ, в панели инструментов выбираем готовый шаблон для ведроид девайсов.

Пару пустых экранчиков мы наклепали, идем дальше. Нам надо нарисовать привычные для каждого устройства status bar и toolbar. А для этого что? Правильно. Нужно залезть в гайды, и вспомнить их размеры.

Двигаемся дальше - в инструментах берем прямоугольник, и рисуем заветные полоски, задаем цвет, и вуаля! Почти похоже. Решил немного уйти от принципов (статус бар должен быть всегда темнее), и поиграться с отображением.

Кстати, все иконки, и картинки закидывать необходимо врукопашную, в приложении нет никаких готовых пресетов, наборов начинающего дизайнера или чего то подобного.

И черт меня дернул растянуть toolbar аж до 250dp (вместо положенных 56). Дальше как говориться понеслось, только успевай. Вышло что то наподобие экрана "О приложении".

В целом мне показалось миленьким.

Немного забегая вперед скажу, что такой экран я в дальнейшем присобачил в совсем другую программу, немного подправив элементы непосредственно в студии.

В целом, для прототипирования каких либо программ я обязательно смотрю похожие приложения, иногда посещаю ресурсы со стоковой графикой, тематические порталы с направленностью на тот же ui. А раньше рисовал руками в блокноте. в 21 веке то.

К примеру, нарисованный ниже за пол часика экран частично берет корни из приложения Google Play Store, часть из программы AliExpress.

Ну и самое главное, для чего мы вообще собрались. Предварительный просмотр. Стрелки схематически показывают, при нажатии какого элемента будет происходить тот или иной переход. Пока а рамках двух экранов, но в масштабе это почти приложение!

Запуск, в отличии от эмуляторов мгновенный, это явный плюс. Пока что не нашел параметров для скрола контента, но думаю это прикрутят в будущих фиксах.

Очень часто в дальнейшем приходилось обращаться к гайдам, вспоминать отступы, так как никаких данных ни для одной платформы не указано.

Использовал множество ресурсов, в том числе:

- Иконки (https://material.io/icons/)

- Цветовая палитра (https://material.io/guidelines/style/color.html#color-color-palette)

- Библиотеки (https://android-arsenal.com/)

- Общие принципы концепта MD (https://material.io/guidelines/patterns/confirmation-acknowledgement.html#confirmation-acknowledgement-confirmation)

- Cтоковая графика (http://www.freepik.com/)

Ну и в качестве подведения итогов.

Ни разу не претендую на звание дизайнера, напротив, при наличии средних знаний в программировании ощущаю себя очень стесненным в плане дизайна. Но подобного рода приложения очень грамотно помогают в будущем видении приложения, подготовке качественных сборок (коих перевалило за полторы сотни), и всячески совершенствоваться.

Скачать можно пока на халяву, ну а дальше вы знаете. Подписка, пиратство, срок.

http://www.adobe.com/ru/products/experience-design.html

Поддерживается только Windows 10 и MacOS. Потыкал на обеих платформах, в целом идентичен.

Всем бобра, до связи! =)