今天的手機(jī)的信號(hào)不好，打開一個(gè)網(wǎng)頁，竟然讓我等待了好幾分鐘，我都沒有關(guān)閉，一直都在等待，后來才明白一件事，網(wǎng)絡(luò)斷了……而在這個(gè)頁面停留這么長的時(shí)間一個(gè)重要原因，就是它不是空白的，也不是在轉(zhuǎn)圈圈，而是預(yù)選加載了一些，讓我停留一段時(shí)間之后，才知道斷網(wǎng)了!

今天我們就談?wù)劊W(wǎng)頁頁面加載設(shè)計(jì)，網(wǎng)頁加載設(shè)計(jì)，可能涉及到很多情況，而且經(jīng)?？梢?，包括我們打開網(wǎng)頁，網(wǎng)頁之間的轉(zhuǎn)化，以及離開網(wǎng)頁的時(shí)候，都會(huì)出現(xiàn)，站在用戶體驗(yàn)的角度來說，網(wǎng)站的加載設(shè)計(jì)有很多問道值得學(xué)習(xí)。

隨著5G時(shí)代的到來，網(wǎng)絡(luò)已經(jīng)變得更加快了，并且對(duì)于用戶電腦內(nèi)存而言，動(dòng)輒500G是太正常不過的事情，而網(wǎng)站設(shè)計(jì)中，經(jīng)常有這樣的說法， 不要在網(wǎng)站上加入太多的東西，以免影響用戶打開速度，這種過時(shí)的說法，有可能會(huì)讓一些精彩的設(shè)計(jì)被拒之門外。

所以，面對(duì)科技的日新月異，網(wǎng)站的加載設(shè)計(jì)通常也要在用戶體驗(yàn)上下足功夫。當(dāng)用戶打開一個(gè)網(wǎng)站到時(shí)候，我們?cè)撊绾伪硎緦?duì)用戶來到感到高興呢?也許絢麗的畫面，顯得熱鬧，是最好的表達(dá)方式，而當(dāng)用戶從一個(gè)頁面跳到另一頁面的時(shí)候，這個(gè)時(shí)候，就應(yīng)該去掉那些雜亂的東西，不要過多的干擾用戶;額用戶打算離開網(wǎng)站的時(shí)候，有的聰明的設(shè)計(jì)者，會(huì)在離開頁面上加載一些吸引人的資訊信息和圖片，以此表示對(duì)用戶最大的挽留。

顯然，如果網(wǎng)站頁面的設(shè)計(jì)，因?yàn)榫W(wǎng)速和上網(wǎng)設(shè)備的先進(jìn)性，我們可以在頁面加載中“植入”很多人工智能的想法，這樣的做的目的，一方面提升了用戶體驗(yàn)，讓用戶感受網(wǎng)站的誠意，另一個(gè)方面，最大可能的增加了網(wǎng)站用戶的留存率，停留時(shí)間，從而有利于網(wǎng)站權(quán)重的提升。

當(dāng)然，在網(wǎng)站頁面加載過程中，顯示的畫面是文字優(yōu)先還是圖片優(yōu)先呢?通常我們覺得一個(gè)網(wǎng)站速度比較慢的時(shí)候，文字是最先出現(xiàn)的，然后圖片先出現(xiàn)一個(gè)大框，接著一點(diǎn)一點(diǎn)全部出現(xiàn)。不過，也有研究表面，圖片最先出現(xiàn)，更能吸引用戶的眼球，那么，為了照顧用戶體驗(yàn)和網(wǎng)站具有的特性，我們可以采取按需加載來進(jìn)行設(shè)計(jì)。

具體而言，當(dāng)用戶打開網(wǎng)站的時(shí)候，可以優(yōu)先加載可見區(qū)域的內(nèi)容，延時(shí)加載不可見區(qū)域的內(nèi)容，為了避免頁面變形可以使用占位符，占位圖片來固定寬高。如jquery中的ImageLazyLoad等一些插件就可以很好的實(shí)現(xiàn)按需加載，只有當(dāng)用戶鼠標(biāo)向下滾動(dòng)式，下面得圖片才會(huì)加載。當(dāng)然也可以用原生的js來實(shí)現(xiàn)。

總之，隨著網(wǎng)速的加快，留給網(wǎng)站加載的時(shí)間越來越少了，甚至的有的網(wǎng)站會(huì)瞬間開啟，如果抓住用戶的容忍度，故意“延緩”網(wǎng)站的打開速度，就像某個(gè)新電影宣傳，先搞個(gè)短片推廣一下，這種嘗試也許冒一點(diǎn)風(fēng)險(xiǎn)，但未嘗不可能，因?yàn)樵贏PP中，我們已經(jīng)習(xí)慣了5秒廣告，網(wǎng)站也可以大膽的嘗試一下!