學(xué)會(huì)滾動(dòng)交互讓你的網(wǎng)頁UI設(shè)計(jì)更加優(yōu)秀

重生的滾動(dòng)交互

原因很簡(jiǎn)單，移動(dòng)端設(shè)備的興起，讓滾動(dòng)交互重獲新生。隨著移動(dòng)端用戶數(shù)量逐步超過桌面端的用戶數(shù)量，UI和UX設(shè)計(jì)師會(huì)不斷地針對(duì)交互和UI進(jìn)行調(diào)整。移動(dòng)端的用戶是如此之多，滾動(dòng)交互的重要性就顯得越來越明顯。

與此同時(shí)，另外一件事情也顯得非常重要。為了確保能夠盡可能多、盡可能方便地訪問互聯(lián)網(wǎng)，減少頁面跳轉(zhuǎn)，盡量通過滾動(dòng)瀏覽來提高效率，這也是滾動(dòng)交互熱度提升的一個(gè)重要原因。社交媒體中常見的動(dòng)態(tài)加載技術(shù)的出現(xiàn)，讓用戶可以一邊滾動(dòng)瀏覽一邊加載自適應(yīng)的內(nèi)容，成為了可能。

此外，我們之前一直重視的首屏，在今天似乎也沒有那么重要了。研究表明，用戶真的不介意向下滾動(dòng)瀏覽大量的內(nèi)容，換句話說，頁面的所有內(nèi)容都會(huì)在用戶的滾動(dòng)瀏覽過程中逐步展開，首屏的重要性無疑被稀釋了。

當(dāng)然，如今的滾動(dòng)需要相應(yīng)的技術(shù)支持，也正是在CSS和JS技術(shù)有所發(fā)展之后，滾動(dòng)交互才被界定為真正有意義的設(shè)計(jì)模式。在此之前，通過滾動(dòng)交互來視覺化地展現(xiàn)故事，本身是一件相對(duì)困難的事情，隨后技術(shù)的發(fā)展，讓復(fù)雜的UI布局，微妙的動(dòng)效和特效加入到滾動(dòng)交互過程中，從而有了今天的全新的滾動(dòng)交互。

不過一旦準(zhǔn)備借助長(zhǎng)滾動(dòng)式的頁面來呈現(xiàn)故事的時(shí)候，那么你就要充分運(yùn)用一切手段（圖形、動(dòng)畫、圖標(biāo)等），借用電影般的表現(xiàn)力和戲劇化的起承轉(zhuǎn)合，將用戶的吸引力牢牢地拉扯住。

事實(shí)上，一些混合型的設(shè)計(jì)正在占據(jù)滾動(dòng)交互的主流。就像UXPin的首頁，頁面采用的是長(zhǎng)滾動(dòng)式設(shè)計(jì)，但是其中包含了一個(gè)固定不動(dòng)的窗口，而窗口內(nèi)的內(nèi)容是隨著滾動(dòng)而改變的。這種全新的滾動(dòng)交互模式帶來的體驗(yàn)和以往傳統(tǒng)的滾動(dòng)式交互截然不同。

滾動(dòng)式交互適合你嗎？

每種技術(shù)、每款工具都有其特定的使用環(huán)境，相應(yīng)的，有人會(huì)喜歡它們，有人會(huì)討厭它們，這都是很自然的事情。所以，在你使用全新的滾動(dòng)交互的時(shí)候，你需要對(duì)于自己的產(chǎn)品、需求和滾動(dòng)交互本身有足夠清晰的判斷：

滾動(dòng)交互的優(yōu)點(diǎn)：

·鼓勵(lì)交互。不同的交互和元素會(huì)不斷刺激用戶，是一種有趣的故事呈現(xiàn)方式，鼓勵(lì)用戶與頁面進(jìn)行互動(dòng)，特別是視差滾動(dòng)。

·更加快速。滾動(dòng)交互比起復(fù)雜的頁面條狀更加高效，并不會(huì)減緩或者限制整個(gè)用戶體驗(yàn)。

·引誘用戶。滾動(dòng)式的設(shè)計(jì)會(huì)促進(jìn)用戶交互，提高用戶的停留時(shí)間，讓用戶持續(xù)發(fā)掘?qū)λ麄冇形Φ膬?nèi)容。

·響應(yīng)式設(shè)計(jì)。這些頁面挑弄廣場(chǎng)能夠兼容不同尺寸、不同設(shè)備屏幕，滾動(dòng)式交互本身就有助于簡(jiǎn)化設(shè)備和屏幕尺寸間的差異。

·手勢(shì)交互。滾動(dòng)交互始終同觸摸機(jī)制結(jié)合在一起，向下滾動(dòng)頁面比起使用向下按鈕要方便得多，在移動(dòng)端上尤其是如此。

·愉悅體驗(yàn)。較少的點(diǎn)擊和直覺式的交互，加上有趣的內(nèi)容和多樣的動(dòng)效，滾動(dòng)交互給用戶帶來的體驗(yàn)是愉悅的。

滾動(dòng)交互的缺陷：

·頑固的用戶。不要問為什么，總會(huì)有一部分用戶抵制新東西。盡管如此，新的滾動(dòng)交互依然廣泛地普及開來。尤其是在移動(dòng)端上，而且許多用戶已經(jīng)習(xí)慣了這一技術(shù)。

·SEO上的缺陷。大量的內(nèi)容被匯集到了一個(gè)頁面當(dāng)中，對(duì)于SEO可能會(huì)有負(fù)面的影響。

·迷失方向。用戶可能會(huì)在滾動(dòng)瀏覽過程中迷失方向，這是客觀存在的問題。

·導(dǎo)航困難。大量的內(nèi)容被匯集到一頁當(dāng)中，用戶無法像以前一樣“回到”上一頁。通常可以借助頂部或者側(cè)邊的固定導(dǎo)航，來解決這個(gè)問題。

·訪問速度。諸如視頻和動(dòng)效這種多樣、復(fù)雜而又占空間的內(nèi)容要加載，在訪問和加載速度上可能不如以前那么網(wǎng)站那么快速。

·沒有頁腳。絕大多數(shù)可以無限滾動(dòng)的網(wǎng)站都通常沒有設(shè)置頁腳，所以，我們可以設(shè)計(jì)一個(gè)常駐底部的頁腳，

除開這些優(yōu)缺點(diǎn)，長(zhǎng)滾動(dòng)式的網(wǎng)頁在某些特定的功能上非常突出。它非常適合用來展現(xiàn)內(nèi)容，以及：

·承載大量的移動(dòng)端內(nèi)容

·展現(xiàn)頻繁更新的內(nèi)容（博客和微博客）

·以單一方式呈現(xiàn)大量?jī)?nèi)容（比如信息圖表）

·由于信息負(fù)荷量大而不適宜呈現(xiàn)富媒體（加載時(shí)間長(zhǎng)）

諸如社交媒體這樣的網(wǎng)站適合長(zhǎng)滾動(dòng)頁面來展現(xiàn)，而類似電商類網(wǎng)站，需要導(dǎo)航來導(dǎo)向特定內(nèi)容的網(wǎng)站，則適合使用相對(duì)保守的頁面導(dǎo)航設(shè)計(jì)，并且控制頁面長(zhǎng)度。

和許多設(shè)計(jì)趨勢(shì)一樣，不要因?yàn)槟憧吹絼e的網(wǎng)站采用了這些趨勢(shì)，你就將它套用到自己的網(wǎng)站上，你依然需要針對(duì)自己的網(wǎng)站來進(jìn)行衡量，否則實(shí)際效果會(huì)非常糟糕。

滾動(dòng)交互最佳實(shí)踐

長(zhǎng)滾動(dòng)頁面，視差特效等設(shè)計(jì)模式是最近4年內(nèi)才出現(xiàn)的，通過這幾年的試錯(cuò)和市場(chǎng)驗(yàn)證，我們已經(jīng)擁有了一些頗為值得參考的最佳實(shí)踐：

1、不要害怕長(zhǎng)滾動(dòng)頁面替代傳統(tǒng)的短頁面。讓內(nèi)容來控制頁面長(zhǎng)度，而非其他方式。

2、考慮使用懸浮導(dǎo)航。使用懸浮式的導(dǎo)航能讓用戶在長(zhǎng)滾動(dòng)頁面中更容易定位和頁內(nèi)跳轉(zhuǎn)。

3、建議使用設(shè)計(jì)元素來給用戶以視覺指引。比如箭頭、動(dòng)效、按鈕之類的元素，簡(jiǎn)單快速地引導(dǎo)用戶，讓他們明白如何使用。有些網(wǎng)站甚至?xí)黾游淖终f明，諸如“Scroll for more”。

4、如果使用文字說明的話，盡量使用準(zhǔn)確的詞匯，諸如點(diǎn)擊按鈕、滾動(dòng)等。

5、稍加鉆研，了解用戶是如何滾動(dòng)頁面的。比如，你可以借用 Google Analytics 的“頁內(nèi)分析”，來了解有多少用戶翻頁查看了更多的內(nèi)容。根據(jù)數(shù)據(jù)，你可以作出更有針對(duì)性的改版設(shè)計(jì)。

6、長(zhǎng)滾動(dòng)并不是說毫無限制。你并不需要在一個(gè)頁面內(nèi)塞入500頁書的內(nèi)容，講述你的故事，然后結(jié)束。

7、專注于你的用戶和目標(biāo)。創(chuàng)建長(zhǎng)滾動(dòng)頁面的時(shí)候，應(yīng)該明白用戶也是需要方向感的，所以，你應(yīng)該通過設(shè)計(jì)讓他們知道所處的位置，能夠通過合理的導(dǎo)航跳轉(zhuǎn)到其他的位置。

8、加入視覺線索。

以滾動(dòng)為主交互的設(shè)計(jì)，是一把雙刃劍，用對(duì)與用好是同樣重要的。

 

未來：無頁面式設(shè)計(jì)

在長(zhǎng)滾動(dòng)頁面中，用戶通常不會(huì)涉及到頁面間的跳轉(zhuǎn)。仔細(xì)觀察最近幾年的趨勢(shì)，最常用的移動(dòng)端設(shè)備，我們的手機(jī)，在界面尺寸上基本上穩(wěn)定下來了，在小屏幕上的滾動(dòng)交互，將會(huì)在未來越來越多。

頁面的概念正在逐步淡化，長(zhǎng)滾動(dòng)頁面的下一步進(jìn)化應(yīng)該就是“無頁面式”的網(wǎng)頁設(shè)計(jì)，實(shí)際上許多設(shè)計(jì)師認(rèn)為這才是網(wǎng)頁設(shè)計(jì)的未來。

交互設(shè)計(jì)是長(zhǎng)滾動(dòng)式網(wǎng)頁的設(shè)計(jì)基礎(chǔ)，如果用戶喜歡你所設(shè)計(jì)的頁面，并且覺得它們足夠有趣而直觀，他們是不會(huì)在意內(nèi)容長(zhǎng)短的。

如果你想讓你的網(wǎng)頁用戶停留時(shí)間足夠長(zhǎng)，你首先應(yīng)該讓內(nèi)容有趣，讓等待也足夠有趣才行。