Декабрь 11, 2017

Мокапс.ком: как нарисовать блок-схему

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

Часть 4

Представляю Вашему вниманию новую статью из серии «Moqups: краткое руководство». В ней речь пойдет о таких инструментах мокапс.ком, как элементы блок-схемы. Они же — в оригинале — «Flowchart Diagrams».

Если Вы пропустили начало этого цикла, то посмотрите статьи «Что такое moqups и как с ним работать», «Moqups.com: основные инструменты» и «Мокапс: разбираемся с фигурами и навигацией».

Мокапс.ком: рисуем блок-схему

Традиционно, рассказ наш начнем с описания того, как найти нужные инструменты. Кликаем по «Stencils», затем — по «Flowchart Diagrams»:

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

Для чего они вообще нужны? Для рисования блок-схем, само собой! Причем с их помощью можно рисовать не только блок-схемы для сайта, но и для каких-то других целей. Хотя для этих целей инструментов и так хватает, но вдруг Вы столь полюбили мокапс, что хотите использовать в своей работе исключительно его возможности… Все в жизни бывает.

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

И первый на очереди — «Process» (процесс). Если рассматривать его в рамках мокапса, а не блок-схемы (как мы будем поступать и с другими элементами в этой статье), то это стандартный прямоугольник. Разница только в цвете рамки и заливки, а также в отсутствии возможности скруглить углы:

Следующий элемент — «Decision», решение:

Как видите, это обычный ромб, с измененной расцветкой. Полный аналог фигуры «Polygon» с 4 углами (если не считать измененной расцветки).

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

И первый такой элемент — «Subprocess» (он же «подпроцесс»):

Кроме как для блок-схемы даже и не знаю, в чем смысл использования такой фигуры, если честно… Расстояние от края до внутренних вертикальных полос фиксированное, текст в этих промежутках разместить возможности нет.

В общем, довольно узкоспециализированная фигура. При создании макета сайта даже и не знаю, для чего ее можно использовать. Если что-нибудь придумаете — напишите, будет интересно!

Следом идет «Start/End» — «Начало/Конец»:

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

Теперь несколько групп:

«Database» — база данных;
«Direct Data» — данные, к которым имеется прямой доступ;
«Disk» — диск.

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

Замечательные бочонки, на мой взгляд.

Интересны и следующие инструменты («Document» — документ или «Documents» — документы):

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

Следующие элементы — «External Data» (внешние данные), «Data» (данные) и «Display» (отображаемые данные):

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

Два следующих элемента — «Manual Input» (ручной ввод) и «Manual Loop» (операция, выполняемая вручную):

Справа на иллюстрации — те же самые элементы, но обработанные в стиле стандартных элементов для создания сайта. Использование (вне блок-схем) все то же — изображение различных необычных блоков со странной формой.

У нас осталось еще 4 очень похожих блока:

«Preparation» (подготовка);
«Delay» (задержка);
«Internal Storage» (данные, хранящиеся во внутренней памяти);
«Loop Limit» (ручное ограничение).

И, наконец, два последних элемента — «Merge» (поглощение) и «Off-page Connector» (разъем страницы):

И, если «Поглощение» — это стандартный треугольник, то «Разъем» — фигура необычная, которую можно использовать… например, для обозначения разъема страницы!

В общем, элементы довольно своеобразные, и вряд ли Вам часть придется их использовать при создании прототипа сайта. А вот для создания блок-схем это, безусловно, самый простой вариант из тех, которые может предложить Вам мокапс:

Бонус — инструменты спецификации мокапса

Для тех, кому элементы блок-схемы совсем не понравились — небольшой бонус: «Spec Tools» (они же — инструменты спецификации). Найти их можно вот тут:

Инструментов в этом разделе всего два: «Color Spec» (спецификация цвета) и «Distance Spec» (спецификация размеров). Но зато они помогают Вам обозначить в макете, какое именно цвета и размеры Вам нужны:

Работают они очень просто: выбираете на палитре определенный цвет, и кружок не только окрашивается в него, но еще и меняется буквенный код, обозначающий цвет:

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

Я надеюсь, что моя статья была Вам полезна. если у Вас остались вопросы — всегда буду рад на них ответить, задавайте их в комментариях.

До новых встреч — в следующей статье мы разберем очередную порцию инструментов мокапса!

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