Полоса прокрутки: устройство и принципы работы

Введение

Графический элемент пользовательского интерфейса

Полоса прокрутки — это техника взаимодействия или виджет, в котором непрерывный текст, изображения или любой другой контент можно прокручивать в заранее определенном направлении (вверх, вниз, влево или вправо) на компьютерном дисплее, в окне или области просмотра, чтобы весь контент можно было просмотреть, даже если только часть контента видна на экране устройства одновременно. Она предлагает решение проблемы навигации по известному или неизвестному местоположению в двухмерном информационном пространстве. В самых первых графических интерфейсах она также была известна как «рукоятка». Полосы прокрутки присутствуют в широком спектре электронных устройств, включая компьютеры, графические калькуляторы, мобильные телефоны и портативные медиаплееры. Пользователь взаимодействует с элементами полосы прокрутки посредством прямого действия, полоса прокрутки преобразует это действие в команды прокрутки, а пользователь получает обратную связь через визуальное обновление как элементов полосы прокрутки, так и прокручиваемого контента. Хотя дизайн полос прокрутки менялся на протяжении истории, они обычно располагаются на одной или двух сторонах области просмотра в виде длинных прямоугольных областей, содержащих ползунок (или «бегунок»), который можно перетаскивать вдоль желоба (или «дорожки»), чтобы перемещать содержимое документа. Это может быть выполнено вертикально, горизонтально или в обоих направлениях в окне, в зависимости от того, в каком направлении контент выходит за его границы. Для более точной настройки на каждом конце ползунка или желоба часто располагаются две стрелки. «Ползунок» имеет разные названия в разных средах: в Mac OS X 10.4 он называется «скроллер»; на платформе Java — «ползунок» или «ручка»; в документации Microsoft .NET он называется «область прокрутки» или «ползунок прокрутки»; в других средах он называется «лифт», «квинт», «шайба», «очиститель» или «захват»; в некоторых средах, где браузеры используют нейтральную терминологию для полосы прокрутки, ползунок называют «горошиной» для вертикального движения полосы и по-прежнему используют «шайбу» для горизонтального движения. Могут быть доступны дополнительные функции, такие как масштабирование или различные инструменты, специфичные для приложения. В зависимости от графического пользовательского интерфейса размер ползунка может быть фиксированным или переменным; в последнем случае, при использовании пропорциональных ползунков, его длина указывает на размер окна по отношению к размеру всего документа, обозначенного полной дорожкой. Пропорциональные ползунки были доступны в нескольких графических интерфейсах, включая GEM, AmigaOS и PC/GEOS, еще в середине 1980-х годов, но Microsoft реализовала их только в Windows 95. Пропорциональный ползунок, полностью заполняющий желоб, указывает на то, что весь документ просматривается, в этот момент полоса прокрутки может временно скрыться. Пропорциональный ползунок также иногда можно регулировать, перетаскивая его концы, например, в Sony Vegas — нелинейном программном пакете для редактирования видео. В этом случае он будет регулировать как положение, так и масштаб документа, где размер ползунка представляет степень масштабирования. Полосу прокрутки следует отличать от слайдера, который является другим визуально похожим, но функционально отличающимся объектом. Слайдер используется для изменения значений, но не изменяет отображение или перемещает отображаемую область, как это делает полоса прокрутки.

A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in a predetermined direction (up, down, left, or right) on a computer display, window, or viewport so that all of the content can be viewed, even if only a fraction of the content can be seen on a device's screen at one time. It offers a solution to the problem of navigation to a known or unknown location within a two dimensional information space. It was also known as a handle in the very first GUIs. They are present in a wide range of electronic devices including computers, graphing calculators, mobile phones, and portable media players. The user interacts with the scrollbar elements using some method of direct action, the scrollbar translates that action into scrolling commands, and the user receives feedback through a visual updating of both the scrollbar elements and the scrolled content. Although scrollbar designs differ throughout their history, they usually appear on one or two sides of the viewing area as long rectangular areas containing a bar (or thumb) that can be dragged along a trough (or track) to move the body of the document. This can be placed vertically, horizontally, or both in the window depending on which direction the content extends past its boundaries. Two arrows are often included on either end of the thumb or trough for more precise adjustments. The "thumb" has different names in different environments: on the Mac OS X 10.4 it is called a "scroller"; on the Java platform it is called "thumb" or "knob"; Microsoft's NET documentation refers to it as "scroll box" or "scroll thumb"; in other environments it is called "elevator", "quint", "puck", "wiper" or "grip"; in certain environments where browsers use agnostic language to the scrollbar terminology, the thumb is referred to as the 'pea' for vertical movement of the bar and still use 'puck' for horizontal movement. Additional functions may be found, such as zooming in/out or various application specific tools. Depending on the GUI, the size of the thumb can be fixed or variable in size; in the later case of proportional thumbs, its length would indicate the size of the window in relation to the size of the whole document, indicated by the full track. While proportional thumbs were available in several GUIs, including GEM, AmigaOS and PC/GEOS, even in the mid 1980s, Microsoft did not implement them until Windows 95. A proportional thumb that completely fills the trough indicates that the entire document is being viewed, at which point the scrollbar may temporarily become hidden. The proportional thumb can also sometimes be adjusted by dragging its ends, such as in Sony Vegas, a non linear video editing software package. In this case it would adjust both the position and the zooming of the document, where the size of the thumb represents the degree of zooming applied. A scrollbar should be distinguished from a slider which is another visually similar yet functionally different object. The slider is used to change values, but does not change the display or move the area that is shown as a scrollbar does.

История и развитие

В 1974 году, перемещение курсора к левому краю при использовании Bravo приводило к изменению его формы на двунаправленную стрелку, обеспечивая возможность прокрутки. Нажатие левой или верхней красной кнопки прокручивало содержимое вверх, а строка рядом с курсором перемещалась в верхнюю часть окна. Нажатие правой или нижней синей кнопки прокручивало содержимое вниз, а строка в верхней части окна опускалась к курсору. Удержание средней желтой кнопки изменяло форму курсора на "большой палец", позволяя быстро переходить к указанному проценту документа с индикатором текущего положения. В 1977 году Smalltalk включал стабильную полосу прокрутки на левой стороне активного окна. Щелчок правой половины полосы прокрутки перемещал содержимое вверх, а левой – вниз. Центральный "ползунок" полосы можно было плавно перетаскивать, отображая процент видимой части документа; это была первая пропорциональная полоса прокрутки. В 1980 году Interlisp имела полосу прокрутки, которая появлялась на левой стороне окна при перемещении курсора влево. Затемненный "ползунок" показывал процент видимого содержимого и управлялся средней кнопкой. Левая кнопка прокручивала вверх, перемещая выбранную позицию к верхнему краю окна, а правая – вниз, перемещая верхний край окна к выбранной позиции. В период с 1981 по 1982 год Xerox Star переместила полосу прокрутки вправо, чтобы освободить пространство и уменьшить визуальный шум. Стрелки прокрутки указывали внутрь, в направлении движения содержимого, согласно результатам исследований пользователей, а кнопки "+" и "-" позволяли прокручивать по страницам. "Ползунок" имел форму ромба фиксированного размера, независимо от видимой части документа. Щелчок в области "ползунка" мгновенно перемещал к соответствующей части документа. В 1983 году Apple Lisa использовала стрелки, указывающие вверх и вниз, кнопки для прокрутки по страницам и "ползунок" фиксированного размера. В 1984 году Macintosh имел светло-серый прямоугольник с "ползунком" "скролл-бокса", "серой областью" для перетаскивания и стрелками, указывающими в противоположные стороны к содержимому, которое отображалось бы при нажатии соответствующей стрелки. Стрелки прокручивали на одну единицу при однократном щелчке или автоматически повторяли при удержании. Кнопки страниц были удалены, а щелчок в области "ползунка" перемещал к следующему разделу. При нажатии и перетаскивании "ползунка" он перемещался к соответствующей точке, если движение не было слишком резким до отпускания кнопки, что отменяло действие. Пустая полоса прокрутки отображалась, когда окно не было активно или когда весь документ был виден в окне. В 1985 году GEM использовала "ползунок" "скролл-бокса" пропорционального размера, но в остальном работала идентично Macintosh. В результате получилась современная полоса прокрутки, которая выглядела и ощущалась так же, как полоса прокрутки в Windows сегодня. GEM позволяла перемещать мышь далеко от полосы прокрутки после нажатия и удержания кнопки, чтобы уменьшить проблемы с координацией движений рук и глаз. AmigaOS последовала позже в том же году, также с "ползунками" пропорционального размера. Также в 1985 году Viewpoint использовала правую кнопку для перемещения содержимого в процентах или по окну, а не по страницам. В 1988 году Open Look создала "ползунок" с клавишами стрелок непосредственно на нем. Щелчок в области "дорожки" перемещал содержимое по страницам, а автоматическое повторение продвигало указатель вперед. "Якоря" были размещены в начале и конце документа, а центр "ползунка" можно было перетаскивать. В 1989 году NeXT вернула полосу прокрутки на левую сторону окна. "Ползунок" имел пропорциональный размер, а стрелки располагались вместе внизу полосы. Действия автоматически повторялись, а клавиша Alt перемещала содержимое по окну. "Ползунок" можно было перетаскивать, а использование клавиши Alt во время перетаскивания замедляло его движение. В 1997 году PalmPilot включала обычную полосу прокрутки, где текст выходил за границы экрана, с возможностью перетаскивания "ползунка" и нажатия стрелок стилусом. Также были предусмотрены две физические кнопки для прокрутки вверх и вниз. В 2001 году Mac OS X 10.0 использовала пропорциональный "ползунок" и переместила обе кнопки стрелок в нижнюю часть полосы. В 2007 году iPhone и iOS включали обычную полосу прокрутки в веб-браузере и других приложениях, хотя она была предназначена только для отображения и не поддерживала взаимодействие. В контактах была предоставлена полоса прокрутки букв для быстрого перехода к нужному разделу. В 2011 году Mac OS X 10.7 убрала кнопки с концов полосы и была разработана так, чтобы выглядеть как полоса прокрутки в iOS. Вместе с выпуском Mac OS X 10.7 Apple представила "естественную прокрутку", что означает, что экран перемещается в том же направлении, что и пальцы пользователя при использовании жеста прокрутки двумя пальцами. Если пользователь перемещает пальцы вверх по тачпаду, содержимое на странице перемещается вверх, позволяя пользователю читать дальше по странице, и наоборот. В версии Microsoft Word для Mac 2015 года были представлены исчезающие полосы прокрутки. Положение в документе не отображалось, когда курсор мыши находился за пределами области полосы прокрутки, даже если окно было активно. Целью этого изменения было соответствие стандартным дизайнерским практикам Mac, заключающимся в скрытии полосы прокрутки, когда она не нужна для отображения иерархии информации.

In 1974, moving the cursor to the left margin while using Bravo changed its shape to a double headed arrow to allow for scrolling. Pressing the left or top red button scrolled the content up, and the line next to the cursor went to the top of the window. Pressing the right or bottom blue button scrolled the content down, and the line at the top of the window went down to the cursor. Holding down the middle yellow button changed the cursor to a thumb, allowing for jumping to that percentage of the document with an indicator of current placement. In 1977, Smalltalk included a stable scrollbar on the left side of the focus window. Clicking at the right half of the scrollbar moved the content up, and the left half moved the content down. The center thumb of the bar could be dragged smoothly and showed the percentage of the content visible; the first proportional scroll bar. In 1980, Interlisp had a scrollbar that appeared on the left side of the window as the cursor moved towards the left. The bar's shaded thumb showed the percentage of content visible and was controlled by the middle button. The left button scrolled up to move the selected position to the top edge of the window, and the right button scrolled down to move the top edge of the window to the selected position. Between 1981 and 1982, the Xerox Star moved the scrollbar to the right to get it out of the way and reduce visual clutter. Scroll arrows pointed inwards in the direction the content would move based on user studies, and + and – buttons allowed for scrolling by pages. The thumb was a fixed size diamond, independent of how much of document is visible. Clicking in the thumb elevator region would jump to that part of document. In 1983, the Apple Lisa had arrows pointing up and down, page buttons, and a fixed size thumb. In 1984, the Macintosh had a light gray rectangle with a "scroll box" thumb, "gray area" track, and arrows pointing in opposite directions towards the content that would be exposed when the respective arrow was pressed. Arrows would scroll a single unit upon one click or auto repeat upon continuous press. Page buttons were removed, and the elevator track could be clicked in instead to move to the next section. Upon pressing the thumb, dragging it would bring it to that particular point unless movement was made far out of the scrollbar before release, aborting the action. An empty scrollbar was displayed when a window was not in focus or if the entire document was visible within the window. In 1985, GEM used a proportionally sized "scroll box" thumb, but otherwise operated identically to the Macintosh. The net result was a modern scrollbar that looked and felt no different from the scrollbar in Windows today. GEM allowed the mouse to be moved far away from the scrollbar after clicking and holding, to reduce hand eye coordination problems. AmigaOS followed later in the year, also with proportionally sized scroll boxes. Also in 1985, Viewpoint used the right button to move content by percent or by window rather than by page. In 1988, Open Look created an elevator thumb with arrow keys directly on it. Clicking on the track moved by pages, and auto repeat would push the pointer along. Cable anchors were placed at the beginning and end of the document, and the center of the elevator could be dragged. In 1989, NeXT moved the scrollbar back to the left side of the window. The thumb was proportionally sized with arrows together at the bottom of the bar. Actions auto repeated, and the alt key would move content by window. The thumb could be dragged, and using the alt key while dragging would slow its movement. In 1997, the PalmPilot included a conventional scrollbar where text extended past screen boundaries with use of both a draggable thumb and arrows that could be tapped with a stylus. It also had two physical buttons for scrolling up and scrolling down respectively. In 2001, Mac OS X 10.0 used a proportional thumb and moved both arrow buttons to the bottom of the bar. In 2007, the iPhone and iOS included a regular scrollbar in the web browser and other applications, though it was only for output and could not be interacted with. In contacts, a scrollbar of letters was provided to jump through content. In 2011, Mac OS X 10.7 removed the buttons from the end of the bar and was designed to look more like the iOS scrollbar. With the same release of Mac OS X 10.7, Apple introduced "natural scrolling," which means that the screen moves in the same direction as the user's fingers are moving when they use the two finger scroll gesture. If the user's fingers move up the trackpad, the content on the page goes up, allowing the user to read content further down the page, and vice versa. In the 2015 version of Microsoft Word for Macs, disappearing scrollbars were introduced. The placement within a document was not longer visible when the mouse was outside the bar area even if the window in question was in focus. The purpose of this change was to conform to Macs’ standard design practices of hiding the scrollbar when it is not immediately needed for information hierarchical purposes.

Перетаскивание большого пальца

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

Колесо прокрутки

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

Стрелочные клавиши

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

Нажимаем на корзину

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

Различные кнопки мыши

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

Оконная сенсорная панель

Кроме того, некоторые компьютеры с Windows могут иметь механизм прокрутки по краю сенсорной панели, как показано на рисунке. Чтобы использовать этот механизм, нужно поместить палец на область прокрутки и перемещать его вверх и вниз или влево и вправо для прокрутки страницы. В зависимости от настроек прокрутки на компьютере, перемещение пальца в определенных направлениях по этой области может приводить к разным направлениям прокрутки.

Площадка Mac

Более современный способ прокрутки — использование прокрутки двумя пальцами на трекпаде Mac. В этом способе кончики двух пальцев одной руки помещаются на поверхность трекпада и перемещаются соответствующим образом. Если у пользователя установлено направление прокрутки трекпада в режим "естественный", перемещение двух пальцев к верхней части трекпада приведет к прокрутке страницы вверх; наоборот, перемещение пальцев к нижней части трекпада приведет к прокрутке страницы вниз. Если пользователь выполняет "быстрое касание" (flick), быстро перемещая два пальца по трекпаду и затем отпуская их, страница продолжит прокручиваться в направлении касания, пока не замедлится и не остановится, либо достигнув предела прокрутки, либо из-за того, что скорость прокрутки настолько снизится, что она просто остановится. Эта функция называется инерцией.

Альтернативные конструкции

Было предложено или реализовано множество вариантов традиционного дизайна и использования полосы прокрутки. Чтобы избежать ограничения видимости окна полосами прокрутки, сохраняя при этом функциональность, было предложено использовать программную привязку (тонкую линию), связанную с движением указателя мыши вокруг этой привязки. Аналогично, полосу прокрутки можно разместить непосредственно в контенте, где это уместно, что уменьшает занимаемое пространство и сокращает необходимые перемещения указателя. Включение визуальных и операционных подсказок в области отображения полосы прокрутки может указывать, в каких направлениях возможна прокрутка, а также какие взаимодействия с полосой прокрутки доступны. Для многостраничного контента индикатор текущего номера страницы относительно общего количества страниц может быть добавлен рядом с ползунком во время прокрутки, а более широкие полосы прокрутки могут содержать обзор всей страницы. В полосах прокрутки, таких как используемые в списках телефонных контактов, состоящих из букв алфавита, буква, соответствующая текущей области, может отображаться крупнее или выделяться каким-либо образом. Хотя они стабильны и предоставляются приложением, некоторые приложения и поисковые системы позволяют использовать маркеры релевантности, предоставленные или добавленные пользователем. Эти маркеры могут быть чисто визуальными или автоматически останавливать прокрутку при достижении каждого из них. Изначально горизонтальная полоса прокрутки выглядит как обычная. Но затем полоса прокрутки предлагает три дополнительные функции: она предоставляет обзор всей сцены, её высоту можно увеличить, а ползунок можно перемещать не только влево и вправо, но и вверх и вниз для вертикальной прокрутки. В RISC OS перетаскивание полосы прокрутки левой кнопкой мыши работает как обычно, но перетаскивание правой кнопкой заставляет указатель исчезнуть, и обе полосы прокрутки манипулируются одновременно. Многие операции графического интерфейса в RISC OS выполняют схожую, но немного отличающуюся функцию при правом щелчке мыши.

Ограничения и проблемы

Пользователи, уверенно работающие с компьютером, часто знакомы с полосами прокрутки, но те, кто обладает ограниченными знаниями, могут не сразу понять, как они работают, особенно учитывая более современные варианты, без посторонней помощи. Независимо от уровня подготовки, различные проблемы могут возникать с разными типами полос прокрутки и их взаимодействием. С точки зрения дизайна, если размер окна и так небольшой, наличие полосы прокрутки ещё больше уменьшает видимую область контента. Навигация по короткому документу становится проще, чем по длинному. Это также означает, что все части документа представлены с одинаковым акцентом, и важность отдельных фрагментов не выделяется с помощью полосы прокрутки. Часто нет индикатора текущей позиции в контенте, пока прокрутка не будет остановлена для просмотра содержимого. Это затрудняет работу, независимо от того, знает ли пользователь, что именно он ищет, или понимает общую структуру контента. Даже если индикатор присутствует, он ограничен предустановленными настройками видимости, объема и стиля. Также может произойти перескок при попытке точного позиционирования в начале или конце страницы в большом документе. Небольшая попытка корректировки прокрутки может привести к значительному сдвигу, так как прокрутка активирует автоматический переход к следующей странице.