Десять рекомендаций для эффективного дизайна в Axure.

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

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

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

Этот список из 10 рекомендаций объединяет лучшие обнаруженные мною подходы, которые позволяют сэкономить время при длительной работе над проектом. Такой способ работы не всегда дает быстрый результат в краткосрочных проектах, но позволяет достичь оптимальной гибкости при долгосрочной работе.

I) Никогда не используйте два виджета.

Наиболее распространенной ошибкой, которая приводит к повышению трудоемкости, является использование ненужных виджетов. Эта ошибка характерна для всех пользователей Axure, как для начинающих, так и продвинутых. Я до сих пор ловлю себя на этой ошибке и постоянно напоминаю себе об этой первой заповеди. Каждый виджет, который вы добавляете в свой проект, повлечёт за собой увеличение объемов работы, когда в будущем вам понадобится внести некоторые изменения. Все эти маленькие кусочки работы начнут расти после десяти повторных циклов. Ниже приведен простой пример того, как два визуально идентичных объекта могут быть созданы различными способами.

Axure-RP-Pro-7.0-BetaScreenSnapz015_500_mini
Увеличенная версия.

Оба примера показывают ситуацию, в которой кто-то использует отдельный виджет для текста и кнопки. Когда человек хочет добавить элемент со свойствами onClick ко всему объекту, у него есть два варианта как это можно сделать. Первый вариант заключается в добавлении активного участка над группой, в результате чего появляется три виджета, которые нужно обслуживать. Второй вариант заключается в создании onClick взаимодействия для обоих элементов, что приводит к появлению двух свойств.

Оба эти варианта в случае необходимости внесения каких-либо изменений будут отбирать у вас достаточно много времени. Гораздо более подходящий способ заключается в создании нужного объекта, путём добавляя текста в окно виджета.

Axure-RP-Pro-7.0-BetaScreenSnapz016_500_mini

Увеличенная версия.

Ваш текст может быть спозиционирован с помощью инструментов «выравнивание и заполнение». Теперь вам необходимо поддерживать только один виджет и нужно будет подключить только одно свойство.

Axure-RP-Pro-7.0-BetaScreenSnapz002_500_mini

Увеличенная версия.

II) Нельзя дублировать объекты. Создайте мастер объект.

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

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

Axure-RP-Pro-7.0-BetaScreenSnapz004_500_mini
Увеличенная версия.

После создания мастера, например, для плитки продукта, если вы решите изменить метку кнопки на «Купить сейчас», вы должны будете отредактировать её только один раз и затем увидите изменения в каждом экземпляре мастера.

Axure-RP-Pro-7.0-BetaScreenSnapz019_500_mini
Увеличенная версия.

Помните, что не нужно превращать слишком большие группы в мастера. Чем больше группа объектов, тем выше шанс, что в определенный момент необходимо будет вносить изменения в мастер. Лучшим решением в этом случае будет объединение мастеров в другие мастера. Это удобно в тех случаях, когда вам необходимо создать различные вариации одного мастера с набором всегда неизменных элементов и тех которые в каждом случае будут меняться. Ниже показан пример:

Axure-RP-Pro-7.0-BetaScreenSnapz020_500_mini
Увеличенная версия.

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

Axure-RP-Pro-7.0-BetaScreenSnapz021_500_mini
Увеличенная версия.

III) Не размещайте стили перед мастером.

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

Axure-RP-Pro-7.0-BetaScreenSnapz007_500_mini
Увеличенная версия.

Интуитивно понятное (объективное или ощущаемое, воспринимаемое) свойство объекта (среды, интерфейса), указывающее на то, каким образом следует взаимодействовать или использовать кнопку часто усиливается с помощью mouseOver и подобных свойств. Такое поведение часто создаётся в Axure благодаря использованию динамических панелей. Различные состояния помещаются на разные панели и выбираются с помощью скриптов. Однако с помощью этого метода вы должны были бы зайти в каждую из панелей состояний и изменить характеристики кнопки.

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

Axure-RP-Pro-7.0-BetaScreenSnapz009_500_mini
Увеличенная версия.

Axure-RP-Pro-7.0-BetaScreenSnapz010_500_mini
Увеличенная версия.

Полезный совет: используйте для обработки кнопок доступную в Axure 7 функцию «Auto fit width» (автоматический выбор ширины). Если вы установите в вашем стиле левое и правое заполнение, то вам всего лишь нужно будет изменить текст кнопки, а размер кнопки затем будет подобран автоматически.

Axure-RP-Pro-7.0-BetaScreenSnapz008_500_mini
Увеличенная версия.

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

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

  • Вы сможете сохранить понятную для вас организационную структуру. Если у вас есть сложные страницы, и вы хотите дополнить динамическую панель, для того чтобы найти подходящий элемент необходимо будет просмотреть длинный список всех вариантов. Вы можете использовать поле поиска — но только в том случае, если вы дали элементу адекватное название.
  • Члены вашей команды также смогут работать с проектом. Если вы, также как и я при создании проекта работаете в команде, то наверняка у вас возникали неожиданные обстоятельства. Вы или ваш коллега может неожиданно заболеть или вы должны работать над другим проектом. Очень важно, чтобы элементы проекта были понятны, чтобы любой мог вникнуть в суть и приступить к работе. Интерактивное построение другим человеком может быть особенно сложным шагом.
  • Вы сможете поделиться проектом с третьей стороной. В среднем проект, над которым я работаю, а также мои шаблоны одновременно направляются, по крайней мере, 10 людям. Некоторые люди будут сидеть со мной за одним столом, и могу без проблем с ними работать. С другими же людьми я никогда не встречался, и они не будут иметь ни малейшего представления о моём понимании шаблонов. В идеале прототип должен восприниматься без сопутствующих пояснительных документов.

Существует несколько вещей, которые позволяют мне достичь этих целей.

Создать страницу выгрузки.

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

Google-ChromeScreenSnapz007_500_mini

Увеличенная версия.

Страницам нужно давать уникальные и не требующие объяснений имена.

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

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

Большинство людей не представляет проект в виде дерева страниц; они думают о проекте, в первую очередь, как о совокупности потоков из каких-либо действий. В Axure существует возможность создавать блок-схемы, что позволяет отразить важные пользовательские процессы и объединять в узлы необходимые страницы. Вы также должны обеспечить дополнительный способ перемещения по прототипу (имена в блок-схеме должны основываться на тех, которые находятся в карте сайта. Таким образом, очевидной становится необходимость выбора понятных имен).

Axure-RP-Pro-7.0-BetaScreenSnapz023_500_mini
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.