Базовый обзор того, как создать в интернете интерфейс, похожий на Instagram Stories.
В этой статье я хочу поделиться мыслями о создании компонента Stories для Интернета, который является адаптивным, поддерживает навигацию с помощью клавиатуры и работает в разных браузерах.
Если вы хотите самостоятельно создать компонент Stories, ознакомьтесь с практической работой по компоненту Stories.
Если вы предпочитаете видео, посмотрите ролик на YouTube:
Обзор
Два популярных примера UX-дизайна историй – это истории в Snapchat и Instagram (не говоря уже о флитах). В целом, с точки зрения UX, истории – это шаблон навигации по нескольким подпискам, предназначенный только для мобильных устройств и ориентированный на нажатия. Например, в Instagram пользователи открывают историю друга и просматривают фотографии в ней. Обычно они делают это со многими друзьями одновременно. Нажав на правую сторону экрана, пользователь переходит к следующей истории этого друга. Проведя по экрану вправо, пользователь переходит к следующему другу. Компонент "История" похож на карусель, но позволяет перемещаться по многомерному массиву, а не по одномерному. Это как если бы внутри каждой карусели была ещё одна карусель. 🤯
Вторая карусель историй.
👍 Список в списке, то есть многомерный массив.
Выбор подходящих инструментов для работы
В целом, я считаю, что этот компонент довольно прост в сборке благодаря нескольким критическим функциям веб-платформы. Давайте их накроем!
CSS Grid
Наш макет оказался несложным для CSS Grid, поскольку он оснащен некоторыми мощными способами управления контентом.
Макет "Друзья"
Наш основной компонент-обертка .stories – это горизонтальная прокрутка, оптимизированная для мобильных устройств.
.stories {
inline-size: 100vw;
block-size: 100vh;
display: grid;
grid: 1fr / auto-flow 100%;
gap: 1ch;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior: contain;
touch-action: pan-x;
}
/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
max-inline-size: 480px;
max-block-size: 848px;
}
Давайте разберем макет grid:
- Мы явно заполняем область просмотра на мобильных устройствах с помощью
100vhи100vwи ограничиваем размер на компьютерах. /разделяет шаблоны строк и столбцов.auto-flowпереводится какgrid-auto-flow: column.- Шаблон autoflow –
100%, что в данном случае соответствует ширине окна прокрутки.
На мобильном телефоне размер строки – это высота области просмотра, а размер столбца – ее ширина. Продолжая пример с историями в Snapchat и Instagram, каждый столбец будет историей друга. Мы хотим, чтобы истории друзей продолжались за пределами области просмотра, чтобы нам было куда прокручивать. Grid создаст столько столбцов, сколько нужно для макета HTML для каждой истории друга, создавая для нас динамический и адаптивный контейнер прокрутки. Grid позволил нам централизовать весь эффект.
Объединение в стопки
Для каждого друга нам нужны его истории в состоянии, готовом к разбиению на страницы. Для анимации и других интересных шаблонов я выбрал стек. Когда я говорю «стопка», я имею в виду, что вы смотрите на бутерброд сверху, а не сбоку.
С помощью CSS Grid мы можем определить сетку с одной ячейкой (то есть квадрат), где строки и столбцы имеют общий псевдоним ([story]), а затем каждому дочернему элементу назначается это пространство с одной ячейкой:
.user {
display: grid;
grid: [story] 1fr / [story] 1fr;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.story {
grid-area: story;
background-size: cover;
…
}
Это позволяет нам управлять порядком наложения с помощью HTML и сохранять все элементы в потоке. Обратите внимание, что нам не нужно было ничего делать с позиционированием absolute или z-index, и нам не нужно было корректировать блок с помощью height: 100% или width: 100%. Родительская сетка уже определила размер области просмотра изображения истории, поэтому ни одному из этих компонентов истории не нужно было указывать, чтобы они ее заполнили!
Точки привязки прокрутки CSS
Спецификация CSS Scroll Snap Points позволяет легко зафиксировать элементы в области просмотра при прокрутке. До появления этих свойств CSS приходилось использовать JavaScript, и это было… мягко говоря, непросто. В статье Сары Драснер Introducing CSS Scroll Snap Points (на английском языке) подробно рассказывается, как использовать точки привязки.
scroll-snap-points и с ними.
Без него пользователи могут прокручивать страницу как обычно. При этом браузер плавно переходит от одного элемента к другому.
.stories { display: grid; grid: 1fr / auto-flow 100%; gap: 1ch; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; touch-action: pan-x; }
.user { display: grid; grid: [story] 1fr / [story] 1fr; scroll-snap-align: start; scroll-snap-stop: always; }
Я выбрал Scroll Snap Points по нескольким причинам:
- Бесплатный доступ. В спецификации Scroll Snap Points указано, что нажатие клавиш Стрелка влево и Стрелка вправо должно по умолчанию перемещать по точкам привязки.
- Развивающаяся спецификация. Спецификация Scroll Snap Points постоянно пополняется новыми функциями и улучшениями, а это значит, что мой компонент Stories, скорее всего, будет только улучшаться.
- Простота реализации. Точки привязки прокрутки практически созданы для горизонтальной разбивки на страницы, ориентированной на сенсорный экран.
- Инерция в стиле платформера. Каждая платформа будет прокручивать и останавливать страницу в своем стиле, в отличие от нормализованной инерции, которая может иметь странный стиль прокрутки и остановки.
Совместимость с разными браузерами
Мы протестировали его в Opera, Firefox, Safari и Chrome, а также на Android и iOS. Ниже приведен краткий обзор веб-функций, в которых мы обнаружили различия в возможностях и поддержке.
Однако некоторые CSS-стили не применялись, поэтому на некоторых платформах не было оптимизации UX. Мне понравилось, что мне не нужно было управлять этими функциями, и я уверен, что со временем они появятся и в других браузерах и на других платформах.
scroll-snap-stop
Карусели – один из основных примеров использования UX, который побудил к созданию спецификации точек привязки прокрутки CSS. В отличие от историй, карусель не всегда должна останавливаться на каждом изображении после того, как пользователь взаимодействует с ним. Это может быть нормально или поощряться
быстро прокручивать карусель. А вот истории лучше просматривать по одной, и именно это предлагает scroll-snap-stop.
.user {
scroll-snap-align: start;
scroll-snap-stop: always;
}
На момент написания этой статьи scroll-snap-stop поддерживается только в браузерах на основе Chromium. Подробную информацию вы найдете в статье Совместимость браузеров. Однако это не блокирует работу. Это просто означает, что в неподдерживаемых браузерах
пользователи могут случайно пропустить друга. Поэтому пользователям придется быть внимательнее, или нам нужно будет написать код JavaScript, чтобы пропущенный друг не помечался как просмотренный.
Если вам интересно, вы можете ознакомиться со спецификацией.
overscroll-behavior
Бывало ли у вас такое, что вы прокручивали модальное окно и вдруг начинали прокручивать контент за ним?
overscroll-behavior
позволяет разработчику перехватить эту прокрутку и никогда не позволять ей
уйти. Она подходит для самых разных случаев. Мой компонент Stories использует его, чтобы предотвратить дополнительные свайпы и жесты прокрутки от выхода из компонента.
.stories {
overflow-x: auto;
overscroll-behavior: contain;
}
Safari и Opera были двумя браузерами, которые не поддерживали это, и это совершенно нормально. Пользователи увидят привычный эффект достижения конца прокрутки и могут даже не заметить этого улучшения. Мне лично очень нравится этот эффект, и я добавляю его почти во все функции прокрутки за край, которые реализую. Это безвредное дополнение, которое может только улучшить UX.
scrollIntoView({behavior: 'smooth'})
Когда пользователь нажимает на экран и доходит до конца набора историй друга,
пора переходить к следующему другу в наборе точек привязки прокрутки. С помощью JavaScript мы смогли сослаться на следующего друга и запросить его прокрутку в поле зрения. Поддержка базовых функций этого метода отличная: каждый браузер прокручивает элемент в область просмотра. Но не все браузеры делали это 'smooth'. Это просто означает, что он прокручивается в поле зрения, а не привязывается.
element.scrollIntoView({
behavior: 'smooth'
})
Safari – единственный браузер, который не поддерживает behavior: 'smooth'. Подробную информацию вы найдете в статье Совместимость браузеров.
Практическое использование
Теперь, когда вы знаете, как это сделала я, как бы вы это сделали?! Давайте разнообразим наши подходы и изучим все способы создания веб-сайтов. Создайте демоверсию, отправьте мне твит со своей версией, и я добавлю ее в раздел Ремиксы сообщества ниже.