黃杰 胡開熾

【摘要】隨著現(xiàn)代互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，網(wǎng)頁設(shè)計應(yīng)運而生，其作為一種新興行業(yè)備受廣大網(wǎng)民青睞，比如中國雅虎、新浪、騰訊、網(wǎng)易以及鳳凰網(wǎng)等各大門戶網(wǎng)站的門面設(shè)計與流量使用。網(wǎng)頁設(shè)計的最終目標是生產(chǎn)網(wǎng)站并用以瀏覽，所以網(wǎng)頁設(shè)計的好壞直接影響著網(wǎng)站的訪問量。目前網(wǎng)頁設(shè)計中存在著諸多問題，本文就以此為關(guān)注點對其解決途徑要求進行探討研究。

【關(guān)鍵詞】網(wǎng)頁設(shè)計;存在問題;解決途徑;要求

【基金項目】2018年湖南省教育廳項目“基于HTML 5+CSS3+jQuery的網(wǎng)頁動態(tài)藝術(shù)效果的設(shè)計與實現(xiàn)”，項目編號18C1228。

中圖分類號：TN92? ? ? ? ? ? ? ? ? ? ?文獻標識碼：A? ? ? ? ? ? ? ? ? ? ?DOI：10.12246/j.issn.1673-0348.2021.05.044

網(wǎng)頁設(shè)計是一種視覺語言，主要用于設(shè)計生產(chǎn)網(wǎng)站，其通過標識語言將各類信息以圖形用戶界面的形式來展示，例如：在設(shè)計時與客戶溝通對接不夠充分，從而導(dǎo)致設(shè)計方向偏差;在設(shè)計中忽略網(wǎng)站功能與網(wǎng)絡(luò)信息架構(gòu)，從而致使過于視覺化;在設(shè)計時對網(wǎng)站整體的設(shè)計風格把控不夠，從而導(dǎo)致思維斷層;在設(shè)計時對其內(nèi)容框架、版面布局的設(shè)計不夠理想化，從而缺乏吸引力影響用戶視覺。因此在進行設(shè)計時對網(wǎng)

1. 在網(wǎng)頁設(shè)計初期所存在的問題

1.1 與客戶溝通對接不夠充分

在進行網(wǎng)頁設(shè)計時，首先設(shè)計師要確定客戶的設(shè)計需求，因此與客戶之間進行詳盡的溝通是必不可少的，但是目前大多數(shù)的客戶對于其產(chǎn)品的設(shè)計期望往往都只是一個模糊的概念，大概只有一個粗略樣子，甚至有的客戶要求設(shè)計師先做出幾個模板，然后再看效果怎樣，這種情況的發(fā)生往往會使產(chǎn)品的設(shè)計方向發(fā)生偏差，從而導(dǎo)致多次重復(fù)改稿事件的發(fā)生，進而易使設(shè)計師與客戶之間發(fā)生矛盾，不利于設(shè)計工作的順利進行。

1.2 對網(wǎng)站功能與網(wǎng)絡(luò)信息架構(gòu)的關(guān)注度不高

在進行網(wǎng)頁設(shè)計時，其成品頁面的優(yōu)秀效果不僅僅是指訪問者感官上的優(yōu)美，更是其功能特性的充分展現(xiàn)，但是有的設(shè)計師在進行設(shè)計時往往忽略了網(wǎng)站的功能特性和信息架構(gòu)，而過于注重視覺效果的設(shè)計，從而導(dǎo)致網(wǎng)站“空有其表，而內(nèi)里不足”，從而滿足不了客戶的期望值。

1.3 對網(wǎng)站的整體設(shè)計風格缺乏把控力度

在進行網(wǎng)頁設(shè)計時，其網(wǎng)站頁面的整體風格要基調(diào)一致，比如冷暖色調(diào)的考慮，假若要設(shè)計娛樂類的網(wǎng)站，此時就選擇以紅、橙、黃三色為主的暖色調(diào)進行設(shè)計，使瀏覽者產(chǎn)生較好視覺感官，從而獲得一種活潑、愉悅、興奮的感受，但是網(wǎng)站的整體設(shè)計效果不單單只是色調(diào)的選用，還包括布局、結(jié)構(gòu)、質(zhì)感、字體、圖片以及圖標等方面都需要進行完美的融合，從而達成一致的視覺與體驗效果，但是有的設(shè)計師在設(shè)計中急于求成，對網(wǎng)站整體風格的把控力度不夠到位，沒有進行系統(tǒng)性的思索就動手設(shè)計，從而使設(shè)計思路斷層，有礙于作品的完成進度。此外，由于在設(shè)計中各類框架元素和其他元素的嵌套使用，從而易使整體布局思路受到條條框框的限制。

1.4 在網(wǎng)頁設(shè)計中所存在的技術(shù)性問題

在網(wǎng)頁設(shè)計中除了初期的草圖構(gòu)思與創(chuàng)意設(shè)計要求我們可以盡可能的滿足客戶需求外，在使用PS等軟件進行具體設(shè)計中時，由于網(wǎng)頁設(shè)計師在進行新設(shè)計項目時都是在重復(fù)這個過程，所以其技藝上的錯誤是在所難免的，但究其原因大多都是設(shè)計者在細節(jié)方面的不仔細問題，比如網(wǎng)頁內(nèi)容與導(dǎo)航的搭配問題、對齊方式存在像素偏差、邊框距離不合適、元素與背景清晰度不夠、色彩種類運用過多、網(wǎng)頁字體搭配不和諧以及圖片（GIF）、動畫與音效使用過度等問題，而受網(wǎng)頁設(shè)計中的每一個小步驟的影響，網(wǎng)站整體的設(shè)計稿成品效果也會大打折扣。

1.5 網(wǎng)頁設(shè)計中設(shè)計方式比較固化

現(xiàn)今，網(wǎng)頁設(shè)計的發(fā)展比較教條化和形式化，使得大多數(shù)的網(wǎng)頁、網(wǎng)站作品都給人以一種“千篇一律”的感覺，甚至是模板化，從而使設(shè)計創(chuàng)意思維受到阻塞，這一般是由于網(wǎng)頁設(shè)計中“天下設(shè)計一大抄”的現(xiàn)象引起的，設(shè)計師本人不在意自身設(shè)計創(chuàng)意的實現(xiàn)，而為了快速簡便的完成產(chǎn)品要求開始抄襲行為，甚至有的設(shè)計師直接采用模板進行套用設(shè)計，沒有自己的設(shè)計思想體驗，這不利于網(wǎng)頁設(shè)計行業(yè)的發(fā)展。

2. 解決途徑的辦法要求

對于網(wǎng)頁設(shè)計中存在的問題我們進行了深入的探索與研究，為此給出了如下解決辦法途徑及要求。

2.1 與客戶充分溝通

在與客戶溝通方面，設(shè)計師可以與客戶進行詳盡的溝通，積極引導(dǎo)客戶說出自己的設(shè)計期望，從而明確設(shè)計產(chǎn)品的需求，同時也可以在對話中采取一些小技巧，比如在溝通環(huán)節(jié)可以進行問卷調(diào)查，通過作答來梳理客戶思路和明確設(shè)計要求，從而避免設(shè)計方向發(fā)生偏差，減少重復(fù)定稿工作，進而與客戶需求達成一致，避免矛盾發(fā)生。

2.2 實現(xiàn)視覺與功能的雙重體驗

在設(shè)計網(wǎng)站功能與信息架構(gòu)方面，首先要明確網(wǎng)頁設(shè)計不僅是指頁面的美觀大方，而且更是指其功能特性的顯現(xiàn)，所以在進行設(shè)計時，設(shè)計師要同時關(guān)注這兩點，結(jié)合雙方優(yōu)勢進行設(shè)計創(chuàng)作，從而在保證了視覺的優(yōu)美的基礎(chǔ)上，能進一步保障功能的實現(xiàn)。

2.3 把控網(wǎng)站整體設(shè)計風格

在網(wǎng)站整體性風格方面，設(shè)計師在明確客戶設(shè)計要求之后，首要是對其產(chǎn)品主題風格的明確，因此在此之前要對涉及網(wǎng)站建設(shè)的各類元素、版面內(nèi)容以及結(jié)構(gòu)框架等進行系統(tǒng)性的思考，然后進行系統(tǒng)性的設(shè)計，此時我們設(shè)計師可以采用畫草稿的方式進一步明確網(wǎng)站的風格特性，此外設(shè)計方案包括網(wǎng)頁信息內(nèi)容、排版、色彩以及設(shè)計方案解說文字等方面，同時設(shè)計師也可以對與客戶需求相似的優(yōu)秀網(wǎng)站的整體風格進行閱覽、思考、分析與實操，從而在豐富自己設(shè)計經(jīng)驗的同時，也可以在產(chǎn)品實現(xiàn)上進一步滿足客戶的期望需求。

2.4 技術(shù)性問題的解決方案

要解決這些技術(shù)性問題主要是依靠大量的設(shè)計練習以及瀏覽優(yōu)秀網(wǎng)頁設(shè)計的網(wǎng)站、解說書籍等方法進行技術(shù)能力與觀賞能力的提升，比如花瓣網(wǎng)、站酷以及collect UI等著名網(wǎng)頁設(shè)計網(wǎng)站，設(shè)計師不僅可以在這些網(wǎng)站中獲取更多的設(shè)計素材，還可以觀賞優(yōu)秀的設(shè)計作品集，同時也可以直接與設(shè)計者進行網(wǎng)上交流，從而在掌握更多的設(shè)計技巧的同時，也可以提升自己的設(shè)計技能與觀賞技能。

2.4.1 導(dǎo)航設(shè)計使用

導(dǎo)航設(shè)計作為網(wǎng)站的方向指示燈能夠直接反映出用戶的視覺與功能體驗，所以在導(dǎo)航設(shè)計時就一定要注意其清晰度以及與網(wǎng)頁整體內(nèi)容的搭配設(shè)計，因此對導(dǎo)航內(nèi)容要進行明確的分類劃分，使導(dǎo)航菜單層級更明顯，同時也要注意導(dǎo)航檢索時的有趣鏈接的引入等，從而不僅能夠使用戶明確網(wǎng)站主體內(nèi)容，也能夠引導(dǎo)用戶檢索內(nèi)容，方便用戶使用。

2.4.2 字體設(shè)計使用

在網(wǎng)頁字體設(shè)計上其排版、編輯、以及字體等的和諧搭配體現(xiàn)著用戶的好感度，目前隨著顯示器像素的提高，大多網(wǎng)站采取的是14px的字體大小，所以我們要根據(jù)大眾的普遍眼光進行字體大小的選取，在字體樣式設(shè)計中可以根據(jù)網(wǎng)站的整體設(shè)計風格進行確定，從而在層疊樣式表（CSS）總進行字體設(shè)置。

2.4.3 色彩與背景設(shè)計使用

在色彩元素與背景的設(shè)計中要選用不超過三種主色調(diào)的色彩方案，并輔以素雅背景搭配，這樣才能表現(xiàn)出顏色與內(nèi)容的協(xié)調(diào)性。

2.5 圖片、動畫與音效設(shè)計使用

在圖片、動畫與音效的使用上，雖然它們的使用會提升用戶的體驗感，但是不能過多的使用，否則會使原本錦上添花的設(shè)計元素變得“畫蛇添足”，所以一般對GIF、動畫以及音效的使用能少用就少用;在對齊方式存在像素偏差、邊框距離不合適等方面，主要是依靠設(shè)計者的豐富經(jīng)驗與設(shè)計體感，從而細心地選取合適的素材進行設(shè)計。此外還有網(wǎng)站留白的設(shè)計，在網(wǎng)頁中假若內(nèi)容填充過多，會導(dǎo)致用戶視覺疲勞且產(chǎn)生厭煩感，所以一定要進行留白設(shè)。

2.6 在網(wǎng)頁設(shè)計稿完成后的問題解決辦法

在網(wǎng)頁設(shè)計中最終完成定稿任務(wù)后，一般存在的問題就是售后服務(wù)的問題，作為設(shè)計師對于自己的作品在上線運營時要時刻保持關(guān)注度，及時了解客戶的用戶體驗，從而找出不足之處并第一時間對自己的設(shè)計作品進行深入的完善改進，進而在提高自己設(shè)計技能的同時，也能夠獲悉更多的網(wǎng)頁設(shè)計信息。

2.7 在網(wǎng)站設(shè)計中時刻注意創(chuàng)新

在網(wǎng)頁設(shè)計中為了避免設(shè)計成品的模板化，設(shè)計師在明確網(wǎng)站整體任務(wù)的同時，也能夠進行創(chuàng)新設(shè)計，首先在網(wǎng)站整體設(shè)計中主要明確界面設(shè)計、功能實現(xiàn)以及內(nèi)容編輯的工作規(guī)劃，在運用熟練的技巧設(shè)計好主界面的同時，也注意對其網(wǎng)站整體內(nèi)容的了解，在功能實現(xiàn)方面一般是程序員的工作，在設(shè)計師完成網(wǎng)頁程序界面的情況下，程序員根據(jù)界面要求進行程序設(shè)計，此時就要求程序員了解一些網(wǎng)頁界面設(shè)計的知識，從而更容易的將功能代碼嵌入到網(wǎng)頁中去，然后是創(chuàng)意設(shè)計方面，為了使網(wǎng)站整體效果不落于俗套，在進行編排設(shè)計時要加入一些創(chuàng)意元素，從而使自己的網(wǎng)頁作品更具有靈活性與獨特性，比如自然有機形狀的加入，雖然網(wǎng)頁設(shè)計一般的系統(tǒng)的網(wǎng)格模式，但是加入自然形狀與流暢線條，由于其不完美性與不對稱性，因此可以使網(wǎng)頁設(shè)計更顯深度并突出頁面元素，基于自然因素，其繪制的元素可以引出故事的發(fā)展線條，比如油漆飛濺，從而使網(wǎng)頁設(shè)計更顯合理化與人性化;再比如微互動的加入可以使用戶深入體驗，并通過微交互巧妙的向顧客傳遞信息，從而使網(wǎng)頁質(zhì)感更顯活力，例如懸停與滾動畫面，當在微博刷新時會聽到特殊的聲音，這就是一種微交互。

3. 結(jié)束語

總而言之，現(xiàn)如今的網(wǎng)頁設(shè)計行業(yè)仍舊需要面對許多發(fā)展阻礙，但是這一新興產(chǎn)業(yè)卻仍舊具有龐大的發(fā)展?jié)摿?。雖然目前網(wǎng)頁設(shè)計中存在著諸多問題，但是相信隨著網(wǎng)頁設(shè)計師技藝的不斷提升以及網(wǎng)絡(luò)信息技術(shù)的快速發(fā)展，設(shè)計師們會給廣大用戶帶來更多、更好的網(wǎng)頁視覺、功能體驗。

參考文獻：

[1]彭芳.移動端網(wǎng)頁設(shè)計常見問題和技巧研究[J].科技資訊，2018，16（16）：16+20.

[2]李雪心.淺探網(wǎng)頁設(shè)計基本步驟及常見問題解析[J].電腦迷，2018（05）：21.

[3]康正發(fā).在線旅游服務(wù)網(wǎng)站首頁色彩搭配問題研究[J].現(xiàn)代經(jīng)濟信息，2017（17）：336-337.

[4]劉效春.靜態(tài)網(wǎng)頁設(shè)計中存在的問題與解決措施探究[J].中國新通信，2015，17（23）：120-121.