【注意事項】APP左右橫滑設計

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

經常使用的內容拓展設計有：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」甚至「外表有格調」中的前幾個應用優先級更高呢?

若是你要購買其中一個資源位，你要更高優先級「泳道」中的第二屏位置，仍是低優先級「泳道」中的第一屏位置呢?

答案固然是首屏就能看到的信息優先級更高，數據上也會有更高的點擊率和曝光率。但實際上，這與不少設計師和產品經理的預期不符，他們只關注把高優先級的東西往上提，卻疏忽了左右滑動的交互方式觸發率很是低。

同時，更多軟件選擇不使用「左右橫滑」，而直接把內容披露出來，好比微信閱讀：

綜上所述，但願對你們使用「左右橫滑」這種形式的交互方案時，有一些幫助。

文章來源：http://www.haitaoit.com/news-list-82-0-1.html