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



Во-первых, стоимость. Для профи это не проблема, но для многих начинающих дизайнеров минимальные $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 дизайнеров.

С удовольствием отвечу на вопросы и буду рад предложениям по оптимизации!