起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)漂亮的視差效果，值得你用性能來換取嗎？
關(guān)于視差效果性能表現(xiàn)的小話題；弱問，各位見過的使用視差技術(shù)的Web頁面里，有多少能讓你覺得清晰順暢的感受不到任何負(fù)面體驗(yàn)？我印象里真的沒幾個(gè)，包括Medium里的；不知為什么，這些頁面總讓我覺得沒有安全感。本文篇幅雖短，但主旨很清晰——針對產(chǎn)品主要用戶群體的特征來選擇最合適的設(shè)計(jì)方案，別瞎跟風(fēng)。
這里進(jìn)入譯文。我(英文原文作者)最近在ThemeForest(模板站)逛了逛，發(fā)現(xiàn)幾乎所有的付費(fèi)模板都用到了視差技術(shù)。其中一款比較新的WordPress主題，Magnetto，在我的Retina Macbook Pro上看起來真的是華麗到家了。
只是，這款主題的演示頁面在我家的高速網(wǎng)絡(luò)連接上花了8.5秒才加載完畢。值得嗎？
用Pingdom測試這個(gè)頁面，報(bào)告顯示一共有31個(gè)JavaScript文件被加載，從幻燈片到谷歌地圖的腳本，應(yīng)有盡有。
如果所有人都有高速寬帶連接，這倒不會(huì)有多大問題，但是如果你的用戶通過3G訪問站點(diǎn)，那他們可要看上很長時(shí)間的菊花轉(zhuǎn)了。
我們在做自己公司站點(diǎn)的時(shí)候，針對是否要使用視差效果的問題爭論了很久。一開始，我們的設(shè)計(jì)師打造了一個(gè)基于jQuery和視差滾屏效果的炫酷方案，然后一位很棒的前端開發(fā)把頁面實(shí)現(xiàn)了出來。當(dāng)時(shí)，一辦公室的人都在交頭接耳：“太華麗了！”
接著，另外一位開發(fā)拿出他那擁有Verizon 4G網(wǎng)絡(luò)連接的iPhone5，說：“我們在手機(jī)上看看吧！”，然后打開Safari，小心翼翼的輸入U(xiǎn)RL，按下Go。所有人都安靜的圍在周圍。
1…2…3…4…5…6…
整整6秒之后，頁面才開始呈現(xiàn)出一些零零散散的元素，先是一些文字，然后是背景圖片；15秒之后，所有東西才加載完畢。
于是我們決定重新思考整個(gè)設(shè)計(jì)方案。
我們不能指望客戶等上15秒才能看到我們公司是否合他們口味。此外，那個(gè)“華麗”的頁面當(dāng)中的很多效果在IE8及之前版本的IE中也無法正常顯示。
通過視差效果盡情揮灑創(chuàng)意，這大概是很誘人的事，搞不好還能贏個(gè)“本月最佳站點(diǎn)”一類的。不過我們知道，每天都會(huì)用到我們網(wǎng)站的人并不是我們自己，他們并不是設(shè)計(jì)師或開發(fā)。現(xiàn)實(shí)是，那些用著IE7、老智能機(jī)和低速網(wǎng)絡(luò)連接的人，才是我們的潛在客戶。
所以我們最終決定使用老方法：簡單、快速、性感。
最終上線的版本用了最少量的jQuery，沒有華麗炫酷的效果，但全部加載只需1.6秒，兼容幾乎所有版本的IE，兼容所有跑著3G的破爛安卓手機(jī)。
自然，這個(gè)網(wǎng)站沒法獲得任何設(shè)計(jì)獎(jiǎng)項(xiàng)，但我們能保證，這個(gè)世界上任何有可能雇我們的人都能很好的訪問到它。
譯文代表原作者觀點(diǎn)。本站原創(chuàng)編譯文章，來自Be For Web
譯者信息: C7210 – UX玩家、交互設(shè)計(jì)師、曾經(jīng)的視覺與前端、貓奴、guitar fucker.
玫瑰從來不慌張。
評(píng)論
恩恩，是的，有時(shí)候確實(shí)要在視差效果和性能之間找到一個(gè)平衡點(diǎn)。