2020-10-9 資深UI設計者
所謂的“左右橫滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源于 Windows Phone 的橫向內容滑動設計。用于在同一個頁面的 X 軸方向拓展內容空間，“左右橫滑”的交互方式被廣泛應用于各類 App 中。
橫向滑動作為手勢交互的一個拓展，目的初衷是提升信息“內容和操作”的拓展性。
1. “內容”拓展性：
移動端的任何類型頁面內容都可能無法在一個界面呈現完整，因此滑動去呈現更多的內容，常見的當然是縱向滑動。但它無法承載所有類型內容呈現的問題，這個時候就需要橫向滑動來解決。
2. “操作”拓展性：
當一個頁面的內容已經是固定完整的，這時候需要用戶進行一些行為操作，如常見的下載、刪除、添加、管理…,而這些行為如果直接呈現在界面上必然導致混亂，因此需要配合一些橫向滑動激發這些行為，從而保證界面的流暢體驗。
橫向滑動從移動端手勢出現到現在十幾年的時間已經有了非常典型的使用場景，接下來我們就來列舉一下有哪些常見的類型：以下從「清晰度、效果」兩個緯度進行分解
解決內容拓展問題
這類場景通常是用戶最熟悉的，不論從認知清晰度、效果角度都是不錯的，主要原因是場景曝光度非常高、頻次非常高；比如Android\ios首頁橫滑切換app入口每天上百次的操作頻次；
解決內容拓展問題
這類切換方式適合內容相對聚焦和單一的產品，比如垂直類電商：wish、唯品會，所有內容僅僅是通過類目來區分的產品；微視：內容統一為小視頻…;百度地圖：橫滑查看更大范圍地圖…;由于內容的高度統一和整合，因此切換難度低，但在認知的初期會稍有一定的門檻，原因是大部分app都是縱向滑動feeds流，而且用戶記憶是海馬記憶，不會特別清楚記得app的操作，所以新打開app和新用戶會有一個認知過程，但門檻不高。
解決操作拓展問題（管理列表、IM列表、通訊錄list…）
解決操作問題
在所有類型中的橫滑，只有這種方式不是瀏覽型手勢而是操作型，通常這類功能隱藏在列表中，為了保證列表信息的有效性和美觀度，選擇隱藏操作功能，由于是低頻操作，所以初期需要用戶發現并成功使用該功能；不過目前很多list頁面都采用這種通用的交互手勢，因此用戶并不難發現。
最復雜也是最容易出現問題的
解決內容拓展問題
這是最容易出錯的一種場景，就是在整個界面中只有一個模塊采用橫向滑動，而其它內容又是縱向feeds流滑動；由于移動端內容的路徑多、入口多，因此用戶的核心操作流是：找入口——看信息——做任務；在這個過程中任何一個隱晦的、不常見的交互都很容易被用戶忽略，比如說：餓了么品質優選、唯品會二級類目、去哪兒旅游推薦…，這些案例其實是為了橫向空間拓展更多的內容而做此選擇，但通常情況下隱藏內容點擊率會驟降，很少有用戶耐心的橫滑瀏覽完成，因此設計師要嚴格把控數量以及內容的質量；在這里還有一種情況是很嚴重的，就是模塊級的橫滑內容與縱向列表之間有疊加交互，就會導致用戶反復在2中操作中完成任務，這一點非常不建議使用此手勢，當然以下案例并沒有這種情況。
1. 幾乎能夠100%適配到所有設備，保持了一致性
2. 為二級信息提供了展示空間，并且不占用頁面空間。
比如在圖片畫廊里的圖片，橫向滑動可以讓用戶預覽內容，可以劃過或者點擊查看。
3. 橫向滑動節約了縱向屏幕空間。
而不是將所有內容都展示在一個很長的頁面?？v向布局讓所有的信息都成小塊展示。但是橫向滑動更加靈活?，F在，內容可以在橫向和縱向兩個方向同時展示。
4. 橫向滑動可以讓用戶預知分類里的內容，通過往一邊滑、向下滑，差不不同類別的內容。
兩個維度讓用戶可以在同一個界面中看到更多的類別和選擇。
5. 橫向滑動的內容需要保持高質量和持續吸引力才能提升點擊轉化。
1. 挑選合適的使用場景
單頁多維度的信息結構是“左右橫滑”最適合的應用場景。傳統的 List 適合縱向無限呈現單一屬性的內容（比如朋友圈或知乎的回答），而對于 App 首頁等多種信息聚合的頁面，就適合橫向開拓內容維度。
2. 顯眼并適宜的主題展示
3. 引導左右滑動（可見性）
4. 控制數量并避免極限情況
5. 低效率和錯誤的優先級
設計師們都喜歡“左右橫滑”的設計，不僅因為信息密度大，頁面層次好梳理，更多也是因為操作方式“酷”。但有經驗的設計師會盡可能拒絕“左右橫滑”，因為它的效率還是太低。而效率低，體現在兩個方面：
首先，就像上面說過的，更多的小白用戶對左右滑動的預期并不強，還是更加適應縱向滑動的傳統交互方式。違反了“Don’t Make Me Think”的基本原則。
其次，縱向和橫向優先級常常導致預期錯誤。以下圖 App Store 為例，所謂的內容都是 App，泳道只是用不同的維度把 App 組織起來。
如果你要購買其中一個資源位，你要更高優先級“泳道”中的第二屏位置，還是低優先級“泳道”中的第一屏位置呢？
文章來源：優設 作者：Jingwhale Design
藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務