Interactions — подборка интерактивных анимаций

Бесплатная версия Журналуса. Полная версия: – на сайте zhurnalus.artlebedev.ru – в боте @designersdigestbot

интерактивные анимациимикроинтеракцииинтерфейс

Interactions. Вдохновляющая подборка интерактивных интерфейсных анимаций. Автор — Нитиш Кхагвал, дизайнер из Индии.

#вдохновение@zhurnalus_lite #интерфейсы@zhurnalus_lite

Минималистичная карточка события «Camping» с датой и меткой Yosemite Park; демонстрация плавной микроанимации интерфейса на светлом фоне.
Карточка события с микроанимацией.
Небольшой UI-блок «Weight» с крупной цифрой 25 и вращающимся циферблатом; пример микровзаимодействия контролла в интерфейсе.
Дизайн циферблата веса с анимацией.
Ползунок температуры с отметкой 45°C и подсветкой трека; демонстрация чистой анимации управления значением в интерфейсе.
Температурный ползунок с индикатором.
Аудио-плеер с волновой формой и вертикальным ползунком для перемотки; пример микроанимации звукового контролла в интерфейсе.
Волновой плеер с вертикальной перемоткой.
Выбор между «Accounts», «Deposits», «Funds» в виде закруглённого переключателя — пример анимированных вкладок банковского интерфейса.
Анимированные вкладки переключения в интерфейсе.
Минималистичная круглая кнопка меню на нейтральном фоне; акцент на плавной появляющейся микровзаимодействии при клике.
Центральная круглая кнопка с эффектом появления.
Открывающийся блок в виде блокнота с двумя страницами и тенью; демонстрация анимации перелистывания как микровзаимодействия.
Анимация перелистывания страниц блокнота.
Круговой регулятор с цифрой 18 в центре и сегментарной шкалой вокруг — пример вращаемого контролла с плавной анимацией для выбора значения.
Круговой регулятор с индикацией значения.
Простая кнопка "+ Create New" на светлом фоне с лёгкой тенью — пример микровзаимодействия кнопочного действия в чистом интерфейсе.
Кнопка создания с лёгкой анимацией.
Иконка «share» в округлом чёрном квадрате на белом фоне; демонстрация минималистичной анимации иконки-утилиты в интерфейсе.
Иконка «поделиться» с минимальной анимацией.