Как стать автором
Обновить

Шаблон презентации мобильного приложения для Axure

Время на прочтение 2 мин
Количество просмотров 9.1K
В процессе работы над ui дизайном мобильной версии сайта или мобильного приложения я пробовал разные способы презентации его клиентам. Пока остановил выбор на Invision, но там есть ряд моментов.

image

Во-первых, стоимость. Для профи это не проблема, но для многих начинающих дизайнеров минимальные $13 в месяц вполне себе приличная сумма.

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

Другой вариант — Figma — не все ещё освоили, да и на факт, что он разовьётся в стандарт отрасли. Поэтому некоторые дизайнеры тоже обойдут его стороной.

Делаем презентацию дизайна мобильного приложения в Axure


Самым простым и доступным вариантом остаётся Axure в связке с Axshare. И вот тут начинает остро не хватать наглядности Invision — клиенты не всегда способны в деталях представить работу с приложением в уме.

Так что начнём разрабатывать свой инструментарий. И первым шагом сделаем шаблон для Axure с рамкой условного мобильного телефона. Для этого нам понадобится рамка телефона в PNG с «дыркой» в месте экрана, и структура экранов.

В начале — всё просто: вниз кладём картинку телефона, поверх кладём Inline Frame в размер дырки экрана. Но есть один неприятный момент. Он связан с особенностями элемента Inline Frame.
Этот элемент создает в прототипе окно для выгрузки разной информации — фрейм. В нём можно задать вывод другого экрана из структуры или вставить ссылку на сайт.

Проблема возникает в скролл-барах. Их можно либо показать, либо скрыть. Но при скрытых скролл-барах отключается перемотка — так что длинные экраны приложения не показать в динамике. Не порядок.

Для решения проблемы используем приём с маской (спасибо crackjack).

1. Inline Frame преобразуем в Dynamic Panel. Включаем отображение скроллбаров (если выключено).
2. Переводим фрейм и рамку телефона ещё раз в динамическую панель, у которой отключаем скроллбары. Размер нашей маски так же меняем на 360х640, чтобы скроллбары от фрейма не выглядывали.

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

Саму панель можно выровнять по середине браузера. В настройках Pin to Browser отмечаем параметры Center и Top. Публикуем всё на Axshare и отправляем ссылку клиенту.

Шорткат. Готовый шаблон для Axure


Результат я выложил готовым файлом. Скачать шаблон для Axure можно бесплатно по ссылке.

Важный момент


Шаблон рассчитан на макеты 360 по ширине. Это сделано специально. Макеты в 320 шириной выглядят слишком мелко для глаза на экране настольного компьютера, а макеты в оригинальном размере — 1080 (и даже 640), наоборот — слишком крупно.

P.S. Не буду писать стандартные инструкции что и куда. Я хочу дать больше практически полезных вещей для улучшения работы ux/ui дизайнеров.

С удовольствием отвечу на вопросы и буду рад предложениям по оптимизации!
Теги:
Хабы:
+4
Комментарии 3
Комментарии Комментарии 3

Публикации

Истории

Работа

Веб дизайнер
36 вакансий

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн