滾動(dòng)對(duì)于高端網(wǎng)站設(shè)計(jì)來(lái)說(shuō)曾經(jīng)一度成為禁忌，如今已完全復(fù)蘇，成為近年來(lái)最受歡迎的技術(shù)之一，因?yàn)橛脩魧?duì)需要滾動(dòng)的網(wǎng)站發(fā)現(xiàn)了新的喜愛(ài)和贊賞。滾動(dòng)消除了它的舊污名，將其自身重新塑造為交互設(shè)計(jì)的核心元素，這也意味著設(shè)計(jì)師需要學(xué)習(xí)新的規(guī)定來(lái)足夠的了解它。本期尼高網(wǎng)站設(shè)計(jì)公司Angle將探討滾動(dòng)的重生，討論一些利弊，并列出該技術(shù)的一些快速提示。

滾動(dòng)為何復(fù)蘇？

簡(jiǎn)單的答案是移動(dòng)設(shè)備。自從移動(dòng)用戶超過(guò)PC用戶以來(lái)，各地的UI設(shè)計(jì)人員都進(jìn)行了相應(yīng)的調(diào)整。隨著越來(lái)越多的用戶使用較小的屏幕，滾動(dòng)變得越來(lái)越有必要：屏幕越小，滾動(dòng)時(shí)間越長(zhǎng)。但是還有其他因素。在更多地方都可以訪問(wèn)高速互聯(lián)網(wǎng)，這使得滾動(dòng)瀏覽比訪問(wèn)頁(yè)面更快捷地訪問(wèn)信息。社交媒體網(wǎng)站日益強(qiáng)大的實(shí)力也為這項(xiàng)技術(shù)注入了活力：滾動(dòng)自然可容納其豐富的用戶生成內(nèi)容。

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

使用每種設(shè)計(jì)技術(shù)和工具，都會(huì)有一些人喜歡和討厭這個(gè)概念。在大多數(shù)情況下，雙方在本質(zhì)上是對(duì)還是錯(cuò)都無(wú)法得出結(jié)論。這就導(dǎo)致在處理此類項(xiàng)目之前權(quán)衡所有考慮因素很重要的原因。

滾動(dòng)優(yōu)點(diǎn)

1、鼓勵(lì)互動(dòng)-不斷變化的元素刺激，這可能是一種有趣的講故事方法，可以鼓勵(lì)用戶互動(dòng)-尤其是高雅執(zhí)行的視差滾動(dòng)。
2、更快–長(zhǎng)滾動(dòng)比單擊復(fù)雜導(dǎo)航路徑要快，并且不會(huì)減慢速度或限制用戶體驗(yàn)。如“ 交互設(shè)計(jì)最佳實(shí)踐”中所述，對(duì)時(shí)間的感知通常比實(shí)際的時(shí)間流逝更為重要。
3、吸引用戶–易用性促進(jìn)了交互性并增加了現(xiàn)場(chǎng)時(shí)間。對(duì)于無(wú)限滾動(dòng)站點(diǎn)尤其如此，您可以在其中幫助用戶發(fā)現(xiàn)他們可能根本沒(méi)有想到的相關(guān)內(nèi)容。

4、響應(yīng)式設(shè)計(jì)–頁(yè)面設(shè)計(jì)在具有不同屏幕尺寸和功能的設(shè)備上會(huì)變得復(fù)雜，但是滾動(dòng)有助于簡(jiǎn)化差異。

5、手勢(shì)控件–滾動(dòng)似乎與觸摸有機(jī)地聯(lián)系在一起，因?yàn)橄蛳禄瑒?dòng)比在屏幕的不同區(qū)域重復(fù)輕按要容易得多。用戶（尤其是移動(dòng)用戶）通常接受這種方式來(lái)顯示信息。
6、令人愉悅的設(shè)計(jì)–只需點(diǎn)擊幾下，便可以加快交互速度，從而獲得更加類似于應(yīng)用程序或游戲的用戶體驗(yàn)。

滾動(dòng)缺點(diǎn)

1、固執(zhí)的用戶–沒(méi)關(guān)系，為什么某些用戶總是抵制更改。盡管如此，該技術(shù)現(xiàn)在如此普及（尤其是在移動(dòng)體驗(yàn)中），可以肯定地說(shuō)大多數(shù)用戶已經(jīng)習(xí)慣了該技術(shù)。
2、SEO的缺點(diǎn)–只有一頁(yè)可能會(huì)對(duì)網(wǎng)站的SEO產(chǎn)生負(fù)面影響。

3、迷失方向–滾動(dòng)和內(nèi)容之間的斷開(kāi)可能會(huì)使用戶感到困惑或迷惑。

4、導(dǎo)航困難–“返回”頁(yè)面上的先前內(nèi)容可能很尷尬。為了解決這個(gè)問(wèn)題，您可以創(chuàng)建一個(gè)持久的頂部導(dǎo)航，其中每個(gè)項(xiàng)目都固定在頁(yè)面部分上

5、網(wǎng)站速度–視頻或圖像畫廊等大塊內(nèi)容可能會(huì)降低網(wǎng)站速度，尤其是對(duì)于視差滾動(dòng)網(wǎng)站而言，它們依賴Javascript和jQuery。

6、沒(méi)有頁(yè)腳–對(duì)于無(wú)限滾動(dòng)的網(wǎng)站，我們建議您使用精簡(jiǎn)的“粘性”頁(yè)腳，以免犧牲可導(dǎo)航性。否則，頁(yè)面底部缺少進(jìn)一步的導(dǎo)航，可能會(huì)使用戶感到困惑。

滾動(dòng)的最佳做法

滾動(dòng)視差效果和類似機(jī)制在高端網(wǎng)站設(shè)計(jì)領(lǐng)域（1?4年）仍然相對(duì)較新，但是仍然有些基本的反復(fù)試驗(yàn)產(chǎn)生了一些基本的最佳實(shí)踐。接下來(lái)就給大家講解一滾動(dòng)的最佳做法吧。

1、不要害怕在短滾動(dòng)時(shí)長(zhǎng)交替顯示。讓內(nèi)容決定滾動(dòng)長(zhǎng)度，而不是相反。使用短滾動(dòng)主頁(yè)和長(zhǎng)滾動(dòng)目標(biāo)頁(yè)面（例如“產(chǎn)品”，“游覽”等）完全可以（而且很受歡迎）。

2、考慮粘性導(dǎo)航，例如Free Range Designs使用的粘性導(dǎo)航，以便用戶始終可以快速“返回”或在滾動(dòng)中從一個(gè)元素跳到另一個(gè)元素。

3、建議滾動(dòng)使用設(shè)計(jì)元素或工具，以便每個(gè)用戶都能快速查看網(wǎng)站的工作方式。箭頭、動(dòng)畫按鈕或類似的用戶界面工具是幫助用戶確定下一步操作的有趣且簡(jiǎn)便的方法。某些網(wǎng)站甚至包括帶有“滾動(dòng)更多信息”或“入門”等說(shuō)明的小按鈕，以幫助你使用非常規(guī)技術(shù)瀏覽網(wǎng)站。

4、明確區(qū)分滾動(dòng)點(diǎn)擊或點(diǎn)擊和其他號(hào)召性用語(yǔ)，以便您的網(wǎng)站獲得所需的交互。

5、做一些研究，看看用戶如何與滾動(dòng)交互。例如，在百度統(tǒng)計(jì)中，你可以打開(kāi)“頁(yè)內(nèi)分析”標(biāo)簽，查看有多少人點(diǎn)擊了首屏。根據(jù)數(shù)據(jù)，然后可以根據(jù)需要調(diào)整設(shè)計(jì)。

6、關(guān)注你的用戶目標(biāo)，并接受即使無(wú)限滾動(dòng)的站點(diǎn)也不是無(wú)盡的。在創(chuàng)建滾動(dòng)時(shí)間更長(zhǎng)的網(wǎng)站時(shí)，請(qǐng)了解用戶仍然需要方向感（當(dāng)前位置）和導(dǎo)航（其他可能的路徑）。

長(zhǎng)時(shí)間滾動(dòng)的站點(diǎn)無(wú)處不在。雖然我們已經(jīng)看到了流行設(shè)備上屏幕尺寸的起伏不定（或增加或減少），但是在可預(yù)見(jiàn)的將來(lái)，尺寸會(huì)變小。小屏幕需要更多滾動(dòng)，這也是個(gè)趨勢(shì)。

以上就是Angle為大家整理的滾動(dòng)在高端網(wǎng)站設(shè)計(jì)上的新規(guī)定，希望對(duì)大家有所幫助。