Май 29, 2018

Создаем макет сайта с помощью мокапса

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

Часть 8

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

Дорабатываем наш макет сайта

Все основные инструменты мокапса собраны в меню в правой части экрана:

Большая синяя кнопка с буквой «m» — это главное меню.

Инструменты — «Stencils» — мы разобрали в прошлых статьях.

Основы работы со страницами («Pages») и с изображениями («Images») обсудили в самой первой статье из этого цикла.

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

Outline

Если открыть раздел «Outline» в пустом макете, то Вы увидите вот такой текст:

Итак, «Панель управления макетом позволит Вам управлять объектами на этой странице». Что же это значит? Давайте взглянем на ту же панель у готового макета.

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

названия элемента;
порядкового номера элемента;
информации о том, что перед нами копия какого-либо элемента;
порядкового номера копии.

Зачем нужен этот список?

Основной его функционал — это скрытие элементов, которые нам в данный момент не нужны, с рабочей поверхности.

Выбираем элемент (он выделяется в списке):

Затем нажимаем на кнопку-«глазик» в списке (рядом с выбранным элементов):

Готово! Элемент больше не виден. Но при необходимости Вы можете его вернуть одним кликом мышки.

Вторая функция — возможность переименовать блоки, чтобы сделать названия более информативными:

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

Templates

Следующий раздел — это шаблоны, или Templates.

Вот так выглядит этот раздел изначально, пока в нем нет готовых шаблонов:

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

Как это сделать? Выбираем несколько элементов и нажимаем на создать шаблон («Create a template…»):

Затем указываем название нашего шаблона:

…и нажимаем на кнопку «Сохранить» («Save»).

Готово! У нас в списке появился первый шаблон:

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

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

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

Или просто зажать Shift перед тем, как кликнуть по крестику. Но будьте осторожны, не удалите полезные шаблоны!

Icons

Иконки — или Icons. Их в мокапсе великое множество и они очень разнообразны. Я даже не стал их пересчитывать. Найти их можно в соответствующем пункте меню:

Вот как выглядят иконки:

Обратите внимание, на ползунок прокрутки. Иконок на самом деле очень много!

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

То есть кроме самого первого — активного — списка, есть еще 5, которые нужно выбирать дополнительно.

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

Зато Вы почти гарантированно сумеете отыскать необходимую Вам иконку — больше никаких поисков по интернету!

Comments

И, наконец, комментарии (Comments):

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

Чтобы оставить комментарий, достаточно нажать кнопку «Add a comment»:

После этого в рабочем пространстве появится значок с порядковым номером комментария и полем для ввода текста:

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

Вот так комментарии выглядят в процессе работы:

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

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

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

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

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