出于對新交互模式的探索和技術(shù)的發(fā)展，曾經(jīng)網(wǎng)頁設(shè)計中的許多禁忌菱父，現(xiàn)如今反而成為了越來越受歡迎的趨勢颈娜，網(wǎng)頁中的滾動交互，就是如此浙宜。作為一項基本的交互方式官辽，滾動交互并不是一成不變，它正將新的技巧和新的規(guī)則納入其中粟瞬，逐步演進(jìn)同仆。
重生的滾動交互
原因很簡單，移動端設(shè)備的興起裙品，讓滾動交互重獲新生俗批。隨著移動端用戶數(shù)量逐步超過桌面端的用戶數(shù)量，UI和UX設(shè)計師會不斷地針對交互和UI進(jìn)行調(diào)整市怎。移動端的用戶是如此之多岁忘，滾動交互的重要性就顯得越來越明顯。
與此同時区匠，另外一件事情也顯得非常重要臭觉。為了確保能夠盡可能多、盡可能方便地訪問互聯(lián)網(wǎng)，減少頁面跳轉(zhuǎn)蝠筑，盡量通過滾動瀏覽來提高效率狞膘，這也是滾動交互熱度提升的一個重要原因。社交媒體中常見的動態(tài)加載技術(shù)的出現(xiàn)什乙，讓用戶可以一邊滾動瀏覽一邊加載自適應(yīng)的內(nèi)容挽封，成為了可能。
此外臣镣，我們之前一直重視的首屏辅愿，在今天似乎也沒有那么重要了。研究表明忆某，用戶真的不介意向下滾動瀏覽大量的內(nèi)容点待，換句話說，頁面的所有內(nèi)容都會在用戶的滾動瀏覽過程中逐步展開弃舒，首屏的重要性無疑被稀釋了癞埠。
當(dāng)然，如今的滾動需要相應(yīng)的技術(shù)支持聋呢，也正是在CSS和JS技術(shù)有所發(fā)展之后苗踪，滾動交互才被界定為真正有意義的設(shè)計模式。在此之前削锰，通過滾動交互來視覺化地展現(xiàn)故事通铲，本身是一件相對困難的事情，隨后技術(shù)的發(fā)展器贩，讓復(fù)雜的UI布局颅夺，微妙的動效和特效加入到滾動交互過程中，從而有了今天的全新的滾動交互蛹稍。
不過一旦準(zhǔn)備借助長滾動式的頁面來呈現(xiàn)故事的時候吧黄，那么你就要充分運用一切手段（圖形、動畫稳摄、圖標(biāo)等），借用電影般的表現(xiàn)力和戲劇化的起承轉(zhuǎn)合饲宿，將用戶的吸引力牢牢地拉扯住厦酬。
事實上，一些混合型的設(shè)計正在占據(jù)滾動交互的主流瘫想。就像UXPin的首頁仗阅，頁面采用的是長滾動式設(shè)計，但是其中包含了一個固定不動的窗口国夜，而窗口內(nèi)的內(nèi)容是隨著滾動而改變的减噪。這種全新的滾動交互模式帶來的體驗和以往傳統(tǒng)的滾動式交互截然不同。
滾動式交互適合你嗎？
每種技術(shù)筹裕、每款工具都有其特定的使用環(huán)境醋闭，相應(yīng)的，有人會喜歡它們朝卒，有人會討厭它們证逻，這都是很自然的事情。所以抗斤，在你使用全新的滾動交互的時候囚企，你需要對于自己的產(chǎn)品、需求和滾動交互本身有足夠清晰的判斷：
滾動交互的優(yōu)點：
·鼓勵交互瑞眼。不同的交互和元素會不斷刺激用戶龙宏，是一種有趣的故事呈現(xiàn)方式，鼓勵用戶與頁面進(jìn)行互動伤疙，特別是視差滾動银酗。
·更加快速。滾動交互比起復(fù)雜的頁面條狀更加高效掩浙，并不會減緩或者限制整個用戶體驗花吟。
·引誘用戶。滾動式的設(shè)計會促進(jìn)用戶交互厨姚，提高用戶的停留時間衅澈，讓用戶持續(xù)發(fā)掘?qū)λ麄冇形Φ膬?nèi)容。
·響應(yīng)式設(shè)計谬墙。這些頁面挑弄廣場能夠兼容不同尺寸今布、不同設(shè)備屏幕，滾動式交互本身就有助于簡化設(shè)備和屏幕尺寸間的差異拭抬。
·手勢交互部默。滾動交互始終同觸摸機制結(jié)合在一起，向下滾動頁面比起使用向下按鈕要方便得多造虎，在移動端上尤其是如此傅蹂。
·愉悅體驗。較少的點擊和直覺式的交互算凿，加上有趣的內(nèi)容和多樣的動效份蝴，滾動交互給用戶帶來的體驗是愉悅的。
滾動交互的缺陷：
·頑固的用戶氓轰。不要問為什么婚夫，總會有一部分用戶抵制新東西。盡管如此署鸡，新的滾動交互依然廣泛地普及開來案糙。尤其是在移動端上限嫌，而且許多用戶已經(jīng)習(xí)慣了這一技術(shù)。
·SEO上的缺陷时捌。大量的內(nèi)容被匯集到了一個頁面當(dāng)中怒医，對于SEO可能會有負(fù)面的影響。
·迷失方向匣椰。用戶可能會在滾動瀏覽過程中迷失方向裆熙，這是客觀存在的問題。
·導(dǎo)航困難禽笑。大量的內(nèi)容被匯集到一頁當(dāng)中入录，用戶無法像以前一樣“回到”上一頁。通臣丫担可以借助頂部或者側(cè)邊的固定導(dǎo)航僚稿，來解決這個問題。
·訪問速度蟀伸。諸如視頻和動效這種多樣蚀同、復(fù)雜而又占空間的內(nèi)容要加載，在訪問和加載速度上可能不如以前那么網(wǎng)站那么快速啊掏。
·沒有頁腳蠢络。絕大多數(shù)可以無限滾動的網(wǎng)站都通常沒有設(shè)置頁腳，所以迟蜜，我們可以設(shè)計一個常駐底部的頁腳刹孔，
除開這些優(yōu)缺點，長滾動式的網(wǎng)頁在某些特定的功能上非常突出娜睛。它非常適合用來展現(xiàn)內(nèi)容髓霞，以及：
·承載大量的移動端內(nèi)容
·展現(xiàn)頻繁更新的內(nèi)容（博客和微博客）
·以單一方式呈現(xiàn)大量內(nèi)容（比如信息圖表）
·由于信息負(fù)荷量大而不適宜呈現(xiàn)富媒體（加載時間長）
諸如社交媒體這樣的網(wǎng)站適合長滾動頁面來展現(xiàn)，而類似電商類網(wǎng)站畦戒，需要導(dǎo)航來導(dǎo)向特定內(nèi)容的網(wǎng)站方库，則適合使用相對保守的頁面導(dǎo)航設(shè)計，并且控制頁面長度障斋。
和許多設(shè)計趨勢一樣纵潦，不要因為你看到別的網(wǎng)站采用了這些趨勢，你就將它套用到自己的網(wǎng)站上垃环，你依然需要針對自己的網(wǎng)站來進(jìn)行衡量邀层，否則實際效果會非常糟糕。
滾動交互最佳實踐
長滾動頁面晴裹，視差特效等設(shè)計模式是最近4年內(nèi)才出現(xiàn)的被济，通過這幾年的試錯和市場驗證救赐，我們已經(jīng)擁有了一些頗為值得參考的最佳實踐：
1涧团、不要害怕長滾動頁面替代傳統(tǒng)的短頁面只磷。讓內(nèi)容來控制頁面長度，而非其他方式泌绣。
2钮追、考慮使用懸浮導(dǎo)航。使用懸浮式的導(dǎo)航能讓用戶在長滾動頁面中更容易定位和頁內(nèi)跳轉(zhuǎn)阿迈。
3元媚、建議使用設(shè)計元素來給用戶以視覺指引。比如箭頭苗沧、動效刊棕、按鈕之類的元素，簡單快速地引導(dǎo)用戶待逞，讓他們明白如何使用甥角。有些網(wǎng)站甚至?xí)黾游淖终f明，諸如“Scroll for more”识樱。
4嗤无、如果使用文字說明的話，盡量使用準(zhǔn)確的詞匯怜庸，諸如點擊按鈕当犯、滾動等。
5割疾、稍加鉆研嚎卫，了解用戶是如何滾動頁面的。比如杈曲，你可以借用 Google Analytics 的“頁內(nèi)分析”驰凛，來了解有多少用戶翻頁查看了更多的內(nèi)容。根據(jù)數(shù)據(jù)担扑，你可以作出更有針對性的改版設(shè)計恰响。
6、長滾動并不是說毫無限制涌献。你并不需要在一個頁面內(nèi)塞入500頁書的內(nèi)容胚宦，講述你的故事，然后結(jié)束燕垃。
7枢劝、專注于你的用戶和目標(biāo)。創(chuàng)建長滾動頁面的時候卜壕，應(yīng)該明白用戶也是需要方向感的您旁，所以，你應(yīng)該通過設(shè)計讓他們知道所處的位置轴捎，能夠通過合理的導(dǎo)航跳轉(zhuǎn)到其他的位置鹤盒。
8蚕脏、加入視覺線索。
以滾動為主交互的設(shè)計侦锯，是一把雙刃劍驼鞭，用對與用好是同樣重要的。
未來：無頁面式設(shè)計
在長滾動頁面中尺碰，用戶通常不會涉及到頁面間的跳轉(zhuǎn)挣棕。仔細(xì)觀察最近幾年的趨勢，最常用的移動端設(shè)備亲桥，我們的手機洛心，在界面尺寸上基本上穩(wěn)定下來了，在小屏幕上的滾動交互题篷，將會在未來越來越多皂甘。
頁面的概念正在逐步淡化，長滾動頁面的下一步進(jìn)化應(yīng)該就是“無頁面式”的網(wǎng)頁設(shè)計悼凑，實際上許多設(shè)計師認(rèn)為這才是網(wǎng)頁設(shè)計的未來偿枕。
交互設(shè)計是長滾動式網(wǎng)頁的設(shè)計基礎(chǔ)，如果用戶喜歡你所設(shè)計的頁面户辫，并且覺得它們足夠有趣而直觀渐夸，他們是不會在意內(nèi)容長短的。
如果你想讓你的網(wǎng)頁用戶停留時間足夠長渔欢，你首先應(yīng)該讓內(nèi)容有趣墓塌，讓等待也足夠有趣才行。
