Axure 6.5: Life Hacks

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

1. Разрезаем картинку

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

В контекстом меню картинки нужно выбрать Edit Image -> Slice Image:

Вы увидите 2 линии, используя которые можно покромсать картинку на 4 части:

Вот собственно и результат:

Части можно использовать по-отдельности, а можно просто удалить лишние. Кстати, можно разрезать картинку только по горизонтали или только по вертикали.

2.  Добавляем сетку

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

Дальше все довольно просто. Можно выбрать готовые сетки (конечно же, всем известную 960 Grid), а можно создать любую на свой вкус:

В результате вы получите вот такую штуку:

3. Настраиваем вид кнопки

Очень многие, кто сталкиваются с Axure первый (и даже не первый) раз, задают вопрос: «А как же мне поменять вид кнопки?» Ответ на этот вопрос – никак. У элемента Button нет возможности, к примеру, изменить форму или цвет. Однако это не такая уж и проблема, если знать о том, что есть виджет Button Shape, который умеет многое:

Если у такого Button Shape выбрать в контекстном меню  Edit Button Shape -> Select Shape, можно получить много интересных опций:

Вот как выглядят все эти варианты:

Добавляем к этому заливку (в том числе – градиентную), цвет линии, цвет текста – и получаем ту самую кнопку, о которой всегда мечтали.

4. Настраиваем поведение кнопки

С внешним видом кнопки разобрались. Но это еще не все: Button Shape может также выглядеть по-разному в разных ситуациях. И это задается не в разделе Interactions, как можно бы предположить, а тоже в контекстном меню:

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

А результат получается такой (вид задан для Rollover):

5. Быстро прячем динамическую панель

Иногда динамическую панель на странице не нужно показывать сразу. Можно, конечно, прописать действие HidePanel() для события onPageLoad(), но есть и более подходящий вариант:

6. Создаем поле для ввода пароля

Довольно тривиальная задача. Мудрить не нужно: в Axure есть для этого все необходимое. Берем обычный Text Field и открываем контекстное меню:

Если мы выберем пункт Edit Text Field -> Mask Text (Password Field), то вот что получим:

7. Копируем стиль

Format Painter (да-да, речь про кисточку) – чертовски полезный инструмент в любом ПО. Но Axure позволяет использовать эту штуку особенно эффективно.

Итак, представим на минуту, что у нас есть:

а) виджет, чей вид нам нужно быстро скопировать

б) виджет(ы), которые должны выглядеть, как виджет из пункта а.

Выделяем нужный виджет (в примере это текст, но функцию можно использовать для чего угодно, в том числе – для кнопок) и нажимаем на Format Painter в меню:

Перед нами появляется вот такое окошко (оно – не модальное, все, что под ним – кликабельно и юзабильно, в этом и прелесть).

Выбираем нужные нам виджеты и нажимаем Apply (при этом мы можем изменить до этого любой параметр, как хотим):

Результат:

8. Задаем стиль виджетов по умолчанию

Иногда вы заранее знаете, как должны выглядеть все виджеты в прототипе (например, если вы проектируете под мобильные устройства, вы, скорее всего, уже знаете, какой шрифт будет использован). Axure позволяет задать нужный вам стиль в одном месте, чтобы не повторять его потом по 10 раз. Делается это через пункт меню Wireframe –> Widget Style Editor

9. Копируем Cases

Очень маленький и очень полезный пункт: строки в Cases можно копировать и вставлять, как в рамках одного виджета, так и в другие виджеты и кейсы. Используйте привычные Ctrl+C и Ctrl+V и наслаждайтесь.

10. Используем Image Maps Region

Элемент Image Map Region часто незаслуженно игнорируется, а зря. Он позволяет сделать, как минимум, 2 полезные вещи:

1)      Избежать копирования одних и тех же действий на разные элементы (к примеру, на кнопку и на текст на кнопке). Положив Image Map сверху, вы получите возможность задать желаемое поведение только 1 раз, и оно будет справедливо для всех элементов, что находятся под ним

2)      Добиться разного поведения у одного элемента от клика на нем в разных местах. К примеру, у вас есть картинка — карта мира и вы хотите, чтобы при клике на определенную страну открывалась одна страница, а при клике на другую – другая. Тут вам и пригодится Image Map (а точнее – 2 таких элемента)

11. Вращаем элементы

Вот это, воистину, hidden feature.  Выделите элемент и, удерживая Ctrl, поднесите курсор к его углу. А теперь – вращайте!

Было:

 

Стало:

Увы, работает не на всех элементах.

 

12. Прячем Site Map в браузере

По умолчанию прототип Axure открывается в браузере с панелью навигации слева. Но ее можно спрятать. Для этого нажмите Show Links and Options и копируйте ссылку без sitemap.

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

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