РЕДАКТОР ПРОТОТИПОВ ИНТЕРФЕЙСА

Вот как создать свой собственный многоразовый трафарет:

1. Создавайте все, что вам нужно, используя существующие трафареты и / или рисуя уникальные элементы (кстати, у нас есть мощные инструменты векторного редактирования).
2. Выберите все элементы, которые вы хотели бы включить в свой пользовательский трафарет.
3. Щелкните правой кнопкой мыши, выберите Активы -> Конвертировать в актив.

С помощью линейного инструмента вы можете ... та-да! – нарисуй линию.

Сочетание клавиш: L ключ.

Чтобы нарисовать прямую линию, удерживайте нажатой клавишу Shift во время рисования. Затем инструмент будет поворачиваться с шагом 15 градусов, чтобы помочь вам.

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

Сочетание клавиш: R ключ.

Чтобы зафиксировать соотношение сторон фигуры, удерживайте нажатой клавишу Shift во время рисования.

С помощью инструмента "Эллипс" вы можете добавлять в свои проекты красивые эллипсы.

Сочетание клавиш: C ключ.

Чтобы зафиксировать соотношение сторон фигуры, удерживайте нажатой клавишу Shift во время рисования.

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

Сочетание клавиш: P ключ.

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

Чтобы добавить точку к любому существующему контуру, выберите инструмент перо и щелкните в любом месте контура, чтобы добавить другую точку.

Чтобы удалить точку с контура, выберите инструмент перо и щелкните по существующей точке, которую вы хотите удалить.

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

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

Сочетание клавиш: A ключ.

Инструмент редактирования контуров полезен для внесения изменений в контуры, таких как перемещение точек и редактирование кривых Безье.

1. Наведите курсор мыши на точку траектории, которую вы хотите преобразовать в контрольную точку для кривой.
2. Удерживая нажатой клавишу Alt (клавиша Option на Mac), "потяните" курсор мыши в любую сторону, подальше от точки, одновременно нажимая вниз.
3. Появятся ручки настройки кривой (на рисунке синие точки, соединенные тонкой линией). Используйте эти ручки для регулировки кривой по мере необходимости.
4. Вы также можете преобразовать кривую обратно в обычный угловой угол, щелкнув правой кнопкой мыши на контрольной точке.

С помощью инструмента Карандаш вы можете создать любой рисунок от руки.

Сочетание клавиш: Y ключ.

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

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

Сочетание клавиш: H ключ. Кроме того, вы можете удерживать нажатой клавишу пробела и использовать левую кнопку мыши, чтобы временно активировать ручной инструмент. Это полезно, когда вы используете другой инструмент (например, перо) и вам нужно прокручивать, не отключая перо. Просто отпустите клавишу пробела, и перо снова станет активным инструментом.

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

Эти формы отображаются во всех типах проектов (другие трафареты в панели инструментов зависят от типа проекта).

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

Это дает вам возможность быстро нарисовать фигуру в стиле, соответствующем остальной части вашего дизайна.

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

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

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

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

Просто выберите элементы в вашем дизайне, которые вы хотели бы скопировать, и используйте комбинацию клавиш Ctrl +C (Cmd +C на Mac) на клавиатуре, чтобы скопировать их в буфер обмена.

Чтобы вставить элементы, которые сейчас находятся в вашем буфере обмена, просто перейдите на страницу проекта, на которую вы хотите их скопировать, и нажмите клавиши Ctrl+V (Cmd +V на Mac) на клавиатуре. Вот и все! Вставленные элементы теперь копируются в новое местоположение.

Как начать делиться своим проектом:

1. На верхней панели навигации нажмите кнопку "Поделиться".
2. Нажмите на кнопку "начать общий доступ".
3. Отправьте автоматически сгенерированную ссылку кому пожелаете.

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

Совместное использование рабочей области проекта еще никогда не было таким простым: просто нажмите на опцию Team в редакторе проекта.

Если кто-то поделится с вами рабочей областью проекта, вы получите электронное письмо со ссылкой для доступа к проекту. Если у вас еще нет учетной записи NinjaMock, вам будет предложено создать ее. Это займет всего несколько секунд!

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

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

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

Редактор прототипов интерфейса NinjaMock предоставляет интуитивно понятный и знакомый способ оставлять комментарии к отдельным прототипам интерфейса и отслеживать их статус.

Комментарии специфичны для страницы, на которой они оставлены. Если страница будет удалена, соответствующие комментарии к ней больше не будут видны.

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

Новые комментарии можно добавлять либо с панели комментариев в правой части области дизайна, либо просто щелкнув правой кнопкой мыши в любом месте прототипа интерфейса и выбрав "Добавить комментарий" во всплывающем меню.

У нас нет никаких ограничений относительно того, кто может оставлять или редактировать комментарии. Любой, кто откроет ваш проект, может добавить, отредактировать или даже удалить любой комментарий.

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

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

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

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

Чтобы проверить, есть ли какие-либо неразрешенные комментарии во всем проекте, используйте

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

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

Экспорт в PDF и распечатка на бумаге по-прежнему являются неотъемлемой частью прототипирования интерфейса. Многие создатели идей распечатывают прототипы своих интерфейсов и развешивают их на стенах офисов; некоторые используют их для вдохновения, другие обсуждают проекты в группе и добавляют комментарии прямо на стене.

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

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

Комментарии имеют те же уникальные номера комментариев, что и в конструкторской поверхности NinjaMock.

Вы также можете экспортировать свои проекты в формате HTML. Экспорт в формате HTML позволяет вам загружать файлы на свой компьютер или добавлять их на свой собственный веб-сервер для удобного доступа и хранения. Это может быть удобно для обмена вашими проектами с вашими партнерами и клиентами.

Прототипы HTML обеспечивают более интерактивный опыт при предварительном просмотре вашей работы, например, позволяя вам вводить текст и устанавливать флажки.

Когда ваш проект растет и становится все труднее ориентироваться, неплохо разделить ваши страницы на группы. Например, вы можете сгруппировать их по соответствующим областям в дизайне вашего приложения; например, страницы входа в систему, страницы настроек и т.д. – Или любым другим удобным вам способом.

Группа страниц - это просто именованный набор страниц (страница может одновременно находиться только в одной группе). Вы можете создавать столько групп, сколько вам нужно, перемещать страницы между группами или сортировать их внутри группы.

Чтобы создать группы страниц, разверните панель "Страницы", щелкнув по соответствующему значку в правом верхнем углу панели.

Подумайте на мгновение о файлах на вашем компьютере. Когда у вас слишком много файлов и становится трудно найти то, что вам нужно, вы просто создаете папки и перемещаете файлы внутрь, верно?

Мы воспроизвели тот же опыт в NinjaMock; вы можете создавать папки проектов, помещать в папки различные прототипы интерфейсов и макеты проектов, перемещать папки в другие папки и т.д. Это удобный и привычный способ организации вашей работы.

Чтобы переместить проект (или папку) в папку:

1. Выделите (наведите указатель мыши) элемент в списке проектов.
2. Нажмите на текстовую ссылку "Переместить...".
3. Выберите папку назначения и завершите, нажав кнопку Переместить.

Чтобы развернуть или свернуть папку во всплывающем окне, нажмите на серый значок папки.