Изначально полоса прокрутки придумана для перемещения по документу фиксированной длины.

Модель простая: есть длина документа и есть длина его видимой области. Лифт полосы прокрутки своей высотой показывает долю видимой области, а своим положением — положение в документе.

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

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

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

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

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

В случае с чатом общая длина документа известна, ведь мы знаем, когда было первое сообщение. С одной стороны, я хочу, чтобы оттащив лифт наверх, я увидел самое начало диалога. С другой, я хочу, чтобы хотя бы какое‑то время «тащение» имело смысл, и я за один пиксель не прыгал на два месяца. Исходя из этого предлагаю попробовать логарифмическую прокрутку:

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

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

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

Напоследок я бы сказал, что даже если длина документа изменилась непосредственно во время прокрутки — что‑то там догрузилось или пересчиталось — я бы попробовал всегда пересчитывать математику самой прокрутки так, чтобы текущая точка продолжала соответствовать тому же месту в документе. Это сложнее, чем каждый раз просто вычислять пропорцию, но зато исключает рывки: если уж я докрутил до какого‑то места и стою на месте, то и документ никуда не дёргается, что бы там не подгружалось.

ИнтерфейсПрокрутка и листалка
Отправить
Поделиться
Запинить

Рекомендуем другие советы