Структурные схемы страниц (wireframes)
Структурные схемы страниц (wireframes) — основной результат работ по проектированию. Они в деталях показывают, какая информация и элементы управления должны выводиться на каждой странице системы. А также расставляют акценты — какие из элементов страницы более, а какие — менее важны. Wireframes также описывают поведение динамических и AJAX-элементов страниц — как они должны реагировать на действия пользователя. Стоит помнить, что схемы страниц — это не конечный дизайн системы и все размеры в нем относительные.
Назначение
Постановка задания дизайнеру. При отрисовке макетов страниц дизайнер должен не забыть все указанные в wireframes элементы и учитывать расставленные акценты.
Постановка задания разработчикам. Команда разработки должна руководствоваться wireframes при создании функционального прототипа системы (уже работающая система, к которой еще не «прикручен» дизайн).
Демонстрация инвесторам и потенциальным пользователям. Система может быть показана заинтересованным лицам уже через несколько недель после начала работ.
В каких процессах участвует документ?
Проектирование и дизайн интерфейсов Пять этапов, в ходе которых происходит сбор требований к продукту, проектирование и дизайн его интерфейса.
Юзабилити-консалтинг Три этапа, в ходе которых существующий продукт анализируется и готовятся рекомендации по улучшению его интерфейса.
37 Диаграммы переходов между страницами
Диаграммы переходов между страницами — это схемы работы пользователя с функциональностью системы. Такая диаграмма показывает, как пользователь выполняет одну из своих задач, переходя от страницы к странице. В отличие от карты сайта и схемы навигации, диаграммы переходов между страницами берут не всю систему, а ее конкретный модуль и рисуют процесс работы пользователя с ним во всех мелочах. Кроме того, если в карте сайта и схеме навигации важны иерархические отношения «раздел/страница», то описываемые диаграммы концентрируются на последовательности перехода между ними.
Пример диаграммы переходов между страницами
Назначение
Соответствие интерфейса задачам пользователя. Диаграммы переходов между страницами помогают оптимизировать процесс работы пользователя с системой и выполнение им своих задач.
Постановка заданий разработчикам. Диаграммы переходов между страницами являются частью технического задания.
Основные понятия универсального языка моделирования uml
UML (UNIVERSAL MODELING LANGUAGE — универсальный язык моделирования) позволяет создавать в графическом виде иерархии классов, показывать взаимодействие объектов, создавать требования к программе и многое другое.
Uml — это язык, который является промышленным стандартомдля создания диаграмм в области программирования, хотя его можно применять и в других процессах моделирования. UML позволяет графически изобразить тот или иной аспект поведения программы. Модели, которые создаются на UML, позже могут быть переведены на тот или иной язык программирования.
ДИАГРАММА КЛАССОВ (CLASS DIAGRAM) — структурная диаграмма, на которой показано множество классов, интерфейсов, коопераций и отношения между ними;
ДИАГРАММА ОБЪЕКТОВ (OBJECT DIAGRAM) — структурная диаграмма, на которой показано множество объектов и отношения между ними;
ДИАГРАММА ПРЕЦЕДЕНТОВ (USE CASE DIAGRAM) — диаграмма поведения, на которой показано множество прецедентов и актеров, а также отношения между ними;
ДИАГРАММА ПОСЛЕДОВАТЕЛЬНОСТЕЙ (SEQUENCE DIAGRAM) — диаграмма поведения, на которой показано взаимодействие и подчеркнута временная последовательность событий;
ДИАГРАММА КООПЕРАЦИИ (COLLABORATION DIAGRAM) — диаграмма поведения, на которой показано взаимодействие и подчеркнута структурная организация объектов, посылающих и принимающих сообщения;
ДИАГРАММА СОСТОЯНИЙ (STATECHART DIAGRAM) — диаграмма поведения, на которой показан автомат и подчеркнуто поведение объектов с точки зрения порядка получения событий;
ДИАГРАММА ДЕЯТЕЛЬНОСТИ (ACTIVITY DIAGRAM) — диаграмма поведения, на которой показан автомат и подчеркнуты переходы потока управления от одной деятельности к другой;
ДИАГРАММА КОМПОНЕНТОВ (COMPONENT DIAGRAM) — диаграмма поведения, на которой показан автомат и подчеркнуто поведение объектов с точки зрения порядка получения событий;
ДИАГРАММА РАЗВЕРТЫВАНИЯ (DEPLOYMENT DIAGRAM) — структурная диаграмма, на которой показаны узлы и отношения между ними.