Блок-схемы | UX Fox

Уроки для новичков

Блок-схемы

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

Что такое блок-схемы?
Блок-схемы применяются для того, чтобы показать различные процессы, включая сценарии использования, структуру страниц и бизнес-процессы. Многие используют их в Axure RP для демонстрации высокоуровневого обзора задач, которые можно выполнять на разных страницах прототипа. Элементы схем различной формы позволяют показывать разные стадии процесса. Существуют условности, определяющие значения каждой формы блоков, однако в Axure RP нет ограничений в их использовании. В общем, лучше использовать их таким образом, чтобы аудитория прототипа понимала то, что видит перед собой.

Создание блок-схем

Блок-схемы создаются в Карте проекта. Вам не обязательно отмечать страницу как блок-схему для того, чтобы создать диаграмму, но это помогает отличать их от обычных страниц. Чтобы отметить страницу как блок-схему, в контекстном меню страницы выберите Diagram Type > Flow. Это изменит иконку страницы на иконку схемы в Карте проекта.

Элементы блок-схемы

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

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

Чтобы изменить стиль и свойства элементов блок-схем, можно использовать контекстное меню и панель инструментов. Чтобы изменить форму элемента блок-схемы после того, как вы добавили его в окно создания макета, нажмите на нем правой кнопкой мыши и выберите другую форму из подменю Edit Flow Shape в контекстом меню. Если в библиотеке виджетов для блок-схем нет нужного вам элемента, вы можете импортировать его, используя элемент Image (В библиотеке виджетов для блок-схем элемент Image имеет точки для соединения с другими элементами).

Соединительные линии

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

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

Если вы хотите чтобы окончание соединительной линии имело форму стрелки или сама линия была пунктиром, выберите Arrow Style или Line Pattern в тулбаре из выпадающего списка на панели инструментов.

По умолчанию соединительные линии проводятся так, чтобы они не пересекали другие элементы. Чтобы отключить эту функцию, нажмите правой кнопкой на соединительную линию и используйте опцию Editor Connector > Do Not AutoReflow.

Добавление связи со страницей

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

Чтобы привязать страницу к элементу блок-схемы, в контекстном меню этого виджета выберите Edit Flow Page > Edit Reference Page (Добавить связь со страницей) и выберите нужную страницу. Вы также можете просто перетащить страницу из Карты проекта в окно создания макета, чтобы автоматически создать элемент, привязанный к этой странице.

Генерирование блок-схемы

Чтобы автоматически создать блок-схему страницы, основанную на иерархии Карты сайта, для начала откройте или создайте страницу, в которой будет размещена ваша схема. Затем нажмите правой кнопкой мыши на корневой странице в той ветви страниц, для которой вы хотите создать блок-схему. В контекстном меню выберите опцию Generate Flow Diagram (Сгенерировать блок-схему). Вы можете выбрать одну из двух видов схем — Стандартную (Standard) и Уходящую вправо (Right Hanging).

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

Итог
Мы надеемся, что принцип создания блок-схем при помощи форм и соединителей вам ясен.