Адаптивность элементов интерфейса

Эта статья — часть внутренних лекций студии.

Изначально вопрос звучал так:

Хочу разобраться в адаптивности элементов, страниц под разные разрешения, как описывать или презентовать, передавать разработчикам.Хочется эту тему разобрать — посмотреть как решаешь ее ты, как делают другие, попробовать самой на конкретных задачах.И таким образом пройтись по основным элементам интерфейса, например — основное меню, в каких-то случаях его делают слева (по вертикали), в каких-то сверху (по горизонтали) — какие варианты, в каких ситуациях больше подходят, почему и тд.И так по разным составляющим интерфейса (могу список написать).

Начнем с самого понятия адаптивности. Честно говоря, не знаю разницы между Responsive User Interface и Adaptive User Interface. Для меня это одно и то же: подстраивание интерфейса под окружение. Чаще всего под этим понимают попытки интерфейса уместиться в отведенное пространство: в большие и маленькие экраны.

Бывают и случаи, когда интерфейс подстраивается не только под отведенную площадь, но и что-то вне браузера и окружение снаружи компьютера: под язык операционной системы, под конкретный браузер, под способ ввода (например, палец или курсор), под освещение (светло или темно, холодный свет или теплый), уровень шума. Использовать можно что угодно, лишь бы со смыслом.

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

Про адаптацию под разные экраны

— Что можно адаптировать?
— Всё.
— А как понять, что нужно адаптировать?

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

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

Проверять работоспособность элементов интерфейса под разные размеры экранов лучше с использованием реальных устройств с этими разными экранами, а не просто уменьшением артборда и мыслью «ну, вроде ниче, сойдет». Планшет или смартфон в руках не только позволяют проверить как меню умещается в экран, но и оценить интерфейс в приближенных к боевым условиях. Тут ведь не только тыкание пальцем играет роль, но и то, как держишь устройство (одной или двумя руками, за нижнюю часть или сбоку) и какое расстояние от глаз до экрана.

Кстати, чем меньше экран, тем он ближе к глазам.

Зачем и какой рисовать адаптив

Адаптивные макеты рисуются для двух целей: показать клиенту как будет работать, показать разработчику как будет работать (ну хорошо, иногда и себе доказать, что так будет работать). Цель в любом случае — работающий сайт или приложение. А макеты — промежуточный этап.

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

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

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