Каждый, кто использует Axure и когда-нибудь делал реалистичные прототипы, знает, как непросто иногда бывает соблюсти баланс между глубокой интерактивностью и быстродействием. Страницы со сложной логикой загружаются медленно и неравномерно. Пользователь, не дождавшись окончательной загрузки, начинает пытаться взаимодействовать со страницей - и в результате получает негативный опыт: страница сначала не реагирует на изменения, но зато потом с удовольствием выполняет сразу все, что он там успел натыкать за это время.
Разработчики обещают улучшить быстродействие в Axure 9, но пока не ясно, коснется ли это скорости отрисовки страниц, так как здесь проблема больше архитектурная: браузеру необходимо время, чтобы отрендерить сотню абсолютно-позиционированных элементов, да еще прогнать их перед этим через JS-движок.
Пока что ясно одно: долгая загрузка сложных страниц - это ограничение, с которым надо смириться. Мы не можем кардинально повлиять на скорость рендеринга, но можем минимизировать или сгладить его негативный эффект.
Способов этого достичь довольно много: здесь и грамотное использование динамических панелей, и глобальные переменные, и предварительное кеширование "мастеров", и многое другое. Однако большинство этих способов не универсальные и подходят только в очень конкретных и специфических случаях. Когда-нибудь я расскажу и про них, а сейчас лучше разберем самый простой вариант, подходящий практически всем.
Глобальный прелоадер
Никто не любит прелоадеры. Это обоснованно и справедливо: лучше показать верхнюю часть страницы как можно быстрее, а остальное рендерить потом. К сожалению, Axure так не умеет. И если страница в прототипе грузится пять секунд - лучше вывести лоадер, чем заставлять пользователя испытывать негатив от непредсказуемого поведения интерфейса.
Лоадер убивает сразу два зайца: делает недоступным взаимодействие с интерфейсом и показывает пользователю, что страница не "зависла", а просто прогружается. Обычно это решается двумя компонентами: маской во всю высоту и ширину видимой области (иногда ее можно даже немного затенить) и, собственно, лоадером (анимированным изображением). Однако Axure и здесь вставляет нам некоторое количество палок в колеса. Палок, которые мы и будем сейчас побеждать (в конце поста будет ссылка на готовый .rp-файл).
1. Создаем мастер-контейнер
Желательно, чтобы наш лоадер присутствовал абсолютно на всех страницах прототипа. Мы выстроим его архитектуру и поведение так, что там, где загрузка будет быстрой, пользователи даже не будут его замечать; но если страница рендерится долго, то лоадер предстанет во всей красе.
Для начала создаем мастер и называем его "Global Loader" (или как угодно на ваш вкус):
2. Добавляем изображение лоадера
Засовываем в мастер изображение (желательно белое на прозрачном фоне), называем его "rotating image".
Впоследствии нам нужно будет позиционировать его определенным образом, но Axure умеет делать это только с динамическими панелями - поэтому создаем на основе нашего изображения Dynamic Panel, называем его "global loader" (c маленьких букв, в отличии от мастера) и меняем ее фон ("Back color" на вкладке "STYLE") на полупрозрачный черный.
В итоге у нас получается нечто подобное:
3. Немножко магии с CSS
Нам важно, чтобы наш лоадер появлялся в самом начале загрузки и исчезал, когда страница окончательно загрузится. И если со вторым не ожидается особых проблем, то с первым проблемы будут однозначно: он должен располагаться поверх остальных элементов, а картинка должна крутиться - и все это будет откладывать рендеринг загрузчика, так как Axure умеет вытворять подобное только через JS. Единственный способ победить эту историю - с самого начала сказать браузеру, как именно должен выглядеть и вести себя лоадер. Что у нас выполняется раньше, чем JS? Правильно, CSS. Его и заюзаем.
Проще всего прикрутить файл c CSS через раздел "Web Fonts" в панели генерации HTML.
Сперва создадим файл axure-loader.css со следующим содержимым:
[data-label="global loader"] {position:fixed !important;z-index:9999 !important; left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;height: 100vh !important;width:100% !important;} [data-label="global loader"] div {position:absolute !important;left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;height: 100vh !important;width:100% !important;} [data-label="global loader"] [data-label="rotating image"] {display: flex !important;align-items: center !important;justify-content: center !important;} [data-label="global loader"] [data-label="rotating image"] img {position:relative !important;animation:spin 4s linear infinite;} @keyframes spin {100% {transform:rotate(360deg)}}
Заливаем его куда-нибудь, откуда он будет доступен в Сети (для тех, у кого нет своего сервера/хостинга я залил аналогичный файл к себе, пользуйтесь: https://proto.sherer.pro/axure-loader.css).
Теперь подключаем этот файл к нашему прототипу через раздел "Web Fonts":
4. Проверяем, что получилось
Теперь добавляем наш мастер "Global Loader" на нужную страницу, запускаем в браузере и смотрим. Должно получиться что-то типа того:
5. Скрываем лоадер, когда страница загрузилась
Тут все просто: вешаем в наш мастер на событие "onPageLoad" сокрытие динамической панели:
6. Подчищаем и тестируем
Скрываем из представления наш мастер (чтобы он не мозолил глаза при прототипировании) и добавляем безумное количество тестового контента, чтобы проверить лоадер:
Если все сделано правильно, то лоадер появляется при начале загрузки, и скрывается, когда весь контент загрузился и отрендерился. При этом на "легких" страницах загрузчик даже не будет заметен - Axure скроет его практически одновременно с финалом загрузки.
А вот и обещанный файл прототипа: global-preloader.rp.
Еще больше букв и картинок про дизайн и проектирование можно увидеть на моем сайте и здесь, в дзен-канале.