3個要點，教你設計好無限滾屏

來自專欄極光日報16 人贊了文章

說明：喜歡翻譯國外交互設計體驗設計網站優秀文章案例，僅供互相學習探討，翻譯有版權，如有錯誤，請多指正~

前言

隨著社交網路的流行，無限滾屏刷新feed流成為探索更多內容的一種必要的交互方式，如同Flickr、Facebook所做的。用戶願意瀏覽大量內容去尋找自己感興趣的東西，用戶會先關注內容再關注其他東西，而無限滾屏形式能讓用戶找到他們想要的內容。

此外，無限滾屏的線性結構能讓網頁編輯容易操控。隨著用戶向下滾動頁面，迥異的布局可以配合各種微動畫效果來營造一種讓用戶好奇「接下來會發生什麼」的氛圍。The Boat 就是一個很好的案例，無限滾屏增強了故事性，創造一種全新的視覺文案布局形式。

無線滾屏形式給設計師打開了一扇新的大門，然而他也有缺點。它需要設計師花精力去關注內容，導航以及動畫。如果無線滾屏是你的不二選擇，那麼最好時刻銘記下面幾點：

1.引導用戶滾屏

2.調整導航形式以適應滾屏

3.用動畫去強化滾屏形式

1.引導用戶滾屏

儘管用戶通常會在載入完頁面就開始向下滾屏查看，第一屏的內容仍然是非常重要的 — 首屏的內容會產生第一印象並讓用戶對後面的內容質量有一個相應的預期，只有當首屏內容足夠吸引的時候用戶才會願意滾屏查看更多。這種情況不管是在手機，平板電腦或者PC上都是適用的：只有當用戶認為滾屏查看的內容值得的時候才會去做。

1-1.給用戶有趣的內容

1-2.避免錯誤的頁底展示

1-1.給用戶有趣的內容 —

用戶不需要付出任何操作成本看到的內容才是能讓用戶產生向下滾屏行為的動力。想確保用戶下拉查看更多內容，你就必須提供用戶感興趣的內容。因此，首屏必須放最有吸引力的內容：

• 好的頁面簡介
  好的頁面簡介是內容的一個縮影並幫助用戶了解這個頁面是幹嘛的
• 有趣並且真實的內容

  真實豐富的內容能夠吸引用戶產生持續的關注

• 吸引人的圖片(內容與質量) 用戶對包含他們感興趣的相關信息的圖片非常關注

Tips：用一款叫做

1-2.避免錯誤的頁底展示 —

首屏的內容會影響餘下的內容，首屏的內容應該提示用戶滾屏後有更多有價值的內容。當你錯誤的展示首頁底部時，或者說首屏內容展示完畢看起來下面沒有更多內容了，那麼用戶也沒有理由相信下面有更多內容，因而用戶就很少會滾屏。

避免錯誤的首頁底部展示其實很簡單 — 只需要在視覺上提示用戶下面有更多信息。例如，網格狀或者卡片式布局就可以在第一屏的結束位置被裁剪來告訴用戶滾動方向以及有更多內容

或者你也可以直接告訴用戶可以滾屏。一個明顯的提示，比如一個指向屏幕下方的箭頭或者一句「下滑查看更多」文案，這都能很明顯的提示用戶下面有更多內容。

2.調整導航形式以適應滾屏

導航在網站的用戶體驗中會產生好的或壞的影響。一個好用的導航很關鍵，因為用戶必須能夠快速的定位他們在頁面中的位置，並且知道怎樣去他們想要的頁面。

2-1.使用固定式的導航(欄)

2-2.考慮使用定位按鈕

2-3.確保返回按鈕好用

2-1.使用固定式的導航(欄) —

長長的滾屏會讓導航變得很麻煩: 如果用戶在滾動到頁面深處後看不到導航欄，那麼他們就不得不一直往上滾動頁面到頂部。一個很直接的解決辦法就是固定式的導航欄: 它能始終讓導航欄保持可見，因而可以讓用戶很方便和快捷地導航去不同的頁面或區域。

然而，如果你想節約有限的屏幕空間，那麼可以在查看更多的滾動方向上隱藏導航欄並在相反方向上讓其可用。

這種方法在移動端尤其適用: 因為手機屏幕比平板電腦，筆記本，PC都要小得多，導航欄會佔掉相當一部分屏幕空間。如果屏幕展示的是一個滾動的瀑布流，那麼當用戶滾屏查看新內容時可以隱藏導航欄而在用戶準備返回頂部時顯示。

2-2.考慮使用定位按鈕 —

無限滾屏的另外一個普遍存在的問題就是可能造成用戶迷失：用戶可能會很難找到頁面中之前看過的內容。當頁面內容被分割成許多同等重要的部分或者區塊時(例如一個很長的用戶引導頁面)這種問題(用戶迷失)顯得尤為明顯，使用頁面快速定位按鈕能夠解決這個問題。

頁面定位其實是一系列能夠讓用戶快速跳到頁面相關內容的頁面內鏈接，它其實與內容目錄幾乎同理。例如，在Tumblr上，用戶可以直接跳到頁面底部，或者當他們迷失的時候直接跳回頂部。頁面內容被分割為不同的區塊，這些區塊很容易區分並且有大大的定位點固定在屏幕的左側。

當用戶打開一個頁面內(不跳轉)的鏈接後，然後點擊返回按鈕，他們是期望能夠回到上一個頁面的相同位置的，但如果在頁面中的位置沒有被保留，那麼使用瀏覽器的返回按鈕就會將位置重置到頁面的頂部，失去之前的閱讀位置使用戶不得不滾屏一段他們已經看過的內容。在這種情況下用戶很容易因為沒有返回原來位置的功能而感到沮喪。

Flickr的返回按鈕是一個很好的符合用戶預期的案例，它會記住用戶下拉的位置，因此當用戶點擊返回按鈕的時候會回到他之前頁面內的初始位置。

3.用動畫去強化滾屏形式

考慮到用戶在一個頁面的注意力大概能集中8秒左右，一個非常愉悅的滾屏體驗能夠明顯延長用戶的停留時間。使用得當的動畫能夠在滾屏體驗中很好的引導用戶。

3-1.滾屏激活的動畫效果

3-2.視差效果

3-3.載入時提供視覺上的反饋

3-4.避免過渡使用滾屏

3-5.緩解SEO的缺點

3-1.滾屏激活的動畫效果 —

考慮到把頁面分割成可滾屏的部分，而每一個部分都可以通過動畫效果來引入其內容。當用戶滾屏時，動畫通過創造內容的運動軌跡將用戶的視線過度到下一屏。這是一種對於要保持用戶對接下來內容感興趣而展示給用戶內容流的非常有效的方法(通過動畫銜接不同區塊的內容並讓用戶保持持續的興趣)。

當你的網站想要把故事講得很流暢，長滾屏加上視差效應可以創造出一個完全沉浸式的瀏覽體驗。

視差滾屏意味著背景內容相對於前景元素移動得稍慢點，當你下滾頁面時它可以創造出一個3D效果。如果運用得當，它可以創造出一個非常好的縱深感。這種形式很適合那些故事描述性的網站，用好的視覺元素創造一個更加沉浸式並且更有趣更刺激的體驗。

Tips：

視差網站的代碼開發可以閱讀Dave Gamache 寫的文章 「Parallax DoneRight」。

當你設計長滾屏形式並且帶有動畫的網時必須要考慮到用戶載入頁面所需CPU和內存的消耗。多頁面多內容的滾屏，包括各種圖片、GIF圖和視頻還不需要重新載入的頁面會佔用系統很大的資源。可以在不同設備上進行測試並且運用一些小技巧比如當用戶滑過時不播放動畫和視頻來減少這種內存資源的浪費。

這種方法尤其適合無限滾屏的頁面，對內容很多的長滾屏頁面也很有用。當新內容載入時，用戶需要一個網站傳遞一個明確的載入信號，通過使用進程信號來展示有新的內容正在載入並且會很快在頁面顯示讓用戶一直感知。

因為載入新內容是一個很快速的行為(通常不會超過2-10秒)你可以用小圈圈動畫來作為告知系統正在工作的反饋信號 — 誠然，這種動畫非常短並且可以重複使用。

同樣也可以增加額外的信號來告知用戶包括使用文案來解釋用戶為什麼在等待。

3-4.避免過渡使用滾屏 —

那些被滾屏形式綁架了的網站忽略了網站瀏覽的基本功能。被滾屏劫持體驗非常不好，因為用戶對自身的操作行為及結果不能夠充分預知。用戶對網站滾屏交互的預期不應該被狹隘的體驗所劫持。

Tumblr uses scroll hijacking on their current homepage

這裡tumblr被做成當成了反面教材，大意應該是批判tumblr滾屏屏數太多，一共有六屏

3-5.緩解SEO的缺點 (SEO= Search Engine Optimization，這一部分不是特別懂)

我們來看看他們是怎麼說的: (這裡指Google recommendations)

?確定每一屏有多少內容： 1. 確保如果一個搜索用戶直接來到這個頁面，他們能夠很容易找到他們想要的內容(在定位到想要的內容之前不要有太多的滾屏)；

2.使用合理的頁面(分屏)載入時間

?分配內容以讓各個分屏之間不會重疊

4.結語

在網頁設計中，用戶的瀏覽過程應該像目標內容一樣有趣。長滾屏可以創造一個完全的沉浸式瀏覽體驗。就像Josh Porter 說的：「滾屏是過程，點擊作出決定。」如果用戶喜歡這個網頁的UI，那麼他們不會在意滾屏的長度。因此，專註於用戶們目標並且讓頁面瀏覽更便捷。

另附原文地址：http://www.uxbooth.com/articles/best-practices-for-scrolling/

推薦閱讀：