UXPUB

UXPUB - сообщество из 2,369 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Кастомные и нативные скроллбары в веб-приложениях
Саша Федорова
Саша Федорова

Опубликовано • Обновлено

Кастомные и нативные скроллбары в веб-приложениях

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

Несмотря на то, что в прошлом они выглядели и вели себя одинаково, полосы прокрутки еще не до конца согласованы в разных системах и платформах. Скроллбары в Windows 10 не сильно изменились по сравнению с Windows 95 (разрыв в 20 лет!) — они по-прежнему имеют две кнопки и перетаскиваемый ползунок. С другой стороны, macOS под влиянием увеличения использования трекпада вместо мыши, и повсеместного распространения устройств с сенсорным экраном, со временем полностью обновила полосы прокрутки.

История скроллбара

Скроллбары веб-приложений

Как и в случае с другими типами элементов управления, такими как кнопки и поля ввода, в веб-приложениях есть выбор: использовать нативные для платформы скроллбары или создать кастомные.

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

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

Целостный опыт

На данный момент полосы прокрутки различаются по стилю и поведению в разных операционных системах, браузерах и устройствах скролла (трекпад, Magicmouse, мышь с колесиком и т. д.).

Height — это приложение, которое работает в основном в Интернете. С нативными скроллбарами это означало бы, что разные браузеры/операционные системы будут отображать Height по-разному, и что использование другого устройства скролла радикально изменит способ отображения Height.

Image description

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

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

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

Применяя эти две концепции вместе, мы можем получить чистый пользовательский интерфейс, независимо от устройства скролла или операционной системы. Вот как Height эволюционировал от использования нативных полос прокрутки к кастомным:

Кастомные скроллбары позволяют Height оставаться одинаковым на разных платформах и не перегружать пользователей видимыми треками.

Улучшите обнаружение

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

В приложении Height мы отображаем скроллбары при наведении курсора на область прокрутки. Это решает обе проблемы, сохраняя при этом интерфейс незагроможденным.

Добавьте кастомное поведение

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

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

VSCode — еще один отличный пример кастомного поведения. Их скроллбары имеют большой трек, который используется для указания пользователю, где в файле возникают ошибки или результаты поиска.

Image description

VSCode добавляет результаты поиска в трек скроллбара

Эффективная реализация

Наиболее важным аспектом кастомных скроллбаров является производительность. Скроллинг должен оставаться плавным и не зависеть от возможной медлительности вашего компьютера.

Несколько советов для наилучшей производительности:

  • Сохраняйте базовый скролл нативным: не переопределяйте его с помощью javascript, пусть этим занимается браузер. На практике это означает сохранение свойства CSS overflow, но скрытие нативных скроллбаров.
.ScrollView {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ScrollView::-webkit-scrollbar {
 display: none;
}
Войти в полноэкранный режим Выход из полноэкранного режима
  • Избегайте сбоев макета при рендеринге или измерении скроллбаров. Простой способ сделать это — использовать fastdom.
  • Убедитесь, что скроллинг не происходит в основном треде. Чтобы обнаружить потенциальные проблемы, вы можете включить в инструментах разработчика GoogleChrome Rendering → Scrolling performance issues

Image description

Включение панели рендеринга "…" → Moretools → Rendering

Таким образом, кастомные полосы прокрутки могут помочь:

  • Контролировать, как и когда полосы видны
  • Поддерживать единообразный скролл на разных платформах
  • Добавить к полосам прокрутки программно-зависимые функции

Учитывая все обстоятельства, создание кастомных скроллбаров — это инвестиция. Если все сделано плохо, неинтуитивные или неэффективные полосы прокрутки могут нанести ущерб пользовательскому опыту. Но если все сделано правильно, они могут значительно улучшить ваше приложение, оставаясь при этом невидимыми для конечного пользователя.

Есть вопросы или мысли? Пишите в комментариях.


Перевод статьи height.app

Обсуждение (1)

Свернуть/развернуть
korshunov profile image
Богдан

Статья огонь!
Опечатку увидел с «кроллбаром» 😄