Ноябрь 3, 2017

Мокапс: разбираемся с фигурами и навигацией

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

Часть 3

В очередной статье из серии «Moqups: краткое руководство» поговорим о таких инструментах мокапса, как фигуры и навигация. Посмотрим, как они выглядят и для чего их можно использовать.

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

Мокапс: фигуры

Итак, первый набор инструментов, о котором сегодня пойдет речь, это «Shapes», или фигуры. Найти его, как и все инструменты, можно в панели «Stencils»:

Первый инструмент — это «Circle», или круг. Но, на самом деле, это не только круг, а еще и овал:

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

Неочевидная функция: в любой из фигур можно писать! Просто щелкаем по фигуре дважды — и начинаем набирать текст:

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

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

Следующая фигура — «Polygon», он же многоугольник:

Этот инструмент очень похож на круг. При этом Вы можете самостоятельно настраивать количество углов в Вашем многоугольнике, их скругление, а также соотношение сторон. И, конечно, внутрь фигуры также можно вписывать текст.

В чем отличие от круга? Если вы не рисуете геометрические орнаменты, то особой разницы, что использовать в макете, нет. Впрочем, если Вам нужно показать, что какие-то элементы должны быть схожи, но при этом иметь некоторые различия, можно по очереди использовать круг и многоугольник. Или разные многоугольники.

Или вообще добавить элемент «Star» (звезда):

Что можно настроить?

количество лучей;
их глубину;
закругленность углов (звучит странно, действует сразу и на внутренние, и на внешние углы Вашей звезды).

Следующий инструмент — «Triangle», треугольник — пожалуй, самый странный и бесполезный в этом наборе. Он полностью копирует возможность многогранника с тремя углами… И при этом не дает никаких возможностей для дополнительной настройки:

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

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

«Callout» — она же «выноска» уже намного интереснее.

Причем этот инструмент сам подсказывает при использовании, для чего он нужен: «I’m a tooltip! Or am I a speech bubble?» («Я подсказка! Или я речевой пузырь?»), — написано на нем по умолчанию. На иллюстрации ниже стандартный вариант — самый верхний:

Возможностей для кастомизации фигуры, как видите, у нас опять довольно много. Кроме традиционного изменения размера поля для ввода текста, можно также изменить положение «хвостика», его ширину и высоту, а также закруглить углы у поля для ввода текста.

Вариантов использования инструмента придумать можно множество. Лично для меня основное его назначение — символизировать всплывающие подсказки. Навел человек курсор мыши на объект на сайте, появилась подсказка. Как это изобразить в макете понятно для дизайнера? Очень просто — использовать «Callout»!

«Arrow» — стрелка — универсальный инструмент. С его помощью можно изобразить практически все, что угодно! Кроме прямого назначения — рисования стрелочек там, где на сайте должны быть стрелочки, — им можно помечать важные объекты, указывать, к какому именно месту относятся комментарии, изображать слайдеры, если Вам лень использовать для этого особые инструменты…

В общем, возможностей много:

Меняем размеры самих стрелочек, уменьшаем или увеличиваем размер «наконечника» стрелки по отношению к «древку», увеличиваем или уменьшаем толщину «древка»…

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

Клин — он же «Wedge» — для меня не самый понятный инструмент.

Возможно, я просто не оказывался в ситуации, когда он мог понадобиться… Я даже не очень понимаю, почему он называется «клин». Возможно, потому, что в окружность кто-то чем-то вклинился:

А еще это первая из фигур, в которой нельзя писать. Видимо, этот инструмент предназначен для рисования различных графиков… Или для рисования каких-то сложных фигур и композиций. Других вариантов я придумать не могу.

Наконец, последние 3 фигуры — это различные линии: «Diagonal Line», ‘Horizontal Line» и «Vertical Line» (соответственно, диагональная, горизонтальная и вертикальная линии):

Первая особенность этих линий — они практически полностью взаимозаменяемы, любую из них можно расположить под любым углом. Также с помощью отдельного пункта в правом боковом меню на их концах можно добавить стрелки (такие же, что по умолчанию включены на диагональной линии — у нее их можно отключить):

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

«Oblique» (наклонная линия) — стандартный вариант;
«Split» (разделение) — линия, начинающаяся и заканчивающаяся в тех же точках, что и диагональ, которая при этом разделяет прямоугольник, в который была вписана наша диагональ, на 2 одинаковых вертикальных прямоугольника (проще посмотреть на картинке ниже, чем разбираться в моем запутанном описании);
«Right» (прямой угол) — линия, проходящая по прямому углу все того же воображаемого прямоугольника;
«Curve» (дуга) — дуга, вписанная в те же начальные углы.

Вот они, все эти варианты, на иллюстрации:

А еще горизонтальными линиями очень удобно делить сайт на отдельные блоки.

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

Мокапс: навигация

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

Выбор тут не очень большой, да и сами меню довольно стандартные. Например, два варианта горизонтальных меню («Horizontal menu» и «Horizontal Arrow menu» — обычное меню и меню со стрелочкой):

Работают они так, же, как и таблицы: заходите в редактирование, пишете название пунктов через запятую, активный пункт помечаете звездочкой (*).

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

Цвета ячеек, толщину линий и тип выделений можно изменять по своему вкусу. А вот добавить вертикальные линии между названиями пунктов в меню со стрелочкой у меня не получилось. Также у него нельзя, в отличие от обычного меню, закруглить внешние углы. Дискриминация…

Точно такой же набор («Vertical menu» и «Vertical arrow menu») предлагается нам при создании, соответственно, вертикального меню:

И даже набор функций тот же самый. Только теперь у простого меню можно еще и дополнительные стрелочки нарисовать, а не только скруглить углы (как такие углы выглядят Вы можете посмотреть на иллюстрации выше).

А у меню со стрелкой вновь никаких дополнительных функций…

«Link Bar» (меню ссылок) — это улучшенная версия инструмента «Link» (ссылка) из набора основных инструментов:

В принципе, вещь, безусловно, полезная… Но мне всегда было лень докручивать до нее наборы инструментом, ведь все, чем она отличается от трех использованных подряд ссылок — это вертикальные разделительные полосы и включенный по умолчанию цвет активной ссылки (черный? они серьезно?).

Впрочем, если Вам нужно показать совсем незнакомому дизайнеру, что вот тут именно меню, а не просто какие-то ссылки… Наверное, есть смысл использовать именно этот инструмент.

«Breadcrumb menu» — «хлебные крошки» — незаменимый способ навигации:

Никаких особых хитростей тут нет: прописываем путь, отмечаем страницу, на которой мы находимся.

Древовидное меню («Tree menu») — инструмент, который меня удивил… Moqups так старательно разделяет один инструмент на несколько из-за небольших различий (стрелочки у горизонтальных меню и различные виды линий — отличный тому пример), а тут вдруг выдал нам 4 инструмента в одном:

Меню с папками, меню с плюсами и минусами, меню со стрелками, меню с чек-листом… Прямо на любой вкус, конфигурировать можно как угодно, достаточно просто начать редактировать рабочую область инструмента (дважды щелкнуть по ней мышью) — и все обозначения — перед Вами:

А дальше Вы можете их смешивать, как Вам пожелается. Может, именно для этого их и объединили в один пункт?..

И последнее — стандартное контекстное меню («Context menu»):

Стрелочки, выделение цветом, горизонтальные линии-разделители — полный набор, можете настраивать свое меню так, как Вам угодно!

Большинство из этих менюшек пригодятся Вам при макетировании сайта. Мне этими инструментами пользоваться практически не приходится. Разве что меню ссылок можно взять на вооружение…

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

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

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