進(jìn)入Mockplus團(tuán)隊后,我開始深入接觸設(shè)計。工作過程中,也會和用戶討論一些設(shè)計項目的問題。在和用戶交流過程中,我發(fā)現(xiàn),用戶的疑問不僅包含各種各樣的Mockplus使用問題,很多時候,在解決用戶疑問的同時,我也能感受到他們對于設(shè)計創(chuàng)意的缺乏。比如網(wǎng)頁項目的設(shè)計,可能數(shù)十個用戶的創(chuàng)意都如出一轍。
如何讓自己的網(wǎng)站設(shè)計與眾不同呢?你也許需要一些更多的靈感和技巧。
讓一個網(wǎng)站看起來酷炫,豐富,具有吸引力。你可以添加多種多樣的設(shè)計效果和技巧。而視差滾動效果則是其中一個很不錯的選擇。這里,Mockplus團(tuán)隊精心整理了 20 多個視差滾動網(wǎng)站設(shè)計,希望您在看完這些不錯的設(shè)計后,也可以使用Mockplus做出同樣創(chuàng)意滿滿的網(wǎng)頁視差原型設(shè)計。
視差滾動,英文為Parallax Scrolling,是指多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。網(wǎng)頁設(shè)計中的視差效果的最常見的一種,就是用戶在向下滾動頁面或跨頁面時可以創(chuàng)建3D滾動效果。視差設(shè)計如果做得好,將會大大提升用戶體驗,吸引更多的用戶。
接下來,我們一起看看這些優(yōu)秀的視差滾動網(wǎng)站設(shè)計吧。
Femme Fatale是一家專注于文化,奢侈品,社論和藝術(shù)的創(chuàng)意工作室。它包含了精彩的動畫互動頁面,可以很好的調(diào)動訪客的情緒。當(dāng)你向下滾動頁面時,頁面背景會伴隨頁面滾動條進(jìn)行切換,每個頁面的背景色各不相同,在頁面滾動切換時,頁面文本會以不同的速度載入,和頁面圖像等其他元素形成視差滾動。
Every Last Drop是一個展示生活用水場景的網(wǎng)站,旨在呼吁關(guān)注地球水資源,節(jié)約水資源。設(shè)計師以等比例分割頁面進(jìn)度條,當(dāng)你向下滾動頁面時,您會看到各種不同的生活場景里水資源是如何被消耗的,并且展示水資源使用的占比等數(shù)據(jù)。每個場景的切換都帶有動畫視差效果。在其“Universe”頁面還增加了3D視差滾動效果。
Beer Camp整個網(wǎng)站頁面劃分為 5 個頁面層,當(dāng)你滾動時會有一種“一鏡到底”的感覺。并且它的視差滾動效果非常與眾不同,它既不是水平也不是垂直的,而是一種平滑縮放的效果。當(dāng)你滾動頁面時,各個層都可以連貫地依次放大到頁面最前端。加上明亮的配色和粗放的版式,創(chuàng)造出一種驚人的空間感。
Porsche Volution完全可以看出設(shè)計師對汽車的熱愛以及對保時捷品牌的濃厚興趣。整個頁面設(shè)計以視差滾動照片的形式展示了保時捷的進(jìn)化,并且配有高雅的背景音樂,配色驚艷。屏幕左側(cè)有一個時間軸,向下滾動時,可以清晰的看到保時捷的進(jìn)化歷程。
Spokes Eclectic Pedicab Rides是一個提供停車和公共交通的即時解決方案的網(wǎng)站。這個網(wǎng)站號召綠色生活和經(jīng)濟生活,對以倡導(dǎo)騎車為中心的社區(qū)文化有極大的意義。該網(wǎng)站是漫畫風(fēng)格,滾動頁面時會以不同進(jìn)度載入頁面元素,具有豐富的視差效果。頂部導(dǎo)航欄的設(shè)計也是一個亮點。