Особенности проектирования и верстки интерфейсов для Touch-устройств

Введение

Данный документ относится к приложениям, которые преимущественно выполняются на Touch-устройствах без физической клавиатуры, и описывает особенности, которые необходимо учитывать при проектировании интерфейсов для этих устройств.

Особенности Touch-интерфейсов

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

В Google Chrome есть зарегистрированный баг, который усугубляет ситуацию: клавиатура перемаргивает при переключении между полями ввода, при этом происходят дополнительные скачки интерфейса.

В Firefox и Offline-приложении перемаргивания не происходит.

Firefox может быть рекомендован пользователям, как браузер по умолчанию.

Размер рабочей области

Разрешение экрана планшета Pipo X9 - самого дешевого комплекта оборудования для розницы, составляет 1280x800 (физически доступно 1920x1200, но в поставке настройки изменены). При этом высота клавиатуры составляет 400 px (половина доступной высоты).

Учитывая высоту области вкладок браузера и его адресную строку (около 100 px), размер области страницы, в рамках которой не произойдет скачков интерфейса при показе экранной клавиатуры составляет всего 300 px.

Вывод: поля ввода по возможности стоит располагать выше линии высотой 300 px от верха страницы, иначе интерфейс будет прыгать при фокусировке.

Диалоговые окна

Диалоговые окна в операционной системе Windows в режиме Touch-событий, прижимаются кверху экрана. В таком случае повышается вероятность попадания полей ввода в верхнюю область 300 px, что способствует уменьшению количества прыжков в интерфейсе при появлении экранной клавиатуры.

Автоматическая фокусировка в полях ввода

В Touch-режиме на Windows автоматическая фокусировка отключена на уровне платформы, по аналогии с системным режимом на iOS. (задача на выполнении)

Ввод текста в поле ввода не всегда является главной задачей пользователя, и зачастую имеет вспомогательный характер (например, поле поиска в реестрах). В этих случаях нет необходимости показывать виртуальную клавиатуру, которая занимает больше половины рабочей области экрана.

При открытии диалога, автоматического показа клавиатуры также не происходит. Это позволит пользователю визуально ознакомится с появившейся формой, а также избавит от лишних прыжков в интерфейсе.

Для частых сценариев, которые подразумевают быстрый ввод данных, существует возможность активировать виртуальную клавиатуру при установке фокуса в поле ввода программным способом:

this._children.myInput.activate({enableScreenKeyboard: true});

Способ описан в документации и одинаково работает на всех платформах: Windows, iOS, Android.

Проблемы CSS: calc, flex и высота

При появлении экранной клавиатуры в Android Chrome и Offline-приложении СБИС(правила), изменяется высота рабочей области, соответственно меняется значение высоты в пикселях у блока . Будьте осторожны при использовании CSS-свойства calc с единицами измерения vh, vmin и vmax. Кроме того, решения с calc сложно поддерживать при частых изменениях макета. См. статью Используйте технологию раскладки flexbox, но помните про ограничения, накладываемые движком Safari: при использовании 100 % высоты – высота должна быть в явном виде определена у всех родительских элементов.

Примеры

Авторизация

Страница содержит всего 2 поля ввода, в которые пользователь обязан ввести свои данные.

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

Необходимо перепроектировать интерфейс таким образом, чтобы оба поля ввода умещались по высоте в область 300 px от верха экрана.

Создание точки продаж

На странице предполагается ввод в 2 поля ввода: "Название" и "Руководитель".

При установке фокуса в поле ввода "Название", клавиатура перекрывает поле ввода "Руководитель".

При этом есть возможность изменить макет таким образом, чтобы оба поля располагались в области, свободной от проблем, связанных с виртуальной клавиатурой

В этом случае при установке фокуса в поле ввода "Название" - поле ввода "Руководитель" не будет перекрыто. Пользователь сможет спокойной продолжить ввод.