• Июль 6, 2018

Делаем согласование и прототипирование сайта удобнее и проще

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

Часть 9

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

Прототипирование сайта: новые возможности

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

Инструменты верхнего меню

Итак, что мы тут видим? Давайте пройдемся слева направо. В первую очередь это зеленый замочек, означающий, что сейчас наш проект приватный, то есть доступен только через наш аккаунт. Нажмем на замочек:

Настройки приватности

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

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

В-третьих — три галочки:

  1. Прототип откроется на конкретной выбранной странице, а не на первой, как происходит по умолчанию.

  2. Прототип откроется в полноэкранном режиме (без каких-либо меню).

  3. Прототип откроется на всю ширину экрана, но с верхним и боковым меню.

И, наконец, управление соисполнителями. Не важно, нажмем мы на ссылку «Manage» или на кнопку «Invite your first collaborator» эффект будет один — перед нами откроется вот такое окно:

Приглашаем соисполнителей

Тут все просто — указываем электронный адрес человека, которого хотим пригласить принять участие в проекте, указываем уровень доступа («Can edit» — может редактировать — или «Can view» — может просматривать и комментировать), отправляем, если нужно, письмо с автоматическим приглашением или добавляем к нему свое сообщение (галочка на пункте «Add a custom message»).

Нажимаем «Share & Save» — и готово, у нас есть соисполнитель! С помощью этой функции можно как совместно работать над одним проектом, так и согласовывать его с клиентами или давать пояснения другим исполнителям.

Предназначение следующих пунктов будет понятно из иллюстрации ниже:

Переименовываем проект и страницу

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

Здесь же появляется и оповещение о том, что все изменения в проекте сохранены:

Сохранение изменений

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

Кнопки «Undo» и «Redo» позволяют откатить изменения — убрать добавленное или вернуть отмененное:

Откат изменений

Дубль стандартных горячих клавишей Ctrl+Z и Ctrl+Y соответственно.

Такие же дублирующие функции и у лупы:

Изменение масштаба

Нажимаем на минус (или на Ctrl+-) — уменьшаем масштаб рабочего поля прототипа, на плюс (или Ctrl++) — увеличиваем. Клик по лупе (или Ctrl+0) — возвращение к базовому масштабу.

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

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

Группировка элементов

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

При выборе такого блока кнопка «Group» превратится в «Ungroup» и будет выглядеть утопленной в панели:

Разгруппировка элементов

Нажатие на нее отменит группировку элементов.

Функции кнопки «Lock» немного напоминают группировку, только намного жестче. Она полностью блокируют выбранные элементы — их нельзя ни изменить, ни переместить:

Блокировка элементов

При этом заблокированные элементы выделены не стандартной — синей — рамкой, а красной:

Так выглядит заблокированный элемент

Кнопка при выборе заблокированного элемента превращается в «Unlock». Блокируются элементы не группой, а по-отдельности. Соответственно, и разблокировать их можно по-отдельности. Заблокировали весь прототип, выделили нужный элемент, разблокировали, исправили… А вот выделить несколько элементов разом и разблокировать их все вместе уже не получится — только по одному.

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

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

Работа со слоями

Посмотрим, какие возможности у нас есть:

  • «Bring to Front» — вынести элемент на передний план по отношению ко всем остальным элементам;
  • «Bring Forward» — вынести элемент на передний план по отношению к элементу, который находится на план впереди него;
  • «Send Backward» — убрать элемент на задний план по отношению к элементу, который находится на план сзади него;
  • «Send to Back» — убрать элемент на задний план по отношению ко всем остальным элементам;
  • «Left edges» — расположить элемент впритык к левому краю рабочего пространства;
  • «Horizontal centers» — расположить элемент точно по центру (по горизонтали) рабочего пространства;
  • «Right edges» — расположить элемент впритык к правому краю рабочего пространства;
  • «Top edges» — расположить элемент впритык к верхнему краю рабочего пространства;
  • «Vertical centers» — расположить элемент точно по центру (по вертикали) рабочего пространства;
  • «Bottom edges» — расположить элемент впритык к нижнему краю рабочего пространства;
  • «Distribute horizontally» — распределяет несколько выбранных элементов в горизонтальной плоскости;
  • «Distribute vertically» — распределяет несколько выбранных элементов в вертикальной плоскости.

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

«Diagram» позволяет рисовать различные стрелочки:

Рисуем диаграммы

Потом их при желании можно отредактировать:

Редактируем стрелочки диаграмм

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

Меню «Workspace» позволяет нам упорядочить наше рабочее пространство:

Приводим в порядок рабочее пространство

Разберем первый блок настроек:

  • «Snap to grids & guides» — привязка к сетке и направляющим;
  • «Snap to page» — привязка к странице;
  • «Snap to other objects» — привязка к другим объектам;
  • «Show hotspots» — показать точки перехода;
  • «Show rulers» — показать линейки;
  • «Show custom guides» — показать настраиваемые направляющие;
  • «Clear guides» — очистить направляющие.

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

Работаем с направляющими

Если мы отключим линейки с помощью пункта «Show rulers», то и направляющие добавить не получится. Скрыть направляющие можно с помощью пункта «Show custom guides». Если при этом мы захотим добавить еще одну направляющую, то пункт активируется автоматически.

Чтобы избавиться от ненужных направляющих — достаточно перетащить их обратно на линейку — они сразу же исчезнут. Если направляющие нам вообще больше не нужны — кликаем на «Clear guides» и подтверждаем их удаление.

Пункт «Snap to page» позволяет понять, как расположен элемент по отношению к странице — какое расстояние отделяет его от ее границ:

Расстояние от элемента до границ страницы

Пункт «Snap to other objects» показывает положение одного элемента по отношению к другим, позволяя выравнивать их относительно друг друга:

Расположение элементов относительно друг друга

Можно эти пункты применять и одновременно:

Расстояния до других элементов и границ страницы

«Show hotspots» — показывает точки перехода (зеленый прямоугольник на иллюстрации ниже):

Места активности

О том, что это такое и зачем оно нужно, поговорим немного позже.

К сожалению, с тем, что делает пункт «Snap to grids & guides», разобраться не удалось даже с помощью встроенной справки… Если кто-то сможет рассказать об этом в комментариях — буду благодарен!

Следующий пункт — «Advanced Settings», продвинутые настройки:

Продвинутые настройки

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

«Show paper grid» добавляет в рабочую область сетку, «Show layout grid» — столбцы-направляющие:

Сетка рабочего пространства

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

«Replace Colors…» перекрасит все элементы одного цвета в другой. Будьте осторожны, последствия могут быть непредсказуемыми!

Меняем цвета местами

И, наконец, «Page Settings» — настройки страницы:

Настраиваем страницу

Можно увеличить размеры рабочего пространства, изменить его цвет и скрыть все материалы, размещенные за его границами (именно скрыть, а не удалить!), просто поставив галочку у пункта «Hide content outside pages».

Пункт «Export» в особых комментариях не нуждается — выгружаем макет в любом удобном для нас формате и виде:

Экспортируем прототип

«Sharing» мы обсудили в самом начале — это то же самое меню, которое открывается при клику по замочку и позволяет сделать проект публичным или приватным.

И, наконец, 3 пункта в правой части экрана. Первый из них — «Format» — отключает (или включает) правое боковое меню:

Отключаем боковое меню

А вот второй — «Interactions» — уже гораздо интереснее. Он позволяет превратить прототип в настоящий сайт:

Настраиваем интерактив

Создаем точку перехода с помощью кнопки «Create hotspot»:

Здесь будет движуха!

Теперь нужно прописать действия. Выбор довольно богатый:

Что нужно сделать?

Итак, что может произойти:

  • «Click or Tap» — клик или нажатие;
  • «Right-Click» — клик правой кнопкой мыши;
  • «Double-Click» — двойной клик;
  • «Mouse Over» — курсор мыши появляется над элементом;
  • «Mouse Out» — курсор мыши покидает элемент.

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

Что при этом произойдет?

  • «Go to Specific Page» — перейти на определенную страницу (ее дадут выбрать из списка);
  • «Go to Parent Page» — перейти на родительскую страницу;
  • «Go to URL» — перейти по адресу страницы) адрес нужно будет указать;
  • «Go to Next Page» — перейти на следующую страницу (по списку страниц);
  • «Go to Previous Page» — перейти на предыдущую страницу (по списку страниц);
  • «Jump Back» — вернуться;
  • «Toggle Visibility» — переключить видимость. Выбираем, какой объект будет появляться и исчезать при совершении действия;
  • «Show Object» — показать объект. Выбираем, какой объект будет появляться;
  • «Hide Object» — скрыть объект. Выбираем, какой объект будет исчезать;
  • «Scroll to Object» — переместиться к объекту. Объект опять же можно выбрать.

Итак, мы настроили весь интерактив. Что делать дальше? Нажать на последнюю оставшуюся кнопку — «Prewiew»:

Смотрим, что получилось

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


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

Если у Вас остались вопросы — задавайте их в комментариях!



Статьи в тему