大家在使用移動裝置瀏覽內容資訊的時候，有沒有思考過一個問題，為什麼絕大部分內容都是採用上下滾動的展示方式，而非左右滾動或兩者結合？

我覺得可能既有傳統的瀏覽習慣的痕跡，也有基於人體工學的現實考慮。

在web瀏覽器和web端內容展示佔主流的時代，我們在瀏覽一個web頁內容的時候，最主流的互動方式也是上下滾動瀏覽頁面內容，這種互動方式由兩個原因造成：

1. 當代人習慣的瀏覽方式，即文字由左至右，從上到下。

古代文字瀏覽習慣

當代人主流瀏覽方式

在計算機螢幕誕生後，命令列的顯示方式就與當代主流的瀏覽方式保持了一致，在全球資訊網誕生後，這種瀏覽方式也被物理對映到了web端，一如qwerty鍵盤由古典打字機直接移植到電腦鍵盤。

這種展示方式造成的直接結果就是內容區塊寬度保持一致（不能超過一定寬度，以保持視線能夠順利平移至下一行），不建議左右移動，以上下滾動螢幕來代替書籍和印刷品的翻頁。

2. 輸入裝置滑鼠中間滾輪強化了這種瀏覽習慣。

滑鼠中間滾輪的出現，是順應為了方便快速上下滾動內容區塊而進行的輸入裝置功能擴充套件，即不按壓中間滾輪鍵而上下滾動，效果基本等同內容獲取焦點後按下鍵盤的“”和“”按鍵，在此功能擴充套件逐漸成為主流互動方式以後，橫向滾動的互動方式也就越來越邊緣化了。

滑鼠中間滾輪極大方便了內容上下滾動

以上是web端的內容瀏覽的互動方式，當我們進入到移動端裝置時代時，這個習慣基本上被因襲了。

移動端主要使用上下滾動的互動方式，除了從web端直接移植的使用習慣，還有以下原因：

1. 移動端裝置螢幕限制

移動端裝置除了pad類主要採用橫屏瀏覽方式外，基本上都是採用豎屏瀏覽方式，螢幕物理展示尺寸侷限加上豎屏顯示，更加適合於上下滾動。

上下滾動符合人體工學和螢幕特點

2. 移動端裝置操作特性決定固定一個維度更適合快速翻滾

移動端裝置因為電容屏技術的發展，已經基本放棄了觸控筆，手指直接操作螢幕相比於滑鼠鍵盤操作電腦螢幕是缺少了一個懸停狀態的，由於技術限制和操作習慣，懸停狀態在移動裝置上並沒有實現，也就是說，在移動裝置上要移動某個區塊，首先要輕觸螢幕並朝向某個方向快速滾動，以讓內容區塊快速獲取焦點並對熟知的操作產生動作反饋。

web端操作特性

移動端操作特性

所以在移動端，使用者輕觸螢幕並滾動的這個行程是不會完全平行或垂直於於螢幕邊線的，如果螢幕允許橫向和縱向滾動，則使用者很容易丟失焦點，所以移動端的操作特性決定了移動端的內容最好固定一個維度並支援另一個維度。

當然上下滾動瀏覽只是普通的內容瀏覽方式，某些情況下，我們要允許內容橫向滾動，而且移動端在進行橫向滾動操作時，便利性要明顯優於web端。

這幾種情況包括：

1. 不想讓內容在縱向空間上佔據更多面積或首屏黃金位置。

比如某些促銷版塊或者優惠券領取版塊，我們想要節省寸土寸金的首屏黃金位置但同時又要給這些版塊一定的展示機會，那麼這些情況下可以允許這些板塊橫向滾動。

2. 快速切換banner展示

移動端的滾動Banner展示一般都允許使用者使用橫向輕滑功能快速瀏覽。（當然有些設計師認為滾動和輕滑本身是兩種不同的互動形式，我這裡僅列出供參考）

3. 卡片展示

卡片展示和Banner展示的互動方式基本一致。

但在允許內容橫向滾動和縱向滾動的頁面上，還要注意以下幾點：

1. 除了地圖和放大顯示圖片等特殊場景，一般不要讓某個版塊同時支援兩個維度的滾動。

2. 在豎向滾動佔主要互動方式的頁面上，不要讓橫向滾動的版塊面積過大。

這主要是由於我見到太多的支援橫向滾動的頁面，因為某些版塊支援橫向滾動而嚴重影響了上下滾動的使用體驗，另外大面積的橫向滾動會造成使用體驗下降嚴重。

比較嚴重的表現形式如知乎的“我的”，連續的橫向操作模組嚴重干擾了上下滾動操作，單手操作時

知乎連續3個橫向操作版塊嚴重干擾了上下滾動

3. 橫向滾動的內容要有設計隱喻，暗示使用者此版塊是橫向滾動互動方式，增加操作方式可發現性。

曾經見過有些橫向滾動的版塊，因為沒有足夠的設計隱喻，導致使用者完全忽略了還有後續內容，從而妨礙了更多內容的展示機會。所以不管是截斷更多內容只展示部分，還是增加小圓點或捲軸，一定要讓使用者清楚地知道：後面還有更多哦。

橫向滾動要有設計隱喻

總體來說，移動裝置的上下滾動互動方式加上緩動效果，真的是一種非常舒爽的操作體驗，如果可能，儘量多使用上下滾動，讓瀏覽體驗飛起吧。

作者：希樂堂
連結：

論移動裝置內容的橫向滾動和豎向滾動