Март 6, 2018

Material Design от moqups’а

Moqups: краткое руководство

Часть 6

Пришло время разобрать следующую порцию инструментов moqups’а. И это будет набор «Material Design» — то есть набор инструментов для разработки программного обеспечения и приложений операционной системы Android от Google.

В прошлый раз был Apple, теперь — Google. Движемся последовательно!

Material Design — прототипируем приложения для Androida

Итак, Вы захотели разработать приложение для Androida. И в этом Вам вновь поможет moqups. Точнее, его комплект инструментов под названием «Material Design»:

Здесь есть, где разгуляться! В полтора раза больше возможностей, чем в аналогичном разделе для «яблока». Вот напридумывали-то…

Постараюсь не растягивать обзор в длиннющую полосу и разобрать различные возможности максимально коротко и по существу.

Самый первый элемент — это «Android Mobile Frame», экран телефона, на котором мы сможем творить наши будущие приложения. Главное, не выбраться за его рамки…

Следом идет так называемый «нижний слой», или «Bottom Sheet» — основные функциональные иконки (поделиться, загрузить, скопировать и распечатать). Их можно переименовать, передвинуть, удалить…

И несколько кнопок в различных состояниях:

«Dropdown Focused Button» — выбранная кнопка выпадающего меню;
«Dropdown Button Hover» — эффект при наведении на кнопку выпадающего меню;
«Dropdown Button Normal» — кнопка выпадающего меню в нормальном состоянии;
«Dropdown Button Pressed» — нажатая кнопка выпадающего меню;
«Disabled Flat Button» — заблокированная flat-кнопка;
«Focused Flat Button» — выбранная flat-кнопка.

Очередная порция кнопок:

«Archive Flat Button» — кнопка «Архивировать»;
«Answer Flat Button» — кнопка «Ответить» (на звонок);
«Reply Flat Button» — кнопка «Ответить» (на письмо);
«Ignore Flat Button» — кнопка «Игнорировать»;
«Normal Flat Button» — нормальное состояние кнопки;
«Pressed Flat Button» — нажатая кнопка;
«Disabled Float Button» — заблокированная float-кнопка;
«Normal Float Button» — float-кнопка в нормальном состоянии;
«Pressed Float Button» — нажатая float-кнопка;
«Disabled Raised Button» — заблокированная raised-кнопка;
«Focused Raised Button» — выбранная raised-кнопка;
«Normal Raised Button» — raised-кнопка в нормальном состоянии;
«Pressed Raised Button» — нажатая raised-кнопка.

Запутались в кнопках? На самом деле, ничего страшного в них нет. Если коротко, то их всего 4 вида:

Dropdown;
Flat;
Float;
Raised.

Кнопка «Dropdown» — это выпадающее меню, а остальные 3 вида различаются, в первую очередь, по внешнему виду. Разве что круглая кнопка «Float» может быть в приложении всего одна и ее задача — выполнять главное действие в приложении. Как видите — ничего сложного.

Следующий блок инструментов — это карточки (card): 2 вида «Mini Card» и 3 пары различных видов карточек в обычном и приподнятом (Raised) состояниях:

Далее идут два чекбокса — нажатый и ненажатый, а также различные варианты chip’ов:

Календарь («Date Picker Calendar») и часы («Date Picker Clock»):

Различные варианты диалоговых окон:

«Alert Dialog» — окно с предупреждением;
«Confirmation Dialog» (окно подтверждения) со списком, в котором можно выбрать несколько пунктов;
«Confirmation Dialog» со списком, в котором можно выбрать только один пункт;
«Simple Dialog» — простое окно.

3 разных меню:

«Dropdown Menu» — выпадающее;
«Folder Menu» — меню с папками;
«Inbox Menu» — меню входящих.

Еще один вид карточек, только теперь не «card», а «Grid». Различаются количеством полей для ввода текста, их расположением, а также наличием (или отсутствием) некоторых элементов: