移動端屏幕越來越大，但用戶對內容量的要求也水漲船高。如何在有限的屏幕內透出更多的內容，是設計師們研究的重點。
常用的內容拓展設計有：Y 方向List 滑動、Z 方向3D Touch 、入口式內容摺疊等。今天想和大家聊的，是其中的“左右橫滑”卡片式交互設計。
所謂的“左右橫滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源於Windows Phone 的橫向內容滑動設計。用於在同一個頁面的X 軸方向拓展內容空間，“左右橫滑”的交互方式被廣泛應用於各類App 中。
不過，凡事都有兩面性。當“左右橫滑”的交互把更多內容塞到了頁面中時，也產生了諸如可見性差、優先級混亂、內容不突出等體驗風險。因此，在使用這種設計時必須有所準備，確保它發揮出最大的效用。
接下來，把我自己設計中遇到的一些“心得”和“坑”分享給大家。
1. 挑選合適的使用場景
單頁多維度的信息結構是“左右橫滑”最適合的應用場景。傳統的List 適合縱向無限呈現單一屬性的內容(比如朋友圈或知乎的回答)，而對於App 首頁等多種信息聚合的頁面，就適合橫向開拓內容維度。
以最新版的Airbnb 為例，它將首頁分割為Banner、熱門體驗、體驗、房源、旅遊目的地精選等多個維度，每個維度單獨佔據一整行，並展現並列的內容。再看iOS App Store，也是將頁面分為諸多維度，把不同的應用分類呈現。
設計師們很形象地把這種設計稱為“泳道”。
可以看到，Airbnb 和iOS App Store 整個頁面的重心都是利用“泳道”構成的，雖然存在X、Y 兩個瀏覽方向，但瀏覽起來並不困難。不過，更復雜的場景是在一個Y 方向List 列表中穿插使用“左右橫滑”，這時，會有比較多的坑。
2. 顯眼並適宜的主題展示
從信息優先級上能看到，每個泳道的“主題”非常重要。通常，橫向每個小卡片的面積不會太大，所以不可能既展示自身信息，又告知整個泳道的主題。
為此，必須有非常強的視覺信息總領整個泳道。最常見的做法，是在泳道上方設置顯眼的“標題”。
最近還常見到比較誇張的做法，是直接在泳道最左端給一個強內容氛圍。以下圖左側的輕芒閱讀App 舊版頁面為例，圖片+文字氛圍的做法雖然極大強調了主題，但卻也極大浪費了展現效率，違背了內容優先的原則，效果並不好。
為此，輕芒閱讀也在最新版本改成了小面積、高視覺優先級的標題形式。
3. 引導左右滑動(可見性)
引導的方式有很多，最常見的三種做法分別是：左右加引導箭頭、底部加指示器、後續內容漏一部分。
但不管怎麼樣，必須要有明顯的標誌告訴用戶下面的內容是可以左右滑動的。尤其，當你的用戶受眾面非常廣(普通電商、新聞閱讀等)時，年齡較大的小白用戶未必像設計師和產品經理們對“左右橫滑”的交互這麼熟悉，這也會間接導致這種方式的效率下降。
舉個反面例子，Instagram 不久前新增了圖片多張左右滑動的設計，但是我們發現它底部的指示器在頭上圖片非常搶眼的情況下非常不容易被發現，指示效果並不好。
4. 控制數量並避免極限情況
左右滑動的內容是不是可以放無限個?當然不是。根據我的經驗，一般5-10個卡片為佳，過少會導致與用戶期待不符，一滑就見底;而過多則不如引導用戶去更詳細的主題頁面，展示更多相關信息。
需要注意的是，如果你沒有辦法強控一個主題下的卡片數量，就必須從設計上做好後備方案。
以下面的考拉海淘為例，用戶評論模塊將帶圖評論以左右滑動的形式展示，但數量無法嚴格控制，畢竟有些商品有很多帶圖評論，有些則很少甚至沒有。
設計上，我們可以看到內容很多和沒有內容的情況，考拉做了適配。但是對於只有一個帶圖評論的情況，右邊緊跟“查看全部”，就顯得有些奇怪了。
說到“查看全部”，一般也要求必須出現在泳道當中。呈現上，有直接點擊標題或標題後跟著入口的方式來引導，而更多的，也有當滑動到卡片最後一張時才露出“查看全部”，為那些看到最後還意猶未盡的用戶一個出口。
5. 低效率和錯誤的優先級
設計師們都喜歡“左右橫滑”的設計，不僅因為信息密度大，頁面層次好梳理，更多也是因為操作方式“酷”。但有經驗的設計師會盡可能拒絕“左右橫滑”，因為它的效率還是太低。而效率低，體現在兩個方面：
首先，就像上面說過的，更多的小白用戶對左右滑動的預期並不強，還是更加適應縱向滑動的傳統交互方式。
通過自己工作中的實驗和與朋友閒聊分享的交互數據上來看，左右滑動的組件在滑動使用率和卡片點擊率上顯著低於其他正常鋪出來的內容。有時即便卡片數量不多，滑動到最後的用戶也是寥寥無幾。可見，在習慣於一個瀏覽方向時，強行插入一個完全垂直的方向，用戶習慣並不容易改變。
其次，縱向和橫向優先級常常導致預期錯誤。以下圖App Store 為例，所謂的內容都是App，泳道只是用不同的維度把App 組織起來。
那麼請問，是“本週新遊”中排在第二頁的某個App 優先級更高，還是“新鮮App”甚至“外表有格調”中的前幾個應用優先級更高呢?
如果你要購買其中一個資源位，你要更高優先級“泳道”中的第二屏位置，還是低優先級“泳道”中的第一屏位置呢?
答案當然是首屏就能看到的信息優先級更高，數據上也會有更高的點擊率和曝光率。但實際上，這與很多設計師和產品經理的預期不符，他們只關注把高優先級的東西往上提，卻疏忽了左右滑動的交互方式觸發率非常低。
同時，更多軟件選擇不使用“左右橫滑”，而直接把內容披露出來，比如微信閱讀：
綜上所述，希望對大家使用“左右橫滑”這種形式的交互方案時，有一些幫助。
閱讀更多 鑄優教育zuui 的文章
