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, позволяющих интерфейсу реагировать на наклон устройства с помощью смещения бликов, теней и глубины, что повышает ощущение живости и контроля, в отличие от простых визуальных эффектов.

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

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

Линия сюжета

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

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

[Перевод] 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-интеграторов до производственных компаний), а...

ИИ и конец эпохи интеллектуальной собственности: неожиданное освобождение от бремени авторства

ИИ и конец эпохи интеллектуальной собственности: неожиданное освобождение от бремени авторства

Этот текст писался долго и стал частью более широкой работы о том, как генеративный ИИ меняет не только рынок контента, но и сами основания авторского права. Вобщем, попытка уви...

EXPLAIN Prettier или пост-процессинг планов запросов в Postgres

EXPLAIN Prettier или пост-процессинг планов запросов в Postgres

Эта история началась с подаренной коллегой своей новой книги: читая Jimmy Angelakos’ «PostgreSQL Mistakes and How to Avoid Them», я осознал один напрягающий меня факт — в Postgr...

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

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

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

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

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

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

[Перевод] 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-интеграторов до производственных компаний), а...

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

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

Открыть страницу источника
[Перевод] 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-интеграторов до производственных компаний), а...