“上一屏”的時(shí)代已經(jīng)過去了。最近，長(zhǎng)滑動(dòng)和無(wú)盡滑動(dòng)頁(yè)面越來(lái)越流行，這不再是趨勢(shì)或巧合了。允許用戶在沒有任何中斷或額外交互（用戶向下滑動(dòng)頁(yè)面時(shí)信息自動(dòng)出現(xiàn)）的情況下滑動(dòng)信息內(nèi)容，有許多好處：

（1）簡(jiǎn)化導(dǎo)航

（2）吸引更多用戶瀏覽內(nèi)容

（3）向移動(dòng)設(shè)備轉(zhuǎn)化方便

移動(dòng)界面使用的增多在這個(gè)技術(shù)的廣泛接受中起到了關(guān)鍵作用：

屏幕越小，滑動(dòng)越多

另外，移動(dòng)設(shè)備的手勢(shì)控制讓滑動(dòng)更直接和有趣。然而，長(zhǎng)滑動(dòng)并不是沒有缺點(diǎn)。以下是一些讓你的長(zhǎng)滑動(dòng)更符合用戶期待的最佳實(shí)踐。

使用視覺暗示

告訴用戶下面有更多內(nèi)容

利用設(shè)計(jì)元素暗示用戶滑動(dòng)，這樣可以保證每一個(gè)用戶都可以快速了解頁(yè)面。一個(gè)小的視覺提示，比如一個(gè)指向頁(yè)面外的箭頭或者一個(gè)向下滑的文案，都可以告訴用戶下方有更多內(nèi)容。

指向屏幕外的箭頭可以告訴用戶更多內(nèi)容在下方

保證導(dǎo)航持續(xù)可見

使用粘性導(dǎo)航或跳頁(yè)選擇

長(zhǎng)滑動(dòng)的最大風(fēng)險(xiǎn)是失去導(dǎo)航性——用戶會(huì)在瀏覽時(shí)迷失。這種無(wú)法找到當(dāng)前位置和其他導(dǎo)航選項(xiàng)的情況會(huì)讓用戶產(chǎn)生煩躁和困惑，從而影響整體的用戶體驗(yàn)。

設(shè)計(jì)長(zhǎng)滑動(dòng)頁(yè)面時(shí)，必須記?。河脩羧匀恍枰较蚋校ㄋ麄兊漠?dāng)前位置）和導(dǎo)航（其他可能的導(dǎo)航選擇）。這個(gè)問題有一個(gè)明顯的解決方案，那就是一個(gè)粘性導(dǎo)航菜單，可以展現(xiàn)當(dāng)前位置，并一直停留在屏幕的相同位置。

滑動(dòng)激活的粘性導(dǎo)航

如果因?yàn)槠聊豢臻g有限，沒法添加導(dǎo)航條時(shí)，你可以考慮一個(gè)跳轉(zhuǎn)到頁(yè)的選擇：

屏幕右側(cè)的“跳轉(zhuǎn)到頁(yè)”選項(xiàng)

僅限移動(dòng)設(shè)備：因?yàn)橐苿?dòng)設(shè)備的屏幕都小一些，可見的導(dǎo)航條可能會(huì)占據(jù)比較大的空間比例。那么你可以在用戶向下滑動(dòng)查看新內(nèi)容時(shí)隱藏導(dǎo)航條，當(dāng)他們向上滑動(dòng)嘗試回到頂部時(shí)顯示導(dǎo)航條。

Facebook通過向下滑動(dòng)時(shí)隱藏導(dǎo)航條的方式節(jié)省了垂直空間

將屏幕當(dāng)做頁(yè)面進(jìn)行設(shè)計(jì)

讓內(nèi)容表示滑動(dòng)長(zhǎng)度

頁(yè)面想要一個(gè)順滑、線性的講故事方式。你必須保持頁(yè)面整潔有序，為了讓用戶理解它們，你需要將每一屏當(dāng)成一頁(yè)進(jìn)行設(shè)計(jì)。例如，Le Mugs網(wǎng)站的每一部分都包含自己獨(dú)特的信息，這些信息都由生動(dòng)的動(dòng)畫展現(xiàn)。

小貼士：將頁(yè)面總數(shù)量壓縮到最小以簡(jiǎn)化導(dǎo)航。長(zhǎng)滑動(dòng)并不意味著100頁(yè)不間斷的內(nèi)容！

配合功能性動(dòng)畫

利用動(dòng)畫與用戶建立聯(lián)系

董小設(shè)計(jì)是長(zhǎng)滑動(dòng)頁(yè)面設(shè)計(jì)的基礎(chǔ)，動(dòng)畫也是設(shè)計(jì)的核心部分。動(dòng)畫有他們自己獨(dú)特的功效和吸引力，他們?yōu)橛脩籼峁┝艘粋€(gè)更順滑更舒服的探索方式。長(zhǎng)滑動(dòng)讓創(chuàng)意元素變?yōu)榭赡?，例如視差滑?dòng)和滑動(dòng)出發(fā)的動(dòng)效。他們把滑動(dòng)變得更有趣，讓用戶們好奇“接下來(lái)會(huì)有什么？”

動(dòng)效讓滑動(dòng)在視覺上更有趣

講故事的視差效果

視差滑動(dòng)包含比前部?jī)?nèi)容移動(dòng)更慢的背景移動(dòng)，創(chuàng)造了一種深度和沉浸式的錯(cuò)覺。視差不僅僅是一個(gè)娛樂性的視覺效果。使用適當(dāng)?shù)脑?，他可以?chuàng)造一種順滑的視覺敘事性，讓用戶沉浸其中。

時(shí)差效果創(chuàng)造了令人影響深刻的三維感受

總結(jié)

長(zhǎng)滑動(dòng)可以創(chuàng)造一種完全的沉浸式瀏覽體驗(yàn)。如果用戶喜歡這個(gè)UI，并覺得它很直觀，那么他們不會(huì)那么介意滑動(dòng)的長(zhǎng)度的。因此，專注于你的用戶目標(biāo)，為用戶打造更方便的體驗(yàn)。