如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這裏

移動端屏幕越來越大，但用戶對內容量的要求也水漲船高。如何在有限的屏幕內透出更多的內容，是設計師們研究的重點。

常用的內容拓展設計有：Y 方向 List 滑動、Z 方向 3D Touch 、入口式內容折疊等。今天想和大家聊的，是其中的“左右橫滑”卡片式交互設計。

所謂的“左右橫滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源於 Windows Phone 的橫向內容滑動設計。用於在同一個頁面的 X 軸方向拓展內容空間，“左右橫滑”的交互方式被廣泛應用於各類 App 中。

不過，凡事都有兩面性。當“左右橫滑”的交互把更多內容塞到了頁面中時，也產生了諸如可見性差、優先級混亂、內容不突出等體驗風險。因此，在使用這種設計時必須有所準備，確保它發揮出最大的效用。

接下來，把我自己設計中遇到的一些“心得”和“坑”分享給大家。

1. 挑選合適的使用場景

單頁多維度的信息結構是“左右橫滑”最適合的應用場景。傳統的 List 適合縱向無限呈現單一屬性的內容（比如朋友圈或知乎的回答），而對於 App 首頁等多種信息聚合的頁面，就適合橫向開拓內容維度。

以最新版的 Airbnb 為例，它將首頁分割為 Banner、熱門體驗、體驗、房源、旅遊目的地精選等多個維度，每個維度單獨占據一整行，並展現並列的內容。再看 iOS App Store，也是將頁面分為諸多維度，把不同的應用分類呈現。

設計師們很形象地把這種設計稱為“泳道”。

（https://medium.muz.li/the-horizontal-scroll-interface-46b8f69f54ff

可以看到，Airbnb 和 iOS App Store 整個頁面的重心都是利用“泳道”構成的，雖然存在 X、Y 兩個瀏覽方向，但瀏覽起來並不困難。不過，更復雜的場景是在一個 Y 方向 List 列表中穿插使用“左右橫滑”，這時，會有比較多的坑。

2. 顯眼並適宜的主題展示

從信息優先級上能看到，每個泳道的“主題”非常重要。通常，橫向每個小卡片的面積不會太大，所以不可能既展示自身信息，又告知整個泳道的主題。

為此，必須有非常強的視覺信息總領整個泳道。最常見的做法，是在泳道上方設置顯眼的“標題”。

最近還常見到比較誇張的做法，是直接在泳道最左端給一個強內容氛圍。以下圖左側的輕芒閱讀 App 舊版頁面為例，圖片+文字氛圍的做法雖然極大強調了主題，但卻也極大浪費了展現效率，違背了內容優先的原則，效果並不好。

為此，輕芒閱讀也在最新版本改成了小面積、高視覺優先級的標題形式。

3. 引導左右滑動（可見性）

引導的方式有很多，最常見的三種做法分別是：左右加引導箭頭、底部加指示器、後續內容漏一部分。

但不管怎麽樣，必須要有明顯的標誌告訴用戶下面的內容是可以左右滑動的。尤其，當你的用戶受眾面非常廣（普通電商、新聞閱讀等）時，年齡較大的小白用戶未必像設計師和產品經理們對“左右橫滑”的交互這麽熟悉，這也會間接導致這種方式的效率下降。

舉個反面例子，Instagram 不久前新增了圖片多張左右滑動的設計，但是我們發現它底部的指示器在頭上圖片非常搶眼的情況下非常不容易被發現，指示效果並不好。

閱讀全文>>

為什麽在App設計中，應該慎用左右橫滑設計？