打造精選故事元件

說明如何打造類似網路 Instagram 限時體驗的基本功能。

Adam Argyle

在這篇文章中，我想分享如何在網路上建構回應式元件，並設計回應式、支援鍵盤導覽功能，以及在不同的瀏覽器上運作。

示範

如果您想透過實作示範，瞭解如何自行建構這個短片故事元件，請參閱「故事」元件程式碼研究室。

如果你偏好使用影片，也可以觀看這篇 YouTube 文章：

總覽

Story UX 常見的兩種例子為 Snapchat Stories 和 Instagram Stories (而非艦隊)。 一般而言，使用者體驗往往是只能透過行動裝置觀看的模式，適用於瀏覽多個訂閱項目。舉例來說，使用者可以在 Instagram 上開啟好友的故事，瀏覽當中的相片。他們通常會一次做這麼多的朋友。如果使用者輕觸裝置右側，即可跳到該好友的下一篇故事。使用者向右滑動即可跳至其他好友。故事元件與輪轉介面類似，但前者允許導覽多維度陣列，而非單一維度陣列。就像每個輪轉介面裡都有輪轉介面🤯

使用資訊卡的視覺化多維陣列。由左至右為一疊紫色邊框卡片，每張卡片內包含 1 至多邊的青色邊境卡。清單。
好友的第 1 個輪轉介面
第 2 個「堆疊」故事的輪轉介面
👍? 清單中的清單，又稱為多維度陣列

挑選工作適用的工具

總而言之，由於有幾項重要的網路平台功能，我發現這個元件很容易建構。讓我們一起討論吧！

CSS 方格

我們的版面配置讓 CSS 網格沒有高度的排列順序，因為已具備強大的內容繪製功能。

好友版面配置

我們主要的 .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;
}
使用 Chrome 開發人員工具的裝置模式 醒目顯示 Grid 建立的資料欄

以下是 grid 版面配置的細項：

  • 我們會明確在行動裝置上使用 100vh 和 100vw 填滿可視區域，並限制電腦版的可視區域大小
  • / 可用來分隔列和欄範本
  • auto-flow翻譯為grid-auto-flow: column
  • 自動流程範本是 100%，在這個範例中是捲動視窗寬度

在手機上將列大小視為可視區域高度，每一欄則是可視區域寬度。延續 Snapchat 故事和 Instagram 限時動態範例，每一欄都是好友的故事。我們希望好友故事能繼續在可視區域之外，以便前往某處查看。格線會使得需要為每一名好友故事的 HTML 進行版面配置的欄數，來建立動態的回應式捲動容器。而網格則能集中呈現整個效果

堆疊

我們需要每位好友的故事處於分頁狀態。為了準備動畫和其他趣味模式，我選擇了堆疊。我說過堆疊時 你像在三明治

使用 CSS 格線時，我們可以定義單一儲存格格線 (即正方形)，其中列與欄共用別名 ([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 捲動 Snap Point

CSS 捲動 Snap Point 規格可讓系統在捲動時將元素鎖定在可視區域中。在這些 CSS 屬性存在之前 您必須使用 JavaScript歡迎觀看 Sarah Drasner 的隆重推出 CSS 捲動 Snap Point 一文，深入瞭解使用方式。

水平捲動，不使用 scroll-snap-points 樣式。 如果沒有，使用者就可以照常捲動畫面。完成之後，瀏覽器會輕輕地靜待每個項目上，
parent
.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;
}
孩子選擇採用貼齊目標。

我選擇捲動 Snap Point 的原因有以下幾個：

  • 免費無障礙功能：根據預設，按下「向左鍵」和「向右箭頭」鍵的捲動 Snap Point 規格狀態應可切換貼齊點。
  • 規格不斷增加。捲動 Snap Point 的規格隨時都會推出新功能和改善項目，也就是說，在我們推出這項功能時，我的短片故事元件或許會更臻完善。
  • 輕鬆導入：捲動 Snap 點實際上是專為觸控式水平分頁用途所設計。
  • 免費平台式慣例。每個平台都會以專屬風格捲動和休息，與正規化的慣量不同，後者的捲動和靜息樣式可能不適用。

跨瀏覽器相容性

我們測試了 Opera、Firefox、Safari 和 Chrome，以及 Android 和 iOS。以下是我們發現在功能和支援方面有差異的網頁功能摘要。

不過，我們還是有部分 CSS 不適用，因此目前有些平台並未將使用者體驗最佳化。我喜歡不必管理這些功能，也不必擔心這些功能最終會連上其他瀏覽器和平台。

scroll-snap-stop

輪轉介面是促使我們建立 CSS 捲動 Snap Point 規格的主要使用者體驗之一。與故事不同的是，輪轉介面不一定必須在使用者與每張圖片互動後停止播放。也許可以的話，建議快速循環瀏覽輪轉介面。另一方面，故事最好逐一瀏覽，而這就是 scroll-snap-stop 所提供的內容。

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

本文撰寫時，只有以 Chromium 為基礎的瀏覽器支援 scroll-snap-stop。如需更新，請參閱瀏覽器相容性。但這不是阻礙。這代表使用者在不支援的瀏覽器上，可能會不小心略過好友。所以使用者只要小心注意，否則就必須編寫 JavaScript，確保略過的好友不會將他們標示為已看過。

如要進一步瞭解相關資訊，請參閱規格。

overscroll-behavior

是否曾在強制回應視窗後方的內容突然出現時，是否曾一直捲動瀏覽互動視窗？overscroll-behavior 可讓開發人員擷取並一律不讓它離開。無論在任何場合，都能使用這個活力。我的故事元件會使用此元件，防止額外的滑動和捲動手勢離開元件。

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari 和 Opera 是 2 個不支援這種瀏覽器的瀏覽器，請放心。他們可以像習慣使用的過度捲動體驗，而且可能永遠不會注意到這項強化功能。我個人非常熱愛粉絲 也喜歡在幾乎我導入的 所有過度捲動功能中這樣無傷大雅，只會提升使用者體驗。

scrollIntoView({behavior: 'smooth'})

當使用者輕觸或點選，且已到達好友的故事集結束時，就該前往捲動快點組中的下一位朋友了。我們可以透過 JavaScript 參照下一個好友，並要求將其捲動至畫面。我們支援這項作業的基本概念，因為每個瀏覽器都會捲動至這個檢視畫面。但並非每種瀏覽器都'smooth'。這只是表示已捲動至檢視畫面，而非貼齊。

element.scrollIntoView({
  behavior: 'smooth'
})

Safari 是唯一不支援 behavior: 'smooth' 的瀏覽器。如需更新，請參閱瀏覽器相容性。

實作

現在你知道我怎麼做，你會怎麼做？我們來多方拓展實務方案，並學習運用網路打造服務的所有方式建立 Glitch，Twitter 推文，然後將該版本新增至下方的「社群重混」部分。

社群重混作品