新時代web前端頁面設計的實踐研究

馬新文 侯璇

摘 要：新形勢下，隨著科學技術的進一步延伸，網頁制作技術獲得了突飛猛進的發展。web前端的研發與技術工具也以多元化的姿態呈現到了大家的視野當中。用戶與頁面的交互過程是一個細節的過程，在實施web前端頁面設計的時候，需要以客戶的前端體驗為基礎，合理的統籌規劃，加大基礎建設，展現實用性的價值。因此，本文首先立足實際，提出了需要探究的主要內容與問題，緊接著，針對現狀，合理的提出對應的實踐路徑。

關鍵詞：新時代;web;前端頁面設計

一、問題的提出

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

二、新時代web前端頁面設計的實踐路徑

（一）web前端

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

（二）web前端頁面設計

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

在實施 web前端頁面設計的時候，需要保持親密性的原則，也就是說，需要相關類目放在一個視覺單元內，不可以給受眾者帶來一種混亂的思想。還需要保持對齊性的原則，在頁面內的視覺聯系下，保持一個直觀的外觀印象，傳達一種清新自然的視覺感受。還需要保持重復性的原則，視覺要素需要重復，不管是顏色還是形狀、材質等都需要保持一定的條理和風格，保持統一的趨勢。最后，需要加大對比的風格建設。不僅可以具備元素的相似性，還需要強調內容的重點性，保持頁面的吸引力。

（三）web 前端網頁設計的應用

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

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

最后，在用戶登錄體驗細節的改善中，需要不斷的優化，并且減少體驗的困擾，合理的調整，分析不完整的地方，結合條件判斷的方法加大綜合判斷，電機提交按鈕后，主要是出現任何一個錯誤，都會無法展現。

三、總結

隨著社會的進步，web 前端網頁設計看起來比較的簡單，但是，在實際實踐的歷程中，需要以客戶的訴求為基礎，合理的使用世界思想和設計方式。保持嚴謹的態度，不斷的順應時代的需求，不斷的學習，達到有效的設計目標。交互過程中需要滿足細節化的發展需要，不斷優化程序，最大限度的優化用戶的前端體驗。

參考文獻：

[1]王翠.高職實施"1+X證書"制度的探索與實踐——以濰坊工程職業學院"Web前端開發"證書為例[J].濰坊工程職業學院學報，2020，140（06）：94-97.

[2]林麗紅. 基于《web前端頁面設計》在線開放課程自主學習探討[J]. 計算機產品與流通， 2020（05）：171-172.

[3]琴代.新工科下 SC 教學模式應用探索與實踐——以前端系列課程之平面設計為例[J]. 教學方法創新與實踐， 2021， 4（3）：44.

[4]林麗紅. 高職院校web前端課程進行在線開放課程建設的探討[J]. 電腦知識與技術， 2020， v.16（14）：210-211.

[5]羅才華， 黎欣. 基于知識共享的Web前端開發技術課程小組項目式作業教學改革與實踐[J]. 職業時空， 2020， 004（001）：30-34.

[6]陳芳. 針對網站設計與制作的Web前端開發技術及技術優化[J]. 電子世界， 2020， No.605（23）：198-199.