潮流趨勢(shì)！帶你梳理正在流行的長(zhǎng)滾動(dòng)頁(yè)面設(shè)計(jì)

在內(nèi)容一定的情況下，屏幕越小，頁(yè)面自然就越長(zhǎng)。長(zhǎng)滾動(dòng)頁(yè)面的興起并不是沒(méi)有理由的，移動(dòng)端對(duì)桌面端市場(chǎng)份額的擠壓，可穿戴設(shè)備等小屏幕的流行，所有的這些變化都在促使這一趨勢(shì)更加流行。

長(zhǎng)滾動(dòng)頁(yè)面的流行促使設(shè)計(jì)師在新需求下探索新的導(dǎo)航模式和獨(dú)到的視覺(jué)設(shè)計(jì)，故事的講述也有了新的方式，瀏覽體驗(yàn)也將截然不同。在這樣的語(yǔ)境下，我們可以從設(shè)計(jì)、技術(shù)和策略的角度總結(jié)出如下特征：

視差滾動(dòng)圖片：圖片素材以不同的速度運(yùn)動(dòng)創(chuàng)造出類似3D的視覺(jué)效果，為用戶帶來(lái)愉悅的視覺(jué)效果和頗為有效的互動(dòng)

屏幕尺寸分頁(yè)：將長(zhǎng)滾動(dòng)頁(yè)面分割成屏幕尺寸大小相同的分頁(yè)，這是一種頗為有效的內(nèi)容分割組織的方式，可以使頁(yè)面內(nèi)容更有凝聚力

常駐導(dǎo)航：用戶在瀏覽長(zhǎng)滾動(dòng)頁(yè)面的時(shí)候容易迷失，常駐的導(dǎo)航欄能夠讓用戶感受到可控性和安全感，避免迷失

動(dòng)畫互動(dòng)：在滾動(dòng)過(guò)程中觸發(fā)動(dòng)畫會(huì)為用戶帶來(lái)樂(lè)趣，這會(huì)讓用戶享受滾動(dòng)的過(guò)程

多向滾動(dòng)翻頁(yè)：這是單頁(yè)滾動(dòng)和長(zhǎng)滾動(dòng)頁(yè)面發(fā)展這么久之后發(fā)展出來(lái)的新風(fēng)尚，頁(yè)面可以橫向、縱向，從上下左右各種方向滾動(dòng)

交互信息提示：有些用戶不會(huì)主動(dòng)滾動(dòng)頁(yè)面，這個(gè)時(shí)候需要給予適當(dāng)?shù)男乃继崾?，比如“向下滾動(dòng)”的文本和箭頭，避免他們迷惑。也可以使用行動(dòng)召喚按鈕（CTA）等設(shè)計(jì)方法來(lái)提示。

下面的長(zhǎng)滾動(dòng)頁(yè)面的案例大多采用了這些設(shè)計(jì)和技術(shù)，這也是為什么這些頁(yè)面會(huì)躋身今年最值得學(xué)習(xí)的網(wǎng)頁(yè)的行列。

Twitter

作為社交網(wǎng)站中的巨頭，Twitter的設(shè)計(jì)自是不會(huì)差。但是它更加值得注意的是，它是首個(gè)打破翻頁(yè)設(shè)計(jì)的先驅(qū)，也是目前最典型的長(zhǎng)滾動(dòng)頁(yè)面設(shè)計(jì)之一。對(duì)于Twitter這樣的用戶產(chǎn)生內(nèi)容的網(wǎng)站，長(zhǎng)滾動(dòng)頁(yè)面設(shè)計(jì)不僅時(shí)尚，而且實(shí)用。無(wú)限滾動(dòng)加載內(nèi)容不僅可以保證瀏覽的體驗(yàn)，而且有利于內(nèi)容的組織。

Heart Kids NW

這是新西蘭慈善組織Heart Kits 的網(wǎng)站。長(zhǎng)滾動(dòng)頁(yè)面設(shè)計(jì)和動(dòng)畫結(jié)合到一起，滾動(dòng)操作可以激活動(dòng)畫，令人驚艷的色調(diào)，凄美的意象，組織到一起宣揚(yáng)拯救生命的信息。

值得注意的是，頁(yè)面上并不顯眼的滾動(dòng)圖標(biāo)和著陸頁(yè)上的指示文字，頂部還有常駐的懸停顯示的導(dǎo)航欄。

The Boat

SBS旗下的The Boat網(wǎng)頁(yè)是目前最有創(chuàng)意的長(zhǎng)滾動(dòng)頁(yè)面之一，它的設(shè)計(jì)像互動(dòng)小說(shuō)一樣有趣。長(zhǎng)滾動(dòng)式設(shè)計(jì)賦予頁(yè)面更加身臨其境的閱讀體驗(yàn)，連續(xù)的動(dòng)畫和視差的存在令它徹底區(qū)別于傳統(tǒng)的頁(yè)面。

MCA Leicester: The Seven Types of Motorcycle Rider

這個(gè)長(zhǎng)滾動(dòng)頁(yè)面在左側(cè)使用灰色的頭盔來(lái)作為導(dǎo)航和提示，用戶向下滾動(dòng)可以看到堆疊的頁(yè)面逐步翻看，呈現(xiàn)內(nèi)容。

也正是這種堆疊式的頁(yè)面，將長(zhǎng)滾動(dòng)設(shè)計(jì)和分頁(yè)設(shè)計(jì)結(jié)合到一起，非常有趣。

Thirteen Reasons Why Your Brain Craves Infographics

不同的概念和組件自然協(xié)調(diào)于一個(gè)頁(yè)面中的時(shí)候，用信息圖來(lái)中和并協(xié)調(diào)所有是一個(gè)不錯(cuò)選擇。這個(gè)網(wǎng)頁(yè)也正是如此處理的，更小的元素自由協(xié)調(diào)地在這個(gè)長(zhǎng)滾動(dòng)單頁(yè)中流動(dòng)、呈現(xiàn)。配合恰當(dāng)?shù)膭?dòng)畫和過(guò)渡效果，單調(diào)的數(shù)據(jù)擁有了生命。

Junko’s Story: Surviving Hiroshima

這個(gè)網(wǎng)站也是SBS旗下的，Junko’s Story 借由信息圖來(lái)講述故事，展現(xiàn)了廣島核彈爆炸之后幸存者們的悲慘遭遇。由于內(nèi)容的嚴(yán)肅性，網(wǎng)站的展現(xiàn)形式采用了傳統(tǒng)的圖文混排，不過(guò)整體配色和風(fēng)格上依然采用的是現(xiàn)代的設(shè)計(jì)。

Beagle

這個(gè)頁(yè)面是針對(duì)Podio 的工具Beagle 而設(shè)計(jì)的長(zhǎng)滾動(dòng)頁(yè)面。設(shè)計(jì)師將內(nèi)容分割成屏幕大小的分頁(yè)，用來(lái)展示不同的內(nèi)容，動(dòng)效被拿來(lái)銜接頁(yè)面，將用戶的吸引力從一個(gè)分頁(yè)轉(zhuǎn)移到下一個(gè)分頁(yè)。

Bowhead (Tails and Whales)

就像上面的Beagle的網(wǎng)站，Bowbead 的頁(yè)面設(shè)計(jì)充分運(yùn)用了長(zhǎng)滾動(dòng)頁(yè)面的優(yōu)勢(shì)，將他們的價(jià)值觀逐個(gè)清晰地展現(xiàn)出來(lái)——盡管整個(gè)頁(yè)面是針對(duì)單個(gè)產(chǎn)品而設(shè)計(jì)。網(wǎng)站借助動(dòng)效淡化了幻燈片式的展現(xiàn)手法，保持內(nèi)容的吸引力。

The Kings Arms

并非所有的長(zhǎng)滾動(dòng)頁(yè)面都是華而不實(shí)的，倫敦的The Kings Arms 酒吧就采用了固定背景設(shè)計(jì)，頁(yè)面之間的切換也并未采用華麗的過(guò)度動(dòng)效。

然而背景中的視覺(jué)元素采用了視差圖像，額外的動(dòng)效消減了瀏覽過(guò)程中固定背景的單調(diào)性，使得網(wǎng)站保持著活力。

Wall’s Ice Cream & Airpure Car Fresheners

與上一個(gè)案例截然相反，這個(gè)名為Wall’s Ice Cream & Airpure Car Fresheners 的網(wǎng)頁(yè)采用了華麗的設(shè)計(jì)，色彩鮮艷變化多端的小雪糕被設(shè)計(jì)成導(dǎo)航，隨著頁(yè)面向下滾動(dòng)你會(huì)看到有趣的動(dòng)畫。注意底部進(jìn)度條的色彩變化和固定的導(dǎo)航設(shè)計(jì)。

Beatrate Band

Beatrate Band 的頁(yè)面同樣采用了長(zhǎng)滾動(dòng)頁(yè)面設(shè)計(jì)，其中包含了幾個(gè)實(shí)驗(yàn)性的設(shè)計(jì)，包括視頻自動(dòng)播放和水平旋轉(zhuǎn)圖像。

Space Needle

Space Needle網(wǎng)站采用了多向滾動(dòng)的設(shè)計(jì)，也是這類案例中最優(yōu)秀且最值得借鑒的一個(gè)。

更多案例：

Keep

The Reveal (Lexus)

One John St

One to See, One to Kill

Cameo by Vimeo

Squarespace

Yep App

Beoplay

Inbox by Google

Be Human by Reebok

結(jié)語(yǔ)

從這些優(yōu)秀的頁(yè)面可以看出來(lái)，長(zhǎng)滾動(dòng)頁(yè)面是有其獨(dú)到之處，對(duì)頁(yè)面設(shè)計(jì)有著非常實(shí)際的好處。長(zhǎng)滾動(dòng)頁(yè)面的優(yōu)勢(shì)是明顯的：梳理雜亂無(wú)章的信息、提升頁(yè)面交互性、自由合理的導(dǎo)航設(shè)計(jì)、更為漂亮有趣的視覺(jué)設(shè)計(jì)，以及更加豐富的內(nèi)容呈現(xiàn)。當(dāng)然，考慮到它“長(zhǎng)”的特征容易讓用戶迷惑，內(nèi)容的信息量其實(shí)應(yīng)當(dāng)進(jìn)行合理的控制。

本文標(biāo)題：潮流趨勢(shì)！帶你梳理正在流行的長(zhǎng)滾動(dòng)頁(yè)面設(shè)計(jì)
分享地址：http://www.bm7419.com/news9/165709.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、軟件開(kāi)發(fā)、全網(wǎng)營(yíng)銷推廣、標(biāo)簽優(yōu)化、用戶體驗(yàn)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)