進入Mockplus團隊后，我開始進入設計階段。在工作過程中，還將與用戶討論一些設計項目問題。在與用戶溝通的過程中，我發(fā)現(xiàn)用戶的問題不僅包括各種Mockplus使用問題，而且還多次，在解決用戶問題的同時，我也可以感受到他們?nèi)狈υO計思路。例如，對于數(shù)十個用戶來說，Web項目的設計可能是相同的。

如何使您的網(wǎng)站設計與眾不同？你可能需要更多的靈感和技巧。

使網(wǎng)站看起來很酷，豐富和有吸引力。您可以添加各種設計效果和技巧。視差滾動效果是最佳選擇之一。在這里，Mockplus團隊精心組織了20多個視差滾動網(wǎng)站設計。我希望在閱讀這些好的設計之后，您還可以使用Mockplus制作相同的創(chuàng)意網(wǎng)頁視差原型。

首先，什么是視差滾動設計？

視差滾動，Parallax Scrolling的英語，意味著多層背景以不同的速度移動以形成三維運動效果，從而帶來非常好的視覺體驗。網(wǎng)頁設計中最常見的視差效果之一是用戶可以在向下滾動頁面或跨頁面時創(chuàng)建3D滾動效果。如果視差設計做得好，它將極大地增強用戶體驗并吸引更多用戶。

接下來，讓我們來看看這些優(yōu)秀的視差滾動網(wǎng)站設計。

1. Femme Fatale

Femme Fatale是一家致力于文化，奢侈，社論和藝術的創(chuàng)意工作室。它包含一個精彩的動畫互動頁面，喚起訪客的心情。向下滾動頁面時，頁面背景將與頁面滾動條切換。每頁的背景顏色不同。當頁面滾動時，頁面文本將以不同的速度加載，以及其他元素，例如頁面圖像。形成視差滾動。

2.每一個最后一滴

Every Last Drop是一個展示生命用水的網(wǎng)站，旨在引起人們對地球水資源的關注并節(jié)約用水。設計者以相等的比例劃分頁面進度條。當您向下滾動頁面時，您將看到在各種生活場景中如何消耗水并顯示用水百分比。使用動畫視差效果切換每個場景。 3D視差滾動效果也已添加到其“Universe”頁面。

3.啤酒營

Beer Camp的整個網(wǎng)頁分為5個頁面層，當你滾動時，會有一種“鏡子到底”的感覺。而且它的視差滾動效果非常不同，既不是水平也不是垂直，而是平滑的縮放效果。滾動頁面時，每個圖層可以連續(xù)放大到頁面的前面。添加明亮的配色方案和廣泛的布局，營造出令人驚嘆的空間感。

4.保時捷革命

保時捷Volution充分體現(xiàn)了設計師對汽車的熱愛以及對保時捷品牌的濃厚興趣。整個頁面設計以視差滾動照片的形式展示了保時捷的發(fā)展，優(yōu)雅的背景音樂和令人驚嘆的配色方案。屏幕左側(cè)有一個時間線，當您向下滾動時，您可以清楚地看到保時捷的演變。

5.發(fā)言

Spokes Eclectic Pedicab Rides是一個為停車和公共交通提供即時解決方案的網(wǎng)站。該網(wǎng)站呼吁綠色生活和經(jīng)濟生活，對以自行車為中心的社區(qū)文化具有重要意義。該網(wǎng)站是漫畫風格，頁面元素在頁面滾動時在不同階段加載，具有豐富的視差效果。頂部導航欄的設計也是一個亮點。

6.熱點

熱點和上面的視差示例不同，它是水平視差滾動。頁面從左向右前進，具有平滑的3D視差效果，頁面元素和純黑色背景很好地匹配。該網(wǎng)站也是移動優(yōu)先設計的一個很好的例子。頁面底部有一個可點擊的CTA，便于訪問。

7. Hobolobo

這也是一個水平視差滾動效果網(wǎng)站，但它的不同之處在于它更適合于觸摸設備。但是當您滑動觸摸板時，頁面會從左向右移動，以講故事的方式呈現(xiàn)故事。頁面頂部欄上有一個頁面列表，隨頁面一起滑動以顯示您當前的位置。這個網(wǎng)站完全是漫畫，最令人驚奇的是它的3D視差效果。

8. Firewatch

Firewatch是荒野探險的設計地點。該網(wǎng)站有六個移動圖層，顯示頁面的豐富性和深度。它的視差效果僅用于第一頁。當頁面滾動時，元素向上推，創(chuàng)建一個3D效果，讓我想起《獅子王》中的經(jīng)典鏡頭。其他頁面是平滑的靜態(tài)頁面，允許用戶讀取大量的文本信息。

9. Nizo App

這絕對是我最喜歡的視差網(wǎng)站之一。當滾動鼠標時，所有UI元素以特定的不同節(jié)奏聚集在頁面的中心以形成印刷整體。當鼠標向后滾動時，所有元素都與中心分離，圖像生動活潑。整個頁面干凈簡潔，背景純實，文字粗體。

10.標致

這是一個很酷的網(wǎng)站，滾動鼠標時，你會輸入一個精彩的故事。它以視差滾動方式自動播放漫畫故事，并根據(jù)故事情節(jié)水平或垂直顯示視差效果。

11. Bunkai

這是一個日本網(wǎng)站。向下滾動時，有一個可愛的卡通女孩在頁面上移動，頁面根據(jù)女孩的位置加載不同的信息。視差滾動效果在最后一個屏幕結(jié)束，因此您可以閱讀所有信息而不會頭暈。

12.梅蘭妮·戴維德

Melanie Daveid將為您帶來數(shù)字世界的精彩體驗。精致的細節(jié)和品牌指南使其視覺上令人驚嘆。滾動時，頁面分為兩部分，左頁面仍然是，右側(cè)繼續(xù)滾動，形成視差。

13.船

這也是一種講故事的方式來展示網(wǎng)站的視差設計。這艘船有六章。每章都展示了視差幻燈片中的不同場景。移動視差層還有助于營造深度感。我個人喜歡這個草圖樣式頁面元素。

14. Dave Gamache

視差滾動網(wǎng)站使用純黑色背景。向下滾動鼠標時，界面右側(cè)有一個UI元素。此外，當您滾動頁面時，有一個手機會有節(jié)奏地旋轉(zhuǎn)。

15.組裝

Assemble是一個免費的在線投資組合網(wǎng)站，您可以在其中創(chuàng)建出色的收藏主頁有18個漂亮的主題可供選擇。這些主題以網(wǎng)格結(jié)構(gòu)排列。向下滾動時，每個主題將按順序顯示，并略有跳動負載。

16.行尸走肉

這個網(wǎng)站非常有創(chuàng)意，以一種視差滾動的方式講述了一個驚心動魄的迷你僵尸電視節(jié)目。向下滾動，您將看到僵尸如何走進另一個場景。整個故事通過水平視差滾動自動播放。里面的動畫非常棒，背景音樂營造出一種令人毛骨悚然的氛圍。

17. Seymour Powel

該網(wǎng)站的設計師是一個多學科的設計研究團隊，由戰(zhàn)略家，品牌專家，產(chǎn)品經(jīng)理，用戶體驗師，用戶界面設計師和制造商組成。該站點具有不同的層以增加界面的深度并使用平滑的滾動視差效果。它更接近保時捷Volution的設計，但配色方案并不那么大膽。

18. Youandigraphics

該網(wǎng)站是您完全將設計理念變?yōu)楝F(xiàn)實的地方。設計師Irene DemetriI熱衷于為各種類型和規(guī)模的大型和小型項目創(chuàng)建美觀，直觀的響應式網(wǎng)站。這個網(wǎng)站的視差不那么強烈。單擊該按鈕時，不同的元素將以相反的方向移動，從而創(chuàng)建一個簡單的視差。

19. Bagigia

想象一下冬天喝熱水瓶的感覺如何？這是Bagigia設計師的靈感來源，創(chuàng)建了一個關于熱水瓶展示的網(wǎng)站。當您向下滾動時，頁面的第一頁將像窗簾一樣上升并切換到可愛的熱水瓶頁面。該網(wǎng)站的視差效果也集中在第一頁。另外，滾動時，底部有一個“拉鏈”進度條，從左向右移動，非常生動。

20. Anton&Irene

我真的很喜歡這個網(wǎng)站的配色方案，溫暖干凈的界面。 Anton和Irene的故鄉(xiāng)穿著五顏六色的衣服看起來很酷。向下滾動時，它們退后一步，頁面加載文本消息。大膽的字體和整體色彩營造出精彩的視覺體驗。如果你把鼠標放在Anton&Iren身上，你可以看到他們的臉或鼻子。

21.普岑格爾

向下滾動鼠標時，在視差滾動中連續(xù)顯示6頁。每一頁都是我們?nèi)粘Ｉ钪星鍧嵉膱鼍?。頁面動畫非常好，特別是垃圾自動進入垃圾桶的動畫，這是發(fā)人深省的。

22.貝克特

本網(wǎng)站是您創(chuàng)意設計的不錯選擇。這是一個德國網(wǎng)站，但可以用多種語言切換。使用視差滾動增加網(wǎng)頁插圖的豐富性。但個人覺得這個網(wǎng)站的元素有點亂。

23.失落的世界博覽會

這不是一個非常典型的視差滾動效果網(wǎng)站。滾動鼠標時，會有一個卡通人物進入神秘的管道。管道上有無數(shù)的窗口，允許角色在頁面滾動時看到不同的場景。這個網(wǎng)站仍然有點有趣，看到這個角色經(jīng)歷所有場景并最終到達目的地很有趣。

這些是由Mockplus團隊組織的視差滾動網(wǎng)站設計的一些示例。我不知道它對你有幫助嗎？不要忘記使用Mockplus進行網(wǎng)絡視差原型設計。

« 同樣是“社區(qū)營銷”為什么有人制造“粉絲經(jīng)濟”有人制定了金字塔計劃？ | 按照這10個趨勢，在2018年創(chuàng)建一個偉大的網(wǎng)頁 »