視差效果是番禺最流行的網(wǎng)頁設(shè)計(jì)趨勢之一。在這種滾動(dòng)動(dòng)畫特效的支持下，滾動(dòng)瀏覽時(shí)，前景的元素和背景會(huì)以不同的速度移動(dòng)，創(chuàng)造出動(dòng)態(tài)而獨(dú)特的視覺體驗(yàn)。

　　視覺差異化效果可以在大多數(shù)類型的網(wǎng)站中使用，是增強(qiáng)用戶參與度、提升用戶體驗(yàn)的有效手段之一。視差效果的優(yōu)點(diǎn)是不需要硬性應(yīng)用到每一頁。同時(shí)可以讓用戶更加關(guān)注網(wǎng)頁內(nèi)容，增強(qiáng)整體參與度。

　　視差效果為網(wǎng)頁中的元素提供了距離和深度。換句話說，它給了網(wǎng)頁近乎三維的視覺體驗(yàn)，也讓網(wǎng)頁有了近乎身臨其境的體驗(yàn)。

　　但是視差效果的缺陷很明顯，在移動(dòng)端也不一定好用。在視差效果的具體應(yīng)用中，有一些技巧和注意事項(xiàng)是不容錯(cuò)過的。在今天的文章中，我們總結(jié)了視差效果的五個(gè)技巧。

　　1.使用動(dòng)態(tài)效果顯示更改

　　設(shè)計(jì)人員可以使用視覺差異效果來顯示頁面中的變化。這些隨著滾動(dòng)不斷運(yùn)動(dòng)的元素，可以傳達(dá)時(shí)間、空間、位置之間的關(guān)系。

　　視差效果與網(wǎng)站內(nèi)容配合使用時(shí)，最能顯示變化。

　　在上面的保時(shí)捷進(jìn)化網(wǎng)站中，不同時(shí)代的保時(shí)捷車型隨著時(shí)間的變化而展示，背景圖片和場景也在變化。如果你仔細(xì)聽，你會(huì)發(fā)現(xiàn)音樂會(huì)隨著時(shí)代的變化而演變。

　　這種設(shè)計(jì)技巧會(huì)驅(qū)使用戶滾動(dòng)瀏覽，因?yàn)槿藗兿肟纯唇酉聛頃?huì)發(fā)生什么變化。有了這個(gè)視差滾動(dòng)時(shí)間軸，用戶可以從上到下瀏覽，也很有意思。

　　Sonance中的視差顯示了另一個(gè)變化，頁面中元素的位置發(fā)生了變化。視差效果已經(jīng)成為網(wǎng)站導(dǎo)航模式的一部分。當(dāng)用戶瀏覽時(shí)，視差效果會(huì)告訴用戶他們在哪里。

　　2.鼓勵(lì)用戶滾動(dòng)瀏覽

　　視差效果有利于交互，很大程度上是因?yàn)樗膭?lì)用戶持續(xù)滾動(dòng)頁面，讓用戶持續(xù)參與交互。

　　很多使用視差滾動(dòng)的網(wǎng)頁會(huì)直接在首頁說“滾動(dòng)”，或者使用閃爍的光標(biāo)來吸引用戶的注意力，鼓勵(lì)用戶滾動(dòng)?！缎惺呷饨┦返氖醉?，有這樣的引導(dǎo)信息。

　　與其他帶有視差滾動(dòng)的網(wǎng)頁設(shè)計(jì)不同，《行尸走肉》的頁面布局是水平的。用戶滾動(dòng)頁面時(shí)，人物會(huì)滾動(dòng)不同的場景，劇情也會(huì)相應(yīng)發(fā)展，挺有意思的。3.運(yùn)動(dòng)和色彩

　　應(yīng)用視差效果的方法有很多，其中最有趣的一種方法是將不同內(nèi)容的顏色結(jié)合起來，以顯示不同的項(xiàng)目和元素。變色和動(dòng)畫結(jié)合在一起，通過交互觸發(fā)，產(chǎn)生全新的體驗(yàn)。

　　色彩是最有吸引力的設(shè)計(jì)工具，它在吸引用戶注意力方面的效果非常明顯。

　　上面的Werkstatt網(wǎng)頁使用白色背景和灰色輪廓來勾勒不同的項(xiàng)目部分。當(dāng)光標(biāo)懸停在不同的項(xiàng)目上時(shí)，該部分中的項(xiàng)目圖片將顯示為彩色。這種組合效果并不復(fù)雜，但是非常有效，鼓勵(lì)用戶與單個(gè)項(xiàng)目進(jìn)行交互。

　　露易絲牛仔褲用的是另一種搭配方式。設(shè)計(jì)師使用不同的顏色來突出不同的活動(dòng)和不同的主題。當(dāng)頁面滾動(dòng)時(shí)，背景的顏色會(huì)發(fā)生變化，與前景滾動(dòng)的圖片相匹配。

　　4.使信息更容易消化

　　視差效果還可以幫助設(shè)計(jì)師將更復(fù)雜的信息或大塊信息分割成小塊，更容易閱讀和消化。當(dāng)您設(shè)計(jì)隨頁面移動(dòng)的文本元素時(shí)，視差效果的這一特性非常有用。但是在實(shí)際操作中，需要仔細(xì)考慮內(nèi)容的載體。

　　以上兩個(gè)網(wǎng)頁都采用了這種設(shè)計(jì)理念，只是應(yīng)用方式略有不同。

　　梅勒妮大衛(wèi)的個(gè)人頁面采用單頁設(shè)計(jì)。她用一半的頁面作為導(dǎo)航。當(dāng)您滾動(dòng)時(shí)，頁面的一側(cè)不移動(dòng)，而另一側(cè)正常滾動(dòng)。當(dāng)你讀完，自然會(huì)切換到下一個(gè)內(nèi)容塊。

　　在Le  Duc  Restaurant的網(wǎng)站上，設(shè)計(jì)師根據(jù)你的閱讀習(xí)慣和點(diǎn)餐方式，將菜單分成單獨(dú)的塊。動(dòng)畫很簡單，背景中的魚起到了很好的裝飾作用。用戶在瀏覽時(shí)可以更好的了解點(diǎn)菜的信息。

　　5.創(chuàng)造視覺奇跡

　　視差效果最重要的用途之一是創(chuàng)造獨(dú)特而逼真的視覺奇觀。設(shè)計(jì)師通過合理的材料搭配、動(dòng)態(tài)效果和不同的設(shè)計(jì)技巧，創(chuàng)造出生動(dòng)有趣的視覺體驗(yàn)。

　　越來越成熟的3D設(shè)計(jì)，使得接近現(xiàn)實(shí)的動(dòng)漫和設(shè)計(jì)元素的設(shè)計(jì)成本更低。和上面的Madwell一樣，這些風(fēng)格接近漫畫，但視覺效果和形式感極其突出的元素，在視覺差異效應(yīng)下產(chǎn)生了類似VR的視覺體驗(yàn)。

　　西雅圖太空針的視差效果是比較經(jīng)典的設(shè)計(jì)。當(dāng)用戶瀏覽時(shí)，由于元素之間的移動(dòng)速度不同，會(huì)有一種偽真實(shí)的瀏覽體驗(yàn)。不過這個(gè)網(wǎng)站的獨(dú)特之處在于從下往上瀏覽，很有意思。當(dāng)用戶通過網(wǎng)站的不同區(qū)塊到達(dá)頂部的餐廳區(qū)域時(shí)，會(huì)覺得餐廳位置很高，城市的天際線與CTA元素相結(jié)合，讓你不會(huì)錯(cuò)過關(guān)鍵信息。這個(gè)設(shè)計(jì)有教育意義，也有風(fēng)險(xiǎn)，但卻創(chuàng)造了前所未有的體驗(yàn)，令人難忘。標(biāo)簽

　　視差效果確實(shí)時(shí)尚有趣，但正如我們在評價(jià)設(shè)計(jì)趨勢時(shí)多次說過的，并不一定適合每一個(gè)項(xiàng)目。當(dāng)你在構(gòu)思網(wǎng)站設(shè)計(jì)的時(shí)候，你要提前了解你的用戶和他們的喜好，通過小規(guī)模的測試和跟蹤分析，知道你的策略是否有效。當(dāng)你發(fā)現(xiàn)視差效果很好的時(shí)候，嗯，不妨用它做點(diǎn)有意思的事情。