Апрель 17, 2018

Инструменты bootstrap в moqups’е

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

Часть 7

Новая часть инструментов от moqups’а — Bootstrap. Что это такое? Если не вдаваться в подробности — это набор инструментов для создания сайтов и веб-приложений, включающий в себя самые разные шаблоны.

То есть это разнообразные кнопки, бары, меню, поля для заполнения и много, многое другое. Все, как наборах инструментов для Apple и Android, о которых мы говорили раньше, только для сайтов.

Инструменты Bootstrap

Где их найти? Все в том же меню:

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

И первыми идут различные предупреждения (Alert):

об ошибке (Error Alert);
с информацией (Info Alert);
подтверждение (Success Alert);
предупреждение (Warning Alert).

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

Breadcrumb Bar — оно же меню хлебных крошек. Помогает обозначить путь пользователя по странице:

Большой набор разнообразных кнопок, каждая — в двух состояниях: нормальном и нажатом:

Blue Button Normal;
Blue Button Pressed;
Cyan Button Normal;
Cyan Button Pressed;
Button Normal;
Button Pressed;
Green Button Normal;
Green Button Pressed;
Orange Button Normal;
Orange Button Pressed;
Red Button Normal;
Red Button Pressed.

Текст и его цвет можно менять, а вот цвет самих кнопок задан строго: как назвали, такой она и будет.

Чекбоксы (Checkbox) в двух видах — выбранном (Checked) и невыбранном (Unchecked):

Смысл этих элементов мне не очень понятен, так как чекбоксы уже были, причем их можно было самостоятельно выбирать (или оставлять не выбранными, по желанию). Зачем нужно было добавлять еще 2 элемента, да еще и с меньшим функционалом — не очень понятно. Видимо, просто для того, чтобы все было в одном месте.

Инструменты для работы с выпадающими списками:

кнопка выпадающего списка в обычном состоянии (Button Normal);
кнопка выпадающего списка в нажатом состоянии (Dropdown Button Pressed);
кнопка выпадающего списка вместе с меню (Dropdown Button With Menu);
отдельное выпадающее меню (Dropdown Menu);
и простое меню (Simple Menu).

Grid Bar (панель для таблицы) и несколько различных полей для ввода:

для ввода произвольной информации (Custom Input Field);
для ввода электронного адреса (Email Input Field);
для ввода пароля (Password Input Field);
для поиска (Search Input Field);
простое поле для ввода (Simple Input Field).

Разноцветные ярлыки:

Blue Label;
Cyan Label;
Label (стандартный, бесцветный);
Green Label;
Orange Label;
Red Label.

Различные варианты для навигации по сайту:

Menu Bar — меню с выделением закладки цветом;
еще один Menu Bar с выделением закладки в стиле ярлыка;
Pagination (Bottom) — переключение между страницами с помощью кнопок с номерами страниц или навигационных кнопок;
Pagination (Top) — такое же меню, но кнопки расположены над номерами страниц.

Панель и три различных места для фотографий (Image Placeholder), которые различаются формами и размерами:

Набор различных инструментов, которые я сгруппировал только потому, что они находятся рядом:

Progress Bar;
Radio Button (Checked) — выбранная круглая кнопка;
Radio Button (Unhecked) — не выбранная круглая кнопка;
Simple Search Bar — простая форма для поиска;
Default Button Group — стандартная группа кнопок.

Разноцветные тэги:

Blue Tag;
Cyan Tag;
Tag;
Green Tag;
Orange Tag;
Red Tag.

Панель с заголовком (Title Bar) и два вида верхних меню (Top Menu) — темная (Dark Theme) и светлая (Light Theme):

Инструменты Charts

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

Разнообразные графики и диаграммы Вы сможете найти в разделе Charts. Их всего 4:

Bar Chart — горизонтальная столбцовая диаграмма;
Column Chart — вертикальная столбцовая диаграмма;
Line Chart — линейная диаграмма;
Pie Chart — круговая диаграмма.

Наследство мокапса

В последнем разделе — Legacy — собраны инструменты, которые создатели мокапса считают устаревшими.

Их можно условно разделить на 2 категории: инструменты Windows и инструменты Apple.

К инструментам Windows я отнес следующие:

аватар (Avatar);
ленточка (Ribbon);
превьюшки (Tumbnails);
окно (Window).

Инструменты Apple:

предупреждение (iOS Alert);
кнопка (iOS Button);
клавиатура (iOS Keyboard);
меню (iOS Menu);
календарь (iOS Picker);
переключатель (iOS Switch);
экран планшета (iPad) — на скриншоте он уменьшен, в натуральную величину он не поместился бы даже на отдельной картинке;
экран телефона (iPhone).

Вот мы и разобрали все инструменты, которые предлагает нам Moqups.

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

Федор Бондаренко,руководитель проектов