新時(shí)代web前端頁(yè)面設(shè)計(jì)的實(shí)踐研究

馬新文 侯璇

摘 要：新形勢(shì)下，隨著科學(xué)技術(shù)的進(jìn)一步延伸，網(wǎng)頁(yè)制作技術(shù)獲得了突飛猛進(jìn)的發(fā)展。web前端的研發(fā)與技術(shù)工具也以多元化的姿態(tài)呈現(xiàn)到了大家的視野當(dāng)中。用戶與頁(yè)面的交互過(guò)程是一個(gè)細(xì)節(jié)的過(guò)程，在實(shí)施web前端頁(yè)面設(shè)計(jì)的時(shí)候，需要以客戶的前端體驗(yàn)為基礎(chǔ)，合理的統(tǒng)籌規(guī)劃，加大基礎(chǔ)建設(shè)，展現(xiàn)實(shí)用性的價(jià)值。因此，本文首先立足實(shí)際，提出了需要探究的主要內(nèi)容與問(wèn)題，緊接著，針對(duì)現(xiàn)狀，合理的提出對(duì)應(yīng)的實(shí)踐路徑。

關(guān)鍵詞：新時(shí)代;web;前端頁(yè)面設(shè)計(jì)

一、問(wèn)題的提出

隨著互聯(lián)網(wǎng)技術(shù)的進(jìn)一步發(fā)展，傳統(tǒng)的互聯(lián)網(wǎng)應(yīng)用格局也開(kāi)始出現(xiàn)重大的轉(zhuǎn)變。例如：智能手機(jī)、筆記本等一躍呈現(xiàn)到了大家的視野當(dāng)中，互聯(lián)網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)，基本上都是在PC 端設(shè)計(jì)的基礎(chǔ)上實(shí)施建設(shè)的，頁(yè)面內(nèi)容豐富華麗。后來(lái)，延伸到移動(dòng)端設(shè)備Web 技術(shù)發(fā)展。Web 頁(yè)面開(kāi)發(fā)的自適應(yīng)技術(shù)一直都是大家關(guān)注的對(duì)象。UC、Opera 等公司的頁(yè)面精簡(jiǎn)技術(shù)都處于比較精簡(jiǎn)的狀態(tài)，不僅獨(dú)立成熟，并且還可以實(shí)現(xiàn)強(qiáng)大的交互功能。web前端頁(yè)面設(shè)計(jì)在很大的程度上，需要具備較強(qiáng)的兼容性和交互性。Web界面的可視化設(shè)計(jì)和交互計(jì)算機(jī)技術(shù)相互融合的歷程中，需要以全新的視野，結(jié)合用戶的體驗(yàn)，真實(shí)的呈現(xiàn)到大家的視野當(dāng)中，以連續(xù)發(fā)射輻射并形成可擴(kuò)展有機(jī)網(wǎng)絡(luò)，不可忽略交互式Web界面在信息和用戶交互過(guò)程中的重要價(jià)值。改善親密感，舒適度和成功度，滿足時(shí)代的發(fā)展需求。但是，在實(shí)踐的過(guò)程中，如果不能實(shí)現(xiàn)暢通性的建設(shè)，那么就很難滿足客戶的需求，那么web前端的價(jià)值也就無(wú)法達(dá)到有效的體驗(yàn)。鑒于此，如何做好設(shè)計(jì)和技術(shù)的完美結(jié)合？如何合理的使用這些工具，并且提升設(shè)計(jì)的效率？就成為了當(dāng)前發(fā)展趨勢(shì)下，眾多學(xué)者需要探究的主要內(nèi)容和問(wèn)題。

二、新時(shí)代web前端頁(yè)面設(shè)計(jì)的實(shí)踐路徑

（一）web前端

新時(shí)代下，隨著科學(xué)技術(shù)的進(jìn)一步延伸，計(jì)算機(jī)獲得了有效的發(fā)展和建設(shè)，不僅頁(yè)面美化性較強(qiáng)，并且實(shí)用性的價(jià)值也呈現(xiàn)到了大家的視野當(dāng)中。在現(xiàn)代化的社會(huì)下，大眾對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的需要不斷增強(qiáng)，之前的文字形式，以不一樣的圖形樣式得到了進(jìn)一步的優(yōu)化與住那邊。在當(dāng)前的發(fā)展路徑中，Web 界面也以獨(dú)到的技術(shù)因素，應(yīng)用到了現(xiàn)代化社會(huì)的各個(gè)角落當(dāng)中。對(duì)于網(wǎng)絡(luò)設(shè)計(jì)的人員來(lái)說(shuō)，也需要順應(yīng)時(shí)代的發(fā)展趨勢(shì)，結(jié)合Web2.0 時(shí)代所帶來(lái)的優(yōu)勢(shì)性，加大對(duì)于“信息爆炸”，“信息阻塞”等問(wèn)題的進(jìn)一步優(yōu)化。也就是說(shuō)，需要結(jié)合現(xiàn)實(shí)的需求，立足實(shí)際，在高效、舒適的信息交互基礎(chǔ)上，加大問(wèn)題的解決，保持直觀的發(fā)展路徑。也就是說(shuō)，不僅需要減少Web 界面的設(shè)計(jì)，還需要在大眾的幫助下，減低系統(tǒng)的維護(hù)成本，達(dá)到交互界面的設(shè)計(jì)，并且獲得極高的價(jià)值成本檢核。以此客戶的體驗(yàn)為基礎(chǔ)，節(jié)約時(shí)間，并且達(dá)到滿足的建設(shè)效果。

（二）web前端頁(yè)面設(shè)計(jì)

web前端頁(yè)面設(shè)計(jì)的歷程中，需要具備的知識(shí)儲(chǔ)備較多。任何一個(gè)科目和一門技術(shù)的發(fā)展，都不是單一的知識(shí)存在，web前端頁(yè)面設(shè)計(jì)就需要具備豐富的設(shè)計(jì)知識(shí)貯備。不僅需要具備平面構(gòu)成的相關(guān)知識(shí)，還需要具備色彩構(gòu)成和字體設(shè)計(jì)、標(biāo)志設(shè)計(jì)、版面設(shè)計(jì)等相關(guān)的知識(shí)。對(duì)于人來(lái)說(shuō)，都是一個(gè)視覺(jué)，往往一個(gè)人對(duì)一個(gè)網(wǎng)頁(yè)關(guān)注的時(shí)間，基本上都會(huì)停留在3到10秒的時(shí)間當(dāng)中，一些比較優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)，可以在較短的時(shí)間內(nèi)快速的將視覺(jué)和內(nèi)容載入到瀏覽者的視野當(dāng)中，并且獲得教改的點(diǎn)擊率。也就是說(shuō)，兩個(gè)構(gòu)成+3個(gè)設(shè)計(jì)一設(shè)計(jì)思想，達(dá)到“按塊就搬，美化外觀，實(shí)現(xiàn)交互”的主要境界。 web 設(shè)計(jì)頁(yè)面的時(shí)候，也會(huì)受到國(guó)家和當(dāng)?shù)氐挠绊?，是在人和自然、社?huì)的基礎(chǔ)上，實(shí)施有效建立的。交互式 Web 界面設(shè)計(jì)并經(jīng)常啟動(dòng)“本地化”的建設(shè)措施。從傳統(tǒng)的視角上，常常會(huì)看到一些盲目復(fù)制西方思想的設(shè)計(jì)人員的出現(xiàn)。但是，真正的優(yōu)秀設(shè)計(jì)師是可以在西方設(shè)計(jì)的基礎(chǔ)上，有效額取其精華去其糟粕。不僅需要承擔(dān)起國(guó)家的責(zé)任感，還需要將中國(guó)的氣質(zhì)體現(xiàn)出來(lái)?！艾F(xiàn)代化”并不等同于“西方化”，“國(guó)籍”也不是設(shè)計(jì)的“限制”。在 Web2.0的時(shí)代中，也需要順應(yīng)當(dāng)前的網(wǎng)頁(yè)環(huán)境，繼承傳統(tǒng)文化，消除語(yǔ)言障礙，獲得有效的交流和交互。

在實(shí)施 web前端頁(yè)面設(shè)計(jì)的時(shí)候，需要保持親密性的原則，也就是說(shuō)，需要相關(guān)類目放在一個(gè)視覺(jué)單元內(nèi)，不可以給受眾者帶來(lái)一種混亂的思想。還需要保持對(duì)齊性的原則，在頁(yè)面內(nèi)的視覺(jué)聯(lián)系下，保持一個(gè)直觀的外觀印象，傳達(dá)一種清新自然的視覺(jué)感受。還需要保持重復(fù)性的原則，視覺(jué)要素需要重復(fù)，不管是顏色還是形狀、材質(zhì)等都需要保持一定的條理和風(fēng)格，保持統(tǒng)一的趨勢(shì)。最后，需要加大對(duì)比的風(fēng)格建設(shè)。不僅可以具備元素的相似性，還需要強(qiáng)調(diào)內(nèi)容的重點(diǎn)性，保持頁(yè)面的吸引力。

（三）web 前端網(wǎng)頁(yè)設(shè)計(jì)的應(yīng)用

從本質(zhì)上看，web 前端網(wǎng)頁(yè)設(shè)計(jì)的應(yīng)用比較的廣泛，為了加大傳播的力度，需要通過(guò)載體來(lái)實(shí)現(xiàn)。在直觀地基礎(chǔ)上，當(dāng)大家看到一本書或者是一個(gè)雜志的時(shí)候，都需要閱讀大量的信息，封面，目錄，標(biāo)題，大小、厚度等內(nèi)容都是受眾者需要基本進(jìn)行了解的。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，也需要在全新的視野下，消除限制，追求內(nèi)容的豐富性。在頁(yè)面設(shè)計(jì)上，頁(yè)面內(nèi)容更長(zhǎng)，瀏覽主頁(yè)的過(guò)程中不僅需要分為幾個(gè)不一樣的區(qū)域，還可以添加對(duì)應(yīng)的廣告，傳達(dá)不一樣的區(qū)域視野。在創(chuàng)建網(wǎng)頁(yè)的時(shí)候，需要最大限度的保持產(chǎn)品的介紹性，表達(dá)出不一樣的功能建設(shè)，不管是文本，圖像，動(dòng)態(tài)面部等都需要保持一個(gè)有機(jī)的整體，長(zhǎng)久下去，就會(huì)導(dǎo)致標(biāo)準(zhǔn)化的存在和建設(shè)，頁(yè)面設(shè)計(jì)在尋找信息效率的時(shí)候，很多實(shí)際上的意義也就不存在了。此時(shí)，就需要在美觀的格式下，提高效率，加大網(wǎng)頁(yè)設(shè)計(jì)的內(nèi)容建設(shè)，并且從美學(xué)與功能學(xué)的視角，合理的布局，擴(kuò)大吸引力。 web 進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，還需要在受眾者檢索的基礎(chǔ)上，保持頁(yè)面的層次上，將圖片、文字、

動(dòng)態(tài)圖等合理的分布起來(lái)，滿足大眾的信息需求，增加信息的層次性，展示合適的導(dǎo)航鏈接設(shè)計(jì)。在信息技術(shù)合理的分類中，最快的知道合適的速度，提高效率，滿足當(dāng)前的發(fā)展路徑。設(shè)計(jì)流程中，需要先了解受眾者的需求，形成設(shè)計(jì)草圖，之后形成設(shè)計(jì)圖，植入框架，保持統(tǒng)一的外觀。體現(xiàn)很強(qiáng)的交互性，完成兼容性，加大SEO的優(yōu)化。例如：一個(gè)美食分享歡迎頁(yè)面，在實(shí)現(xiàn)的歷程中，是在用 JavaScript的基礎(chǔ)上，實(shí)施建立的。根據(jù)訪客年齡段展示不同背景色頁(yè)面的功能性，不僅提高了頁(yè)面交互的體驗(yàn)，還在很大的程度上提高了對(duì)應(yīng)的趣味性的價(jià)值。在使用者訪問(wèn)該頁(yè)面的時(shí)候，就會(huì)自動(dòng)的出現(xiàn)彈框歡迎提示。用戶輸入信息的時(shí)候，名字可以在任何的字符段下，但是不可以是空格，需要輸入正確的提示語(yǔ)。如果輸入的信息是錯(cuò)誤的，那么正面還會(huì)提示使用者繼續(xù)實(shí)施交互行為。在使用者輸入年齡的時(shí)候，需要展示不一樣的色彩。小于18歲的男性和大于18歲的男性，小于18歲的女性和大于18歲的女性，分別使用的是淺藍(lán)色，深藍(lán)色，粉紅色，玫紅色。頁(yè)面功能實(shí)現(xiàn)上，主要是頁(yè)面顏色的獲取，頁(yè)面中body 對(duì)象只有一個(gè)屬性就是背景色，需要在用 x [0]的基礎(chǔ)上快速的找到其他顏色所設(shè)置的位置。此外，判斷用戶輸入內(nèi)容并進(jìn)行反饋。也就是說(shuō)，在使用者進(jìn)入一個(gè)頁(yè)面的時(shí)候，就需要輸入完整的信息，加大if 語(yǔ)句的判斷功能設(shè)計(jì)，并且獲得對(duì)應(yīng)的彈窗提示。

最后，在用戶登錄體驗(yàn)細(xì)節(jié)的改善中，需要不斷的優(yōu)化，并且減少體驗(yàn)的困擾，合理的調(diào)整，分析不完整的地方，結(jié)合條件判斷的方法加大綜合判斷，電機(jī)提交按鈕后，主要是出現(xiàn)任何一個(gè)錯(cuò)誤，都會(huì)無(wú)法展現(xiàn)。

三、總結(jié)

隨著社會(huì)的進(jìn)步，web 前端網(wǎng)頁(yè)設(shè)計(jì)看起來(lái)比較的簡(jiǎn)單，但是，在實(shí)際實(shí)踐的歷程中，需要以客戶的訴求為基礎(chǔ)，合理的使用世界思想和設(shè)計(jì)方式。保持嚴(yán)謹(jǐn)?shù)膽B(tài)度，不斷的順應(yīng)時(shí)代的需求，不斷的學(xué)習(xí)，達(dá)到有效的設(shè)計(jì)目標(biāo)。交互過(guò)程中需要滿足細(xì)節(jié)化的發(fā)展需要，不斷優(yōu)化程序，最大限度的優(yōu)化用戶的前端體驗(yàn)。

參考文獻(xiàn)：

[1]王翠.高職實(shí)施"1+X證書"制度的探索與實(shí)踐——以濰坊工程職業(yè)學(xué)院"Web前端開(kāi)發(fā)"證書為例[J].濰坊工程職業(yè)學(xué)院學(xué)報(bào)，2020，140（06）：94-97.

[2]林麗紅. 基于《web前端頁(yè)面設(shè)計(jì)》在線開(kāi)放課程自主學(xué)習(xí)探討[J]. 計(jì)算機(jī)產(chǎn)品與流通， 2020（05）：171-172.

[3]琴代.新工科下 SC 教學(xué)模式應(yīng)用探索與實(shí)踐——以前端系列課程之平面設(shè)計(jì)為例[J]. 教學(xué)方法創(chuàng)新與實(shí)踐， 2021， 4（3）：44.

[4]林麗紅. 高職院校web前端課程進(jìn)行在線開(kāi)放課程建設(shè)的探討[J]. 電腦知識(shí)與技術(shù)， 2020， v.16（14）：210-211.

[5]羅才華， 黎欣. 基于知識(shí)共享的Web前端開(kāi)發(fā)技術(shù)課程小組項(xiàng)目式作業(yè)教學(xué)改革與實(shí)踐[J]. 職業(yè)時(shí)空， 2020， 004（001）：30-34.

[6]陳芳. 針對(duì)網(wǎng)站設(shè)計(jì)與制作的Web前端開(kāi)發(fā)技術(shù)及技術(shù)優(yōu)化[J]. 電子世界， 2020， No.605（23）：198-199.