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

橫向滑動(dòng)要解決什么問(wèn)題？

橫向滑動(dòng)作為手勢(shì)交互的一個(gè)拓展，目的初衷是提升信息“內(nèi)容和操作”的拓展性。

1. “內(nèi)容”拓展性：

移動(dòng)端的任何類(lèi)型頁(yè)面內(nèi)容都可能無(wú)法在一個(gè)界面呈現(xiàn)完整，因此滑動(dòng)去呈現(xiàn)更多的內(nèi)容，常見(jiàn)的當(dāng)然是縱向滑動(dòng)。但它無(wú)法承載所有類(lèi)型內(nèi)容呈現(xiàn)的問(wèn)題，這個(gè)時(shí)候就需要橫向滑動(dòng)來(lái)解決。

2. “操作”拓展性：

當(dāng)一個(gè)頁(yè)面的內(nèi)容已經(jīng)是固定完整的，這時(shí)候需要用戶(hù)進(jìn)行一些行為操作，如常見(jiàn)的下載、刪除、添加、管理…,而這些行為如果直接呈現(xiàn)在界面上必然導(dǎo)致混亂，因此需要配合一些橫向滑動(dòng)激發(fā)這些行為，從而保證界面的流暢體驗(yàn)。

目前橫向滑動(dòng)的典型設(shè)計(jì)場(chǎng)景及利弊分析

橫向滑動(dòng)從移動(dòng)端手勢(shì)出現(xiàn)到現(xiàn)在十幾年的時(shí)間已經(jīng)有了非常典型的使用場(chǎng)景，接下來(lái)我們就來(lái)列舉一下有哪些常見(jiàn)的類(lèi)型：以下從「清晰度、效果」兩個(gè)緯度進(jìn)行分解

1. 入口型橫滑切換（手機(jī)主頁(yè)app、各大電商入口、banner…）

解決內(nèi)容拓展問(wèn)題

這類(lèi)場(chǎng)景通常是用戶(hù)最熟悉的，不論從認(rèn)知清晰度、效果角度都是不錯(cuò)的，主要原因是場(chǎng)景曝光度非常高、頻次非常高；比如Android\ios首頁(yè)橫滑切換app入口每天上百次的操作頻次；

2. 內(nèi)容型橫滑切換（微視、垂直電商、地圖）

解決內(nèi)容拓展問(wèn)題

這類(lèi)切換方式適合內(nèi)容相對(duì)聚焦和單一的產(chǎn)品，比如垂直類(lèi)電商：wish、唯品會(huì)，所有內(nèi)容僅僅是通過(guò)類(lèi)目來(lái)區(qū)分的產(chǎn)品；微視：內(nèi)容統(tǒng)一為小視頻…;百度地圖：橫滑查看更大范圍地圖…;由于內(nèi)容的高度統(tǒng)一和整合，因此切換難度低，但在認(rèn)知的初期會(huì)稍有一定的門(mén)檻，原因是大部分app都是縱向滑動(dòng)feeds流，而且用戶(hù)記憶是海馬記憶，不會(huì)特別清楚記得app的操作，所以新打開(kāi)app和新用戶(hù)會(huì)有一個(gè)認(rèn)知過(guò)程，但門(mén)檻不高。

3. 隱藏操作喚起

解決操作拓展問(wèn)題（管理列表、IM列表、通訊錄list…）

解決操作問(wèn)題

在所有類(lèi)型中的橫滑，只有這種方式不是瀏覽型手勢(shì)而是操作型，通常這類(lèi)功能隱藏在列表中，為了保證列表信息的有效性和美觀度，選擇隱藏操作功能，由于是低頻操作，所以初期需要用戶(hù)發(fā)現(xiàn)并成功使用該功能；不過(guò)目前很多l(xiāng)ist頁(yè)面都采用這種通用的交互手勢(shì)，因此用戶(hù)并不難發(fā)現(xiàn)。

4. 模塊內(nèi)容橫滑切換（餓了嗎\品質(zhì)優(yōu)選）

最復(fù)雜也是最容易出現(xiàn)問(wèn)題的

解決內(nèi)容拓展問(wèn)題

這是最容易出錯(cuò)的一種場(chǎng)景，就是在整個(gè)界面中只有一個(gè)模塊采用橫向滑動(dòng)，而其它內(nèi)容又是縱向feeds流滑動(dòng)；由于移動(dòng)端內(nèi)容的路徑多、入口多，因此用戶(hù)的核心操作流是：找入口——看信息——做任務(wù)；在這個(gè)過(guò)程中任何一個(gè)隱晦的、不常見(jiàn)的交互都很容易被用戶(hù)忽略，比如說(shuō)：餓了么品質(zhì)優(yōu)選、唯品會(huì)二級(jí)類(lèi)目、去哪兒旅游推薦…，這些案例其實(shí)是為了橫向空間拓展更多的內(nèi)容而做此選擇，但通常情況下隱藏內(nèi)容點(diǎn)擊率會(huì)驟降，很少有用戶(hù)耐心的橫滑瀏覽完成，因此設(shè)計(jì)師要嚴(yán)格把控?cái)?shù)量以及內(nèi)容的質(zhì)量；在這里還有一種情況是很?chē)?yán)重的，就是模塊級(jí)的橫滑內(nèi)容與縱向列表之間有疊加交互，就會(huì)導(dǎo)致用戶(hù)反復(fù)在2中操作中完成任務(wù)，這一點(diǎn)非常不建議使用此手勢(shì)，當(dāng)然以下案例并沒(méi)有這種情況。

橫向滑動(dòng)的優(yōu)點(diǎn)

1. 幾乎能夠100%適配到所有設(shè)備，保持了一致性

2. 為二級(jí)信息提供了展示空間，并且不占用頁(yè)面空間。

比如在圖片畫(huà)廊里的圖片，橫向滑動(dòng)可以讓用戶(hù)預(yù)覽內(nèi)容，可以劃過(guò)或者點(diǎn)擊查看。

3. 橫向滑動(dòng)節(jié)約了縱向屏幕空間。

而不是將所有內(nèi)容都展示在一個(gè)很長(zhǎng)的頁(yè)面?？v向布局讓所有的信息都成小塊展示。但是橫向滑動(dòng)更加靈活?，F(xiàn)在，內(nèi)容可以在橫向和縱向兩個(gè)方向同時(shí)展示。

4. 橫向滑動(dòng)可以讓用戶(hù)預(yù)知分類(lèi)里的內(nèi)容，通過(guò)往一邊滑、向下滑，差不不同類(lèi)別的內(nèi)容。

兩個(gè)維度讓用戶(hù)可以在同一個(gè)界面中看到更多的類(lèi)別和選擇。

5. 橫向滑動(dòng)的內(nèi)容需要保持高質(zhì)量和持續(xù)吸引力才能提升點(diǎn)擊轉(zhuǎn)化。

慎用左右橫滑設(shè)計(jì)？

1. 挑選合適的使用場(chǎng)景

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

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

3. 引導(dǎo)左右滑動(dòng)（可見(jiàn)性）

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

5. 低效率和錯(cuò)誤的優(yōu)先級(jí)

設(shè)計(jì)師們都喜歡“左右橫滑”的設(shè)計(jì)，不僅因?yàn)樾畔⒚芏却?，?yè)面層次好梳理，更多也是因?yàn)椴僮鞣绞健翱帷?。但有?jīng)驗(yàn)的設(shè)計(jì)師會(huì)盡可能拒絕“左右橫滑”，因?yàn)樗男蔬€是太低。而效率低，體現(xiàn)在兩個(gè)方面：

首先，就像上面說(shuō)過(guò)的，更多的小白用戶(hù)對(duì)左右滑動(dòng)的預(yù)期并不強(qiáng)，還是更加適應(yīng)縱向滑動(dòng)的傳統(tǒng)交互方式。違反了“Don’t Make Me Think”的基本原則。

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

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

文章來(lái)源：優(yōu)設(shè)   作者：Jingwhale Design

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)