Оттачиваем UI: 3 микроанимации в сервисе бронирования отелей

В сфере искусственного интеллекта произошло заметное событие. vadimbydanov 16 минут назад Оттачиваем UI: 3 микроанимации в сервисе бронирования отелей Простой 7 мин 541 Веб-дизайн * VueJS * Интерфейсы * Кейс Я дизайнер в сервисе бронирования отелей Моя Бронь. Расскажу про 3 анимации, которые мне нравятся и над которыми я долго работал. Все три паттерна я подсмотрел в других продуктах: Airbnb, Wallet в Телеграме, Family.

В каждом блоке расскажу, откуда взял и что поменял под наш контекст. Разбираю не только макеты, но и реализацию: конкретные значения cubic-bezier, длительности с обоснованием, плюс грабли с FLIP, Teleport и :key + . Поисковая строка в шапкеНа странице выдачи номеров удобно иметь поисковую строку с датами и городом под рукой:Полистал, понял что по ценам не подходит и решил выбрать другие даты.

Технические детали

Открыто несколько вкладок на разные даты, когда выбираешь лучшее предложение и нужно не запутаться где, что, какие даты. Многие платформы закрепляют вверху большое поисковое поле ~100px под основным хедеромНа десктопе место по вертикали особенно дорого. Ширины у нас много, а по высоте место на мониторе ноутбука съедают адресная строка хрома и док бар.

Итого остаётся ~600–700px полезного пространства. Из них ещё часть отнимает эта огромная шапка. Мы поместили строку с поиском сразу в основную шапку, где логотип и всё остальное.

Сделали её компактной, а при нажатии она плавно разворачивается в полноценную строку, сразу с открытым полем, на которое нажал. Этот паттерн подсмотрел у Airbnb, у них поиск тоже в шапке. Когда я был там пользователем, у меня было ощущение «о, как удобно».

Отраслевые последствия

Хотелось, чтобы и у нас было так. В итоге мы выигрываем место для отелей. Пользователи пришли именно за ними, и они должны быть центральными на экране.

Как устроеноТехнически это классический FLIP поверх «призрачного» слоя через Teleport. Сам компонент в шапке мы не анимируем. Во время анимации в живёт его клон с position: fixed, который и едет из точки А в точку Б.

В DOM одновременно живут три экземпляра поисковой формы:Реальный свёрнутый. Он в шапке всегда, виден, ловит клик. Реальный развёрнутый.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.