Полоса прокрутки
Полоса прокрутки позволяет пользователю перемещать визуальную область экрана вверх, вниз, вправо и влево. Вертикальная и горизонтальная полоса прокрутки обычно расположены в крайней правой и нижней стороне окна. Больше всего пользователи знакомы с полосой прокрутки в связи с необходимостью почти каждый раз прокручивать интернет страницы вниз и вверх.
На изображении ниже приведен пример окна с вертикальной и горизонтальной полосой прокрутки.
Полосы прокрутки используются с помощью мыши или клавиатуры.
С помощью мыши пользователь может нажимать на стрелки, которые находятся, по оба конца полосы прокрути, жать по пустому месту полосы или перемещать ползунок полосы прокрутки зажимая левую кнопку мыши. Также для прокрутки страницы можно использовать колесо мыши.
Чтобы управлять полосой прокрутки с помощью клавиатуры, можно нажимать клавиши стрелкой и страница будет перемещаться в их направлении. (В текстовых редакторах будет двигаться курсор, а не страница)
Для чего нужна полоса прокрутки
Для перемещения текста в окне с помощью мыши существуют так называемые линейки скроллинга, или полосы прокрутки. Они бывают горизонтальными и вертикальными.
B.7.1. Назначение горизонтальной и вертикальной полос прокрутки.
Размеры рабочей области окна порой значительно превосходят размер рабочей области экрана. Поэтому может случиться, что даже в распахнутом во весь экран окне не будет целиком помещаться текст или изображение, с которым работает пользователь.
Для того чтобы просмотреть содержимое рабочей области уже в интерфейсе командной строки использовалась операция скроллинга , или прокрутки. При нажатии на определенные клавиши экран мог сдвигаться на одну позицию (символ или строку) вверх, вниз, вправо и влево. При нажатии других клавиш текст перемещался на один экран влево, вправо, вверх и вниз. С появлением WIMP — интерфейса эти же операции стали осуществляться при помощи мыши. Таким образом, появились полосы прокрутки. Для прокрутки текста в окне вверх-вниз стала использоваться вертикальная, а для перемещения вправо-влево — горизонтальная линия прокрутки.
B.7.2. Расположение полос прокрутки.
Горизонтальная полоса расположена в нижней области окна справа, а вертикальная — на правой границе области внизу. Полосы имеют две стрелки на краях полосы, собственно полосы и маркера, показывающего положение выводимого участка текста относительно его правой и левой границы — для горизонтальной полосы, или его верхней и нижней строки — для вертикальной полосы.
B.7.3. Чем управляются линии прокрутки, и какие при этом могут возникнуть сложности?
Линиями прокрутки можно управлять как клавишами передвижения курсора, так и с помощью мыши (правда, не всегда эти действия синхронизированы, поскольку клавиатура управляет текстовым курсором, а он не всегда перемещается линиями прокрутки.) Поэтому для гарантированного перемещения текстового курсора используйте только клавиатуру !
B.7.4. Основные приемы работы с линиями прокрутки.
Приемы работы с линиями прокрутки.
Действие: поднятие на одну позицию (строку) вверх.
с помощью мыши: выбор кнопки «стрелка вверх » вертикальной линии прокрутки.
с помощью клавиатуры:
нажать клавишу «стрелка вверх «.
Действие: переход на одну позицию (строку) вниз.
с помощью мыши: выбрать кнопку «стрелка вниз » вертикальной полосы прокрутки.
c помощью клавиатуры: нажать клавишу «стрелка вниз»
Действие: перемещение на одну позицию влево.
(Примечание: горизонтальная позиция — либо символ, либо группа символов фиксированного размера, например, элемент списка)
с помощью мыши: выбор кнопки «стрелка влево » горизонтальной линии прокрутки.
с помощью клавиатуры: нажатие клавиши «стрелка влево «.
Действие: перемещение на одну позицию вправо.
с помощью мыши: выбор кнопки «стрелка вправо » горизонтальной линии прокрутки.
с помощью клавиатуры: нажатие клавиши «стрелка вправо «.
Действие: перемещение текста на один экран вверх.
с помощью мыши : щелчок левой клавишей мыши на вертикальной полосе прокрутки выше маркера.
с помощью клавиатуры: нажатие клавиши PgUp.
Действие: перемещение текста на экран вниз.
с помощью мыши: щелчок левой клавишей на вертикальной полосе прокрутки ниже маркера.
с помощью клавиатуры:
нажатие клавиши PgDn.
Действие: перемещение текста на экран влево.
выбрать участок слева от маркера на горизонтальной полосе прокрутки.
с помощью клавиатуры:
нажатие Ctrl + PgUp.
Действие: перемещение текста на один экран вправо.
с помощью мыши: выбор участка справа от маркера на горизонтальной полосе прокрутки.
с помощью клавиатуры:
нажать клавиши Ctrl + PgDn.
Следующее действие реализуется только с помощью мыши.
Действие: перемещение текста относительно его первоначального положения в окне
б) вправо — влево
а) 1) перемещение маркера вертикальной полосы прокрутки вверх или вниз,
2) Вращением колесика у Microsoft InteliMouse.
б) перемещение маркера горизонтальной полосы прокрутки вправо или влево.
B.7.5. Дополнительные элементы линий прокрутки.
Существуют также дополнительные кнопки, например, для листания страниц текста, не помещающихся на одном экране, увеличения или уменьшения масштаба выводимого текста, разбивка окна документа на две части и другие возможности, описание которых смотри в руководстве пользователя (User’s Guide) для вашего продукта или контекстную справку. Многие из этих функций реализуются аналогом линии прокрутки — ползунком.
B.7.6. Элементы графического интерфейса, производные от линейки скроллинга.
B.7.6.1. Что такое ползунок?
Ползунок (slider) позволяет (возможно, с некоторым шагом) изменять числовое значение связанной с ним величины. Для этого ползунок перетаскивается на нужное место. Вообще ползунок очень похож на линейку прокрутки, однако он отличается от нее внешним видом и отсутствием стрелок на концах.
B.7.6.2. Как изменять значения на ползунке?
a) Переместить ползунок мышью, или
b) Щелкнуть мышью на шкале слева (справа) или сверху (снизу) ползунка. При этом однократный щелчок приведет к перемещению ползунка на одно деление, а нажатие и удержание клавиши обеспечивает перемещение ползунка до тех пор, пока Вы не отпустите кнопку или до тех пор, пока ползунок не достигнет позиции курсора.
С помощью клавиатуры:
Нажать клавиши «стрелка влево » («стрелка вправо «) или «стрелка вверх » («стрелка вниз «), в зависимости от расположения ползунка.
B.7.6.3. Что такое счетчик?
Счетчик (spinner, spin box) является гибридом ползунка и поля ввода. Содержит поле ввода , кнопки «стрелка вверх » и «стрелка вниз «, а также промежуток между ними.
B.7.6.4. Как ввести требуемое значение в счетчик?
Требуемое значение можно выставить щелчками мыши по кнопкам.
Замечание автора для Windows 95/98. Если необходимо пролистать счетчик на большое число позиций назад (вперед), то необходимо:
1. Выбрать мышью промежуток между кнопками.
2. Не отжимая кнопки, потянуть мышью этот промежуток вверх (вниз) экрана. При этом курсор мыши не изменит своей формы, однако значение в поле ввода будет изменяться.
3. Выбрав нужный вариант, отпустите кнопку мыши.
С помощью клавиатуры:
Для изменения значения в выделенном счетчике на одну единицу можно также использовать клавиши «стрелка вверх » и «стрелка вниз «.
Требуемое значение можно также набрать на клавиатуре (как в строке редактирования).
B.7.7. Резюме.
Итак, Вы познакомились с одним из важных элементов графического интерфейса — полосой прокрутки, его назначаем и правилами работы с ним. Полосы прокрутки используются во всех окнах WIMP интерфейса, а также таких элементах, как список — о нем будет сказано в следующем разделе. На основе линеек скроллинга появилось множество новых элементов, с частью из которых Вы также познакомились. Использование полос прокрутки придает графическому интерфейсу большую выразительность и удобство работы, по сравнению с интерфейсом командной строки.
Как делать прототипы в Figma: кнопки, прокрутка и поп-апы
Рассказываем, как сделать прототип интерфейса в Figma, чтобы показать его клиенту, разработчику или арт-директору.
OlyaSnow для Skillbox Media
Кажется, что без программистов собрать из макета рабочий прототип невозможно. На самом деле это не так — в Figma предусмотрена функция прототипирования, которая поможет вам «завести» приложение и отловить все ошибки в сценариях до передачи макетов в разработку.
Рассказываем, как превратить ваши картинки из Figma в полноценный прототип — с рабочими кнопками, прокруткой и переключателями.
Интерфейс для прототипирования
На панели настроек справа в самом верху есть три вкладки: Design, Prototype и Inspected. Все настройки прототипов находятся в Prototype.
Основные настройки прототипов
Device — выбор устройства, внутри которого будет отображаться прототип. От этой настройки зависит не только то, как будет выглядеть косметическая рамка, но и плавность анимации прокрутки:
Background — цвет фона.
Flows — здесь будут ваши прототипы, на одном макете их может быть несколько.
Чтобы открыть настройки конкретного экрана, нужно просто нажать на любой фрейм, который вы хотите превратить в прототип. Об этом мы поэтапно расскажем ниже.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Кнопки и навигация
- Перейдите во вкладку Prototype.
- Выделите любой фрейм на макете. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму.
- Чтобы сделать кнопку Назад, выберите любой фрейм и на вкладке Prototype нажмите на плюсик напротив слова Interactions. В первом поле укажите Tap, а во втором — Back.
- Чтобы запустить прототип, нажмите на синюю кнопку
.
Прокрутка
- Перейдите во вкладку Prototype.
- Выделите фрейм, в котором нужна прокрутка. Чтобы она работала, высота вашего фрейма должна быть больше высоты экрана устройства.
- На вкладке Prototype в пункте Overflow scrolling выберите нужный формат прокрутки — горизонтальный, вертикальный или общий.
- Чтобы зафиксировать верхнюю и нижнюю панель приложения, перейдите на вкладку Design и в блоке Constraints нажмите галочку напротив Fix position when scrolling.
- Чтобы запустить нужный экран прототипа, зажмите кнопку и перетащите её к нужному экрану, а затем нажмите на неё.
Всплывающие окна
Такие окна нередко встречаются в интерфейсах — обычно они помогают пользователю понять устройство приложения. Чтобы немного усложнить задачу, сделайте всплывающее окно изменяемым по клику.
Как настроить поп-ап
- Перейдите во вкладку Prototype.
- Выделите фрейм, по нажатию на который должен появиться поп-ап. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму, который будет выполнять функцию поп-апа.
- В появившемся окне Interaction details вместо Navigate to выберите Open overlay.
- Выберите ваш поп-ап, нажмите на плюсик напротив слова Interaction, затем — на появившийся пункт и в окне Interaction details вместо None выберите Swap overlay.
- В появившемся поле в том же окне вместо None выберите дополнительный поп-ап.
- Чтобы проверить прототип, перетащите кнопку на нужный фрейм и нажмите на неё.
Готово. Теперь у вас есть поп-ап, который открывается после нажатия на кнопку. А если нажать на него, он поменяется.
Внутренние ссылки
Часто в навигационной панели может понадобиться ссылаться на внутренние модули, например на блок «О компании». В прототип можно добавить и это по примеру простых кнопок.
Как сделать внутренние ссылки
- Перейдите во вкладку Prototype.
- В основном фрейме с экраном приложения выделите другой, по нажатии на который нужно прокрутить страницу. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму внутри основного.
- В появившемся окне укажите отступ сверху, чтобы экран не прокручивался «впритык».
- Чтобы проверить прототип, перетащите кнопку на нужный фрейм и нажмите на неё.
http://dfe.petrsu.ru/koi/posob/os/b070.shtml
http://skillbox.ru/media/design/figma-prototypes-1/