2015年是一個(gè)網(wǎng)站設(shè)計(jì)行業(yè)的迅猛發(fā)展的時(shí)代，自從HTML5技術(shù)誕生后，這幾年來(lái)幾乎是一直有股十分狂熱的浪潮地影響這網(wǎng)站建設(shè)行業(yè)，但直至今年，建站行業(yè)才真正有了質(zhì)的飛躍。 目前來(lái)講，在技術(shù)上，幾乎所有的新制作的網(wǎng)站都已經(jīng)趨向于用HTML5來(lái)構(gòu)建了，而在設(shè)計(jì)上，為了配合html5的展示，網(wǎng)頁(yè)設(shè)計(jì)的效果也變化很大。扁平化、單頁(yè)滾動(dòng)等等設(shè)計(jì)理念都非常火爆。以前人們總希望把網(wǎng)站建成非常多的頁(yè)面，一是利于搜索引擎收錄，二是那樣看起來(lái)網(wǎng)站更豐富。但這些，在2015年設(shè)計(jì)新浪潮里，統(tǒng)統(tǒng)被甩掉了，現(xiàn)在的設(shè)計(jì)，更喜歡用單頁(yè)滾動(dòng)式的手法來(lái)做，現(xiàn)在，用戶(hù)只需輕輕滾動(dòng)鼠標(biāo)滑輪，就可以瀏覽所有內(nèi)容了。
如此一來(lái)，全新設(shè)定下的長(zhǎng)滾動(dòng)頁(yè)面的設(shè)計(jì)似乎擁有了更多的可能性，不拘一格的設(shè)計(jì)手法可以令長(zhǎng)滾動(dòng)頁(yè)面煥發(fā)出不同凡響的生命力。今天我們搜集了20個(gè)獨(dú)具匠心的單頁(yè)滾動(dòng)頁(yè)面，它們?cè)陧?yè)面布局、導(dǎo)航設(shè)計(jì)上另辟蹊徑。如果你正在尋找設(shè)計(jì)精巧而走心的網(wǎng)頁(yè)，那么這次的案例會(huì)讓你眼前一亮。
We Are Top Secret
We are top secret 在導(dǎo)航設(shè)計(jì)上還是蠻溫和的，設(shè)計(jì)師并沒(méi)有采用醒目的向下滾動(dòng)箭頭提醒，也沒(méi)有顯著的滾動(dòng)特效，僅僅在底部用一個(gè)小巧的“Scroll down”提示訪客，并且融入度極高。
Fixed Group
Fixed Group 的頁(yè)面設(shè)計(jì)極為炫酷，導(dǎo)航欄被隱藏在左上角的漢堡圖標(biāo)中。為了引導(dǎo)用戶(hù)向下滾動(dòng)，設(shè)計(jì)師在頁(yè)面的底部放置了一個(gè)超窄的箭頭，看起來(lái)非常有趣。頁(yè)面中輕微的折疊效果也在“引誘”用戶(hù)滾動(dòng)頁(yè)面。
Giampiero Bodino
這個(gè)網(wǎng)頁(yè)在用戶(hù)體驗(yàn)上也做的非常突出，對(duì)觸摸屏設(shè)備的兼容尤其不錯(cuò)。設(shè)計(jì)師突出了頁(yè)面托拽瀏覽的特征，可以縱向滾動(dòng)也可以橫向滾動(dòng)。
Lois Jeans
Lois Jeans的頁(yè)面設(shè)計(jì)清新而充滿(mǎn)活力，巧用撞色并通過(guò)錯(cuò)落的文字營(yíng)造亂中有序的美感。常駐于頂部的導(dǎo)航欄便于用戶(hù)定位，設(shè)計(jì)師并未使用單頁(yè)中常見(jiàn)的翻頁(yè)提示。
Think Less Love More
Think Less Love More 是一個(gè)比較先鋒的網(wǎng)頁(yè)項(xiàng)目，其中極具特色的交互是它的重要特征。它并未使用常見(jiàn)的橫向或者縱向滾動(dòng)，而是要進(jìn)到“里面”去。探索的時(shí)候，你需要點(diǎn)擊放大或者縮小的按鈕，用鼠標(biāo)滾輪或者手指都可以輕松操作。
Weltrade
Weltrade 營(yíng)造了華麗而晦暗的場(chǎng)景，作為一個(gè)著陸頁(yè)，無(wú)論是桌面端還是觸摸屏都可以輕松操作，不過(guò)頁(yè)面中散落的菱形按鈕，最好的操作介質(zhì)還是手指。
The Boat
許多網(wǎng)站要講述故事的時(shí)候，喜歡采用精致的插畫(huà)來(lái)強(qiáng)化用戶(hù)體驗(yàn)，而這個(gè)頁(yè)面也正是如此做的。向下滾動(dòng)是最簡(jiǎn)單也是最直覺(jué)的交互方式，所以這個(gè)頁(yè)面沒(méi)有翻頁(yè)指示。
Well Storied
Well Storied 采用了大量的圓形控件來(lái)提升導(dǎo)航的交互性，這類(lèi)非常規(guī)的頁(yè)面設(shè)計(jì)常常會(huì)給用戶(hù)留下極為深刻的印象。
Urban Walks
盡管Urban Walks 采用了常見(jiàn)的單頁(yè)設(shè)計(jì)方式，用右側(cè)的小圓點(diǎn)來(lái)作為翻頁(yè)指示，但是整體的配色和細(xì)節(jié)設(shè)計(jì)非常到位，堪稱(chēng)教科書(shū)式的網(wǎng)頁(yè)設(shè)計(jì)。
House of Borel
House of Borel 的設(shè)計(jì)真的是簡(jiǎn)單到極致了，能省略視覺(jué)元素都被設(shè)計(jì)師移除了，甚至包括導(dǎo)航。整個(gè)著陸頁(yè)就只有一個(gè)標(biāo)題，幾個(gè)按鈕和一組動(dòng)效。而最后這個(gè)部分，需要你使用鼠標(biāo)或者手指與之進(jìn)行交互。
Melanie F Lookbook
這個(gè)街拍風(fēng)格指南網(wǎng)站擁有相當(dāng)不錯(cuò)的交互動(dòng)畫(huà)，你可以選擇自動(dòng)滾動(dòng)也可以手動(dòng)控制滾動(dòng)速度，然后點(diǎn)擊十字標(biāo)識(shí)來(lái)查看產(chǎn)品的圖片，價(jià)格，搭配，如果你喜歡，可以立刻點(diǎn)擊購(gòu)買(mǎi)。
La Region des Musees
背景圖片是整個(gè)網(wǎng)頁(yè)最具有視覺(jué)沖擊力的部分，有趣的是頁(yè)面的菜單設(shè)計(jì)，它正好處于整個(gè)頁(yè)面的頂部，棱角分明的字體還帶有明顯的裝飾性。
Giacomorelli
Giacomorelli 的頁(yè)面為你提供了十分有趣且難以忘懷的用戶(hù)體驗(yàn)，當(dāng)然，如果你在平板上瀏覽可以更好的感受到它的特色。
Born
這個(gè)并不是傳統(tǒng)意義上的長(zhǎng)滾動(dòng)單頁(yè)，不過(guò)頁(yè)面的展示性極強(qiáng)，每個(gè)項(xiàng)目都擁有一個(gè)極具視覺(jué)沖擊力的大圖。點(diǎn)擊查看每個(gè)項(xiàng)目的時(shí)候，你會(huì)看到一個(gè)閃動(dòng)的字母O，和Born中的第二個(gè)字母對(duì)應(yīng)。
Nothing but Thieves
黑暗系的設(shè)計(jì)總是這么迷人。向下滾動(dòng)就可以發(fā)現(xiàn)設(shè)計(jì)者想要展現(xiàn)的東西。
Planetary Scientist
典型的單頁(yè)設(shè)計(jì)，點(diǎn)擊右側(cè)的小圓環(huán)同樣可以操作，但是遠(yuǎn)沒(méi)有鼠標(biāo)滾輪或者手指滑動(dòng)來(lái)的暢快。這個(gè)頁(yè)面的風(fēng)格頗為文藝，配色微妙而值得學(xué)習(xí)。
Shaker Brand
為了不讓用戶(hù)迷惑，設(shè)計(jì)師還是添加了一個(gè)小小的箭頭來(lái)指示方向，但是也僅止于此。簡(jiǎn)單直接，你需要做的就是向下滾動(dòng)到底，看看設(shè)計(jì)團(tuán)隊(duì)到底為你準(zhǔn)備了一個(gè)什么樣的東西。
Relatos Salvajes
設(shè)計(jì)師精心設(shè)計(jì)的頁(yè)面承載著內(nèi)涵豐富的故事，吸引著訪客去探索。沒(méi)有明顯的控制中心和菜單一類(lèi)的設(shè)計(jì)，你可以充分享受瀏覽故事的有趣旅程。
Brice Darmon
這個(gè)頁(yè)面是設(shè)計(jì)師Drice Darmon 的作品展示頁(yè)，當(dāng)你滾動(dòng)頁(yè)面的時(shí)候會(huì)發(fā)現(xiàn)各個(gè)元素的運(yùn)動(dòng)都富有物理慣性，配合著輕微的視差設(shè)計(jì)，整個(gè)頁(yè)面簡(jiǎn)單而有質(zhì)感。
Little Big Room
Little Big Room 頁(yè)面使用的是視差滾動(dòng)設(shè)計(jì)，只不過(guò)滾動(dòng)方向是橫向的。設(shè)計(jì)師并沒(méi)有采用常規(guī)的滾動(dòng)條來(lái)提示位置，而是用了一個(gè)圓圈來(lái)標(biāo)識(shí)進(jìn)度。
看了這么多的精彩案例，你是否也希望擁有一個(gè)自己的單頁(yè)滾動(dòng)式網(wǎng)站呢，那么立即聯(lián)系深圳市星翼創(chuàng)想網(wǎng)絡(luò)科技有限公司的建站客服，提交你的建站需求，索取網(wǎng)站方案吧! 建站客服QQ：1207104362
文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://aberdeenanguscattle.com/news/solutions/1507.html
上一篇：計(jì)算機(jī)牛人為你圖解：url與網(wǎng)站背后的關(guān)系
下一篇：網(wǎng)站導(dǎo)航設(shè)計(jì)很重要，跟著2015新趨勢(shì)學(xué)設(shè)計(jì)
