網(wǎng)頁設(shè)計實踐認(rèn)識淺述

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

關(guān)鍵詞：網(wǎng)頁設(shè)計;實踐;認(rèn)識

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1004-9436（2020）10-00-04

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

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

1 網(wǎng)頁設(shè)計的基本要求

1.1 網(wǎng)站頁面設(shè)計首先應(yīng)具備良好的實用功能性

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

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

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

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

1.2 網(wǎng)頁架構(gòu)搭建要清晰、易懂

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

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

1.3 運用創(chuàng)新思維進(jìn)行網(wǎng)頁設(shè)計

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

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

2 網(wǎng)頁設(shè)計的簡要流程

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

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

第二，查閱網(wǎng)頁設(shè)計和制作的專業(yè)資料和技術(shù)文件，積累相關(guān)知識理論，了解最新技術(shù)和發(fā)展趨勢，研究學(xué)習(xí)先進(jìn)優(yōu)秀的網(wǎng)頁設(shè)計案例。通過主動分析辨別，將符合時代發(fā)展潮流且有發(fā)展?jié)摿蛻?yīng)用前景的知識、技術(shù)、優(yōu)秀案例進(jìn)行編輯匯總，以便在網(wǎng)頁制作時隨時調(diào)取參考。

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

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

第五，以確定好的網(wǎng)頁設(shè)計綱領(lǐng)為指導(dǎo)原則，進(jìn)行啟動前的準(zhǔn)備工作，包括成立項目團(tuán)隊，準(zhǔn)備網(wǎng)頁編制需要的軟件和硬件設(shè)備，收集整理所有相關(guān)的數(shù)據(jù)、素材，明確團(tuán)隊成員的責(zé)任分工。

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

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

3 網(wǎng)頁設(shè)計的實用方法

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

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

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

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

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

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

4 網(wǎng)頁設(shè)計工作的特性

4.1 系統(tǒng)的工程

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

4.2 開放的思維

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

4.3 嚴(yán)謹(jǐn)?shù)倪壿?/p>

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

4.4 不變與多變的結(jié)合

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

參考文獻(xiàn)：

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

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

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