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

Горизонтальная полоса прокрутки

Устройство править

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

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

Дополнительные функции править

 
Полоса прокрутки с пометками о найденных фрагментах текста

В некоторых системах, например в OS X начиная с версии 10.7, полосы прокрутки скрываются, появляясь только при попытке обращения к ним.

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

Проблемы и ограничения править

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

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

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

Альтернативные способы навигации править

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

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

  • изменение масштаба: пользователь уменьшает масштаб до такого, при котором становится видимым искомый фрагмент, а затем увеличивает для удобной работы с этим фрагментом;
  • перетаскивание, путём захвата и перемещения объекта, в том числе с использованием клавиш-модификаторов;
  • использование навигационных окон, отображающих уменьшенную копию объекта и рамку окна просмотра — распространено в геоинформационных системах и графических редакторах;
  • разбиение на страницы.

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

Схожие элементы управления править

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

Литература править

  • Алан Купер. об интерфейсе. Основы проектирования = About Face. The Essentials of Interaction Design. — 3. — СПб.: Символ-Плюс, 2009. — С. 528—529. — 688 с. — 1500 экз. — ISBN 978 5 93286 132 5.
  • Руководство по полосам прокрутки Архивная копия от 13 апреля 2016 на Wayback Machine — MSDN
  • OS X Human Interface Guidelines: Scrolling Windows (англ.). Дата обращения: 4 октября 2015. Архивировано 6 октября 2015 года.
  • Илья Бирман. Как должна работать прокрутка? 1 Архивная копия от 20 октября 2016 на Wayback Machine, 2 Архивная копия от 25 октября 2016 на Wayback Machine, 3 Архивная копия от 1 ноября 2016 на Wayback Machine
  • Beaudouin-Lafon, Michel. Designing interaction, not interfaces // Proceedings of the working conference on Advanced visual interfaces : [англ.]. — 2004. — P. 15–22. — ISBN 1581138679. — doi:10.1145/989863.989865.
  • McCrickard, D.S. Beyond the scrollbar: An evolution and evaluation of alternative navigation techniques // Proceedings 1999 IEEE Symposium on Visual Languages : [англ.] / D.S. McCrickard, R. Catrambone. — 1999. — P. 270–277. — ISBN 0-7695-0216-4. — doi:10.1109/VL.1999.795913.