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

天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

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

視差滾動圖片：圖片素材以不同的速度運動創造出類似3D的視覺效果，爲用戶帶來愉悅的視覺效果和頗爲有效的互動

屏幕尺寸分頁：將(jiāng)長(cháng)滾動頁面(miàn)分割成(chéng)屏幕尺寸大小相同的分頁，這(zhè)是一種(zhǒng)頗爲有效的内容分割組織的方式，可以使頁面(miàn)内容更有凝聚力

常駐導航：用戶在浏覽長(cháng)滾動頁面(miàn)的時候容易迷失，常駐的導航欄能(néng)夠讓用戶感受到可控性和安全感，避免迷失

動畫互動：在滾動過(guò)程中觸發(fā)動畫會爲用戶帶來樂趣，這(zhè)會讓用戶享受滾動的過(guò)程

多向(xiàng)滾動翻頁：這(zhè)是單頁滾動和長(cháng)滾動頁面(miàn)發(fā)展這(zhè)麼(me)久之後(hòu)發(fā)展出來的新風尚，頁面(miàn)可以橫向(xiàng)、縱向(xiàng)，從上下左右各種(zhǒng)方向(xiàng)滾動

交互信息提示：有些用戶不會主動滾動頁面(miàn)，這(zhè)個時候需要給予适當的心思提示，比如“向(xiàng)下滾動”的文本和箭頭，避免他們迷惑。也可以使用行動召喚按鈕（CTA）等設計方法來提示。

下面(miàn)的長(cháng)滾動頁面(miàn)的案例大多采用了這(zhè)些設計和技術，這(zhè)也是爲什麼(me)這(zhè)些頁面(miàn)會跻身今年最值得學(xué)習的網頁的行列。

作爲社交網站中的巨頭，Twitter的設計自是不會差。但是它更加值得注意的是，它是首個打破翻頁設計的先驅，也是目前最典型的長(cháng)滾動頁面(miàn)設計之一。對(duì)于Twitter這(zhè)樣(yàng)的用戶産生内容的網站，長(cháng)滾動頁面(miàn)設計不僅時尚，而且實用。無限滾動加載内容不僅可以保證浏覽的體驗，而且有利于内容的組織。

這(zhè)是新西蘭慈善組織Heart Kits 的網站。長(cháng)滾動頁面(miàn)設計和動畫結合到一起(qǐ)，滾動操作可以激活動畫，令人驚豔的色調，凄美的意象，組織到一起(qǐ)宣揚拯救生命的信息。

值得注意的是，頁面(miàn)上并不顯眼的滾動圖标和著(zhe)陸頁上的指示文字，頂部還(hái)有常駐的懸停顯示的導航欄。

SBS旗下的The Boat網頁是目前最有創意的長(cháng)滾動頁面(miàn)之一，它的設計像互動小說一樣(yàng)有趣。長(cháng)滾動式設計賦予頁面(miàn)更加身臨其境的閱讀體驗，連續的動畫和視差的存在令它徹底區别于傳統的頁面(miàn)。

這(zhè)個長(cháng)滾動頁面(miàn)在左側使用灰色的頭盔來作爲導航和提示，用戶向(xiàng)下滾動可以看到堆疊的頁面(miàn)逐步翻看，呈現内容。

也正是這(zhè)種(zhǒng)堆疊式的頁面(miàn)，將(jiāng)長(cháng)滾動設計和分頁設計結合到一起(qǐ)，非常有趣。

不同的概念和組件自然協調于一個頁面(miàn)中的時候，用信息圖來中和并協調所有是一個不錯選擇。這(zhè)個網頁也正是如此處理的，更小的元素自由協調地在這(zhè)個長(cháng)滾動單頁中流動、呈現。配合恰當的動畫和過(guò)渡效果，單調的數據擁有了生命。

這(zhè)個網站也是SBS旗下的，Junko’s Story 借由信息圖來講述故事(shì)，展現了廣島核彈爆炸之後(hòu)幸存者們的悲慘遭遇。由于内容的嚴肅性，網站的展現形式采用了傳統的圖文混排，不過(guò)整體配色和風格上依然采用的是現代的設計。

這(zhè)個頁面(miàn)是針對(duì)Podio 的工具Beagle 而設計的長(cháng)滾動頁面(miàn)。設計師將(jiāng)内容分割成(chéng)屏幕大小的分頁，用來展示不同的内容，動效被(bèi)拿來銜接頁面(miàn)，將(jiāng)用戶的吸引力從一個分頁轉移到下一個分頁。

就像上面(miàn)的Beagle的網站，Bowbead 的頁面(miàn)設計充分運用了長(cháng)滾動頁面(miàn)的優勢，將(jiāng)他們的價值觀逐個清晰地展現出來——盡管整個頁面(miàn)是針對(duì)單個産品而設計。網站借助動效淡化了幻燈片式的展現手法，保持内容的吸引力。

并非所有的長(cháng)滾動頁面(miàn)都(dōu)是華而不實的，倫敦的The Kings Arms 酒吧就采用了固定背景設計，頁面(miàn)之間的切換也并未采用華麗的過(guò)度動效。

然而背景中的視覺元素采用了視差圖像，額外的動效消減了浏覽過(guò)程中固定背景的單調性，使得網站保持著(zhe)活力。

與上一個案例截然相反，這(zhè)個名爲Wall’s Ice Cream & Airpure Car Fresheners 的網頁采用了華麗的設計，色彩鮮豔變化多端的小雪糕被(bèi)設計成(chéng)導航，随著(zhe)頁面(miàn)向(xiàng)下滾動你會看到有趣的動畫。注意底部進(jìn)度條的色彩變化和固定的導航設計。

Beatrate Band 的頁面(miàn)同樣(yàng)采用了長(cháng)滾動頁面(miàn)設計，其中包含了幾個實驗性的設計，包括視頻自動播放和水平旋轉圖像。

Space Needle網站采用了多向(xiàng)滾動的設計，也是這(zhè)類案例中最優秀且最值得借鑒的一個。

結語

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

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。