Илья
25 октября 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как должна работать прокрутка?

(Часть вторая)


Популярность Виндоуса позволяет считать логику его полос прокрутки стандартной: там она устаканилась и не менялась больше двадцати лет. От версии к версии менялся лишь внешний вид:


Кнопки-стрелки прокручивают на одну строку. Они указывают в направлении движения лифта, а не содержания.

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

Лифт пропорциональный, но не сжимается меньше квадрата, чтобы было легче попасть.

Клики в шахту над и под лифтом листают постранично вверх и вниз соответственно. Если нажать в шахту и не отпускать, документ пролистается в соответствующем направлении до конца.

О законе Фиттса

Изначально на полосу прокрутки смотрели как на один из элементов экранного интерфейса, вроде кнопки и поля ввода. Как правило, оно работала как элемент управления для перемещения по документу и как индикатор положения в нём. Но в некоторых старых интерфейсах можно даже встретить её вместо слайдера:

Настройка рабочего стола Виндоуса 3.1, 1990

Однако со временем прокрутка обрела новое качество. Оказалось, что прокрутка — способ взаимодействия по важности сравнимый с кликом.

И человек изобрёл колесо:

Микрософт Интеллимаус, 1996

Колесо управляло движением лифта в полосе прокрутки. При движении вверх содержимое прокручивалось вниз.

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

Пока в 2007 году Эпл не представил Айфон. Классические полосы прокрутки были совершенно непригодны для управления пальцем. А из-за маленького экрана прокрутка на Айфоне использовалась повсеместно. Как она работала? Стив Джобс «просто брал палец — и прокручивал»:

В 2000-х в Эпле придумали двухпальцевую прокрутку на трекпадах.


Для прокрутки стала использоваться вся площадь экрана — отпала необходимость прицеливания:

Страница прокручивается за любое место. Индикатор положения — справа сверху

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

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

«Скроллеры» вместо классических полос прокрутки стали стандартом Мака к 2011 году. Тогда же на Мак пришли инерция и пружинистость. А спустя несколько лет появилась и возможность изменить направление прокрутки с обратного на прямое, чтобы управлять движением содержимого, а не лифта — как на Айфоне.

О мгновенной, непрерывной, физичной обратной связи

Продолжение

P. S. Я веду практический курс «Пользовательский интерфейс и представление информации». Дата следующего курса пока неизвестна.

 
Мы напишем вам, когда будет открыта запись. Без спама.

Поделиться

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.





Недавно всплыло

4 Меня бесит, что как клиент я должна переживать больше, а менеджер забивает 1 Я бы покрасил стены новой рабочей студии белой краской. А коллега хочет клеить обои 3 Как организовать личный рост? 1



© 2007—2017

Запрещённые слова
Пишите: mail@artgorbunov.ru