Створення інтерактивного посібника для додатка
Команди підтримки часто стикаються з труднощами при роботі з додатками, які вони ніколи не встановлювали.
PDF зі скриншотами — це стандартне рішення. Але більшість людей не читають PDF. Я хотів створити щось краще. Мені потрібен був посібник, який відчувається як справжній додаток. Ви бачите головний екран, натискаєте кнопку — і з’являється наступний екран.
Я створив інтерактивний посібник, використовуючи реальні скриншоти та клікабельні хотспоти.
Як це працює
Для зображень я використав Firebase Storage, а для логіки — vanilla JavaScript. Жодних сторонніх бібліотек.
- Кожен екран — це одне цілісне зображення.
- Я розміщую поверх зображення невидимі прямокутники, які називаються хотспотами.
- Ці хотспоти використовують відсотки замість пікселів. Це дозволяє їм залишатися вирівняними при зміні розміру вікна.
- Навігацію забезпечує простий автомат станів (state machine). Кожен екран має ID, зображення та список хотспотів.
Редактор
Вимірювати координати вручну — це довго. Щоб прискорити процес, я створив окремий HTML-редактор.
- Завантажте скриншот.
- Перетягніть мишу, щоб намалювати хотспот.
- Прив'яжіть хотспот до цільового екрана.
- Експортуйте код напряму.
Дизайнерські рішення
Не кожен екран має повну навігацію. Щоб уникнути плутанини, я додав пульсуюче синє сяйво для клікабельних зон. Це показує користувачам, куди саме можна натиснути.
Ключові технічні уроки
- Firebase Storage: Не створюйте URL-адреси вручну. Використовуйте метод SDK
getDownloadURL. Він включає токен автентифікації, необхідний для обходу правил безпеки. - CSS Flexbox: Якщо ви використовуєте
flex: 1у макеті колонкою (column layout), батьківський елемент повинен мати чітко визначену висоту. Встановітьmin-height: 0для дочірнього елемента, щоб запобігти виходу за межі (overflow). - Продуктивність: Виклик Firebase при кожному кліку створює затримку. Я впровадив кешування в оперативній пам'яті та попередньо завантажив усі зображення під час відкриття модального вікна. Це робить навігацію миттєвою.
- Масштабування: Використовуйте CSS-властивість
transform: scale(). Це гарантує, що зображення та хотспоти залишатимуться ідеально вирівняними незалежно від розміру екрана.
Результат
- 20 екранів із навігацією, що працює як у справжнього смартфона.
- 52 хотспоти з візуальними підказками.
- Миттєве завантаження завдяки попередньому завантаженню та кешуванню.
- Адаптивний дизайн, що підлаштовується під будь-який розмір модального вікна.