Основы проектирования веб-интерфейсов в Axure RP Pro

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

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

Средств для визуального проектирования становится все больше. Одни пользуются Adobe InDesign, другим нравится Visio, третьи довольствуются OpenOffice Draw. Но все больше поклонников появляется у довольно тяжелой и функциональной программы Axure RP Pro.

1. Карта сайта (Sitemap)

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

Карта сайта (Sitemap)

Кнопки в панели предназначены для быстрого доступа к основным функциям:

7d1b7e07d904776daac3a9d888ce3501 Создает вложенную страницу (Child page)

0f2334af69ba5520550593384ae50c18  Перемещают выбранную страницу вверх или вниз. Работают только со страницами одного уровня и не вытаскивают их за пределы родительского элемента. Если надо выделить и переместить вверх или вниз сразу несколько страниц — можно использовать Shift.

8af5b4b0e986d9b556773a814fc844e7 Изменяют уровень вложенности страниц. Стрелка влево выносит выбранные страницы на уровень выше, стрелка вправо подчиняет страницу родительскому элементу, расположенному над ней.

0d73bed1b6d2b44282fd0ec8f2251e4f Удаляет страницу. В том случае, если родительский элемент содержит вложенные элементы, они будут удалены вместе с ним.

1c39d26e5d25afe5c0904f2c8c45d463 Позволяет перейти к редактированию страницы, т. е. делает то же самое, что и двойной клик по странице.

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

2. Панель виджетов

Панель виджетов (Widgets)

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

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

Чтобы поместить элемент на страницу, используется метод Drag and Drop (элемент необходимо выделить и, не отпуская кнопку мыши, перетащить в рабочую область).

Основная библиотека, которую стоит использовать на стадии освоения программы, называется Wireframe. Ее элементы мы и будем использовать.

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

36c6cd0e2b2dbb27fdb59ab1080f2c04  Заглушка для изображения. Стандартный размер — 50×50px.

 

1824ea4bd5b33d6b216eff5821f30576  Текстовое поле (100×16px). По умолчанию используется Arial, 10, черный цвет.

 

e9b5cf43b2a6f510dd81d9b511d26f5b  Гиперссылка (100×16px). По умолчанию используется Arial, 10, синий цвет + подчеркивание.

 

f68a88d41a989bd11eab12779b009e9a Прямоугольник 180×80px с белой заливкой и черной рамкой в 1px.

a7eb08b6b02b8bbd8e5cfe0b62f1d1f0 Плэйсхолдер, предназначенный, например, для забивки баннерного места. 180×80px, рамка и диагонали — черные, 1px.

 

93143e225f0b6e1bb82667c50bb6cd81 Кнопка (100×25px).

 

066e626f8e12ee99d0b77a49df014d90 Таблица. По умолчанию создается таблица 3×3. Пользоваться элементом не очень удобно, т. к. ширина задается только всей таблице и не может задаваться определенным столбцам. Если же начинать руками смещать границы столбцов внутри таблицы — ширина увеличивается и уменьшается за счет общей ширины таблицы, а не других столбцов.

 

bf832c103ba43f31cd282ecf7da74370Поле для ввода текста (одна строка).

 

b5076caf52a6eb5d65793b0f8fdf4ac3 Область для ввода текста (любое количество строк и столбцов).

 

b505e85528af399952f74e41dceddccc Выпадающий список.

 

80561cf679f6669828142ee0fcce68e1 Многострочный список.

 

dd023d59ecac3abe29d33aa38660cc3c Чекбокс.

 

1e8e701adedb55eead65ed90aa94c740 Радиокнопка.

 

caa473c62fbffe5d41790c7b095dde14 Горизонтальная линия.

 

 

be62e33777575879677f88bc9e36a6be Вертикальная линия.

 

ff393a6d310353e055259d8004b7b163 Кнопка со скругленными углами. Может из кнопки легко превратиться в прямоугольник или квадрат. Радиус скругления можно задавать вручную, но только «на глазок». Поле для ввода точного радиуса разработчики поленились сделать.

 

9c4ac25d8cb149d9b0b62518e1da1c8f Область наложения для изображений.

 

 

5b48180c1ad170c3334e8c606286ca85 Фрейм, в который может подружаться информация с других страниц прототипа.

 

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

 

b392e24e51eafdb25fea84ea5edccac0 Вертикальное многоуровневое выпадающее меню.

 

 

c213fe3aeb705aae36e106cff65da84d Горизонтальное многоуровневое выпадающее меню.

 

 

7c24597474e947e0c650c6efc007aabd Раскрывающийся список.

 

3. Панель мастеров (Masters)

Панель мастеров (Masters)

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

Мастер-панели тоже могут быть многоуровневые (к примеру, футер может содержать дочерние элементы «контакты» и «счетчики»).

По умолчанию мастер-панелей нет. Чтобы завести ее и добавить на все страницы, надо выполнить последовательность:

Жмем кнопку AddMaster (7d1b7e07d904776daac3a9d888ce3501) → Два раза кликаем по созданной мастер-панели (в рабочей области открывается вкладка, на которой будет редактироваться содержимое мастер-панели) → Редактируем мастер-панель, добавляем на нее необходимые элементы → Правой кнопкой мыши по названию мастер-панели вызываем контекстное меню → Жмем «Add To Pages» → Выбираем необходимые страницы (если мастер-панель должна выводиться на всех страницах, можно воспользоваться кнопкой «Check All») → Выбираем позиционирование панели (в том случае, если будет выбрано Place in background, мастер-панель сохранит то же самое расположение, в котором она выполнена. Если выбрать Specify Location и задать левый и верхний отступы, мастер-панель займет указанное положение на страницах) → Жмем «ОK» и наслаждаемся размещенной мастер-панелью.

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

4. Рабочая область

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

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

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

Мастер-панели использоваться не будут, т. к. мы заведомо уверены в том, что разрабатывается только одна страница.

Итак, приступаем.

Для начала делаем скриншот исходника:

e1ba19dfc0d3159689f62267b4db3aef

Отмеряем по верхней линейке 1000px.

Размещаем прямоугольник, который будет служить фоном верхней навигационной панели и изменяем его размеры:

5e8d86ad737ef1558dcb2ba45bdd04cb

Убираем рамку у прямоугольника.

6d5a28995fe347fc3dda730195111878

Выбираем светло-серую заливку.

51e3ddc6f4cc9cfdc7cd9eb7ff1fb1d0

Используя интерфейсный элемент Hyperlink, вытаскиваем и располагаем в навигационной панели 4 ссылки, задаем им размер 8 вместо стандартной десятки. Цвет ссылкам можно задать сразу, но я оставлю это на совести тех, кто скачает и будет ковырять проект.

2fabcd0a47cac6298f10906b0b4d075e

Накидываем и оформляем блок новостей, используя элементы Text Panel для текста/ссылок и Rectangle для подложки «новость часа». Здесь сразу получаем несколько тонкостей.

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

ae6c95fb14c6b1a63400507b6429d8d0

Во-вторых, чтобы текстовые блоки имели равномерные вертикальные отступы, надо их выделить и выровнять по вертикали:

287a0d39ca01b1fb88f67b96ff3326d0

В-третьих, чтобы сделать прерывистое подчеркивание у ссылки-переключалки города, надо под надписью разместить горизонтальную линию (элемент Horizontal Line) и выбрать для нее тип подчеркивания.

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

f72b3e088b737f24e6064624724d2e65

Новости в общем виде готовы — можно переходить к строке поиска и к рекламному месту «Яндекс в вашем телефоне».

Накидываем ссылки над строкой поиска (Hyperlink) и размещаем саму строку поиска с кнопкой (Text Field + Button).

ab07b290e0fbc64f1f0897a1e3f49423

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

Не забываем про «например» (элемент Text) и «расширенный поиск» (Hyperlink).

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

Справа подложка под формой у Яндекса заканчивается нестандартно — на то он и дизайн. Фанаты могут вырезать из скриншота окончание подложки, разместить в рабочем поле элемент Image и подменить ее на нужную. Мы сделаем это в самом конце, потому что сейчас просто лень и есть более важные задачи. Например, поставить логотип.

Как раз сейчас мы и разберем подмену картинок. Это достаточно просто — надо вытащить в рабочую область элемент Image и, не изменяя его размеры, два раза кликнуть по нему. Откроется диалоговое окно, в котором мы должны выбрать файл изображения. После того, как мы нашли нужную картинку и нажали «OK», Axure задаст вопрос:

f488bba1b318bc4aeecc67655c099e10

Если отказаться — выбранная картинка будет подогнана под размер элемента Image. Если согласиться — картинка будет вставлена в том размере, в котором она существует. Как правило, приходится соглашаться.

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

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

Саму программу можно скачать с официального сайта. Триальная версия будет работать со всеми функциями в течение 30 дней.

Да, кстати, я не имею никакого отношения к этой программе и к компании, разработавшей ее. Этот инструмент был выбран исключительно из-за того, что из всего набора софта, который я перепробовал для проектирования, Axure понравилась больше всего. Я не исключаю того, что вы будете пользоваться другим софтом. Например: Обзор средств визуального проектирования.

h++p://habrahabr.ru/post/101938/
h++p://habrahabr.ru/post/191964/
h++p://habrahabr.ru/search/?q=[axure]&target_type=posts
h++p://www.it-agency.ru/academy/axure-getting-started

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*


16 − двенадцать =