Пять заповедей эффективного дизайна в Axure ~ Все и ничего

http://habrastorage.org/storage1/9cd733c8/12f4fe48/5363669f/cf3a536f.jpeg

Программа Axure RP (рус. Ак-шур Ар-Пи) - является мощным инструментом для быстрого создания прототипов. Приступить к работе с Axure очень просто, однако, в этом и заключается главная опасность. Работа с этой программой настолько интуитивна, что многие пользователи могут создавать в ней прототипы без какого-либо предварительного обучения. Но с другой стороны эти пользователи могут и не понимать того, что они использует Axure оптимально.
По нашему опыту, как интернет-агентства занимающегося разработкой уникального дизайна для каждого проекта, мы редко когда рисовали дизайн макет и делали все правильно с первого раза (клиенты, как правило, любят вносить корректировки). Обычно на разработку главного экрана приложения или сайта приходится затратить на этот процесс не менее 3-х итераций.
Порой изменения конкретной страницы влечут за собой изменения и всех сделанных ранее страничек и в эти моменты функционал Axure позволяет сэкономить много часов рабочего времени.
Полезной функцией является - командная разработка прототипов, когда сразу несколько специалистов работают над одним проектом в режиме онлайн (“team” projects в Axure 7+). Такой подход требует аккуратной и структурированной работы команды. Ниже на странице описаны заповеди по работе в Axure, потому что это инструмент с которым в настоящее время работаем мы, но многие принципы применяются и к другим программным инструментам.
Этот список из 5 заповедей, который позволяют сэкономить время в долгосрочной перспективе . Такой способ работы не всегда дает быстрый результат в краткосрочной перспективе, но он позволяет достичь оптимальной гибкости при работе над большими или трудоемкими проектами.
1) Один виджет лучше чем два виджета
Наиболее распространенной ошибкой, которое можно заметить за начинающими пользователями и продвинутыми является использование ненужных виджетов. Каждый виджет, который вы добавляете в свой проект потребует немного больше работы, когда вам потребуется внести какие-либо изменения в будущем. Все эти маленькие задачки начнут расти после десяти итераций. Ниже приведен простой пример того, как два визуально идентичных объекта могут быть построены по-разному:

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

Ваш текст может быть отформатирован с помощью “alignment and padding” инструментов. Теперь у вас есть только один элемент для работы и нужно будет изменить только один параметр для него.

2) Не дублируйте объекты, а создавайте группы мастер-объектов
Когда становится понятно, что нужно изменить навигации в главном меню на каждой странице сайта, меня переполняют только положительные эмоции. И не потому что мне нравится монотонная работа, а потому, что все, что нужно сделать, это изменить один единый мастер-объект и вуаля - весь проект был обновлен.
Использование функции «мастера» (англ. Master) для навигационного меню совершенно очевидно. Всякий раз, когда вы столкнетесь с копированием и вставкой группы виджетов, всегда помните, что создание «мастер-объекта» гораздо практичнее и удобнее.

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

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

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

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

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

Совет: Используйте функцию “Auto fit width” (в версиях ПО Axure 7 и выше) для кнопкок. Если вы установили в стилях выравнивание по левому и правому краям, все что вам нужно изменить это текст кнопки, а затем размер кнопки автоматически адаптируется.
4) Давайте файлам четкие и понятные названия
Axure предоставляет множество возможностей для отличной организации проекта. Каждому элементу, который вы размещаете на странице может быть присвоено уникальное имя. Страницы могут быть названы и организованы в древовидную структуру. Но зачем все это?

Держать вещи организовано для себя.

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

Организовывайте работу по проекту для коллег

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

Ваш плоды работ будут презентованы третьей стороне (клиенту)

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

Называйте прототипы и внутренние страницы уникальными и понятными именами
Прототип будет легче понять, если имена страниц ясны и своим именем объясняют, что это за страницы. Люди будут также использовать эти имена в будущем. Если, например, веб дизайнер работает над созданием дизайна на основе вашего прототипа, он, скорее всего, использует аналогичные имена для своих макетов, какие и были указаны в прототипе. Если имена страниц не являются уникальными, то разные названия страниц появится.
Создайте блок схему с разбивкой на страницы проекта (Flowchart of the most common user flows)
Большинство людей не думают о дизайне в виде дерева страниц, они думают в терминах пользовательских сценариев. Вы можете создавать блок-схемы в Axure, чтобы отразить важные потоки и связать узлы к соответствующим страницам. Затем вы должны обеспечить дополнительные пути для навигации по прототипу. (Имена в блок-схеме будут основываться на тех, что указаны в карте сайта.)

5) Используйте только глобальные направляющие и сетки (Global Guides And A Grid)
Axure позволяет пользователям создавать два вида направляющих: локальные (англ. local guides), которые существуют только на текущей странице, и глобальные (англ. global guides), которые видны на всех страницах. Направляющие можно создать с помощью диалогового окна “Create Guides”. Если вы создали направляющие, например, по умолчанию 960 Grid, то последовательно позиционирование элементов по различным страницам становится намного проще. Кроме того, члены вашей команды увидят эти глобальные направляющие в общих проекта (англ. shared projects).

Использование сетки может помочь вам сохранить ваши проекты чистыми и структурированными. Обычно используется сетка 10 × 10 пикселей и создаются объекты с размерами кратными 10px, например, кнопку 60 × 20 пикселей, а не 55 × 18 пикселей. Когда вы размещаете эти объекты на сетке, их становится легче выровнять. Конечно же можно позволить себе отклоняться от сетки для специальных объектов, которые нуждаются в различных измерениях.
Совет: В Axure 7, вы сможете настроить различные наборы глобальных направляющих для мобильных и стационарных дизайнов страничек. Вот пример мобильной сетки: