Блог

Самый милый котик

На картинке ниже представлена карта кликов на одном из моих проектов. Суть проекта такая же, как у цукерберговского предшественника фэйсбука. Необходимо из двух котиков выбрать того, который милее. На карте кликов видно, как пользователи выбирали одну из картинок, переключали языковые версии, отправляли фотки своих любимцев. Но что это за куча кликов по кнопке «или» между изображениями и россыпь кликов в подвале и рядом с фотографиями? Посмотрите на картинку и попробуйте ответить сами:

click_map

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

Работа с таблицами в Axure

Работать с таблицами в Axure — это испытание. Но вы всегда можете воспользоваться привычным Excel и копировать таблицу оттуда. Axure распознаёт вставляемый элемент как таблицу и предлагает два варианта: вставить её как таблицу (кнопка «Yes») или как изображение (кнопка «No»). При этом у меня вместо изображения с таблицей вставляется пустое изображение.

paste_table

Пользуйтесь программами захвата изображений с экрана

Заголовок сам по себе является полноценным советом. Лично я использую программу clip2net. Она позволяет выделить нужную область экрана и скопировать её в буфер обмена, либо сохранить в отдельный файл. Если вы скопировали изображение в буфер обмена, вы сможете вставить его в Axure, просто нажав комбинацию клавиш ctrl+v на любой странице прототипа.

Организуем входные страницы для прототипов

Не забывайте добавлять в свои прототипы входные страницы. На них можно указать версию, дату и время релиза, автора релиза, а также опубликовать несколько ссылок для перехода на основные не связанные друг с другом разделы прототипа (Например, «Главная» и «Главная с баннерами»).

Enter_page

Мега-прототип

Работая в Axure, со временем вы будете накапливать множество типовых интерфейсных решений, разбросанных по разным прототипам. Имеет смысл брать лучшие и наиболее универсальные из них и помещать в отдельный мега-прототип. Структурировать этот прототип по направлениям — постранички, формы, элементы списков, фильтры, социальные кнопки и так далее, после чего держать его в актуальном состоянии. Таким образом вы можете сэкономить уйму времени, просто перетаскивая нужные элементы из прототипа в прототип.
Так же можно пользоваться и библиотеками акшуры, но гораздо удобнее сделать ctrl+c, ctrl+v для целой формы регистрации, например, или для раздела «вопросы и ответы», чем перетаскивать их из библиотеки. Библиотеки лучше использовать для маленьких типовых элементов (иконки, всплывающие подсказки и прочее).
Не забывайте, что можно копировать мастер в одном прототипе и вставить его в другом.

toggleVisibility в Axure

Если вам нужно, чтобы при клике по псевдоссылке (или какому-нибудь другому элементу) какая-нибудь динамическая панель исчезала и появлялась при повторном клике, то не мудрите с условиями и переменными. Используйте событие Toggle Visibility for Panel(s).

togglevis

Новая рубрика

В группе по Акшуре в контакте я начал публиковать ежедневные советы. С сегодняшнего дня также буду дублировать их и в этом блоге.

А пока вот советы, которые накопились за прошедшую неделю:

— Если на событие назначено несколько действий, их последовательность имеет значение. Если переход на другую страницу (или перезагрузка страницы) стоит в середине этой последовательности, остальные действия будут проигнорированы.
— Не забывайте, что событие onPageLoad есть не только на любой странице прототипов, но и в мастерах.
— Если при очередной генерации прототипа у вас возникает глюк, когда квадраты становятся плейсхолдерами или начинают менять свои размеры без причин, то просто укажите свои лейблы для каждого из этих элемнетов, и проблема будет устранена.
— Называйте страницы без использования кириллицы и пробелов и избежите проблем с публикацией прототипов в сети.
— Разносите содержимое динамических панелей по разным страницам. Так можно давать ссылку дизайнеру на любое из состояний страницы без дополнительных пояснений. Также никто не пропустит ваш спрятанный функционал.
— Псевдоссылка оформляется добавлением под текстом пунктирного разделителя.

Задача по Axure. Использование функции wait.

Коллеги, вашему вниманию предлагается задачка по Axure средней сложности. Кому интересно размять мозг — переходите по ссылке http://task1.projectorat.ru/

Как сделать полноценный слайдер в Axure

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

Вот просьба уважаемого Александра Гудова:

Добрый день, расскажите пожалуйста как реализовать полноценный слайдер в Axure. Со стрелками прокрутить слайд «влево» и «вправо». С автоматической прокруткой слайда. А также с кнопками с номерами слайдов. Так чтобы по клику на кнопки с номерами слайдов автоматическая прокрутка останавливалась.

К счастью, у меня как раз были свободные пол-часа и в результате появилось вот такое видео.

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

Как сделать сделать ползунок с диапазоном цен в Axure

В моём сообществе в контактике (http://vk.com/axure) пришёл вопрос, как сделать ползунок с диапазоном цен, как на сайте связного (http://www.svyaznoy.ru/catalog/phone/224)

Ответ я опубликовал в виде видеоролика. По традиции сделана половина работы, объясняющая принципы. Наслаждайтесь.

И, кстати, никогда не тратьте своё время на такие штуки в прототипе, если только не хотите произвести вау-эффект. Пустая трата времени. Принтскрин нужного элемента решает задачу.