Практика и требования предъявляемые к разработке прототипа в Axure

Материал из AOW

Перейти к: навигация, поиск

Содержание

Опыт

0. В первую очередь прослушать http://www.youtube.com/watch?v=BBySdd3ZNRM&list=PL4AF0401E23357E92&index=4&feature=plpp_video 107. Axure: Живые прототипы

1. Основной элемент в прототипировании это Restangle, в отличии от Text Panel и Hyperlink этому элементу можно задавать стиль Rollover (наведенный). Из Restangle элемента можно сделать ссылку ( с меняющимся фоном/текстом при наведении курсора), можно сделать кнопку, а можно просто задать текст.

2. К сожалению в Axure нельзя задать бордер только с одной стороны, но бордер можно легко сделать. Для этого надо создать Restangle с нужным бордером, а над ним разместить второй Restangle меньший по ширине или/и высоте на нужное число пикселей, с цветом бордера равного цвету фона.

3. При создании прототипа желательно использовать оттенки серого для всех элементов, для ссылок можно использовать синий цвет (н/п #0066FF). При выборе цвета удобней пользоваться нижней таблицей "серых" цветов.

4. Хорошо выглядят блоки у которых фон отличается от бордера на один тон серого (н/п #E4E4E4 и #F2F2F2)

5. При создании прототипа все однотипные элементы и блоки нужно оформлять одинаково, одинаковый цвет у бордеров, одинаковый цвет у фона. Для того что бы не запутаться можно создавать в мастере шпаргалку с основными цветами и тп.

6. Исходя из wireframe от Ветрова и uimodeling.ru картинки лучше всего обозначать с помощью элемента Restangle, с закругленными углами, фоном, бордером темнее на тон, указывать название картинки и размер картинки (н/п 100x50)

7. И в мастерах и на страницах желательно использовать модульную сетку (подробности ниже)

8. Если Restangle визуально выравнивается по левому краю, то и текст в Restangle должен выравниваться по левому краю, аналогично и с выравниванием по правому краю. Это упрощает работу по выравниванию, и улучшает внешний вид.

9. У элемента Restangle есть padding-и, и этим стоит пользоваться. Иногда проще вписать текст в Restangle и отцентрировать padding-ами, чем использовать Text Panel

10. Для выравнивания по центру в Restangle и Text Panel стоит использовать свойство text-allign

11. Если нужно скопировать несколько объединённых линками страниц из одного файла в другой, поступаем так File ->Import from RP file, выбираем файл, из которого хотим взять страницы, помечаем страницы (Мастера)

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

13. При вставки изображений в прототип не всегда масштабирование дает хороший результат. В этом случае можно порезать картинку Edit image -> Slice image


Модульная сетка

Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали.

Модульная сетка ускоряет и упрощает процесс создания прототипа.


За основу лучше всего брать сетку шириной 980 в 12 колонок.

Для создания глобальной сетки в Axure необходимо кликнуть правой по рабочему полю, выбрать пункт Grid and Guides -> Create Guides ->

Задать следующие значения:

of columns: 12

сolumn width: 60

gutter width: 20

width: 20

Поставить галочку напротив Create Global Guides


При создании прототипа нужно привязывать элементы сайта к сетки, выравнивать элементы сайта согласно сетки

Стили в Axure

Стили в Axure

Основная идея стилей в Axure такая же как и у стилей в CSS, задать однотипным элементом одинаковый фон, шрифт, цвет, подчеркивание и тп.

Называть стили рекомендуется так: H1, H2, H3, p, span и тп. Это стандартизирует и упростит работу остальных технических спецов.

Требования предъявляемые к оформлению прототипа.

prototype.arealsoft.ru/cmsmagazine.ru/01/


Глубина проработки

1. Все повторяющиеся элементы должны быть сделаны через мастера. Мастера должны быть разложены по папкам и проименованы в соответствии со своим предназначением.

2. Обязательно использовать встроенный редактор стилей — все стили текста в прототипе задаются только через него. Чем стилей меньше, тем лучше, отталкиваемся от семантики текстов и стандартных HTML-тегов: h1, h2 и т.д.

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

4. Необходимость залинковки прототипа обсуждаем с менеджером проекта. Если прототип залинкован частично, то отмечаем элементы, на которые можно нажать, треугольником. Не забываем подчеркивать псевдоссылки пунктирной линией.

5. Однотипные разделы можно не дублировать, показывая один раз. Тем не менее, если для них есть контент, размещение которого необходимо планировать, то делаем все страницы.

Внешний вид

7. При наличии реальных текстов, их можно и нужно использовать в прототипе. Запрещено использовать Lorem Ipsum и другие тексты, не имеющие отношения к проекту.

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

9. Все должно быть просто и аккуратно: минимум цветов, стандартные веб-шрифты, отсутствие полноцветных изображений и т.д.

10. Используйте осмысленное цветовое кодирование в прототипе.

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

12. Используем стандартные контролы, если нет острой необходимости в обратном.

Другое

13. Файлы, страницы, мастера и пр. необходимо именовать только латиницей. При выгрузке прототипа на сервер, не работает все, где использована кириллица.

Считаю, что требование, предъявляемое в пункте 13, является вредным. Именуя название страниц латиницей, становится не так удобно использовать автоматическое левое меню в прототипе генерируемого программой Axure в качестве дополнительного способа навигации по сайту, так как название на самой странице русское, а пункт в левом меню на английском. Особенно это облегчает процесс согласования прототипа для клиента. Лучше перенастроить сервер, чтобы он понимал русские имена файлов и убрать данное требование.

14. Все имена в прототипе должны быть осмыслены, начинаться с большой буквы и отражать суть объекта, пробелы заменяются на подчеркивание.

От себя добавлю: У нас прижилось присвоение, помимо словесного названия страниц, их численного значения. Например, 1.Main_page. Удобно, если требуется в процессе ссылаться на какую-либо страницу, назвать ее номер. В качестве страницы с номером 0 выступает майндмап проекта. Клиенту бывает полезно иметь перед глазами общую структуру.

Например: Cart_active_var2

15. Прототипы, публикуемые в интернете для согласования с заказчиком, обязательно защищать паролем. Особенно это относится к договорам с NDA.

Личные инструменты

Разработка веб-сайтов, автоматизация.
По всем вопросам обращайтесь по телефонам:

+7 495 640 29 90
http://artofweb.ru