Полоса прокрутки — это метод взаимодействия или виджет, в котором непрерывный текст, изображения или любой другой контент можно прокручивать в заданном направлении (вверх, вниз, влево или вправо) на дисплее компьютера , в окне или области просмотра , чтобы можно было просмотреть весь контент, даже если на экране устройства одновременно видна только часть контента. Он предлагает решение проблемы навигации к известному или неизвестному месту в двухмерном информационном пространстве. [1] Он также был известен как дескриптор в самых первых графических интерфейсах пользователя. Они присутствуют в широком спектре электронных устройств, включая компьютеры, графические калькуляторы, мобильные телефоны и портативные медиаплееры. Пользователь взаимодействует с элементами полосы прокрутки, используя некоторый метод прямого действия, полоса прокрутки преобразует это действие в команды прокрутки, и пользователь получает обратную связь посредством визуального обновления как элементов полосы прокрутки, так и прокручиваемого контента. [2]
Хотя дизайн полос прокрутки различается на протяжении всей их истории, они обычно появляются на одной или двух сторонах области просмотра в виде длинных прямоугольных областей, содержащих полосу (или большой палец), которую можно перетаскивать по желобу (или дорожке) для перемещения тела документа. Это может быть размещено вертикально, горизонтально или в обоих направлениях в окне в зависимости от того, в каком направлении содержимое выходит за его границы. Две стрелки часто включаются на каждом конце большого пальца или желоба для более точной настройки. «Большой палец» имеет разные названия в разных средах: в Mac OS X 10.4 он называется «скроллером»; [3] на платформе Java он называется «большим пальцем» или «ручкой»; в документации Microsoft .NET он называется «полем прокрутки» или «большим пальцем прокрутки»; в других средах он называется «элеватором», «квинтой», «шайбой», «стеклоочистителем» или «ручкой»; В некоторых средах, где браузеры используют независимый от терминологии язык, относящийся к полосе прокрутки, большой палец называют «горошиной» для вертикального перемещения полосы, а для горизонтального перемещения по-прежнему используют «шайбу».
Дополнительные функции могут быть найдены, такие как увеличение/уменьшение масштаба или различные инструменты, специфичные для приложения . В зависимости от графического интерфейса пользователя размер большого пальца может быть фиксированным или переменным; в более позднем случае пропорциональных больших пальцев его длина будет указывать на размер окна по отношению к размеру всего документа, обозначенному полной дорожкой. Хотя пропорциональные большие пальцы были доступны в нескольких графических интерфейсах пользователя, включая GEM , AmigaOS и PC/GEOS , даже в середине 1980-х годов, Microsoft не реализовала их до Windows 95. Пропорциональный большой палец, который полностью заполняет желоб, указывает на то, что просматривается весь документ, и в этот момент полоса прокрутки может временно скрываться. Пропорциональный большой палец также иногда можно настроить, перетаскивая его концы, например, в Sony Vegas , программном пакете нелинейного видеоредактирования . В этом случае он будет регулировать как положение, так и масштабирование документа, где размер большого пальца представляет собой степень примененного масштабирования.
Полоса прокрутки должна отличаться от ползунка , который является другим визуально похожим, но функционально отличным объектом. Ползунок используется для изменения значений, но не изменяет отображение или не перемещает отображаемую область, как это делает полоса прокрутки.
В 1974 году перемещение курсора к левому краю при использовании Bravo изменило его форму на двунаправленную стрелку, чтобы обеспечить прокрутку. Нажатие левой или верхней красной кнопки прокручивало содержимое вверх, а строка рядом с курсором переходила в верхнюю часть окна. Нажатие правой или нижней синей кнопки прокручивало содержимое вниз, а строка в верхней части окна переходила к курсору. Удерживание средней желтой кнопки изменяло курсор на большой палец, позволяя перейти к этому проценту документа с индикатором текущего размещения. [4]
В 1977 году Smalltalk включил стабильную полосу прокрутки на левой стороне окна фокуса. Щелчок по правой половине полосы прокрутки перемещал содержимое вверх, а по левой половине — вниз. Центральный большой палец полосы можно было плавно перетаскивать, и он показывал процент видимого содержимого; первая пропорциональная полоса прокрутки. [5]
В 1980 году Interlisp имел полосу прокрутки, которая появлялась на левой стороне окна при перемещении курсора влево. Затененный большой палец полосы показывал процент видимого содержимого и управлялся средней кнопкой. Левая кнопка прокручивала вверх, чтобы переместить выбранную позицию к верхнему краю окна, а правая кнопка прокручивала вниз, чтобы переместить верхний край окна к выбранной позиции. [6]
В период с 1981 по 1982 год Xerox Star переместил полосу прокрутки вправо, чтобы убрать ее с дороги и уменьшить визуальный беспорядок. Стрелки прокрутки указывали внутрь в направлении, в котором содержимое должно было перемещаться на основе исследований пользователей, а кнопки + и – позволяли прокручивать страницы. Большой палец представлял собой ромб фиксированного размера, независимо от того, какая часть документа видна. Щелчок в области подъема большого пальца переходил к этой части документа. [7]
В 1983 году у Apple Lisa были стрелки вверх и вниз, кнопки перелистывания страниц и фиксированный размер большого пальца.
В 1984 году Macintosh имел светло-серый прямоугольник с большим пальцем «прокручиваемого поля», дорожкой «серой области» и стрелками, указывающими в противоположных направлениях к контенту, который будет отображаться при нажатии соответствующей стрелки. Стрелки прокручивали одну единицу при одном щелчке или автоматически повторялись при непрерывном нажатии. Кнопки страниц были удалены, и вместо этого можно было щелкнуть по дорожке лифта, чтобы перейти к следующему разделу. После нажатия большого пальца его перетаскивание приводило к этой конкретной точке, если только движение не было сделано далеко за пределы полосы прокрутки перед отпусканием, прерывая действие. Пустая полоса прокрутки отображалась, когда окно не было в фокусе или если весь документ был виден в окне. [8]
В 1985 году GEM использовал большой палец пропорционального размера "поле прокрутки", но в остальном работал идентично Macintosh. Конечным результатом стала современная полоса прокрутки, которая выглядела и ощущалась не хуже, чем полоса прокрутки в Windows сегодня. GEM позволяла перемещать мышь далеко от полосы прокрутки после щелчка и удержания, чтобы уменьшить проблемы с координацией рук и глаз. AmigaOS последовала за ней позже в том же году, также с пропорциональными по размеру полями прокрутки.
Также в 1985 году Viewpoint использовала правую кнопку для перемещения контента по процентам или по окнам, а не по страницам.
В 1988 году Open Look создала большой палец лифта с клавишами со стрелками прямо на нем. Щелчок по дорожке перемещался по страницам, а автоповтор толкал указатель вперед. Якоря кабеля размещались в начале и конце документа, а центр лифта можно было перетаскивать. [9]
В 1989 году NeXT переместил полосу прокрутки обратно на левую сторону окна. [10] Большой палец был пропорционального размера со стрелками, собранными вместе в нижней части полосы. Действия автоматически повторялись, а клавиша alt перемещала содержимое по окнам. Большой палец можно было перетаскивать, а использование клавиши alt во время перетаскивания замедляло его движение.
В 1997 году PalmPilot включал в себя обычную полосу прокрутки, где текст выходил за пределы экрана с использованием как перетаскиваемого большого пальца, так и стрелок, которые можно было нажимать стилусом. Он также имел две физические кнопки для прокрутки вверх и вниз соответственно. [11]
В 2001 году в Mac OS X 10.0 использовался пропорциональный большой палец и обе кнопки со стрелками были перемещены в нижнюю часть панели.
В 2007 году iPhone и iOS включили обычную полосу прокрутки в веб-браузер и другие приложения, хотя она была только для вывода и не могла взаимодействовать с ней. В контактах была предусмотрена полоса прокрутки букв для перехода по контенту. [12]
В 2011 году Mac OS X 10.7 убрала кнопки с конца панели и была разработана так, чтобы больше походить на полосу прокрутки iOS. С тем же выпуском Mac OS X 10.7 Apple представила «естественную прокрутку», что означает, что экран перемещается в том же направлении, в котором перемещаются пальцы пользователя, когда он использует жест прокрутки двумя пальцами. Если пальцы пользователя перемещаются вверх по трекпаду, содержимое страницы перемещается вверх, позволяя пользователю читать содержимое дальше вниз по странице, и наоборот. [13]
В версии Microsoft Word для Mac 2015 года были введены исчезающие полосы прокрутки. Размещение в документе больше не было видно, когда мышь находилась за пределами области полосы, даже если рассматриваемое окно было в фокусе. Целью этого изменения было соответствие стандартным практикам дизайна Mac, когда полоса прокрутки скрывается, когда она не нужна немедленно для иерархических целей информации. [14]
Перетаскивание большого пальца исторически является традиционным способом управления полосой прокрутки. Перемещая курсор к большому пальцу на экране, а затем нажимая и удерживая, большой палец можно перетаскивать. Это часто делается с помощью трекпада или левой кнопки мыши или сенсорной панели. Перемещение курсора при нажатии перемещает большой палец полосы прокрутки, чтобы увидеть различные разделы страницы. [15] В приложениях, родных для OS X 10.11 (и некоторых предыдущих версий OS X), полосы прокрутки не отображаются в пользовательском интерфейсе, пока пользователь не использует другой метод прокрутки, такой как прокрутка двумя пальцами или использование клавиш со стрелками. Поэтому пользователь должен сначала прокрутить, используя один из этих методов, а затем переместить курсор на большой палец, где бы он ни появился.
В Microsoft Windows перемещение мыши слишком далеко от большого пальца при его перетаскивании приведет к сбросу положения прокрутки на предыдущее.
Также можно использовать колесо прокрутки на обычной мыши. Вращение колеса в желаемом направлении перемещает содержимое в том же направлении. [16] Большинство мышей оснащены колесами прокрутки, которые прокручивают только вверх и вниз, но некоторые мыши оснащены колесами прокрутки, которые позволяют пользователю прокручивать в любом направлении (вверх, вниз, влево или вправо), включая диагональные направления. При прокрутке вверх и вниз направление, в котором прокручивается страница в ответ на направление, в котором пользователь прокручивает колесо прокрутки, может отличаться в зависимости от настроек прокрутки компьютера.
Кнопки со стрелками на клавиатуре можно нажимать для прокрутки страницы вверх, вниз, влево или вправо. Этот метод прокрутки обычно приводит к очень медленной прокрутке экрана по сравнению с другими методами прокрутки. Нажатие кнопок со стрелками приведет к тому, что страница продолжит прокручиваться до тех пор, пока не будет достигнут один из пределов прокрутки.
На впадину выше или ниже большого пальца можно нажать, чтобы немедленно перейти к этой точке на странице или постранично для многостраничного контента. [15] После нажатия на впадину автоматически начинается прокрутка, которая затем останавливается, как только большой палец достигает положения указателя мыши. Этот метод прокрутки быстрее других и лучше всего подходит, когда пользователю нужно прокрутить много контента за раз или когда пользователь знает, куда именно на странице ему нужно прокрутить.
Многие приложения, такие как Microsoft Word и PowerPoint , содержат полосы прокрутки с экранными стрелками направления для прокрутки. Нажатие на стрелки прокручивает небольшое количество контента, часто отдельные строки, за раз, а нажатие и удерживание их с курсором непрерывно прокручивает большую область на странице, пока не отпустите. [15] Иногда обе кнопки со стрелками появляются рядом друг с другом для быстрой и точной манипуляции без необходимости перетаскивать большой палец или перемещать мышь на большие расстояния к другой стрелке (это предлагалось как опция в Mac OS 8.5 ); одна из них также может быть дублирована, чтобы отображаться на обоих концах полосы, обеспечивая знакомство для тех, кто привык как к отдельным, так и к соседним кнопкам. Эти кнопки со стрелками существовали до Mac OS X 10.7 , где они были удалены в пользу жестов трекпада и мышей с колесом прокрутки. [17]
В BeOS экранные кнопки прокрутки в обоих направлениях появляются на обоих концах полосы прокрутки. В нескольких программах Microsoft Office дополнительные кнопки ⏪и ⏩могут использоваться для навигации по страницам. [18]
Другой метод прокрутки с полосами прокрутки заключается в том, чтобы посмотреть, какая кнопка мыши была нажата. Например, щелчок левой кнопкой мыши по стрелке вниз может привести к прокрутке окна вниз, в то время как щелчок правой кнопкой мыши в том же месте приведет к прокрутке вверх (например, RISC OS ), или средняя кнопка может использоваться для точного размещения большого пальца. Эта форма требует меньших навыков мелкой моторики , хотя для нее требуется многокнопочная мышь и, возможно, более высокий уровень грамотности в графическом интерфейсе.
Кроме того, некоторые машины с Windows имеют механизм прокрутки сбоку сенсорной панели, как показано на рисунке. Чтобы использовать этот механизм, палец помещается на область прокрутки и перемещается вверх и вниз или влево и вправо, чтобы прокручивать страницу. Опять же, в зависимости от настроек прокрутки компьютера, перемещение пальца в определенных направлениях вдоль этих областей прокрутки может привести к различным соответствующим направлениям прокрутки. [19]
Более современный метод прокрутки — это использование прокрутки двумя пальцами на трекпаде Mac. В этом методе кончики двух пальцев одной руки помещаются на поверхность трекпада и перемещаются соответствующим образом. Если у пользователя установлено направление прокрутки трекпада «естественное», перемещение двух пальцев к верхней части трекпада приведет к прокрутке страницы вверх к верхней части страницы; и наоборот, перемещение пальцев к нижней части трекпада приведет к прокрутке страницы вниз к нижней части. Если пользователь «щелкнет» пальцами, очень быстро проведя двумя пальцами по трекпаду, а затем отпустив пальцы, страница продолжит прокручиваться в направлении, в котором он щелкнул, пока в конечном итоге не замедлится и не остановится, либо потому, что будет достигнут один из пределов прокрутки, либо потому, что скорость прокрутки замедлится настолько, что в конечном итоге просто остановится. Эта функция называется инерцией.
Было предложено или реализовано множество вариаций традиционного дизайна и использования полосы прокрутки. Чтобы избежать ограничения видимости окна полосами прокрутки, при этом сохраняя функциональность, было предложено использовать программную привязь (тонкую линию), связанную с перемещением указателя мыши вокруг привязки. Аналогичным образом полосу прокрутки можно напрямую разместить в содержимом, где она полезна, что позволяет уменьшить используемое пространство и сократить требуемые перемещения указателя. [20]
Включение визуальных и операционных подсказок в область отображения полосы прокрутки может указывать, какие направления позволяют выполнять прокрутку, а также какие взаимодействия с полосой прокрутки доступны. [20] Это может быть пустое поле, сигнализирующее о конце списка, отключение кнопок прокрутки и изменение цвета на полосе прокрутки.
Некоторые полосы прокрутки включают визуальный индикатор положения, помогающий определить, куда действие прокрутки переместилось или переместится в контенте. [21] Для многостраничного контента индикатор текущего номера страницы по сравнению с общим номером страницы может быть включен рядом с большим пальцем по мере прокрутки, а более широкие полосы прокрутки могут включать обзор всей страницы. В полосах прокрутки, подобных тем, которые используются в телефонных списках контактов, состоящих из букв алфавита, буква, соответствующая текущей области, может отображаться крупнее или выделяться каким-либо образом. Хотя они стабильны и предоставляются приложением, некоторые приложения и поисковые системы позволяют использовать маркеры релевантности, предоставляемые или добавляемые пользователем. Они могут быть строго визуальными или могут автоматически останавливать действие в пределах полосы прокрутки при достижении каждого маркера. [20] Они могут быть подчеркнуты цветом или даже звуком, чтобы еще больше помочь пользователю найти то, что ему нужно в контенте.
Специальные элементы графического управления типа полосы прокрутки позволяют панорамировать двумерное пространство, просто перемещая один прямоугольник в любом направлении на плоскости. Например, GtkScrollpane из GTK+ реализован в текстовых просмотрщиках gv и ghostview .
Другим примером одновременной двумерной прокрутки является программа выравнивания последовательностей белков. [22] Изначально горизонтальная полоса прокрутки выглядит как обычная. Но затем полоса прокрутки предлагает три дополнительные функции:
В RISC OS перетаскивание полосы прокрутки левой кнопкой мыши работает обычным образом, но перетаскивание правой кнопкой приводит к исчезновению указателя и одновременному манипулированию обеими полосами прокрутки. Многие операции GUI в RISC OS выполняют связанную, но немного отличающуюся функцию при щелчке правой кнопкой мыши.
Способность и конкретные методы, необходимые для настройки внешнего вида и функций полос прокрутки, могут значительно различаться в зависимости от того, какую операционную систему или программное приложение вы пытаетесь настроить. Распространенным методом изменения внешнего вида полосы прокрутки на веб-страницах является использование директив CSS для изменения цветов полосы прокрутки. Они нестандартны и поддерживаются только Microsoft Internet Explorer версий 5.x или выше и Opera . [23] [24] А в браузерах на основе WebKit есть псевдоэлементы, называемые:
::-webkit-scrollbar::-webkit-scrollbar-button::-webkit-scrollbar-track::-webkit-scrollbar-track-piece::-webkit-scrollbar-thumb::-webkit-scrollbar-corner::-webkit-resizerWebKit также предоставляет множество псевдоклассов для изменения стиля полос прокрутки. [25]
Полосы прокрутки также были улучшены для кодирования информации о записях в списке. [26] Например, Google Chrome вводит отметки желобов на вертикальной полосе прокрутки, чтобы указать места в документе, где был найден определенный поисковый термин.
Пользователи, владеющие компьютерной грамотой, часто знакомы с полосами прокрутки, но те, у кого ограниченные знания, могут не понимать их интуитивно, особенно с учетом более поздних вариаций, без посторонней помощи. [27] Независимо от грамотности, можно обнаружить множество проблем в различных типах полос прокрутки и их взаимодействиях. С точки зрения дизайна, если размер окна уже небольшой, видимая область содержимого будет еще больше уменьшена из-за наличия полосы прокрутки. [20] Хотя некоторые более поздние исчезающие полосы прокрутки помогают смягчить эту проблему, более традиционные не избегают ее, особенно когда присутствуют как горизонтальные, так и вертикальные полосы.
С точки зрения использования, многие общие проблемы связаны с точностью. Сопоставление между полосой прокрутки и дисплеем линейно, поэтому точность использования зависит от размера контента. [28] Навигация по меньшему документу в таком случае проще, чем навигация по большему документу. Это также означает, что все части документа подчеркиваются одинаково, и важность каждой части не распознается при использовании полосы прокрутки.
Часто не бывает указания, где в контенте достигнута прокрутка, если только действие прокрутки не остановлено для просмотра контента. Это затрудняет задачу независимо от того, знает ли пользователь, что он ищет, или общую организацию контента. Те, у кого есть индикатор, ограничены предопределенными настройками видимости, количества и стиля. [21] При попытке прокрутки во время выполнения действия, такого как выделение, количество прокрутки может не соответствовать желаемому количеству, выходя за пределы или побуждая пользователя несколько раз изменять положение. [29] Выход за пределы также может происходить при попытке позиционирования вблизи верхней или нижней части одной страницы в более крупном наборе. Попытка небольшой корректировки прокрутки пользователем может привести к большей корректировке, поскольку прокрутка активирует автоматическое действие перехода на следующую страницу. [15]
В отчете 1986 года Уильяма Бакстона и Брэда Майерса были протестированы различные двуручные взаимодействия, включая прокрутку, нажатие и изменение размера. В их исследовании нажатие и изменение размера выполнялись параллельно. Их первый эксперимент требовал от участников выполнения задачи выбора/позиционирования, а их второй эксперимент требовал, чтобы участники выполняли сложную задачу навигации/выбора. Исследование показало, что пользователи могут выполнять эти задачи быстрее и параллельно, когда они используют обе руки, но не обязательно, когда они используют обе руки одновременно. Они также обнаружили, что чем более взаимосвязанными были задачи, которые пользователь выполнял каждой из своих рук, тем быстрее он выполнял задачи, которые его просили сделать. [30]
{{cite journal}}: Цитировать журнал требует |journal=( помощь ){{cite book}}: CS1 maint: отсутствует местоположение издателя ( ссылка )