黃杰 胡開熾

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

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

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

中圖分類號(hào)：TN92? ? ? ? ? ? ? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A? ? ? ? ? ? ? ? ? ? ?DOI：10.12246/j.issn.1673-0348.2021.05.044

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

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

1.1 與客戶溝通對(duì)接不夠充分

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

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

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

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

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

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

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

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

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

2. 解決途徑的辦法要求

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

2.1 與客戶充分溝通

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

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

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

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

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

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

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

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

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

2.4.2 字體設(shè)計(jì)使用

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

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

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

2.5 圖片、動(dòng)畫與音效設(shè)計(jì)使用

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

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

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

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

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

3. 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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