為什么在App設(shè)計(jì)中，應(yīng)該慎用左右橫滑設(shè)計(jì)？

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

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

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

不過，凡事都有兩面性。當(dāng)“左右橫滑”的交互把更多內(nèi)容塞到了頁面中時，也產(chǎn)生了諸如可見性差、優(yōu)先級混亂、內(nèi)容不突出等體驗(yàn)風(fēng)險。因此，在使用這種設(shè)計(jì)時必須有所準(zhǔn)備，確保它發(fā)揮出最大的效用。

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

1. ?挑選合適的使用場景

單頁多維度的信息結(jié)構(gòu)是“左右橫滑”最適合的應(yīng)用場景。傳統(tǒng)的 List 適合縱向無限呈現(xiàn)單一屬性的內(nèi)容（比如朋友圈或知乎的回答），而對于 App 首頁等多種信息聚合的頁面，就適合橫向開拓內(nèi)容維度。

以最新版的 Airbnb 為例，它將首頁分割為 Banner、熱門體驗(yàn)、體驗(yàn)、房源、旅游目的地精選等多個維度，每個維度單獨(dú)占據(jù)一整行，并展現(xiàn)并列的內(nèi)容。再看 iOS App Store，也是將頁面分為諸多維度，把不同的應(yīng)用分類呈現(xiàn)。

設(shè)計(jì)師們很形象地把這種設(shè)計(jì)稱為“泳道”。

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

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

2. ?顯眼并適宜的主題展示

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

為此，必須有非常強(qiáng)的視覺信息總領(lǐng)整個泳道。最常見的做法，是在泳道上方設(shè)置顯眼的“標(biāo)題”。

最近還常見到比較夸張的做法，是直接在泳道最左端給一個強(qiáng)內(nèi)容氛圍。以下圖左側(cè)的輕芒閱讀 App 舊版頁面為例，圖片+文字氛圍的做法雖然極大強(qiáng)調(diào)了主題，但卻也極大浪費(fèi)了展現(xiàn)效率，違背了內(nèi)容優(yōu)先的原則，效果并不好。

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

3. ?引導(dǎo)左右滑動（可見性）

引導(dǎo)的方式有很多，最常見的三種做法分別是：左右加引導(dǎo)箭頭、底部加指示器、后續(xù)內(nèi)容漏一部分。

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

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

4. ?控制數(shù)量并避免極限情況

左右滑動的內(nèi)容是不是可以放無限個？當(dāng)然不是。根據(jù)我的經(jīng)驗(yàn)，一般5-10個卡片為佳，過少會導(dǎo)致與用戶期待不符，一滑就見底；而過多則不如引導(dǎo)用戶去更詳細(xì)的主題頁面，展示更多相關(guān)信息。

需要注意的是，如果你沒有辦法強(qiáng)控一個主題下的卡片數(shù)量，就必須從設(shè)計(jì)上做好后備方案。

以下面的考拉海淘為例，用戶評論模塊將帶圖評論以左右滑動的形式展示，但數(shù)量無法嚴(yán)格控制，畢竟有些商品有很多帶圖評論，有些則很少甚至沒有。

設(shè)計(jì)上，我們可以看到內(nèi)容很多和沒有內(nèi)容的情況，考拉做了適配。但是對于只有一個帶圖評論的情況，右邊緊跟“查看全部”，就顯得有些奇怪了。

說到“查看全部”，一般也要求必須出現(xiàn)在泳道當(dāng)中。呈現(xiàn)上，有直接點(diǎn)擊標(biāo)題或標(biāo)題后跟著入口的方式來引導(dǎo)，而更多的，也有當(dāng)滑動到卡片最后一張時才露出“查看全部”，為那些看到最后還意猶未盡的用戶一個出口。

5. ?低效率和錯誤的優(yōu)先級

設(shè)計(jì)師們都喜歡“左右橫滑”的設(shè)計(jì)，不僅因?yàn)樾畔⒚芏却螅撁鎸哟魏檬崂恚嘁彩且驗(yàn)椴僮鞣绞健翱帷薄５薪?jīng)驗(yàn)的設(shè)計(jì)師會盡可能拒絕“左右橫滑”，因?yàn)樗男蔬€是太低。而效率低，體現(xiàn)在兩個方面：

首先，就像上面說過的，更多的小白用戶對左右滑動的預(yù)期并不強(qiáng)，還是更加適應(yīng)縱向滑動的傳統(tǒng)交互方式。

通過自己工作中的實(shí)驗(yàn)和與朋友閑聊分享的交互數(shù)據(jù)上來看，左右滑動的組件在滑動使用率和卡片點(diǎn)擊率上顯著低于其他正常鋪出來的內(nèi)容。有時即便卡片數(shù)量不多，滑動到最后的用戶也是寥寥無幾。可見，在習(xí)慣于一個瀏覽方向時，強(qiáng)行插入一個完全垂直的方向，用戶習(xí)慣并不容易改變。

其次，縱向和橫向優(yōu)先級常常導(dǎo)致預(yù)期錯誤。以下圖 App Store 為例，所謂的內(nèi)容都是 App，泳道只是用不同的維度把 App 組織起來。

那么請問，是“本周新游”中排在第二頁的某個 App 優(yōu)先級更高，還是“新鮮 App”甚至“外表有格調(diào)”中的前幾個應(yīng)用優(yōu)先級更高呢？

如果你要購買其中一個資源位，你要更高優(yōu)先級“泳道”中的第二屏位置，還是低優(yōu)先級“泳道”中的第一屏位置呢？

答案當(dāng)然是首屏就能看到的信息優(yōu)先級更高，數(shù)據(jù)上也會有更高的點(diǎn)擊率和曝光率。但實(shí)際上，這與很多設(shè)計(jì)師和產(chǎn)品經(jīng)理的預(yù)期不符，他們只關(guān)注把高優(yōu)先級的東西往上提，卻疏忽了左右滑動的交互方式觸發(fā)率非常低。

同時，更多軟件選擇不使用“左右橫滑”，而直接把內(nèi)容披露出來，比如微信閱讀：

綜上所述，希望對大家使用“左右橫滑”這種形式的交互方案時，有一些幫助。

歡迎關(guān)注作者的微信公眾號：

「超實(shí)用的設(shè)計(jì)原則大全」

1. 用戶登錄：掌握這9個設(shè)計(jì)原則，快速提高用戶登錄的體驗(yàn)
2. 無線表單：專業(yè)干貨！提高無線端表單可用性的7個設(shè)計(jì)原則
3. 動效設(shè)計(jì)：讓動效不止于好看！移動APP的7種動效設(shè)計(jì)和9條設(shè)計(jì)原則

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量200萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com