滾動(dòng)型長(zhǎng)頁(yè)面設(shè)計(jì)注意要點(diǎn)

單屏的網(wǎng)站頁(yè)面現(xiàn)在不多見(jiàn)了，長(zhǎng)條滾動(dòng)和無(wú)限滾動(dòng)的網(wǎng)站最近變得越來(lái)越盛行，這種技術(shù)在移動(dòng)設(shè)備上更是能很很好地呈現(xiàn)。移動(dòng)屏幕的運(yùn)用越來(lái)越多，在普遍承受長(zhǎng)卷技術(shù)的過(guò)程中無(wú)疑起到了關(guān)鍵作用：屏幕越小，滾動(dòng)的時(shí)間越長(zhǎng)。長(zhǎng)長(zhǎng)的滾動(dòng)條為設(shè)計(jì)師翻開(kāi)了許多新的大門(mén)。但是，這種形式也有其缺陷。它請(qǐng)求設(shè)計(jì)師對(duì)內(nèi)容、導(dǎo)航和動(dòng)畫(huà)給予高度關(guān)注。那滾動(dòng)型長(zhǎng)頁(yè)面怎樣設(shè)計(jì)?

1、從一開(kāi)端就提供有趣的內(nèi)容

人們通常會(huì)在頁(yè)面加載時(shí)就開(kāi)端滾動(dòng)，屏幕頂部的內(nèi)容是十分重要的。在頁(yè)面頂部呈現(xiàn)的內(nèi)容會(huì)給用戶帶來(lái)最初的印象，并為用戶設(shè)置質(zhì)量需求。用戶能夠滾動(dòng)，但只要當(dāng)他們進(jìn)入頁(yè)面時(shí)看到的內(nèi)容是有希望的。因而，把你最引人矚目的內(nèi)容放在頁(yè)面的頂部區(qū)域，運(yùn)用有趣的故事或美觀的圖像吸引用戶。

2、讓長(zhǎng)滾動(dòng)內(nèi)容和短滾動(dòng)內(nèi)容交替呈現(xiàn)

在長(zhǎng)滾動(dòng)頁(yè)面當(dāng)中，有些內(nèi)容需求快速滾動(dòng)閱讀，而有的內(nèi)容則需求用戶認(rèn)真閱讀，逐漸查看，這些長(zhǎng)滾動(dòng)和短滾動(dòng)的內(nèi)容應(yīng)該交替呈現(xiàn)，分段搭配。比方大片的圖片就是易于消化的內(nèi)容，用戶會(huì)快速滾動(dòng)查看，而包含文本的內(nèi)容，則常常需求用戶停下來(lái)，逐行滾動(dòng)查看，你需求讓這些不同的內(nèi)容長(zhǎng)短搭配起來(lái)，這樣不只讓交互愈加富有韻律，而且讓頁(yè)面愈加沉著地加載。

3、給用戶一個(gè)視覺(jué)提示

有時(shí)讓用戶滾動(dòng)的最好辦法就是直接讓他們?nèi)プ?。?jiǎn)單地通知用戶，大局部?jī)?nèi)容都能夠在下面找到。一個(gè)奇妙的視覺(jué)提示，如指向屏幕外的箭頭或文本“向下滾動(dòng)”，能夠告知用戶大局部?jī)?nèi)容都在下面。

4、為用戶提供道路圖

長(zhǎng)滾動(dòng)頁(yè)面所需求面臨一個(gè)十分實(shí)踐的問(wèn)題，就是導(dǎo)航和視覺(jué)線索，用戶需求曉得他們閱讀到了什么位置，以及他們間隔頁(yè)面的首位有多遠(yuǎn)。道路圖和導(dǎo)航是十分重要的。目前常見(jiàn)的形式有以下幾種：懸浮導(dǎo)航；運(yùn)用小點(diǎn)或者其他替代元從來(lái)告知用戶進(jìn)度;運(yùn)用箭頭和符號(hào)來(lái)通知用戶接下來(lái)的操作;提供快速跳轉(zhuǎn)到開(kāi)頭和結(jié)尾的按鈕。

5、設(shè)計(jì)出明晰的目的

長(zhǎng)滾動(dòng)頁(yè)面不應(yīng)該是無(wú)限的。設(shè)計(jì)的時(shí)分，應(yīng)該可以讓用戶明白從哪里開(kāi)端，以及最終的完畢會(huì)在什么中央。固然長(zhǎng)滾動(dòng)頁(yè)面曾經(jīng)不再是什么新穎的東西，但是它的UX設(shè)計(jì)和交互形式仍然還在不時(shí)生長(zhǎng)，逐步成熟?，F(xiàn)往常仍然在討論它的利害，只要充分思索到客戶需求和行業(yè)特性之后再能選擇能否運(yùn)用長(zhǎng)滾動(dòng)網(wǎng)頁(yè)設(shè)計(jì)。

6、堅(jiān)持導(dǎo)航選項(xiàng)一直可見(jiàn)

導(dǎo)航是網(wǎng)站用戶體驗(yàn)的一個(gè)組成局部。在你的設(shè)計(jì)中運(yùn)用長(zhǎng)時(shí)間滾動(dòng)的最大風(fēng)險(xiǎn)之一是用戶迷失方向。假如導(dǎo)航條在用戶向下滾動(dòng)時(shí)失去了可見(jiàn)性，那么當(dāng)它們?cè)陧?yè)面深處時(shí)，它們將不得不滾動(dòng)回去。這個(gè)問(wèn)題的最明顯的處理計(jì)劃是運(yùn)用一個(gè)具有粘性的導(dǎo)航菜單，它顯現(xiàn)當(dāng)前位置，并且一直堅(jiān)持在同一位置的屏幕上。

7、防止?jié)L動(dòng)劫持

完成卷軸劫持的網(wǎng)站控制了卷軸并掩蓋了web閱讀器的根本功用。滾動(dòng)劫持是不好的，由于用戶不再完整控制頁(yè)面滾動(dòng)，無(wú)法預(yù)測(cè)其行為。用戶對(duì)網(wǎng)站滾動(dòng)互動(dòng)的希望不應(yīng)該由于敘說(shuō)的體驗(yàn)而被毀壞。

8、運(yùn)用功用動(dòng)畫(huà)來(lái)吸引訪客

像視差滾動(dòng)和滾動(dòng)激活動(dòng)畫(huà)等發(fā)明性的效果能夠吸引用戶更多的滾動(dòng)。他們把滾動(dòng)變成更有趣的事情，讓用戶想曉得“接下來(lái)會(huì)發(fā)作什么?”思索將你的頁(yè)面拆分為可滾動(dòng)的“塊”。在每一組中，你能夠經(jīng)過(guò)發(fā)明性的動(dòng)畫(huà)來(lái)引見(jiàn)內(nèi)容。當(dāng)用戶滾動(dòng)時(shí)，動(dòng)畫(huà)將它們轉(zhuǎn)換到下一個(gè)屏幕，同時(shí)創(chuàng)立一個(gè)內(nèi)容途徑。視差是另一種受歡送的動(dòng)畫(huà)效果，能夠改善滾動(dòng)體驗(yàn)。視差效應(yīng)使背景圖像的移動(dòng)速度低于前景中的內(nèi)容，從而產(chǎn)生深度和沉浸感。

固然如今長(zhǎng)滾動(dòng)頁(yè)面的設(shè)計(jì)運(yùn)營(yíng)的很普遍，但是也不能為了做長(zhǎng)滾動(dòng)頁(yè)面而去做，作為企業(yè)來(lái)說(shuō)應(yīng)該充分思索到行業(yè)、產(chǎn)品特征，而作為網(wǎng)站設(shè)計(jì)公司的設(shè)計(jì)師來(lái)說(shuō)的話應(yīng)該充分思索到用戶的特性以及閱讀需求。