10 заповедей эффективного проектирования в Axure

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

Ниже представлены 10 заповедей, призванных повысить эффективность вашей работы с Axure и сэкономить ваше время и время вашей команды.

1. Не используй два “виджета”, где хватит одного.

Наиболее часто встречающаяся ошибка как новичков, так и более опытных пользователей Axure — это использование ненужных элементов (виджетов). Ниже приведен пример того, как визуально идентичные элементы могут быть созданы различными способами.

Пример неправильного создания кнопки. В первом случае пользователь добавляет взаимодействие Onclick на “Hotspot / Image map region” виджет, помещенный над кнопкой. Во втором случае взаимодействие Onclick добавляется на саму кнопку и на ее лейбл.

Правильней же было бы добавить виджет “Rectangle”, совпадающий по размеру с кнопкой, и добавить к нему обработчик взаимодействии Onclick:

Данный пример, конечно, подходит только для замысловатых кнопок, которые у вас не получилось создать стандартным виджетом “Button Shape”.

2. Не дублируй схожие элементы, переводи их в master.

Если вас настигнут изменения на конечной стадии проекта, то в случае, если вы не использовали функционал “Masters”, вам предстоит переделать огромный кусок скучной и монотонной работы по изменению компонентов везде, где они встречаются в проекте. Например, поменять название пункта в навигационном меню.

Использование компонентов “Master” кажется неизбежным при создании меню, однако надо помнить о данной функциональности и при создании других элементов. В любой момент при копировании и вставке элемента спрашивайте себя: “а не стоит ли перевести данный элемент в master?”.

Если вы вдруг решите поменять название кнопки на “Buy Now”, то master сэкономит вам кучу времени и сил, ведь вам не придется менять название в каждом блоке, а только в master’е.

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

В данном базовом master’е отсутствует информация о цене, но его можно объединить с одним из других master’ов для создания конечного отображения товара.

3. Используй стили

Master’а отлично подходят для создания повторяющихся элементов, но они не помогают внести разнообразия в элементы, так как каждый элемент, созданный из master’а будет идентичен всем остальным. Тут нам на помощь приходят стили.
Допустим вам надо добавить кнопку, которая должна дублироваться на многих страницах, но подписи кнопок дожны быть разными. Стили помогут вам изменить любое свойство кнопки.

Часто к кнопкам добавляют различные поведения, как MouseOver, MouseDown и т.д. Эти поведения многие пользователи задают при помощи динамических панелей (компонент “Dynamic Panel”). Состояния кнопки для разного поведения размещают по отдельным динамическим панелям и задают обработку событий для каждой из панели.

Более быстрым и удобным является использование функциональности под названием “Interaction Styles”. С ее помощью можно задать необходимые стили и поведение кнопки, не создавая при этом дополнительных элементов.

Для кнопок так же желательно использовать функцию “Auto Fit Width”, которая автоматически растягивает ширину кнопки, чтобы оптимально вместить в нее текст.

4. Создавай четкую структуру проекта и именование элементов

Чтобы избежать путаницы в большом количестве страниц и элементов, особенно при работе в команде, пользуйтесь следующими приемами:

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

5. Всегда используй глобальную разметку.

Axure позволяет пользователям создавать два типа разметки: (grid) — локальную, которая видна только на одной из страниц и глобальную, которая отображается на каждой странице. Разметку можно настроить при диалогового окна “Grid and Guides -> Create Guides”, доступного при правом клике на пустом месте прототипа. Постоянное использование разметки, например, 960 grid намного упростить задачу расположения элементов на прототипе всей команде.

6. Не забывай про функцию Import

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

Для большего удобства вы можете завести у себя “материнский” .rp-файл, в котором будут храниться все необходимые вам элементы.

7. Сохраняй прошлые версии страниц

Порой приходится “откатываться” до предыдущей версии страницы, и если вы ее изменили, то придется все переделывать заново.

В данном случае я советую создавать папку “Bin”, куда удобно складывать прошлые версии страниц.

При генерации прототипа просто отключите функцию “Generate All Pages” и выберите, те страницы, которые вам необходимо продемонстрировать. Таким образом вы скроете старые версии страниц.

8. Не создавай ненужных взаимодействий

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

Создавайте взаимодействия только в случае, если ответ на один из следующих трех вопросов — “ДА”:

• Необходима ли мне интерактивность для избежания двусмысленности? Будет ли ваш прототип понят неверно, если вы не добавите взаимодействие?
• Можно ли в будущем сэкономить время за счет добавления интерактивности? Будет ли более быстрым создание взаимодействия, нежели объяснение и документирование всех состояний элемента?
• Надо ли мне убедить кого-либо в использовании динамических элементов?Если мне будет сложно кого то убедить в необходимости использования динамических элементов, то мне проще будет переманить человека на свою сторону, если я смогу показать, как мое решение работает в динамике.

Однако, если ответ на все три вопроса — “НЕТ”, то лучше сделать несколько статических вариантов страницы или элемента, нежели создавать взаимодействие.

9. Используй шрифты вместо иконок

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

Сейчас существует довольно большое количество шрифтов “icon font”, в которых символами являются различные иконки, которые можно использовать в проекте. С помощь таких шрифтов вы можете добавить графический элемент для кнопки и при этом не нарушить первую заповедь, а так же легко изменять стиль иконки.

10. Просматривай прототип в браузере

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

Отображение в Axure

Отображение в браузере:

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

Заключение

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

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

Оригинальная статья:
http://uxdesign.smashingmagazine.com/2013/10/04/ten-commandments-of-efficient-design-in-axure/

Перевод подготовил Check