網頁設計實踐認識淺述

摘 要：在當今社會，互聯(lián)網已經成為在經濟發(fā)展中起主導作用的高科技產業(yè)。它不斷發(fā)展的技術和所構架的平臺悄然改變了人們的生產生活方式，極大地推動了社會的發(fā)展和文化的傳播，成為人類日常生活中不可或缺的部分。隨著經濟的發(fā)展、網絡的普及以及人口受教育水平的提高，中國以及全世界網民的數(shù)量正在快速增長。互聯(lián)網功能強大，數(shù)據處理量增加，已經滲入社會的方方面面。無論個人或者機構，公司或者組織，為了更好地提供信息、服務，進行宣傳推廣以及營銷管理，建設門戶網站是普遍采納的方式。

關鍵詞：網頁設計;實踐;認識

中圖分類號：TP393 文獻標識碼：A 文章編號：1004-9436（2020）10-00-04

網站頁面在互聯(lián)網虛擬世界相當于一個機構或者組織的門臉，它的設計代表著這個機構或者組織的性質、文化、形象、所提供的服務、價值觀甚至經營理念。所以，網頁設計是一項極其重要的工作內容。成功的網頁設計可以準確傳達上述要表達的所有概念，便捷地提供相關信息和服務，高效地宣傳和推銷，有效地實現(xiàn)管理和數(shù)據分析。此外，優(yōu)秀的網頁設計通過豐富多彩的技術呈現(xiàn)和藝術設計，能吸引更多的瀏覽者和追隨者，引領時代潮流，富有技術魅力和藝術吸引力，讓人流連忘返。

網頁設計的基礎是傳統(tǒng)的平面設計語言，借助先進的互聯(lián)網硬件技術和設計軟件，通過對不同的內容數(shù)據進行模塊化排版，為每個模塊選取不同的字體組合以展示標題和主要內容;通過圖片、色彩、文字等的合理搭配設計，實現(xiàn)藝術性。相比傳統(tǒng)平面設計，網頁設計可以通過技術將傳統(tǒng)設計語言巧妙地融合在一起，以動畫、影音、模擬動圖等多媒體的方式和超脫二維平面的虛擬多維空間，變化多端、層層遞進地形成一個有無限創(chuàng)作可能、內容極其豐富的交互平臺。

1 網頁設計的基本要求

1.1 網站頁面設計首先應具備良好的實用功能性

任何機構決定投資建設一個網站一定是為了實現(xiàn)某一個或多個特定的需求和功能。所以作為一個網站的頁面，在設計時首先要具有實用性，不僅要將投資方所期望的目標內容全部納入網頁的設計中，同時應使用戶能夠高效便捷地瀏覽和使用，獲取相關的信息或數(shù)據。明確網站要實現(xiàn)的任務數(shù)量、數(shù)據處理能力、功能的重要性、面對的受眾群體的性質和數(shù)量等，都是網站的實用功能性要考慮的具體問題，也是一切設計方案、設計風格以及要采用的技術手段的決策前提。因此，在網頁設計時要做到以下幾個方面：

第一，準確闡明此網站的宗旨和要實現(xiàn)的目標。通過調研、分析和討論等方式精準充分地進行描述，并以書面的形式進行確認，避免在不同的工作環(huán)節(jié)造成相關工作人員的誤解和遺漏，或者大量的臨時變更，造成設計方案的整體顛覆，影響功能實現(xiàn)。

第二，收集整理并預估網站實現(xiàn)其目標需要處理的內容，包括數(shù)據數(shù)量、內容風格形式和數(shù)據處理方式。這項工作需要由表及里、由淺入深地了解網站涉及行業(yè)的工作內容和運作方式，并且以發(fā)展變化的眼光研究相關歷史數(shù)據、發(fā)展趨勢，以便更好地對設計網站將要處理的數(shù)據內容進行分析預判。

第三，選取合適的內容呈現(xiàn)技術和呈現(xiàn)方式，以使網站頁面適用于不同的網絡和硬件環(huán)境，方便受眾瀏覽實用的同時，便于業(yè)主進行運營維護和內容更新。

1.2 網頁架構搭建要清晰、易懂

打開網站頁面后，內容如果能清晰地呈現(xiàn)，便捷地檢索，就會為用戶提供極佳的使用體驗。做到這一點，需要認真研究網頁的宗旨目標和內容數(shù)據，分析不同內容間的從屬遞進關系、關聯(lián)性和重要性。按類別進行模塊化布局可以將復雜的內容分門別類，區(qū)分不同模塊的色彩或形式，有助于辨別區(qū)分和查找定位。網頁編排要主次分明，層次清晰，排版和布局應講求邏輯關系和業(yè)務流程。

網頁內容構架的搭建不僅關乎用戶使用體驗，還影響到網站的功能是否能夠實現(xiàn)。功能隱藏不易識別、字體太小不易發(fā)現(xiàn)、顏色搭配混亂造成混淆、按鍵模糊難于識別、邏輯錯亂無法被理解、技術呈現(xiàn)方式影響瀏覽操作速度等原因，都會造成用戶使用困難或網站功能實現(xiàn)受阻。在正向設計的同時，基于用戶心理分析、使用習慣研究、網絡環(huán)境或硬件條件水平測評等進行的反向論證，有助于在設計階段制訂合理的網頁內容構建搭建方案。

1.3 運用創(chuàng)新思維進行網頁設計

當今的網站頁面是技術與藝術的結合，在進行設計時二者相輔相成，缺一不可。互聯(lián)網技術在軟件和硬件方面高速發(fā)展，不斷更新的科技手段給內容和藝術呈現(xiàn)帶來了無限可能。使用簡單的行模式瀏覽器查看純文本頁面的單調無趣的萬維網，到可以顯示表格數(shù)據的Table的HTML標記，后來CSS出現(xiàn)可以支持演示和布局，使得HTML代碼具有語義性，大大優(yōu)化了網頁的親和力。再后來有了Flash、開源瀏覽器以及HTML5、CSS3和JavaScript等新標準以及不斷更新的設計軟件，例如矢量圖形編輯器、點陣圖形編輯器和可視化編輯器等。掌握這些新技術和新標準有助于從技術層面推陳出新，將網站設計得與眾不同，增強網站的科技感[1]。

好的藝術設計在準確呈現(xiàn)內容的基礎上，給用戶帶來了愉悅的高品質的視聽感受，也體現(xiàn)了此網站的藝術品位和風格。基于平面藝術設計進行網站藝術設計主要是利用好色彩、圖形、文字和符號等基本設計語言，通過先進的技術可以實現(xiàn)圖片、動畫、影音以及數(shù)字模擬等多媒體藝術形式以新穎的方式進行藝術創(chuàng)作。形象生動、引人入勝的視聽感受可以給瀏覽者帶來強烈的視覺和聽覺沖擊，留下深刻的印象。精心編輯的動畫和模擬圖像可以快速傳達復雜的信息和大量的數(shù)據。三維視覺技術加之音樂和聲音的良好編輯策劃，又可以營造一個虛擬的實體空間，以最親切的方式與用戶交流互動。藝術設計屬于美學范疇。然而，美學本是哲學，難以統(tǒng)一標準衡量，仁者見仁智者見智。因此，我們在創(chuàng)作時既要運用創(chuàng)新思維，開拓思路，發(fā)揮想象力和創(chuàng)造力，也應緊跟時代潮流，同時扎根所處的文化土壤，準確地運用與網站宗旨、用戶的文化背景相匹配的藝術元素，這樣才能精確傳達設計初衷。

2 網頁設計的簡要流程

網頁設計作品通常是一系列復雜工作的成果。無論什么類型和功能的網站，為了保證設計制作工作按照目標和計劃有序地推進實施，實現(xiàn)預期的功能和設想，制定并遵守合理優(yōu)化的工作流程就是一個必要條件。工作流程的制定要基于對網頁設計工作細節(jié)的深入了解。良好的工作流程必須經過實踐的驗證，是經驗和教訓的積累，可以減少設計工作失誤，提高工作效率，提高團隊的配合默契度。網頁設計的簡要流程如下：

第一，與業(yè)主方溝通確定網站制作的功能需求、數(shù)據處理量、行業(yè)背景、目標定位和設計風格偏好;收集相關受眾群體的信息，如預測數(shù)量、人群類型、文化背景、生活習慣以及互聯(lián)網使用偏好等基礎信息。

第二，查閱網頁設計和制作的專業(yè)資料和技術文件，積累相關知識理論，了解最新技術和發(fā)展趨勢，研究學習先進優(yōu)秀的網頁設計案例。通過主動分析辨別，將符合時代發(fā)展潮流且有發(fā)展?jié)摿蛻们熬暗闹R、技術、優(yōu)秀案例進行編輯匯總，以便在網頁制作時隨時調取參考。

第三，根據預設的設計思路，翻閱回顧藝術資料庫，梳理現(xiàn)今較流行的設計方向和設計潮流;同時不拘泥于陳規(guī)，集思廣益，汲取不同領域的藝術養(yǎng)分，歸納總結相關可用的設計素材、元素庫和初步的藝術方案。

第四，結合上述的分析研究等基礎籌備工作，緊緊圍繞所要制作的網站的宗旨和目標特性，著手編制網頁設計的綱領性文件，如功能呈現(xiàn)設計方案、網頁設計藝術方案、網頁設計項目計劃、項目所需的數(shù)據、軟硬件需求和運行維護方案等。

第五，以確定好的網頁設計綱領為指導原則，進行啟動前的準備工作，包括成立項目團隊，準備網頁編制需要的軟件和硬件設備，收集整理所有相關的數(shù)據、素材，明確團隊成員的責任分工。

第六，開始進行網頁設計的技術實現(xiàn)，圖形設計師、美術設計師、文案人員、編程人員通過相應的技術手段，逐步落實設計設想和設計綱領，制作出初步設計成果。

第七，對設計成果進行嚴謹?shù)暮瞬楹蜏y試，同時進行用戶體驗測試，彌補和修復故障和瑕疵，補充完善不完整的功能，以確保網頁功能和藝術要求全部實現(xiàn)，使網頁具備較好的用戶親和力和吸引力。

3 網頁設計的實用方法

網頁設計和制作是不斷總結經驗的實踐過程。歸納或者借鑒科學有效的方法，可以更好地幫助設計團隊將設計理念和思路更好地表達呈現(xiàn)出來，最終制作出令人滿意的作品。經過實踐檢驗的方法，能以目標為導向，以理論為指導，充分調動團隊每一位成員的創(chuàng)造力，節(jié)省制作時間，提高制作效率。本文推薦以下實用方法：

第一，網頁的設計人員應該依據所負責任務而選取合適的技術手段。這些技術手段雖然會隨著技術和標準的更新而不斷發(fā)展進步，但其基本原理是相對穩(wěn)定的。團隊成員可以通過矢量圖形編輯器和點陣圖形編輯器來制作設計原型，也就是編制“網頁格式圖”，可以掌握HTML和CSS等W3C標準和技術來進行網站創(chuàng)建。采用手動的方式編輯HTML和CSS，或者通過可視化編輯器都是可行的。當然，為了對其設計的網站進行親和力指引，可以用到其他相關工具，例如標記驗證器等。選擇合適的軟硬件設施和技術手段，是完成設計作品的基本保障[2]。

第二，網頁風格設計方法。設計人員可以研究網頁使用者的目標人群、文化背景和使用網絡的偏好發(fā)展趨勢。研究網站的經營類型，如是服務全國人民還是服務大型企業(yè);研究通過何種藝術設計和營銷類型來提高網站主體的美譽度;研究在保證美觀和藝術效果的情況下如何不與網站的實用功能發(fā)生沖突。進行上述充分研究分析后，平衡取舍就可以最終確定網頁的設計風格。

第三，網頁的用戶使用感受設計方法。網頁設計成品最終是要讓瀏覽者用著便利，且受人喜愛。在設計中提高用戶使用感受可以從以下幾個方面進行專門設計：一是網頁的互動性。要確保大多數(shù)瀏覽者能理解網站的意圖和實用性，網頁更加容易被普遍接受和便于訪問瀏覽，而不只是取悅于經驗豐富的使用者。二是優(yōu)化網頁的界面設計。例如網頁布局在所有頁面上的同一性，在布局排版時，像素寬度對其對象比較重要。根據當今潮流，可以設置相同的寬度，以匹配當今常用的瀏覽器窗口、屏幕分辨率和顯示器尺寸。中心對齊的頁面更加美觀。三是在字體設計、標簽設計等方面，也應該研究瀏覽者的使用體驗。

第四，網頁設計團隊的組建。網頁設計是適用于團隊合作的工作，涉及多個專業(yè)技術領域，需要團隊成員具備多項技能。例如，網頁設計流程管理能力、平面設計知識和技術、掌握HTML的能力、文案編輯能力、計算機應用能力、編程的知識和技能等等。因此，選擇優(yōu)秀的團隊成員并具備所有必需的能力和知識，并推薦經驗豐富、有管理才能的設計團隊負責人，是團隊組建的基本原則。在此基礎上，設計團隊應該以戰(zhàn)斗小組的模式進行經常性溝通，才能將設計理念充分落實在作品中。

第五，在網頁設計中使用項目管理的知識和技能。設計者通過使用項目管理的專業(yè)技術知識，可將網頁設計分為啟動、計劃、實施、控制和收尾5個大的過程，并在范圍、時間、成本、質量、人員、采購、溝通、風險和整體幾個方面同時進行管理。將網頁設計作為一個項目來管理實施，可有效地控制設計的周期、質量和成本。

4 網頁設計工作的特性

4.1 系統(tǒng)的工程

網頁設計是一項系統(tǒng)、復雜的工程，涉及多個專業(yè)領域和各種知識技能。隨著技術和藝術潮流的不斷發(fā)展進步，網頁設計者唯有持續(xù)學習和實踐，才能保持與時俱進，不被時代淘汰，逐漸將自己變成跨學科的復合型人才，才能勝任網頁設計的大任。同時應認識到，唯有發(fā)展建立一支綜合型的團隊，并通過團隊的良好配合，才能制作出優(yōu)秀的網頁設計。

4.2 開放的思維

故步自封的保守思想是網頁設計工作的無形障礙，對技術的發(fā)展和時尚潮流的忽視會導致網頁的設計保守陳舊，不能更好地滿足用戶的需求，最終被市場淘汰。以開放包容的態(tài)度不斷吸收養(yǎng)分和創(chuàng)意，掌握最新的設計技術和設計元素，認真理解他人的需求和品位，預判流行的趨勢，是這項工作的特點。

4.3 嚴謹?shù)倪壿?/p>

邏輯性在網頁制作的方方面面都應該有嚴格的體現(xiàn)。好的網頁設計在內容和形式上都要十分嚴謹，經得起推敲和品味。色彩的變化邏輯，按鈕的排布邏輯，內容的排版邏輯以及層級設定邏輯，都應該進行精心設計。網頁的設計者應該精益求精，以工匠精神在細節(jié)上下功夫，不遺余力地消除所有缺陷和瑕疵，將不合理的優(yōu)化為合理的。因為嚴謹?shù)倪壿嫳旧砭途哂须y以抵擋的藝術魅力。

4.4 不變與多變的結合

網頁的設計風格在整體上應該統(tǒng)一不變，具有一貫性和完整性，尤其是主要色彩不宜過多變化。然而，過度的簡單重復容易導致作品缺乏趣味性和藝術性，乏味缺少新意，所以在細節(jié)上應追求靈活多變，讓網頁作品生動有趣，內容豐富多彩，不落窠臼，耐人尋味。在不變中求多變，萬變不離其宗，正是好的網頁設計的精髓。

參考文獻：

[1] 趙祖蔭，王云翔，胡耀芳.網頁設計與制作教程[M].北京：清華大學出版社，2008：73-96.

[2] 胡崧. HTML從入門到精通[M].北京：中國青年出版社，2007：30-45.

作者簡介：高沖（1983—），男，山東淄博人，研究生，碩士，視覺傳達藝術設計師，研究方向：設計藝術學，視覺傳達藝術設計。