Шаг 4: макетирование общей инфраструктуры взаимодействия

Теперь мы готовы рисовать наброски интерфейса. Поначалу данный вид визуализации интерфейса должен быть крайне простым. В нашей студии мы часто называем этот момент «фазой прямоугольников», по' скольку эскизы начинаются с разделения каждого представления на прямоугольные области, соответствующие панелям, элементам управ' ления (скажем, панелям инструментов) и другим высокоуровневым контейнерам (рис. 7.1). Давайте прямоугольникам названия, показы' вайте, каким образом одна группа элементов влияет на другие.

Разумно сделать несколько набросков, отражающих различные вари' анты расположения высокоуровневых контейнеров внутри интерфей' са. Начинать следует с самой схематичной визуализации: каждую функциональную группу или контейнер представляет прямоугольник с названием, общую картину дополняют описания связей различных областей (рис. 7.1).

Не пропускайте этап изучения инфраструктуры в целом, не позволяй' те деталям отдельных частей интерфейса отвлекать вас (хотя попытки представить содержимое каждого из контейнеров помогут решить, как расположить элементы и сколько пространства под них отвести). Для проектирования на уровне отдельных интерфейсных элементов будет еще уйма времени, а попытка заняться ими слишком рано связа' на с риском утратить при движении вперед логичность интерфейса. Уровень абстрактности «фазы прямоугольников» позволяет с легко' стью исследовать массу способов представления информации и функ'

Рис. 7.1. Пример ранних макетов компоновки: работа студии Cooper для Cross Country TravCorp – интернет-портала для мобильных медсестер. Наброски экранной компоновки должны быть простыми – поначалу достаточно прямо- угольников, названий и простых описаний связей между функциональными областями. Можно делать визуальные намеки на детали более низкого уровня, чтобы дать представление о содержимом областей, однако не попадайте

в ловушку – не переходите на этом шаге к проектированию деталей

циональности и при необходимости вносить радикальные изменения. Часто оказывается полезным попробовать несколько вариантов распо' ложения областей и выполнить проверочные сценарии (см. шаг 6 ни' же) – и только тогда остановиться на лучшем решении. Трата слиш' ком больших сил и времени на мелкие детали на ранней стадии проек' тирования затрудняет проектировщикам смену курса в сторону более правильного решения. Выбросить результаты работы и попробовать иной подход легче, когда затраты невелики.

Создание макета общей компоновки – процесс итерационный, и эту ра' боту лучше выполнять небольшой сплоченной группой из графическо' го дизайнера, промдизайнера и одного'двух проектировщиков взаимо' действия (в идеале – проектировщика взаимодействия и «коммуника' тора» – человека, который думает в терминах текстового описания про' дукта). По нашему опыту простая белая доска – лучший инструмент для создания первоначальных набросков. Она способствует совмест' ной работе, обсуждениям и, разумеется, позволяет быстро все стереть и нарисовать заново. В таком варианте цифровой фотоаппарат – про' стое средство моментальной фиксации идей для последующего их рас' смотрения.

Когда макеты достигают разумного уровня детализации, можно перехо' дить к использованию компьютерных инструментов рисования. У каж' дого инструмента есть достоинства и недостатки, но чаще всего для ри'

сования высокоуровневых эскизов интерфейса применяются такие продукты, как Adobe Fireworks, Adobe Illustrator, Microsoft Visio, Mi' crosoft PowerPoint и OmniGraffle от Omni Group. Главное здесь – най' ти наиболее удобный для вас инструмент, позволяющий быстро рабо' тать на высоком уровне, не вдаваясь в детали. Мы находим полезным применять для макетов инфраструктуры такой стиль, который под' черкивает схематичность предложенных решений (вспомним, что гру' бые наброски лучше всего стимулируют обсуждение проектных реше' ний). Крайне важно также иметь возможность легко получить визуа' лизацию набора последовательно связанных экранов, отражающую поведение продукта при выполнении ключевого сценария (система

«фреймов»1 в Fireworks делает этот инструмент особенно удобным для решения данной задачи).