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

發表於2015-10-24

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

另外非常值得注意的一點是,即使導航設計足夠隱蔽,使用者也不會在頁面間迷失,他們比我們設計時所設定的“普通使用者”要聰明太多。網頁出現的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 頁面使用的是視差滾動設計,只不過滾動方向是橫向的。設計師並沒有採用常規的滾動條來提示位置,而是用了一個圓圈來標識進度。

相關文章