Дата публикации: 2013-09-27
От автора: есть легионы безликих разработчиков оборудования и программного обеспечения, которых мы должны отблагодарить за выполнение того, что на первый взгляд кажется простым переходом: приравнивание действий мышью к средствам сенсорного управления.
Тот факт, что этот переход работает так гладко – немного из области чудес, и позволяет таким моделям взаимодействия, как CSS 3D Origami. отвечать одинаково хорошо на касание пальцем или движение курсора, не требуя при этом дополнительного кодирования.
Однако разработчики не могут предусмотреть каждую случайность. Неизбежно возникают ситуации, где CSS :hover не транслирует на сенсор так, как от него ожидается или требуется. В подобных случаях вам придется либо пересмотреть модель взаимодействия, либо кодировать пользовательский интерфейс так, чтобы сделать его подходящим для управления прикосновением.
Основные понятия
При современном разнообразии мобильных устройств ширина экрана не означает, что у устройства имеются сенсорные возможности. Однако узкое окно просмотра должно подтолкнуть вас к некоторым соображениям:
Удостоверьтесь, что области для прикосновения пользовательского интерфейса по меньшей мере размером 50px × 50px. Весьма сложно точно нажать маленький элемент.
Практический курс по созданию веб-приложения на PHP & MySQL с нуля!
Изучите курс и создайте ваше первое приложение на PHP всего за 3 дня!
Одним большим пальцем, одним глазом. Многие посетители будут использовать ваш сайт во время движения, при этом отвлекаться и пользоваться только одним пальцем. Обеспечьте возможность касания важных элементов управления экрана единственным большим пальцем.
Сложно избежать некоторой задержки. Сейчас большая часть мобильных платформ имеют встроенный период ожидания в 300мс для веб-событий касания. Эта ⅓-секундная задержка может действительно оказаться важной для ваших пользователей. Мы обсудим решения этой проблемы в следующей статье: а сейчас поймите, что пользовательский интерфейс на мобильном устройстве из-за этого не будет ощущаться как «моментальный». Уменьшение или устранение любых задержек перехода для мобильных пользователей – очевидный первый шаг к исправлению этой проблемы.
Выявление сенсорных возможностей устройства
Точное определение сенсорных возможностей устройства усложнилось с появлением IE 10, который щедро докладывает о наличии сенсорных возможностей даже у тех устройств, которые физически не могут поддерживать подобные действия. Самый эффективный известный мне код – следующий:
В качестве функции его можно вызывать в своем коде почти где угодно:
Управление событиями касания
В зависимости от контекста и платформы событие касания запустит несколько действий:
touchstart → mouseneter → mousedown → click → mouseup → mouseleave → touchend
Наличие и порядок внутренних действий в разных платформах различаются, и любая из них может неверно перевести события CSS :hover или :focus. Чтобы полностью отменить действия, отвяжите их от элементов с помощью JQuery:
В большинстве случаев не нужно отвязывать каждое действие. Вместо этого вам лучше провести тестирование и определить, которые из действий вызывают проблемы с отдельными элементами, и отвязать именно их:
Это следует делать внимательно, принимая во внимание возрастающее количество гибридных устройств, предлагающих сенсорный и «мышиный» ввод: как разработчики, мы не можем предвидеть, каким образом будет производиться взаимодействие. Все, что мы отвязываем, нужно немедленно привязать к решению:
Количество возможных решений проблемы многочисленно, и здесь невозможно раскрыть их детально; я продемонстрирую отдельные примеры в своей следующей статье.
Повышенная активность? Обойдемся без повторений.
Если ожидается, что элемент пользовательского интерфейса будет получать большое количество сенсорного воздействия в быстром темпе, возможно, хорошей идеей станет отключение действий двойного касания по умолчанию. Эти действия могут включать копирование (для изображений), выделение (для текста) или увеличение – любые, способные помешать вашему пользователю получить впечатление от страницы.
Заметьте, что это касается не всех мобильных браузеров: в данное время невозможно контролировать в отношении действий двойного касания мобильный Firefox или основной браузер Android.