Тенденция в веб-дизайне: горизонтальная навигация. Часть 2
В первой части нашей статьи мы рассказали вам, что такое горизонтальная прокрутка, а также поделились советами по ее использованию.
В этой части статьи мы продолжим делиться с вами лучшими советами по использованию горизонтальной прокрутки, а также научимся создавать такую прокрутку с помощью пользовательского HTML и CSS.
Советы по использованию горизонтальной навигации
Добавьте другие методы взаимодействия.
Даже если вашей странице подходит горизонтальная прокрутка, мы рекомендуем предоставить пользователям альтернативный метод прокрутки контента, например, кнопку со стрелками.
У пользователей на мобильных устройствах меньше проблем с перелистыванием в сторону, поэтому кнопки на мобильных сайтах не нужны. Тем не менее, основная ориентация прокрутки должна оставаться вертикальной на устройствах с сенсорным экраном:
- Избегайте пользовательские стили для полос прокрутки.
Горизонтальные полосы прокрутки должны выглядеть и функционировать так же, как их вертикальные аналоги — это необходимо для единообразия дизайна. Избегайте пользовательских стилей для полос прокрутки — они не должны отвлекать внимание.
Горизонтальная прокрутка должна быть визуально очевидной.
В дополнение к индикаторам кнопок, таким как стрелки, вы можете настроить скроллинг таким образом, чтобы горизонтальная полоса появлялась при наведении курсора мыши.
Вы также можете отобразить кусочек скрытого содержимого в окне прокрутки. На сайте Patagonia по бокам окна расположены скрытые части изображения — таким образом пользователи сделают вывод, что эту область можно скроллить.
Еще один доступный вариант сделать горизонтальную прокрутку очевидной — разместить текст «Прокрутите, чтобы узнать больше» на веб-странице.
Как создать окно с горизонтальной прокруткой в HTML и CSS?
Когда элемент HTML, например, содержит содержимое, которое выходит за границы — это называется переполнением. Чтобы включить горизонтальную прокрутку, можно использовать свойство CSS overflow-x .
Если мы присвоим значение scroll свойству overflow-x элемента контейнера, браузер скроет выходящий за пределы горизонтальный контент и сделает его доступным с помощью горизонтальной прокрутки.
Чтобы это работало, необходимо указать ширину элемента контейнера, а также дочернего элемента в контейнере.
Рассмотрим этот процесс более детально:
Шаг 1: Используйте HTML для создания контейнера.
Для примера создадим элемент-контейнер шириной 500px. Внутри этого контейнера находится дочерний элемент с установленной шириной 1000px. Поскольку ширина превышает ширину , текст выходит за пределы контейнера справа.
Ниже код HTML для нашего примера:
(Your text goes here. Also, you can place other elements within this parent div.
Шаг 2: Используйте CSS, чтобы указать заданную ширину для контейнера и применить поведение прокрутки.
Установка свойства overflow-x отображает внутри контейнера полосу прокрутки.
Ниже код CSS для нашего примера:
background-color: lightblue;
border: 1px solid black;
height: 100px;
width: 500px;
overflow-x: scroll;
width: 1000px;
margin: 10px;
Как отключить горизонтальную прокрутку?
Если вы не установите ширину дочернего элемента в его родительском , то содержимое дочернего элемента будет перенесено на следующую строку без переполнения.
Вы также можете установить для свойства overflow-x значение hidden , что предотвратит перенос дочернего содержимого внутри его контейнера, а также выключит боковую прокрутку.
Вы также можете установить ширину дочерних элементов на 100%. Это перенесет дочернее содержимое на следующую строку без обрезания краев контейнера
Правила скролла в мобильных приложениях. Взаимодействия и методы
Я тестировал скролл в трех разных проектах и открыл для себя его плюсы и минусы, и, возможно, несколько правил его использования. Надеюсь, это поможет вам при создании и прототипировании вашего следующего продукта.
Основы
Насколько я могу судить, при использовании такого паттерна на странице, как скролл существует одно общее правило. Правило #1
Вы можете применять скролл к объекту только по одной оси за раз.
Как правило, эта ось является вертикальной или горизонтальной. Вертикальный скролл является основой практически любого цифрового взаимодействия, с которым вы столкнетесь, а горизонтальный – это обычный способ показать встроенный контент, не жертвуя информационным пространством. Однако, когда вы применяете скролл к более, чем одной оси, вы нарушаете границы. Вы даете объекту пространство, в котором он должен занимать любую точку между этими осями. В приведенном выше примере (красный квадрат) показывает объект с возможностью прокрутки как по вертикали, так и по горизонтали. Он становится объектом свободной формы, более похожим на взаимодействие с перетаскиванием, чем как взаимодействие с прокруткой. Я уверен, что есть изобретательные способы использовать подобный вариант, но они, скорее всего, не будут восприниматься как скроллинг.
Поправка
Оказывается, вид скролла объекта свободной формы –это совершенно нормальный прецедент. Например, скролл карты на вашем телефоне. Он используется в различных приложениях и не рассматривается в этой статье. Я говорю только о более традиционных жестах скроллинга: вверх-вниз, влево-вправо.
Вложенный скролл
Возможно, у вас не получится нарушить правило одной оси, но вы можете обойти его. Наиболее надежным способом выхода скроллинга за пределы одной оси является добавление групп вложенного скролла. Группы вложенного скролла позволяют одновременно применять вертикальные и горизонтальные жесты скролла к одному объекту. Что на самом деле происходит – это использование скролла двух отдельных объектов и применение их к одному объекту. Это означает применение группы скролла к одному объекту, а затем применение отдельной группы скролла к объекту, который уже содержит первый объект (или является его родителем). Я взял часть иерархии из дизайна, чтобы показать это. Эта структура позволяет группе «фрукты» прокручиваться отдельно от группы «овощи» и одновременно с ней, потому что группа фруктов получает жесты от двух взаимодействий скролла. По существу, вложенный скроллинг использует переходы из двух источников для обхода правила №1. Это прекрасно работает, пока эти два источника не начнут конфликтовать. В приведенном выше примере группа «фрукты» прокручивается вертикально, а родительская группа «фрукты-овощи» прокручивается по горизонтали. Это делается по необходимости. Если обе группы будут прокручиваться в одном направлении, скажем вертикально, то оба взаимодействия будут конфликтовать. Система не сможет отделить один жест скролла от другого, и дизайн, безусловно, сломается. Одно взаимодействие блокирует другое, запрещая его использование. Это приводит меня ко второму правилу использования скролла. Правило #2
Вы не можете применять к одному объекту два взаимодействия скролла на одной оси.
Даже вложенный скролл не поможет. Если объекты находятся в одном и том же пространстве, то, когда дело доходит до скролла может быть только одно взаимодействие, связанное с вертикальным жестом и одно взаимодействие, связанное с горизонтальным жестом. Хотелось бы надеяться, что это недостаток программного обеспечения только у меня. Хотя, я так не думаю.
Комбинированный скролл
Не бойтесь, есть выход. Комбинированный скроллинг (название, которое я только что придумал) и есть наше решение. Вместо того, чтобы фокусироваться на фактическом взаимодействии прокрутки, комбинированный скролл позволяет вам распространить это взаимодействие для остальной части дизайна. Суть его заключается в том, чтобы анимировать взаимодействия скролла. Вы используете прогресс группы скролла для определения контента в других частях дизайна. В примере ниже (слева) группа вложенного скролла позволяет прокручивать различную обувь, а также описание для каждой пары обуви. При этом меняются иконки обуви внизу. Они не входят в группу скролла, но кажется, что они прокручиваются вместе с ней, несмотря на то, что они очень разные по размеру и форме. На самом деле срабатывает анимация, связанная с взаимодействием скролла. Я анимировал иконки обуви, чтобы они были в определенных положениях при определенных точках положения скролла. В результате один жест управляет несколькими различными частями дизайна. Кажется, что реализация подобного приема займет много времени, но я уверяю вас – это не так. Однако, не все так хорошо. Посмотрите на другой пример (справа). Получаем такую же динамику, но наоборот. Иконки обуви находятся в группе вложенного скролла, а обувь / описание – нет. Вы можете сказать, что взаимодействие не такое плавное, как в примере слева, и для активации анимации требуются большие жесты. Могу сказать вам, что это конкретное взаимодействие часто ломалось. Бывает, что скролл не вызывает анимацию. Скажем, триггер для появления обуви – это положение скролла от 0px до 66px. Если я прокручу на 5px-66px, тогда анимация не сработает, и я получу сломанный прототип. До того, как я пришел к третьему правилу скролла, было много проб и ошибок. Правило #3
Не злоупотребляйте.
Активная манипуляция
К этому моменту, думаю, я слишком далеко отклонился от первоначальной цели скролла. То, что отличает скролл от свайпа и сдвига – это активная манипуляция. Свайп начинается и заканчивается. Скроллинг всегда активен. В предыдущих дизайнах широко используется прокрутка страниц, которая удаляет это активное качество. В следующем дизайне я попытался его выделить. Я переработал (отчасти) опыт использования Medium на мобильных устройствах, чтобы добавить секцию скролла, включающую все, что может понадобиться пользователю Medium. Вы можете открывать и закрывать секцию скролла, сохраняя информационное пространство. Более того, секция скролла довольно большая, и поскольку скролл – это активное взаимодействие, вам нужно прокручивать ровно столько, сколько требуется для нужного вам контента. Сначала отображается контент с самым высоким приоритетом. Мне нравится этот дизайн, но я признаю, он слабый. И это потому, что, как вы могли заметить, я нарушил свое правило №2. Вертикальный скролл для открытия секции скролла находится поверх вертикального скролла основного контента. Иногда, при скролле, жест разрывает границы контента, заставляя секцию скролла самопроизвольно открываться. Мне, действительно, приходилось мыслить нестандартно, чтобы этот дизайн реагировал на два отдельных вертикальных жеста скролла. Тот факт, что он вообще работает, несмотря на «правило», которое утверждает, что это невозможно, означает, что есть возможности для изменения и нарушения правил. Так что… Правило #2 дополненное
Вы не можете применять к одному объекту два взаимодействия скролла в одном направлении на одной оси. : D
Надеюсь, понятно, что я не отношусь к этим правилам слишком серьезно. Это всего лишь мои наблюдения. Надеюсь, мы сможем полностью избавиться от правил. Удачи. Перевод статьи Jose Virgil Almeda
Полоса прокрутки — элемент управления формы в EXCEL
Элемент Полоса прокрутки позволяет изменять значения в определенном диапазоне с шагом (1, 2, 3, . ), если нажимать на кнопки со стрелочками, и с увеличенным шагом, если нажимать на саму полосу в стороне от бегунка. Этот элемент имеет много общего со Счетчиком .
Для вставки элементов управления на лист необходимо отобразить вкладку Разработчик.
- В MS EXCEL 2007 это можно сделать через меню Кнопка офис/ Параметры Excel/ Основные/ Показывать вкладку Разработчик на ленте .
- В MS EXCEL 2010 это можно сделать так: Откройте вкладку Файл ; Нажмите кнопку Параметры ; Нажмите кнопку Настроить ленту ; Выберите команду Настройка ленты и в разделе Основные вкладки установите флажок Разработчик .
Теперь вставить элемент управления можно через меню: Разработчик/ Элементы управления/ Вставить .
Обратите внимание, что в этом меню можно также вставить Элементы ActiveX, которые расположены ниже интересующих нас Элементов управления формы. У обоих типов есть одни и те же элементы Кнопка, Список, Флажок и т.п. Разница между ними следующая: чтобы использовать Элементы ActiveX необходимо использовать VBA, а Элементы управления формы можно напрямую привязать к ячейке на листе.
Полоса прокрутки ( Scroll Bar ) как, впрочем и все другие Элементы управления формы, возвращает только 1 числовое значение. См. файл примера .
Обзорную статью обо всех элементах управления формы можно прочитать здесь .
Вставка Полосы прокрутки
Через меню Разработчик/ Элементы управления/ Вставить выберем левой клавишей мыши элемент Полоса прокрутки .
После этого выпадающее меню закроется, а курсор вместо обычного толстого крестика
превратится в тонкий крестик.
Кликнув левой клавишей мыши в нужное место на листе, элемент Полоса прокрутки будет помещен на лист (вертикально).
Чтобы при вставке элемента поместить Полосу прокрутки горизонтально, кликните и удерживайте левую клавишу мыши, затем переместите мышь вправо и чуть вниз.
Выделение Полосы прокрутки
После вставки Полосы прокрутки она становится выделенной. Если кликнуть в любом другом месте листа, то Полоса прокрутки перестанет быть выделенной. Чтобы снова ее выделить нужно кликнуть ее ПРАВОЙ клавишей мыши (клик ЛЕВОЙ клавиши увеличивает или уменьшает значение в связанной ячейке (см. ниже)). После клика правой кнопкой также появляется контекстное меню, чтобы его убрать можно нажать ESC или кликнуть левой клавишей по Полосе прокрутки .
Перемещение Полосы прокрутки и изменение ее размеров
Если навести курсор на выделенную Полосу прокрутки (курсор примет форму 4-х направленных в разные стороны стрелок), затем нажать и удерживать левую кнопку мыши, то можно переместить Полосу прокрутки . Удерживая клавишу ALT можно выровнять Полосу прокрутки по границам ячеек. Выделенную Полосу прокрутки также можно перемещать стрелками с клавиатуры.
Если навести курсор на углы прямоугольника или на маленькие квадратики на границе, то можно изменить ее размер.
Связываем Полосу прокрутки с ячейкой
Как было сказано выше, все Элементы управления формы возвращают значение. Это значение помещается в ячейку определенную пользователем. Чтобы связать Элемент управления с ячейкой, кликните на него ПРАВОЙ клавишей мыши, в появившемся контекстном меню выберите Формат объекта. Появится диалоговое окно, выберите вкладку Элемент управления (если такая вкладка отсутствует, то Вы вставили Элемент ActiveX, а не Элемент управления формы, об этом см. выше).
В поле Связь с ячейкой нужно ввести ссылку на ячейку. Свяжем наш Полосу прокрутки с ячейкой А1 .
Также установим минимальное значение =1, максимальное =101, шаг изменения =2, шаг изменения по страницам =10.
Убедитесь, что Полоса прокрутки не выделена. Пощелкайте левой клавишей мыши по кнопкам Полосы прокрутки . В ячейке А1 значение будет увеличиваться/ уменьшаться в указанном диапазоне, причем с шагом 2 (1, 3, 5, . ), т.е. в ячейку будут вводиться только нечетные числа. При щелчке по полосе прокрутки, значения будут уменьшаться/ увеличиваться с шагом 10.
Существует и другой способ связать Элемент управления и ячейку: Выделите правой клавишей мыши Элемент управления, в Строке формул введите =, затем кликните левой клавишей мыши на нужную ячейку, нажмите клавишу ENTER . Чтобы изменить ячейку, с которой связан Элемент управления, достаточно перетащить эту ячейку, взяв за ее границу, в нужное место.
Одну ячейку можно связать с несколькими элементами управления, но имеет ли это смысл? Решать Вам.
Примечание . Можно принудительно ввести в ячейку текстовое значение, но оно будет заменено при следующем нажатии Полосы прокрутки . Проведем эксперимент. Пусть в ячейке А1 введено число 5. Даже если Вы введете в ячейку А1 текст » строка «, то при следующем нажатии Полосы прокрутки , в ячейке появится число 7 (если шаг =2), т.е. Полоса прокрутки хранит текущее значение не в ячейке, а где-то в себе.
Если, в нашем примере, Вы введете четное значение, то Полоса прокрутки не сбросит его, а будет прибавлять 2 и Вы получите четную последовательность 2, 4, 6, . Но, при достижении верхней границы его поведение изменится 96, 98, 100, 101, т.к. максимальное значение установлено нами =101. Теперь при движении вниз Полоса прокрутки будет воспроизводить последовательность нечетных чисел! Тоже справедливо и для нижней границы: 6, 4, 2, 1, т.к. минимальное значение установлено =1. Поэтому, следите, чтобы граничные значения (при шаге отличным от 1), содержались в требуемой последовательности, иначе при движении вверх и вниз Вы можете получить разные последовательности. Например, для последовательности 1, 4, 7, 10 (шаг 3) правильно установить границы 1 и 10. Если Вы установите границы 1 и 9, то при движении от 1 Вы получите последовательность 1, 4, 7, 9, затем при движении от 9 — получите 9, 6, 3, 1, т.е. 2 разные последовательности!
Использование Полосы прокрутки
Полоса прокрутки удобна, когда у Вас есть модель, которая зависит от определенного параметра и Вам требуется посмотреть, как ведут себя показатели модели в зависимости от этого параметра: согласитесь нажимать на кнопку удобней, чем вводить значения непосредственно в ячейку. Можно также нажать на Полосу прокрутки и удерживать левую клавишу мыши, и значения в связанной ячейке начнут «бежать».
Предположим, что имеется таблица с множеством столбцов и нам нужно средство для просмотра только одного столбца.
При нажатии на Полосу прокрутки (кнопки), значение в связанной ячейке А1 будет увеличиваться/ уменьшаться на 1 (шаг), следовательно, будет отображен следующий/ предыдущий месяц. При нажатии на Полосу прокрутки (полоса), значение в связанной ячейке А1 будет увеличиваться/ уменьшаться на 3 (шаг страницы), следовательно, будет отображен месяц, отстоящий на 3 месяца вперед или назад. Это реализовано с помощью формулы =СМЕЩ($B19;;$A$1-1) в ячейке В8 и ниже.
Также для выделения текущего месяца в исходной таблице использовано Условное форматирование .
Нажмем на кнопку Полосы прокрутки , чтобы отобразить (в диапазоне В8:В14 ) следующий месяц.
Этот месяц будет выделен в исходной таблице.
Примечание . Таблица, конечно же, спроектирована не совсем корректно: логично разместить материалы в столбцах, а месяцы в строках. О правильном проектировании таблиц читайте здесь .
Имя Элемента управления
У каждого Элемента управления есть имя. Чтобы его узнать нужно выделить Полосу прокрутки , в Поле имя будет отображено ее имя. Чтобы изменить имя Полосы прокрутки — в Поле имя введите новое имя и нажмите клавишу ENTER . Также имя можно изменить в Области выделения ( Главная / Редактирование/ Найти и выделить/ Область выделения ).
Зачем нам знать имя элемента управления? Если Вы не планируете управлять Полосой прокрутки из программы VBA, то имя может потребоваться только для настройки его отображения на листе. Об этом читайте ниже.
Прячем Полосу прокрутки на листе
Включите Область выделения ( Главная / Редактирование/ Найти и выделить )
В Области выделения можно управлять отображением не только Элементов управления, но и других объектов на листе, например рисунков.
Нажмите на изображение глаза напротив имени объекта и объект исчезнет/ появится.
Расширяем возможности Полосы прокрутки
Диапазон изменения значений Полосы прокрутки может содержать только положительные значения, шаг — только целые и положительные значения. Этого не всегда достаточно. Научимся использовать формулы, чтобы расширить возможности Полосы прокрутки (см. файл примера ).
Чтобы иметь возможность изменять значение в ячейке с шагом 0,1 используйте формулу =A31/10 ( Полоса прокрутки связана с ячейкой А31 ).
Чтобы изменять значение в ячейке от -24 до -1, используйте формулу =-25+A35 (границы Полосы прокрутки установлены от 1 до 24, Полоса прокрутки связана с ячейкой А35 )
Шаг изменения Полосы прокрутки можно сделать переменным, например, используя квадратичную зависимость (1, 4, 9, 16, . ) с помощью формулы =A38*A38 ( Полоса прокрутки связана с ячейкой А38 ).
Полоса прокрутки
Полоса прокрутки позволяет пользователю перемещать визуальную область экрана вверх, вниз, вправо и влево. Вертикальная и горизонтальная полоса прокрутки обычно расположены в крайней правой и нижней стороне окна. Больше всего пользователи знакомы с полосой прокрутки в связи с необходимостью почти каждый раз прокручивать интернет страницы вниз и вверх.
На изображении ниже приведен пример окна с вертикальной и горизонтальной полосой прокрутки.
Полосы прокрутки используются с помощью мыши или клавиатуры.
С помощью мыши пользователь может нажимать на стрелки, которые находятся, по оба конца полосы прокрути, жать по пустому месту полосы или перемещать ползунок полосы прокрутки зажимая левую кнопку мыши. Также для прокрутки страницы можно использовать колесо мыши.
Чтобы управлять полосой прокрутки с помощью клавиатуры, можно нажимать клавиши стрелкой и страница будет перемещаться в их направлении. (В текстовых редакторах будет двигаться курсор, а не страница)