20個精巧走心的單頁滾動網頁設計案例

 　　單頁滾動 也算是目前網頁設計 中一個獨立的類別了，導航、菜單等網頁元素的設計也有一套獨特的手法。極簡風的導航欄設計其實算不上太多，畢竟導航欄的部分應該是包羅萬象並且常駐頁面的。而漢堡菜單的存在讓導航具備了更優秀的隱藏性，擺脫了滾動條、分頁和復雜的下拉框，讓頁面更整潔，為視覺設計留下更大的空間，留住了用戶。

　　另外非常值得注意的一點是，即使導航設計足夠隱蔽，用戶也不會在頁面間迷失，他們比我們設計時所設定的“普通用戶”要聰明太多。網頁出現的20多年來，大家已經習慣了自上而下的浏覽，在沒有額外的標志提醒和導航存在的情況下，用戶也會下意識向下滾動，這也是單頁設計 和無導航設計出現的重要先決條件。開發者充分利用單頁和視差的特征，讓頁面更加生動自然，也更符合觸摸屏設備。聰明的設計師們將移動端不易於交互的元素去除之後，頁面設計更加統一，兼容性更強。

　　如此一來，全新設定下的長滾動頁面的設計似乎擁有了更多的可能性，不拘一格的設計手法可以令長滾動頁面煥發出不同凡響的生命力。今天我們搜集了20個獨具匠心的單頁滾動 頁面，它們在頁面布局、導航設計上另辟蹊徑。如果你正在尋找設計精巧而走心的網頁，那麼這次的案例會讓你眼前一亮。

　　We Are Top Secret

　　We are top secret 在導航設計上還是蠻溫和的，設計師並沒有采用醒目的向下滾動箭頭提醒，也沒有顯著的滾動特效，僅僅在底部用一個小巧的“Scroll down”提示訪客，並且融入度極高。

　　Fixed Group

　　Fixed Group 的頁面設計極為炫酷，導航欄被隱藏在左上角的漢堡圖標中。為了引導用戶向下滾動，設計師在頁面的底部放置了一個超窄的箭頭，看起來非常有趣。頁面中輕微的折疊效果也在“引誘”用戶滾動頁面。

　　Giampiero Bodino

　　這個網頁在用戶體驗上也做的非常突出，對觸摸屏設備的兼容尤其不錯。設計師突出了頁面托拽浏覽的特征，可以縱向滾動也可以橫向滾動。

　　Lois Jeans

　　Lois Jeans的頁面設計清新而充滿活力，巧用撞色並通過錯落的文字營造亂中有序的美感。常駐於頂部的導航欄便於用戶定位，設計師並未使用單頁中常見的翻頁提示。

　　Think Less Love More

　　Think Less Love More 是一個比較先鋒的網頁項目，其中極具特色的交互是它的重要特征。它並未使用常見的橫向或者縱向滾動，而是要進到“裡面”去。探索的時候，你需要點擊放大或者縮小的按鈕，用鼠標滾輪或者手指都可以輕松操作。

　　Weltrade

　　Weltrade 營造了華麗而晦暗的場景，作為一個著陸頁，無論是桌面端還是觸摸屏都可以輕松操作，不過頁面中散落的菱形按鈕，最好的操作介質還是手指。

　　The Boat

　　許多網站要講述故事的時候，喜歡采用精致的插畫來強化用戶體驗，而這個頁面也正是如此做的。向下滾動是最簡單也是最直覺的交互方式，所以這個頁面沒有翻頁指示。

　　Well Storied

　　Well Storied 采用了大量的圓形控件來提升導航的交互性，這類非常規的頁面設計常常會給用戶留下極為深刻的印象。

　　Urban Walks

　　盡管Urban Walks 采用了常見的單頁設計 方式，用右側的小圓點來作為翻頁指示，但是整體的配色和細節設計非常到位，堪稱教科書式的網頁設計 。

　　House of Borel

　　House of Borel 的設計真的是簡單到極致了，能省略視覺元素都被設計師移除了，甚至包括導航。整個著陸頁就只有一個標題，幾個按鈕和一組動效。而最後這個部分，需要你使用鼠標或者手指與之進行交互。

　　Melanie F Lookbook

　　這個街拍風格指南網站擁有相當不錯的交互動畫，你可以選擇自動滾動也可以手動控制滾動速度，然後點擊十字標識來查看產品的圖片，價格，搭配，如果你喜歡，可以立刻點擊購買。

　　La Region des Musees

　　背景圖片是整個網頁最具有視覺沖擊力的部分，有趣的是頁面的菜單設計，它正好處於整個頁面的頂部，稜角分明的字體還帶有明顯的裝飾性。

　　Giacomorelli

　　Giacomorelli 的頁面為你提供了十分有趣且難以忘懷的用戶體驗，當然，如果你在平板上浏覽可以更好的感受到它的特色。

　　Born

　　這個並不是傳統意義上的長滾動單頁，不過頁面的展示性極強，每個項目都擁有一個極具視覺沖擊力的大圖。點擊查看每個項目的時候，你會看到一個閃動的字母O，和Born中的第二個字母對應。

　　Nothing but Thieves

　　黑暗系的設計總是這麼迷人。向下滾動就可以發現設計者想要展現的東西。

　　Planetary Scientist

　　典型的單頁設計，點擊右側的小圓環同樣可以操作，但是遠沒有鼠標滾輪或者手指滑動來的暢快。這個頁面的風格頗為文藝，配色微妙而值得學習。

　　Shaker Brand

　　為了不讓用戶迷惑，設計師還是添加了一個小小的箭頭來指示方向，但是也僅止於此。簡單直接，你需要做的就是向下滾動到底，看看設計團隊到底為你准備了一個什麼樣的東西。

　　Relatos Salvajes

　　設計師精心設計的頁面承載著內涵豐富的故事，吸引著訪客去探索。沒有明顯的控制中心和菜單一類的設計，你可以充分享受浏覽故事的有趣旅程。

　　Brice Darmon

　　這個頁面是設計師Drice Darmon 的作品展示頁，當你滾動頁面的時候會發現各個元素的運動都富有物理慣性，配合著輕微的視差設計，整個頁面簡單而有質感。

　　Little Big Room

　　Little Big Room 頁面使用的是視差滾動 設計，只不過滾動方向是橫向的。設計師並沒有采用常規的滾動條來提示位置，而是用了一個圓圈來標識進度。