移動端橫向滑動的設(shè)計(jì)總結(jié)

2020-10-9    資深UI設(shè)計(jì)者

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

橫向滑動要解決什么問題?

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

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

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

2. “操作”拓展性:

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

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

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

超多案例!移動端橫向滑動的設(shè)計(jì)總結(jié)

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

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

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

超多案例!移動端橫向滑動的設(shè)計(jì)總結(jié)

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

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

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

超多案例!移動端橫向滑動的設(shè)計(jì)總結(jié)

3. 隱藏操作喚起

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

解決操作問題

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

超多案例!移動端橫向滑動的設(shè)計(jì)總結(jié)

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

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

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

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

超多案例!移動端橫向滑動的設(shè)計(jì)總結(jié)

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

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

2. 為二級信息提供了展示空間,并且不占用頁面空間。

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

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

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

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

兩個維度讓用戶可以在同一個界面中看到更多的類別和選擇。

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

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

1. 挑選合適的使用場景

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

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

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

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

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)交互方式。違反了“Don’t Make Me Think”的基本原則。

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

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


文章來源:優(yōu)設(shè)   作者:Jingwhale Design


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


分享本文至:

日歷

鏈接

個人資料

存檔