kazminaviktoriya1
Перейти в профиль
Выйти из профиля
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42"><rect fill-opacity="0"/></svg>)
Добавить аккаунт
Диаграмма структуры интерфейса
В этом уроке вы узнаете, что такое диаграмма структуры интерфейса, из каких элементов она состоит, как и для чего дизайнер интерфейсов и системный аналитик её составляют.
Что такое диаграмма структуры интерфейса
Вы уже знаете, что дизайнер интерфейсов и системный аналитик создают персон и составляют сценарии использования. После этого они переходят к следующей составляющей процесса проектирования пользовательского интерфейса — его организации.
Чтобы пользовательский интерфейс был функциональным, учитывал все потребности пользователей, нужно заранее спроектировать его структуру. То есть понять, из каких экранов будет состоять интерфейс. В этом поможет диаграмма структуры интерфейса.
Диаграмма структуры интерфейса (Interface Structure Diagram, ISD) — это графическое представление, которое показывает, как экраны пользовательского интерфейса связаны с процессами, выполняемыми в ПО, как пользователь переходит от одного экрана к другому и как экраны взаимодействуют друг с другом, чтобы пользователи могли выполнять с их помощью свои задачи.
Как правило, каждый экран включает тесно связанные друг с другом механизмы ввода, вывода и навигации. При этом экраны могут быть ориентированы преимущественно на ввод, вывод или навигацию.
Рассмотрим пример приложения интернет-магазина по заказу игрушек для животных.
На одном из экранов приложения можно сформировать отчёт о покупках в приложении за определённый период времени. Там будет отображаться какое-то меню, можно выбрать период времени, за который нужно сформировать отчёт, но главная цель этого экрана — получение отчёта. Если смотреть на этот экран с точки зрения диаграммы структуры интерфейса, то экран, ориентированный преимущественно на вывод информации, называют формой вывода (Output Form).
По аналогии с этим можно представить себе экран для поиска необходимой игрушки. На нём также будут отображаться пункты меню, но главный элементом будет строка ввода для поиска. Если смотреть на этот экран с точки зрения диаграммы структуры интерфейса, то экран, ориентированный преимущественно на ввод информации, называют формой ввода (Input Form).
Теперь представьте основной экран приложения, где есть все разделы, в которые может перейти пользователь. То есть такой экран предназначен преимущественно для навигации, но на нём может быть выведена информация о магазине и его акциях. Если смотреть на такой экран с точки зрения диаграммы структуры интерфейса, то экран, ориентированный преимущественно на навигацию, называют главным меню (Main Menu). Для навигации пользователей в приложении главное меню детализируется — выделяются элементы главного меню.
Дизайнер интерфейсов и системный аналитик составляют несколько ISD — по одной для каждой части системы. Такое разделение связано с различными интерфейсами для каждого класса пользователей, который будет пользоваться системой. Вспомните диаграмму потоков данных — каждая внешняя сущность представляет собой отдельный класс пользователей, и для каждого класса будет построена отдельная диаграмма структуры интерфейса.
Зачем нужна ISD
ISD может помочь:
- Дизайнеру интерфейсов — при проектировании интерфейсов. Это позволит понять, какие функции пользователям нужно выполнять в интерфейсе.
- Разработчикам — при оценке работ для реализации и понимания того, какие процессы будут задействованы в интерфейсах.
- Всей команде разработки — для формирования представления, из чего будет состоять каждый экран.
Элементы ISD
Для ISD нет общепринятой нотации, как для других диаграмм, которые встречались в предыдущих спринтах. Рассмотрим, из чего она состоит.
Экраны
Для составления ISD каждый экран, например меню или форма, изображается в виде прямоугольника, который разделён на три части:
- В верхней части пишется уникальный номер элемента. Нумерация идёт по порядку, начиная с 0.
- В середине блока пишется уникальное имя. Элементы главного меню могут быть указаны существительными, а форма подписывается глаголом + существительным.
- В нижней части отражается номер процессов из диаграммы потоков данных (DFD), к которому относится данный экран. Иногда для одного процесса может существовать более одного экрана и один и тот же номер может быть подписан на нескольких блоках.
Но это необязательная часть. Иногда экран может не относиться ни к одному процессу с диаграммы потоков данных.
Например, экран может выглядеть так:
Меню нумеруется нулём, а форма пронумерована цифрой 1, ниже на форме указан номер процесса из диаграммы DFD. Меню же не относится ни к какому процессу с диаграммы потоков данных, а значит, нижняя часть на блоке отсутствует.
Связь между экранами
Каждый экран связан с другими экранами линиями, которые показывают, как пользователи могут переходить от одного экрана к другому. В большинстве случаев интерфейсы образуют иерархию или «дерево», которое ветвится вниз. Если это необходимо, экран можно связать с другим экраном горизонтальной линией, то есть выйти за пределы «дерева». Так, например, получится, если из одной формы можно перейти в другую для просмотра информации.
Меню и форма из примера выше соединяются между собой линией, образуя «дерево».
Как составляют ISD
Работа над ISD начинается с изучения диаграммы потоков данных, где отражена структура процесса, на основе которого нужно спроектировать базовую структуру интерфейса, а именно отобразить:
- процессы,
- потоки данных,
- хранилища данных.
Пользовательский интерфейс обычно состоит из нескольких экранов, каждый из которых отличается друг от друга. Точно так же в DFD уровня 0 существует несколько главных процессов, которые будут в ней выполняться. Поскольку для одной внешней сущности, указанной в DFD подразумевается один пользовательский интерфейс, то для этого интерфейса будет построена одна диаграмма структуры интерфейса.
Вспомните диаграмму потоков данных физического уровня. Как раз на ней потоки данных преобразуются во все возможные формы ввода и вывода, отчёты, которые также необходимо отражать на диаграмме структуры интерфейса. Но учитывая, что системные аналитики не занимаются составлением диаграмм физического уровня, при построении диаграммы структуры интерфейса СА нужно опираться на диаграмму потоков данных логического уровня.
Вы уже знаете, что такое диаграмма структуры интерфейса, зачем она нужна, понимаете, из каких элементов она состоит и как её составлять на основе DFD. Теперь давайте составим диаграмму структуры интерфейса на основе диаграммы потоков данных сервиса по заказу такси, которую вы разбирали в прошлом спринте.
Построим диаграмму структуры интерфейса для работы внешней сущности — пассажира с приложением.
Диаграмма структуры интерфейса в самом верху будет иметь главное меню (номер элемента 0), которое позволит пользователю выполнять различные действия, указанные на диаграмме потоков данных выше в виде процессов, а именно:
- «Зарегистрировать пассажира» — процесс 1.
- «Заказать поездку» — процесс 2.
- «Создать отчёт о поездке» — процесс 3.
Поэтому на экране — главное меню в нижней части — будут отмечены три процесса, которые поддерживаются в этой диаграмме.
Для того чтобы понять, какие экраны должны быть реализованы, важно внимательно посмотреть на потоки данных и хранилища в каждом процессе.
Первый процесс — «Зарегистрировать пассажира»:
- От внешней сущности «Пассажир» к нему идёт поток данных «Данные пассажира», значит, необходимо выделить форму на диаграмме «Ввести данные пассажира».
- Из него идёт поток данных «Пассажиры» к хранилищу «Пассажиры», следовательно, данные о пассажирах будут храниться в приложении. Их можно будет просмотреть, поэтому выделим форму на диаграмме «Просмотреть данные пассажира».
Данные элементы можно группировать в меню «Данные пассажира» и соединить в «дерево». Уникальные номера расставим чуть позже, когда соберём все части диаграммы.
Номера процессов у данных блоков не будут указаны, так как DFD составлена на нулевом уровне детализации. Для указания номеров процессов была бы необходима DFD как минимум первого уровня, чтобы части интерфейса были чётко определены по отношению к более мелкому процессу. На главном меню указано, какие процессы оно поддерживает (процессы 1, 2 и 3) и оттуда идёт навигация пользователя в остальные пункты меню и формы.
Второй процесс — «Заказать поездку». От внешней сущности «Пассажир» ко второму процессу идут несколько потоков данных:
- «Запрос на поездку» и «Статус запроса» — значит пассажиру необходима форма для просмотра и изменения статуса запроса.
- «Статус поездки» — следовательно, пассажиру необходима форма для просмотра и изменения статуса поездки.
Эти элементы можно группировать в меню «Запрос на поездку» и соединить в «дерево».
Это не все потоки данных, связанные с процессом «Заказать поездку», которые могут интересовать пассажира для просмотра необходимой ему информации:
- Поток данных «Оплаты» идёт к хранилищу данных «Платежи» — для пассажира можно выделить форму для просмотра данных о платежах.
- Поток данных «Поездки» идёт к хранилищу данных «Поездки» — для пассажира необходимо реализовать форму для просмотра поездок.
- Поток данных «Пассажир» идёт к хранилищу данных «Пассажиры». Данные пассажира вы уже вынесли в отдельную часть интерфейса. Выводить её ещё раз не нужно.
Данные элементы можно группировать в меню «Поездки» и соединить в «дерево».
Третий процесс — «Создать отчёт о поездке» — соединён с внешней сущностью «Пассажир» следующими потоками данных:
- Входящим потоком «Запрос на отчёт» и выходящим потоком «Отчёт о поездке» — для пассажира необходимо реализовать возможность получения отчёта о поездке. В связи с этим выделим отдельный блок «Отчёт о поездке». Это будет формой вывода, то есть отчётом, который может получить пользователь процесса, поэтому его можно подписать не глаголом с существительным, а просто существительным «Отчёт о поездке».
Процесс «Создать отчёт о поездке» также соединён с хранилищем «Платежи», но данную информацию можно вынести внутрь отчёта о поездке и не выделять отдельным элементом на диаграмме. Получившиеся элементы можно группировать в меню «Отчёты пассажира» и соединить в «дерево».
Теперь соединим все части диаграммы и проставим уникальные номера частей интерфейса.
Важно: нулевой элемент диаграммы всегда — главное меню. Дальше по порядку нумеруются пункты меню: данные пассажира — 1, запросы на проезду — 2, поездки — 3, отчёты о поездке — 4. И только потом — формы и отчёты, которые идут под каждым пунктом меню.
Получится такая диаграмма:
Но и это ещё не всё. На диаграмме выше можно добавить переходы между частями интерфейса. С формы просмотра поездки у пассажира есть возможность перейти на отчёт о поездке. Поэтому соединим их тоже. Получится так:
Как персоны и сценарии использования влияют на ISD
Существенно влиять на структуру интерфейса (ISD) может не только диаграмма потоков данных. При составлении диаграммы структуры интерфейса аналитик изучает сценарии использования, составленные от лица персон, чтобы увидеть, насколько хорошо построенная диаграмма помогает им выполнять шаги сценария. Довольно часто сценарии использования помогают понять, можно ли упростить реализацию интерфейса для определённой персоны, чем изначально планировалось. В связи с этим системный аналитик и дизайнер интерфейсов могут перерабатывать ISD, чтобы упростить способность интерфейса выполнять действия, отражённые в сценариях использования, иногда внося существенные изменения в структуру интерфейса.
Подведём итоги
Диаграмма структуры интерфейса показывает, как экраны пользовательского интерфейса связаны с процессами, выполняемыми в ПО, как пользователь переходит от одного экрана к другому и как они работают вместе, чтобы пользователи могли выполнять с их помощью необходимые для них процессы.
Диаграмма состоит из:
- Экранов. Таких как меню, форма или отчёт. Они изображаются в виде прямоугольника, который разделён на три части.
- Связей между экранами. Каждый экран связан с другим экраном линиями, которые показывают, как пользователи могут переходить от одного к другому.
Для построения диаграммы структуры интерфейса системному аналитику может помочь диаграмма потоков данных, в которой отражены основные процессы и хранилища будущей системы, а также необходимые входные и выходные потоки, которые нужно отразить в интерфейсе.
В дальнейшей работе диаграмма структуры интерфейса поможет вам в составлении карты сайта, а также для определения стандартов пользовательского интерфейса и разработки прототипов, с которыми вы познакомитесь в следующих уроках.
