可能是因?yàn)閷?shí)現(xiàn)這種效果比較復(fù)雜，視差滾動的概念對于很多設(shè)計師來說仍然是相當(dāng)陌生。我看到過眾多優(yōu)秀的例子，例如像 Pixel Stadium 這樣的杰出代表，這個網(wǎng)站易于瀏覽，紋理也是讓人眼花繚亂。

　　當(dāng)你向下滾動頁面的時候，頂部導(dǎo)航欄會出現(xiàn)并鎖定到窗口，這使得用戶可以快速跳過或轉(zhuǎn)換頁面到不同的部分。布局是完全響應(yīng)式設(shè)計的，會自適應(yīng)瀏覽器窗口的寬度！這一切都說明，單頁的布局可能會非常好看，也很靈活。

　　Android 和 iOS 應(yīng)用程序開發(fā)人員知道，推出品牌對于自己的營銷努力是至關(guān)重要的。這就是為什么更小的移動應(yīng)用程序的網(wǎng)站包含的信息通常設(shè)在一個頁面上。它花費(fèi)更少的精力而且效果看起來也好多了。

　　這個網(wǎng)站采用了相當(dāng)簡約的布局，沒有很多細(xì)節(jié)。大部分的設(shè)計是圍繞應(yīng)用程序的屏幕截圖，環(huán)繞著 App Store 的徽章按鈕。您想促進(jìn)銷售的話，使用單頁布局是實(shí)現(xiàn)這個目標(biāo)最好的布局風(fēng)格。

　　為了在在屏幕上節(jié)省空間，網(wǎng)站的導(dǎo)航條只有在滾動條滾動一定的距離，頭部的內(nèi)容看不到了之后才出現(xiàn)。網(wǎng)站 Radiologie 為這種技術(shù)提供了一個很好的示范。

　　讓當(dāng)前的導(dǎo)航欄和網(wǎng)站的主題匹配是很好的做法，但是，因?yàn)樗鼤陧撁嫔媳３止潭ǎ碚撋夏憧梢允褂萌我鈹?shù)量的設(shè)計風(fēng)格。我想一個更好的例子是 Rule of Three。

　　他們的網(wǎng)站是專注于一個撰稿人行業(yè)協(xié)會的專業(yè)人士，使用暗色風(fēng)格紋理，配色方案也符合版面設(shè)計。當(dāng)你向下滾動頁面，你會發(fā)現(xiàn)導(dǎo)航鏈接固定在頂欄，這是一個很好的解決方案。

　　創(chuàng)建自己的動態(tài)頁面動畫的過程很復(fù)雜的。我不建議剛開始使用 JavaScript 的開發(fā)者走這條道路，但它可以是一個很好的學(xué)習(xí)經(jīng)驗(yàn)。看一個例子：FK-Agency website。

　　這個網(wǎng)站是可以同時在垂直和水平方向擴(kuò)展。請注意，你不能在布局上/下翻頁，必須滑動導(dǎo)航鏈接。在某些類似的服務(wù)和作品集網(wǎng)站中也會這種設(shè)計，你必須水平方向上滾動頁面。對于一些訪客，這種技術(shù)會讓他們困惑，所以要小心使用。

　　這種技術(shù)和動態(tài)過渡風(fēng)格是非常相似的，但水平滑動效果只要通過谷歌搜索就能找到很多的開源插件可以實(shí)現(xiàn)。因此這種效果相比上面幾種更簡單。下面是我很喜歡的一個網(wǎng)站例子。

　　這里收集的單頁網(wǎng)站非常值得關(guān)注，都是單頁面布局的優(yōu)秀作品。可以驗(yàn)證上面這些觀點(diǎn)，為設(shè)計師提供更多的幫助。這些網(wǎng)站使用不同的布局，你會發(fā)現(xiàn)各種各樣的不同的用戶界面技術(shù)。另外，請記得給個評論，讓我們知道您的想法。