News Grower

Независимое покрытие AI, стартапов и технологий.

Оживляем UI на мобилках с Sensor API

Речь пойдёт о реализации реакции веб-интерфейса на наклон устройства, смещение бликов, теней, для придания ему таким образом интерактивности и объёма.Device Orientation API существует уже давно. Мобильные устройства с гироскопом стали пожалуй основным окном для приложений и сайтов. Всевозможные эффекты "блеска" / гр...

Оживляем UI на мобилках с Sensor API

Речь пойдёт о реализации реакции веб-интерфейса на наклон устройства, смещение бликов, теней, для придания ему таким образом интерактивности и объёма.Device Orientation API существует уже давно. Мобильные устройства с гироскопом стали пожалуй основным окном для приложений и сайтов. Всевозможные эффекты "блеска" / градиентов в дизайне встречаются регулярно, тренд на эмоциональный дизайн и кажется пора это всё объединить! И ведь Apple выкатили эту фишку в liquid glass! Но... лично по моему мнению, как-то не "дожали" или она померкла на фоне других нововведений... а жаль, я считаю реакцию ui на положение устройства гораздо более перспективной темой чем новая прозрачность с крутой физикой преломлений которую тут же все побежали повторять. В отличии от преломления фона, адекватная реакция на наклон устройства это не графон ради графона, а микро‑взаимодействие дающее ощущение контроля, отзывчивости, даже "живости" интерфейса. Ведь даже если пользователь не тапает по экрану - он очень даже взаимодействует с интерфейсом(смотрит/читает) и слегка "покачивает" телефон в руке, и UI на эти микродвижения уже чуть-чуть отвечает, маленькая физика (свет/тень/глубина), как будто элементы не нарисованы, а существуют как объекты... Ну это моё субъективное восприятие... тут есть похожие мысли про роль микровзаимодействий и баланс эмоций. Знаю что некоторых людей "лишние" анимации наоборот нервируют, или даже "укачивают", чтож... прекрасно что для них есть опция reduce-motion, для меня такой замечательной обратной опции "сделать красиво" нет )))Если всё ещё не понятно о чём я, можете глянуть это видео: Блеск!

Краткая сводка

В статье рассматривается применение Device Orientation API для создания микровзаимодействий в веб‑интерфейсе: реакция UI на наклон устройства позволяет смещать блики, тени и глубину, делая интерфейс более живым. Автор сравнивает эту технологию с другими визуальными новинками, подчёркивая её потенциал для эмоционального дизайна.

Связанные теги

Компании и люди

Линия сюжета

Продолжить следить за темой

Переходите к связанным материалам, страницам сущностей и активным линиям сюжета.

Потратил на безопасность 10 зарплат и попал в странную петлю

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

Renga API: автоматизируем автоматизацию с помощью ИИ-агентов

Renga API: автоматизируем автоматизацию с помощью ИИ-агентов

Щупаем внутренности Renga. В этой статье залезу под капот к отечественному ПО и разберу его API. Сравню с западным конкурентом и заставлю подружиться с ИИ.В этой статье:- посмот...

[Перевод] Claude Code для тех, кто не пишет код: полный гайд для старта

[Перевод] Claude Code для тех, кто не пишет код: полный гайд для старта

Большинство воспринимает Claude Code как инструмент исключительно для разработчиков. Но на практике это один из самых мощных инструментов персональной автоматизации — и пользова...

[Перевод] Исследование макросов @Generable и @Guide во фреймворке FoundationModels

[Перевод] Исследование макросов @Generable и @Guide во фреймворке FoundationModels

Приветствую, Хабр!Макросы Swift предоставляют мощный механизм для генерации кода, позволяя разработчикам уменьшать количество шаблонного кода и повышать читаемость. Фреймворк Fo...

[Перевод] Использование фреймворка Foundation Models для локального ИИ в SwiftUI

[Перевод] Использование фреймворка Foundation Models для локального ИИ в SwiftUI

Приветствую, Хабр!На конференции WWDC 2025 компания Apple представила фреймворк Foundation Models — набор инструментов, позволяющий разработчикам интегрировать локальные ИИ-моде...

Рассылки в MAX: системный подход к каналу, который приносит заявки

Рассылки в MAX: системный подход к каналу, который приносит заявки

Привет, Хабр! Меня зовут Денис, я бизнес-аналитик. Последние полгода в проектах, с которыми я работаю (в основном B2B-сектор, от IT-интеграторов до производственных компаний), а...

Рекламный слот

Встроенный блок в статье

Зарезервированный партнерский слот для релевантных инструментов, сервисов и аккуратных редакционных интеграций.

Партнерский слот

Похожие статьи

Еще материалы, которые пересекаются по тегам, источнику или категории.

Потратил на безопасность 10 зарплат и попал в странную петлю

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

Renga API: автоматизируем автоматизацию с помощью ИИ-агентов

Renga API: автоматизируем автоматизацию с помощью ИИ-агентов

Щупаем внутренности Renga. В этой статье залезу под капот к отечественному ПО и разберу его API. Сравню с западным конкурентом и заставлю подружиться с ИИ.В этой статье:- посмот...

[Перевод] Claude Code для тех, кто не пишет код: полный гайд для старта

[Перевод] Claude Code для тех, кто не пишет код: полный гайд для старта

Большинство воспринимает Claude Code как инструмент исключительно для разработчиков. Но на практике это один из самых мощных инструментов персональной автоматизации — и пользова...

[Перевод] Исследование макросов @Generable и @Guide во фреймворке FoundationModels

[Перевод] Исследование макросов @Generable и @Guide во фреймворке FoundationModels

Приветствую, Хабр!Макросы Swift предоставляют мощный механизм для генерации кода, позволяя разработчикам уменьшать количество шаблонного кода и повышать читаемость. Фреймворк Fo...

Еще материалы от Habr

Свежие публикации и продолжение темы от той же редакции.

Открыть страницу источника
Мобильная разработка за неделю #626 (30 марта — 5 апреля)

Мобильная разработка за неделю #626 (30 марта — 5 апреля)

В новом выпуске выпуск приложений в App Store без Mac и Android Service своей мечты, узкие места в производительности Android-приложений и как Swift работает с памятью, Android ...

Потратил на безопасность 10 зарплат и попал в странную петлю

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

Renga API: автоматизируем автоматизацию с помощью ИИ-агентов

Renga API: автоматизируем автоматизацию с помощью ИИ-агентов

Щупаем внутренности Renga. В этой статье залезу под капот к отечественному ПО и разберу его API. Сравню с западным конкурентом и заставлю подружиться с ИИ.В этой статье:- посмот...

[Перевод] Claude Code для тех, кто не пишет код: полный гайд для старта

[Перевод] Claude Code для тех, кто не пишет код: полный гайд для старта

Большинство воспринимает Claude Code как инструмент исключительно для разработчиков. Но на практике это один из самых мощных инструментов персональной автоматизации — и пользова...