基于Web前端開發(fā)技術(shù)的視覺效果研究

莊麗君

（廣東白云學(xué)院 廣東省廣州市 510450）

1 Web前端開發(fā)技術(shù)

1.1 概念

Web前端開發(fā)技術(shù)有HTML、CSS和JavaScript三種主要語言[1]。在網(wǎng)頁設(shè)計中不同的技術(shù)形式能夠發(fā)揮出不同的設(shè)計效果，將網(wǎng)站頁面中的文字、圖像等整合成一個整體，直接展現(xiàn)出網(wǎng)站設(shè)計的特點(diǎn)與水平。HTML5技術(shù)是在傳統(tǒng)的HTML技術(shù)上總結(jié)和提升出來的技術(shù)形式之一，增加了強(qiáng)大的繪圖功能，能夠呈現(xiàn)出良好的視覺效果。CSS技術(shù)能夠?qū)W(wǎng)站頁面中的層疊部分進(jìn)行修飾，在網(wǎng)頁排版中具有良好作用，能夠豐富設(shè)計界面的層次。JavaScript是一種用于網(wǎng)頁開發(fā)的高級腳本語言，能夠增加HTML頁面的交互性，為用戶瀏覽網(wǎng)頁提供美觀的視覺效果。

1.2 發(fā)展歷程

隨著互聯(lián)網(wǎng)、移動終端的使用和普及，推動了大數(shù)據(jù)等新技術(shù)的引入和發(fā)展，5G網(wǎng)絡(luò)也隨之同步到來。與此同時，人工智能、大數(shù)據(jù)、云計算等互聯(lián)網(wǎng)技術(shù)的不斷成熟融合和應(yīng)用的發(fā)展也極大地加快了整個移動網(wǎng)絡(luò)的前進(jìn)[2]。更為關(guān)鍵的一點(diǎn)是，借助互聯(lián)網(wǎng)的廣闊平臺，移動終端的功能性、實(shí)用性也逐漸增加，能夠跨越時間和空間的限制，實(shí)現(xiàn)用戶信息傳輸和交流，且能夠通過防火墻等不同形式保證用戶信息傳遞的安全性、靈活性。用戶對于網(wǎng)絡(luò)信息的需求量、熟悉程度也在不斷轉(zhuǎn)化和提升，希望能夠通過網(wǎng)頁瀏覽尋求更多有效信息。用戶需求變化也為互聯(lián)網(wǎng)發(fā)展、網(wǎng)頁設(shè)計提出了更多要求。

與此同時，HTML5技術(shù)的產(chǎn)生和發(fā)展也大大促進(jìn)了互聯(lián)網(wǎng)網(wǎng)頁設(shè)計質(zhì)量優(yōu)化。這種技術(shù)與傳統(tǒng)的Web技術(shù)之間具有較大差異，HTML5既包含著原有Web設(shè)計理念中的優(yōu)秀內(nèi)容和形式，能夠直接將設(shè)計作品引進(jìn)到網(wǎng)站界面設(shè)計中，在瀏覽網(wǎng)頁是能夠直接看到其中的圖像、音頻、信息等，將眾多設(shè)計內(nèi)容以直觀、精美、輕松的形式呈現(xiàn)，便于瀏覽者甄別和提取信息。在互聯(lián)網(wǎng)快速發(fā)展的背景下，能夠?yàn)橛脩籼峁┒嘣⒅庇^化的體驗(yàn)。網(wǎng)站開發(fā)研究有兩個方面：客戶響應(yīng)和客戶體驗(yàn)。這是研究領(lǐng)域的最高優(yōu)先級。在用戶級別，主要是這是通過在線購物、在線游戲和在線娛樂來滿足生活需求。這三個方面也是使用WWW接口開發(fā)技術(shù)的體現(xiàn)。

網(wǎng)頁前端開發(fā)必須有一個強(qiáng)大的基本功能，此技術(shù)不可被低估，為未來網(wǎng)站的發(fā)展創(chuàng)造了良好的條件。網(wǎng)絡(luò)化生產(chǎn)對于客戶來說，最重要的是他們能否實(shí)現(xiàn)網(wǎng)絡(luò)化生產(chǎn)快速接入，但要實(shí)現(xiàn)快速接入網(wǎng)絡(luò)，就需要實(shí)現(xiàn)快速接入網(wǎng)絡(luò)自動化是自動搜索內(nèi)容和瀏覽網(wǎng)站。認(rèn)識創(chuàng)造了許多生活和工作條件，使信息交流可以正常進(jìn)行。這就是為什么工作效率更高的原因。因此，無論網(wǎng)站在開發(fā)階段我們使用自動化或是我們在日常生活中實(shí)現(xiàn)自動化，都能為人們?nèi)粘Ｉ顜矸奖闶孢m的生活體驗(yàn)。

2 WEB前端開發(fā)技術(shù)的視覺表現(xiàn)形式

2.1 網(wǎng)頁布局

網(wǎng)頁布局在網(wǎng)站設(shè)計中的作用十分重要，只有將網(wǎng)頁設(shè)計布局優(yōu)化設(shè)計，才能夠開始后續(xù)的各項(xiàng)工作。良好的網(wǎng)頁設(shè)計布局能夠提升用戶的視覺感受，有效劃分界面中的主次、強(qiáng)弱，引導(dǎo)用戶快速瀏覽網(wǎng)頁內(nèi)容，增強(qiáng)用戶的體驗(yàn)效果。在網(wǎng)頁結(jié)構(gòu)布局中常見的技術(shù)是DIV+CSS，能夠?qū)W(wǎng)頁中的各個區(qū)域進(jìn)行合理有效的布置，構(gòu)建出精美的網(wǎng)頁樣式[3]。

2.2 色彩運(yùn)用

色彩應(yīng)用是網(wǎng)站信息呈現(xiàn)的重要條件之一，良好、舒適的色彩對比能夠幫助用戶快速抓住自己想要的網(wǎng)站信息，并且能夠?yàn)橛脩袅粝律羁痰挠∠?。借助色彩劃分也能夠?biāo)記出不同區(qū)域的內(nèi)容特點(diǎn)，呈現(xiàn)出主次有序的網(wǎng)頁內(nèi)容。網(wǎng)站界面設(shè)計的色彩應(yīng)用可以選擇主色彩+輔助色彩的布局形式，主色彩指的是網(wǎng)頁設(shè)計中的主要基調(diào)，輔助色彩指的是為增加網(wǎng)頁內(nèi)容的層次感，提升用戶的視覺效果的色彩應(yīng)用。例如，唯品會網(wǎng)站的主要受眾群體是女性，在網(wǎng)頁設(shè)計中便使用了紅色、粉色等與女性生活較為吻合的顏色。

2.3 文字風(fēng)格

網(wǎng)頁設(shè)計中利用大量文字信息傳遞網(wǎng)頁內(nèi)容，是網(wǎng)頁設(shè)計中不可或缺的形式之一。文字的字體選擇、字號設(shè)計等都會影響用戶的感官效果。在設(shè)計的過程中需要結(jié)合網(wǎng)頁的內(nèi)容、定位開展，生動形象的文字內(nèi)容既能夠有效傳遞信息，也能夠?yàn)槭鼙妿韯e樣的感受。在文字風(fēng)格設(shè)計中需要秉承以下三個原則。首先，文字布局和排版需要有理有據(jù)、依次進(jìn)行，避免文字內(nèi)容過于混亂影響受眾閱讀；其次，文字的整體風(fēng)格需要與網(wǎng)站內(nèi)容相適應(yīng)，根據(jù)網(wǎng)站的主題內(nèi)容選擇適宜的文字形象；最后，文字風(fēng)格是為網(wǎng)站設(shè)計服務(wù)，在設(shè)計階段不可脫離實(shí)用性[4]。

2.4 網(wǎng)頁交互性

交互性是網(wǎng)頁設(shè)計中的關(guān)鍵需求，也是滿足用戶使用的最基本要求，用戶在互聯(lián)網(wǎng)中與網(wǎng)頁內(nèi)容交互，增強(qiáng)網(wǎng)頁的實(shí)用性，也能夠促進(jìn)用戶使用的愉悅感?，F(xiàn)階段，Web前端設(shè)計技術(shù)應(yīng)用的過程中，常用的交互技術(shù)是Java Scrip，在設(shè)計的過程中需要重視以下三個環(huán)節(jié)：

（1）需要在網(wǎng)頁鏈接按鈕位置突出設(shè)計，保證用戶能夠第一時間看到鏈接按鈕，完成頁面轉(zhuǎn)換；

（2）網(wǎng)頁的導(dǎo)航區(qū)域設(shè)計需要做到簡明扼要，盡量降低動畫、卡通等元素的使用，避免影響用戶的判斷；

（3）在網(wǎng)頁設(shè)計中穿插一些動畫、視頻等，能夠呈現(xiàn)出生動形象的網(wǎng)頁界面，有效傳遞網(wǎng)頁信息內(nèi)容。

3 Web前端開發(fā)技術(shù)的優(yōu)化措施

3.1 優(yōu)化HTML頁面

HTML頁面是提升網(wǎng)頁設(shè)計中視覺效果的最佳選擇，技術(shù)人員會在網(wǎng)頁設(shè)計的過程中增加大量圖片、動畫等交互技術(shù)，能夠有效提升網(wǎng)頁設(shè)計的視覺效果，但是大量動畫也會影響網(wǎng)頁瀏覽的速度和質(zhì)量。為了加快網(wǎng)頁加載的速度，可以將網(wǎng)頁中添加的圖片進(jìn)行裁剪，選擇適宜的格式和尺寸，能夠加快網(wǎng)頁運(yùn)轉(zhuǎn)的速度。與此同時，還可以將網(wǎng)頁中使用的動畫文件利用JavaScript和CSS技術(shù)壓縮，既能夠滿足用戶的視覺需求，還能夠帶來良好的交互體驗(yàn)。具體來說，可以使用適當(dāng)?shù)腍TML5標(biāo)記來定制網(wǎng)絡(luò)，進(jìn)而優(yōu)化和改進(jìn)站點(diǎn)。在改進(jìn)過程中，有必要確保其糾正控制的有效性，在保證網(wǎng)站瀏覽穩(wěn)定性的范圍內(nèi)，減少甚至避免沒有條目的存在。此外，對于CSS代碼，技術(shù)人員可以不斷收集用戶的意見，從而優(yōu)化網(wǎng)站的代碼并提升其頁面品質(zhì)，提高網(wǎng)站用戶體驗(yàn)。

3.2 優(yōu)化HTTP請求

HTTP請求是一個復(fù)雜的過程，每一個請求內(nèi)容中都包含著大量數(shù)據(jù)，每一個請求運(yùn)轉(zhuǎn)和出現(xiàn)的過程都會延長用戶網(wǎng)頁等待的時間。在網(wǎng)頁設(shè)計中減少HTTP請求數(shù)是頁面優(yōu)化的關(guān)鍵環(huán)節(jié)，也是最為直觀、有效的方式。為了降低請求數(shù)，可以利用瀏覽器強(qiáng)緩存和協(xié)商緩存技術(shù)優(yōu)化處理，有效降低服務(wù)器的使用壓力，促進(jìn)網(wǎng)絡(luò)快速運(yùn)行[5]。比如，您可以集成多個不同的查詢文件，這樣可以有效地減少查詢文件的數(shù)量和不必要的開放式應(yīng)答操作。另一方面，會出現(xiàn)一些用戶頁面沒有響應(yīng)，甚至頁面已經(jīng)損壞。這種現(xiàn)象主要包括：一是用戶打開的站點(diǎn)不存在；二是加工速度太慢，并且服務(wù)器響應(yīng)有問題。要解決這些問題，您必須減少了網(wǎng)站出錯的可能性，并自動跳轉(zhuǎn)到不存在的網(wǎng)站。同時，您需要提高服務(wù)器和站點(diǎn)之間的連接速度，并改進(jìn)用戶結(jié)構(gòu)驗(yàn)證。

3.3 優(yōu)化DNS

DNS是互聯(lián)網(wǎng)的基礎(chǔ)協(xié)議，在人們?yōu)g覽互聯(lián)網(wǎng)網(wǎng)頁時出現(xiàn)長時間“加載中”提示的主要原因是DNS解析速度有限，需要減少DNS的信息解讀時間，才能夠增強(qiáng)網(wǎng)頁瀏覽的整體速度，提升網(wǎng)頁使用效率。優(yōu)化DNS是一項(xiàng)新型的技術(shù)形式之一，利用這一技術(shù)能夠增強(qiáng)網(wǎng)頁運(yùn)轉(zhuǎn)的效率，降低相應(yīng)時間。技術(shù)的使用流程是利用meta信息推進(jìn)瀏覽器反應(yīng)，在head-er中加入link標(biāo)簽強(qiáng)制其運(yùn)轉(zhuǎn)。使用技術(shù)之后能夠縮短用戶等待網(wǎng)頁相應(yīng)的時間，加快信息獲取[6]。使用網(wǎng)站時，影響時間增加的原因是城市和域名系統(tǒng)，名稱系統(tǒng)在搜索過程中花費(fèi)的時間通常約為20毫秒。如果瀏覽器處于待機(jī)狀態(tài)，則表示正在進(jìn)行域名搜索，如果域名系統(tǒng)搜索次數(shù)太多或要求太多，整個頁面將處于混亂狀態(tài)，這是受影響的狀態(tài)，所以我們必須開始下一步，域名系統(tǒng)緩存。此外，域名系統(tǒng)存在于瀏覽器中，并且當(dāng)前瀏覽器中的東西在下一個請求完成之前，域名內(nèi)容不會出現(xiàn)。因此，為了提高WWW接口開發(fā)技術(shù)的整體水平，它必須調(diào)整域名系統(tǒng)查詢時間，不斷提高技術(shù)要求。

3.4 優(yōu)化cookie

Cookie信息在硬盤上生成。如果需要將它們鏈接到域名，則需要向HTTP請求，像網(wǎng)速一樣，如果有很多視圖，網(wǎng)速將變慢，出現(xiàn)卡頓。類似地，如果cookie信息的內(nèi)容逐漸增加，卡頓將會延長時間，應(yīng)用將逐漸增加。要解決此類問題應(yīng)當(dāng)按以下要求：

（1）消除或禁止額外的Cookie；

（2）可以通過最小化Cookie來優(yōu)化Cookie-LE提高網(wǎng)站的響應(yīng)速度；

（3）將到期日期添加到cookie中，同時，信息將存儲在硬盤上，cookie將保留在退出瀏覽器時，但是，在訪問期間，信息將存儲在硬盤上；

（4）大多數(shù)不得使用Cookies，例如：JS、CSS等，因此它們可以以不同的方式使用。這個域存儲靜態(tài)資源，減少它們的使用并提高它們的速度。

4 發(fā)展預(yù)期

移動互聯(lián)網(wǎng)發(fā)展的速度較快，隨著自身的成熟和應(yīng)用，在未來一段時間的發(fā)展速度也會逐漸上升，成為人們生活、學(xué)習(xí)、工作中不可或缺的重要環(huán)節(jié)。并且智能手機(jī)的受眾也在不斷增長，跨平臺的Web設(shè)計也逐漸進(jìn)入智能手機(jī)中，影響著互聯(lián)網(wǎng)傳媒的發(fā)展。HTML5等新技術(shù)的產(chǎn)生和應(yīng)用給予網(wǎng)頁設(shè)計眾多新的可能，人與人之間的網(wǎng)絡(luò)社交圈也會發(fā)生“質(zhì)”的變化，逐漸衍生出新型的產(chǎn)業(yè)結(jié)構(gòu)，改變了傳統(tǒng)的生活秩序、社交格局，網(wǎng)絡(luò)聯(lián)動的社會已經(jīng)逐漸開始。以上的社會變化、互聯(lián)網(wǎng)傳媒完善給人們的生活帶來了翻天覆地的變革，產(chǎn)生了跨時代的變化與影響，展現(xiàn)出社交領(lǐng)域內(nèi)嶄新的商機(jī)和生命力。相信在互聯(lián)網(wǎng)發(fā)展、多元化理論的推進(jìn)過程中，社交行業(yè)必將迎來嶄新的、多元化發(fā)展道路[7]?；诰W(wǎng)站制作的WWW界面開發(fā)技術(shù)在科技中的應(yīng)用，由于其實(shí)用性，未來將有越來越多的投資。網(wǎng)站開發(fā)技術(shù)影響了中國的網(wǎng)站生產(chǎn)，這一價值也反映在網(wǎng)絡(luò)生產(chǎn)領(lǐng)域，它在一定程度上支持了科學(xué)和技術(shù)。隨著互聯(lián)網(wǎng)技術(shù)一代又一代的發(fā)展，中國產(chǎn)生了網(wǎng)站比較成熟。另外，WWW前端技術(shù)和其他網(wǎng)絡(luò)技術(shù)的結(jié)合促進(jìn)了網(wǎng)站制作水平的提高。工具包括CSS3和HTML5，以及WWW接口技術(shù)的不斷改進(jìn)和發(fā)展，這也是CSS3和HTML技術(shù)向前邁出的一大步。網(wǎng)頁開發(fā)技術(shù)已逐漸成為中國網(wǎng)站發(fā)展的主要技術(shù)。開發(fā)技術(shù)的發(fā)展需要這一領(lǐng)域的人才和技術(shù)，因此它是一層一層的，逐步深入發(fā)現(xiàn)的，人才和技術(shù)才是從基本上真正的需要。網(wǎng)站開發(fā)技術(shù)在網(wǎng)站制作過程中發(fā)揮作用，然后與客戶建立聯(lián)，相信網(wǎng)絡(luò)前沿開發(fā)技術(shù)將取得重大成果，未來我們可以面對許多未知的挑戰(zhàn)，但只要我們理解，自我完善的可能性，網(wǎng)絡(luò)接口技術(shù)的發(fā)展不是問題。

5 結(jié)論

隨著Web前端研發(fā)技術(shù)逐漸深化，設(shè)計師能夠在保證網(wǎng)頁設(shè)計實(shí)用性的前提下，設(shè)計出更加絢爛、奪目的網(wǎng)頁，為用戶使用帶來視覺享受，可見，前端設(shè)計在網(wǎng)頁設(shè)計中的重要性。在增加網(wǎng)頁設(shè)計視覺效果的同時還需要優(yōu)化頁面布局、提升用戶的使用感受。為此，設(shè)計人員需要深度研究Web技術(shù)的使用方式，選擇多樣化的設(shè)計形式開展網(wǎng)頁設(shè)計工作，既能夠保證用戶的基本需求得以實(shí)現(xiàn)，又能夠營造出美觀、前衛(wèi)、新穎的網(wǎng)站頁面。