Оживляем UI на мобилках с Sensor API
Речь пойдёт о реализации реакции веб-интерфейса на наклон устройства, смещение бликов, теней, для придания ему таким образом интерактивности и объёма.Device Orientation API существует уже давно. Мобильные устройства с гироскопом стали пожалуй основным окном для приложений и сайтов. Всевозможные эффекты "блеска" / гр...
Речь пойдёт о реализации реакции веб-интерфейса на наклон устройства, смещение бликов, теней, для придания ему таким образом интерактивности и объёма.Device Orientation API существует уже давно. Мобильные устройства с гироскопом стали пожалуй основным окном для приложений и сайтов. Всевозможные эффекты "блеска" / градиентов в дизайне встречаются регулярно, тренд на эмоциональный дизайн и кажется пора это всё объединить! И ведь Apple выкатили эту фишку в liquid glass! Но... лично по моему мнению, как-то не "дожали" или она померкла на фоне других нововведений... а жаль, я считаю реакцию ui на положение устройства гораздо более перспективной темой чем новая прозрачность с крутой физикой преломлений которую тут же все побежали повторять. В отличии от преломления фона, адекватная реакция на наклон устройства это не графон ради графона, а микро‑взаимодействие дающее ощущение контроля, отзывчивости, даже "живости" интерфейса. Ведь даже если пользователь не тапает по экрану - он очень даже взаимодействует с интерфейсом(смотрит/читает) и слегка "покачивает" телефон в руке, и UI на эти микродвижения уже чуть-чуть отвечает, маленькая физика (свет/тень/глубина), как будто элементы не нарисованы, а существуют как объекты... Ну это моё субъективное восприятие... тут есть похожие мысли про роль микровзаимодействий и баланс эмоций. Знаю что некоторых людей "лишние" анимации наоборот нервируют, или даже "укачивают", чтож... прекрасно что для них есть опция reduce-motion, для меня такой замечательной обратной опции "сделать красиво" нет )))Если всё ещё не понятно о чём я, можете глянуть это видео: Блеск!
Краткая сводка
В статье рассматривается применение Device Orientation API для создания микровзаимодействий UI, позволяющих интерфейсу реагировать на наклон устройства с помощью смещения бликов, теней и глубины, что повышает ощущение живости и контроля, в отличие от простых визуальных эффектов.
Связанные теги
Компании и люди
Линия сюжета
Продолжить следить за темой
Переходите к связанным материалам, страницам сущностей и активным линиям сюжета.
[Перевод] Claude Code для тех, кто не пишет код: полный гайд для старта
Большинство воспринимает Claude Code как инструмент исключительно для разработчиков. Но на практике это один из самых мощных инструментов персональной автоматизации — и пользова...
[Перевод] Исследование макросов @Generable и @Guide во фреймворке FoundationModels
Приветствую, Хабр!Макросы Swift предоставляют мощный механизм для генерации кода, позволяя разработчикам уменьшать количество шаблонного кода и повышать читаемость. Фреймворк Fo...
[Перевод] Использование фреймворка Foundation Models для локального ИИ в SwiftUI
Приветствую, Хабр!На конференции WWDC 2025 компания Apple представила фреймворк Foundation Models — набор инструментов, позволяющий разработчикам интегрировать локальные ИИ-моде...
Рассылки в MAX: системный подход к каналу, который приносит заявки
Привет, Хабр! Меня зовут Денис, я бизнес-аналитик. Последние полгода в проектах, с которыми я работаю (в основном B2B-сектор, от IT-интеграторов до производственных компаний), а...
ИИ и конец эпохи интеллектуальной собственности: неожиданное освобождение от бремени авторства
Этот текст писался долго и стал частью более широкой работы о том, как генеративный ИИ меняет не только рынок контента, но и сами основания авторского права. Вобщем, попытка уви...
EXPLAIN Prettier или пост-процессинг планов запросов в Postgres
Эта история началась с подаренной коллегой своей новой книги: читая Jimmy Angelakos’ «PostgreSQL Mistakes and How to Avoid Them», я осознал один напрягающий меня факт — в Postgr...
Рекламный слот
Встроенный блок в статье
Зарезервированный партнерский слот для релевантных инструментов, сервисов и аккуратных редакционных интеграций.
Похожие статьи
Еще материалы, которые пересекаются по тегам, источнику или категории.
[Перевод] Claude Code для тех, кто не пишет код: полный гайд для старта
Большинство воспринимает Claude Code как инструмент исключительно для разработчиков. Но на практике это один из самых мощных инструментов персональной автоматизации — и пользова...
[Перевод] Исследование макросов @Generable и @Guide во фреймворке FoundationModels
Приветствую, Хабр!Макросы Swift предоставляют мощный механизм для генерации кода, позволяя разработчикам уменьшать количество шаблонного кода и повышать читаемость. Фреймворк Fo...
[Перевод] Использование фреймворка Foundation Models для локального ИИ в SwiftUI
Приветствую, Хабр!На конференции WWDC 2025 компания Apple представила фреймворк Foundation Models — набор инструментов, позволяющий разработчикам интегрировать локальные ИИ-моде...
Рассылки в MAX: системный подход к каналу, который приносит заявки
Привет, Хабр! Меня зовут Денис, я бизнес-аналитик. Последние полгода в проектах, с которыми я работаю (в основном B2B-сектор, от IT-интеграторов до производственных компаний), а...
Еще материалы от Habr
Свежие публикации и продолжение темы от той же редакции.
[Перевод] Claude Code для тех, кто не пишет код: полный гайд для старта
Большинство воспринимает Claude Code как инструмент исключительно для разработчиков. Но на практике это один из самых мощных инструментов персональной автоматизации — и пользова...
[Перевод] Исследование макросов @Generable и @Guide во фреймворке FoundationModels
Приветствую, Хабр!Макросы Swift предоставляют мощный механизм для генерации кода, позволяя разработчикам уменьшать количество шаблонного кода и повышать читаемость. Фреймворк Fo...
[Перевод] Использование фреймворка Foundation Models для локального ИИ в SwiftUI
Приветствую, Хабр!На конференции WWDC 2025 компания Apple представила фреймворк Foundation Models — набор инструментов, позволяющий разработчикам интегрировать локальные ИИ-моде...
Рассылки в MAX: системный подход к каналу, который приносит заявки
Привет, Хабр! Меня зовут Денис, я бизнес-аналитик. Последние полгода в проектах, с которыми я работаю (в основном B2B-сектор, от IT-интеграторов до производственных компаний), а...