Ми перетворили головний екран нашого застосунку на живий всесвіт, який змінюється протягом дня. Це стало однією з найбільш мистецьких функцій нашого застосунку, і в цій статті ми розкриємо особливості її реалізації.
Якщо вам більше до вподоби відеоформат, ось він:
За останній рік лише 6% користувачів tTravel змінювали шпалери — більшість навіть не знала про існування цієї функції, адже її не показували явно. Тож ми замислилися: як трохи підштовхнути користувачів, не зіпсувавши відчуття пасхалки?
Щоб виконати це завдання, ми об’єдналися з Liuba Syrotiuk — талановитою художницею-аніматоркою Rive, з якою познайомилися на Lisbon Web Summit.
Під час мозкового штурму ми розглядали дві ідеї для підказки:
- Підсвічені краї шпалер. Натхненням став ефект ореолу в Journey.
- Птах, що пролітає головним екраном застосунку, — щось, що викликає цікавість і бажання «спіймати» його, торкнувшись екрана. А після дотику шпалери змінюються.
Ми вибрали птаха й вирішили перетворити наші статичні шпалери на всесвіти, сповнені життя, руху й часу.
Спочатку Liuba розширила дизайн наших старих шпалер
до семи нових всесвітів і виконала корекцію кольорів, щоб узгодити їх із палітрою нашого застосунку.
Потім у файлі Illustrator вона розробила часові варіації для кожного всесвіту, щоб створити повний цикл день–ніч. Відкрийте застосунок уранці — і побачите сонячний пейзаж. Поверніться ввечері — і побачите сяйливий захід сонця або зоряну ніч.
Крім того, Liuba реалізувала ефект паралаксу, що реагує на нахил телефона, і додала рухомі елементи, як-от хмари або метеори, щоб привернути увагу користувача.
Нарешті, ми прагнули створити пошарові переходи: замість статичної заміни зображень із першої ітерації елементи тепер плавно згасають і зміщуються.
Проєктування плавних переходів
Ось нотатки Liuba про робочий процес і труднощі, з якими вона зіткнулася, оживляючи наш головний екран:
Одним із головних викликів у дизайні й анімації для мене було не створення самого ефекту паралаксу, а пошук способу організувати плавні переходи між двома параметрами кожного всесвіту: часом доби та зміною всесвіту.
Нашою метою було досягти ефекту пошарового переходу з панорамуванням, у якому один елемент непомітно замінює інший. Першим кроком у Rive стало перенесення всього з Illustrator: потрібно було переконатися, що кольори працюють, виправити градієнти й налаштувати простий ефект панорамування.
Коли все було експортовано в Rive, я налаштувала паралакс і відкоригувала кольори, перш ніж зосередитися на переходах.
Спершу для тестування я побудувала обидва переходи як окремі шари, де будь-який стан змінювався простим тригером. Ми планували створити переходи з двома числовими тригерами: перший числовий тригер змінює всесвіт, а другий керує часом доби (який має самостійно й автоматично змінюватися протягом 24 годин). Після тестування першого файлу Rive ми зрозуміли, що потрібні тригери для кожного всесвіту й кожного часу доби, щоб розробники могли краще цим керувати.
Я тестувала різні машини станів, а щоб виправити перехід між всесвітами, спробувала додати ще один шар з анімаціями входу/виходу для кожного всесвіту, у якому шари входили й виходили. Цей підхід працював під час запуску як зміни всесвіту, так і зміни часу доби. На цьому етапі перехід виглядав краще й відчувався плавнішим, але все ще не був ідеальним:
Після кількох раундів тестування я зрозуміла, що переходи виглядають найкраще, коли анімації входу/виходу додані до кожного шару переходу. Тож я побудувала складну матрицю для переходів часу доби та всесвітів з окремими станами входу/виходу:
Нарешті все запрацювало саме так, як я уявляла. Я точно налаштувала таймінг, уповільнивши певні частини й додавши паузи між анімаціями. Результатом став плавний, поступовий ефект паралаксу. У Rive він виглядав дуже довершено:
Коли я побачила, як анімація працює в реальному застосунку, вона мала ще кращий вигляд, ніж я очікувала. Здавалося, ніби головний екран застосунку — це маленький інтерактивний світ, який реагує на вас і на час доби.
Ми пройшли кілька раундів корекції кольорів, щоб усе виглядало гармонійно, а я скористалася нагодою розділити шари на окремі елементи — сонце, хмари, градієнт неба й дрібніші деталі, — надавши анімації більшої глибини та гнучкості.
А ось і фінальний результат:
Звісно, ми не очікуємо, що ця функція стрімко підвищить показники, але хочемо, щоб наш застосунок виглядав захопливо, креативно й просто красиво. Цією пасхалкою зі шпалерами ми прагнемо винагородити користувачів, які настільки залучені в застосунок, що відкривають усі його функції й секрети. Зрештою, справа не завжди в показниках — іноді вона просто в нашій любові до tTravel. Для нас кожен екран застосунку має відчуватися як маленький витвір мистецтва.
Сподіваємося, ця стаття була для вас корисною. Завантажте tTravel для iOS або Android, якщо ще цього не зробили. І стежте за наступними статтями. До зустрічі.
Автори: Artem Shambalov і Liuba Syrotiuk