說明如何打造類似網路 Instagram 限時體驗的基本功能。
在這篇文章中,我想分享如何在網路上建構回應式元件,並設計回應式、支援鍵盤導覽功能,以及在不同的瀏覽器上運作。
如果您想透過實作示範,瞭解如何自行建構這個短片故事元件,請參閱「故事」元件程式碼研究室。
如果你偏好使用影片,也可以觀看這篇 YouTube 文章:
總覽
Story UX 常見的兩種例子為 Snapchat Stories 和 Instagram Stories (而非艦隊)。 一般而言,使用者體驗往往是只能透過行動裝置觀看的模式,適用於瀏覽多個訂閱項目。舉例來說,使用者可以在 Instagram 上開啟好友的故事,瀏覽當中的相片。他們通常會一次做這麼多的朋友。如果使用者輕觸裝置右側,即可跳到該好友的下一篇故事。使用者向右滑動即可跳至其他好友。故事元件與輪轉介面類似,但前者允許導覽多維度陣列,而非單一維度陣列。就像每個輪轉介面裡都有輪轉介面🤯
挑選工作適用的工具
總而言之,由於有幾項重要的網路平台功能,我發現這個元件很容易建構。讓我們一起討論吧!
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;
}
以下是 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 一文,深入瞭解使用方式。
.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 推文,然後將該版本新增至下方的「社群重混」部分。