基于藝術(shù)處理加工的網(wǎng)頁設(shè)計(jì)研究

桂一銘 趙熙

摘要：近年來隨著互聯(lián)網(wǎng)絡(luò)的迅速發(fā)展，網(wǎng)頁設(shè)計(jì)的發(fā)展也更加傾向于信息量多、更新快和易于宣傳推廣。網(wǎng)頁設(shè)計(jì)包含了各種功能，為了滿足企業(yè)的需求，傳統(tǒng)的網(wǎng)頁創(chuàng)作者可能只考慮到網(wǎng)頁的實(shí)用性，用戶在交互的時(shí)候訪客體驗(yàn)不是很理想。而通過藝術(shù)加工與處理下的網(wǎng)頁設(shè)計(jì)，可以更便利使用者，大大提高用戶瀏覽體驗(yàn)。本文從排版功能設(shè)計(jì)與視覺設(shè)計(jì)兩個(gè)方面，分析網(wǎng)頁設(shè)計(jì)關(guān)鍵的設(shè)計(jì)要素有哪些，探討在哪些細(xì)節(jié)方面能做的更好，從而更好地滿足市場客戶的需求。想要設(shè)計(jì)出理想優(yōu)質(zhì)的網(wǎng)頁，網(wǎng)頁建站人員和網(wǎng)頁藝術(shù)設(shè)計(jì)師之間協(xié)作完成任務(wù)，也是密不可分的。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì);排版設(shè)計(jì);設(shè)計(jì)心理學(xué)

一、當(dāng)今時(shí)代下的網(wǎng)頁設(shè)計(jì)

在網(wǎng)絡(luò)飛速進(jìn)步的今天，互聯(lián)網(wǎng)圍繞著我們的生活，它所衍生的產(chǎn)物：網(wǎng)頁已成為服務(wù)、尋求產(chǎn)品和營銷業(yè)務(wù)的最終目的地，由于無處不在使用智能手機(jī)的用戶群體訪問互聯(lián)網(wǎng)，網(wǎng)頁在我們身邊全面普及。據(jù)數(shù)據(jù)分析報(bào)告顯示，大把的的網(wǎng)站都是功能簡單的展示網(wǎng)站，多是采用模板建站制作而成。而這種簡單的企業(yè)網(wǎng)站，已經(jīng)遠(yuǎn)遠(yuǎn)不能適應(yīng)電商市場的發(fā)展，所以很大一部分中小企業(yè)對更高層次的網(wǎng)站有很大需求。因此在設(shè)計(jì)領(lǐng)域最近發(fā)生了翻天覆地的變化，設(shè)計(jì)師在考慮移動終端兼容性優(yōu)化的同時(shí)，還要在有限的視角里把網(wǎng)頁中想表達(dá)的信息介紹清楚，并且如今人們審美也在不知不覺中改變著，對藝術(shù)與美的眼光也在水漲船高，訪問網(wǎng)站都有著各自的需求，上述這些走向客觀且大勢所趨，對網(wǎng)頁設(shè)計(jì)師提出了新的要求。

二、網(wǎng)頁設(shè)計(jì)內(nèi)的的排版設(shè)計(jì)

（一）不同服務(wù)功能的網(wǎng)頁排版

排版設(shè)計(jì)是一種能展示信息藝術(shù)化的形式，一個(gè)優(yōu)秀的排版在能夠更好的展示信息的同時(shí)，又能夠體現(xiàn)出設(shè)計(jì)的美感，使客戶快速獲得信息的同時(shí)感受到設(shè)計(jì)的美。排版在UI設(shè)計(jì)中至關(guān)重要，一個(gè)出色的排版設(shè)計(jì)能夠讓用戶專注于接受信息內(nèi)容，而不是排版本身上。

1、電子商務(wù)平臺的排版

電子商務(wù)網(wǎng)站是大多主流網(wǎng)站的一種，電子商務(wù)的網(wǎng)站定位基于產(chǎn)品銷售，電子商務(wù)網(wǎng)站的用戶們最關(guān)心的就是產(chǎn)品的相關(guān)情況（功能情況、質(zhì)量情況、價(jià)格對比情況），有效專業(yè)的組織產(chǎn)品信息、合理呈現(xiàn)的產(chǎn)品分類目錄是電子商務(wù)的脊梁骨，基于電子商務(wù)網(wǎng)站的定位，電子商務(wù)網(wǎng)站首頁必須要有脊梁骨之外，還要向用戶傳遞一些其他產(chǎn)品的延展性信息，刺激用戶產(chǎn)生更多購買行為，如：新品上市通知、熱銷產(chǎn)品榜單、促銷打折信息和活動起始日期、個(gè)性推薦等等。

2.企業(yè)網(wǎng)站的網(wǎng)頁排版

企業(yè)網(wǎng)站作為企業(yè)進(jìn)行網(wǎng)絡(luò)營銷的“大本營”，跟電子商務(wù)網(wǎng)站有相似的地方但也不完全是，它的作用不僅僅在于產(chǎn)品的展示和推廣，更重要的是要使客戶建立起對企業(yè)和產(chǎn)品的信心，所以說企業(yè)網(wǎng)站首頁要盡可能的體現(xiàn)在所處行業(yè)中的專業(yè)性和可信度，首頁的主要功能就是要讓用戶在短時(shí)間內(nèi)對企業(yè)大致了解和建立產(chǎn)品信任，最好在顯眼位置要有企業(yè)信息介紹、資質(zhì)證明、員工能力水平、產(chǎn)品的產(chǎn)地、制作工藝信息等的入口，一個(gè)企業(yè)網(wǎng)站的細(xì)節(jié)相當(dāng)重要，還要注意企業(yè)地址是否完整、是否有聯(lián)系方式、用智能客服或人工客服、網(wǎng)站是否正規(guī)且備案……，企業(yè)網(wǎng)站的關(guān)鍵是建立用戶聯(lián)系信任，一個(gè)從無到有和從有到多的作用。

（二）文字排版扮演著重要角色

在絕大多數(shù)時(shí)候，排版這項(xiàng)工作這通常是靠文本字體來完成，優(yōu)化排版可以提升排版布局的可讀性，提升訪客人數(shù)，但是它最低的標(biāo)準(zhǔn)和最核心的要素，依然是要保證排版本身的「可用性」。降低用戶使用時(shí)的障礙和摩擦，減少認(rèn)知負(fù)荷。對于網(wǎng)頁而言，視覺信息的傳達(dá)至關(guān)重要。用戶通過頁面獲取信息，網(wǎng)頁設(shè)計(jì)包括文本、背景、圖標(biāo)、圖像與表格、色彩、導(dǎo)航工具、動態(tài)影像等視覺元素[1]?，F(xiàn)在，排版在網(wǎng)頁設(shè)計(jì)中，已經(jīng)是一件越來越重要的事情了。糟糕的排版令人分心，內(nèi)容無法清晰地傳達(dá)。相反優(yōu)秀的排版會做的更加潤物細(xì)無聲，讓內(nèi)容清晰直觀地傳達(dá)。

1、控制字體種類數(shù)量

充滿個(gè)性的字體層出不窮，而在網(wǎng)頁這空間并不多的地方承載不了過多的字體種類，當(dāng)網(wǎng)頁文本內(nèi)容中使用超過3 種完全不同的字體的時(shí)候，會讓網(wǎng)站顯得結(jié)構(gòu)紊亂且不專業(yè)，太多字體和復(fù)雜的樣式都會對網(wǎng)頁整體布局產(chǎn)生不可逆的惡性影響，用戶會出現(xiàn)煩躁的心情，對用戶的閱讀體驗(yàn)極具下降。

為了阻止這種影響訪客觀看體驗(yàn)的的情況的發(fā)生，盡量控制字體類型的數(shù)量是非常有必要的。通常情況下最簡單也是最容易出效果的的方法，限制字體數(shù)量是一種非常有用的解決方案，通常一個(gè)或至多兩個(gè)字體能夠滿足絕大多數(shù)的排版需求，如果試著在整個(gè)網(wǎng)站設(shè)計(jì)中堅(jiān)持只使用一種字體，會驚奇地發(fā)現(xiàn)能夠給人帶來一種整齊嚴(yán)謹(jǐn)又統(tǒng)一的體驗(yàn)。相同系列的字體進(jìn)行組合，即使用一種字體，也可以利用不同的大小、樣式，制造他們之間的層次感，凸顯出對比，簡單的改變能讓設(shè)計(jì)創(chuàng)造出無限的可能。如果實(shí)在需要使用兩種，甚至更多的字體，那么保證這字體與字體之間形式能夠相互補(bǔ)充、相互搭配，達(dá)成畫面字符統(tǒng)一。

2、控制每行內(nèi)容的長度

不管在網(wǎng)頁首頁還是在網(wǎng)頁中眾多的分支網(wǎng)頁，其中每行文本的字符數(shù)，其實(shí)直接影響著文本內(nèi)容的可讀性。文本太長或者太短都會影響著閱讀體驗(yàn)，查找閱讀文獻(xiàn)到底多少。假如文本太短，用戶的內(nèi)容掃視頻率會過高，經(jīng)常會打正常閱讀的節(jié)奏，而如果太長了，用戶會很難持續(xù)的保持較高的專注度去閱讀，網(wǎng)站制作人想要表達(dá)的內(nèi)容肯定會大打折扣。很顯然，這兩者都不是我們想要的。

在移動端上，手機(jī)的尺寸是一年比一年大，但是出于它的便攜性，尺寸無法與電腦屏幕相比，在有限的空間里每行文字應(yīng)該控制在30～40個(gè)字符之間，這也符合目前的用戶使用習(xí)慣和閱讀體驗(yàn)。參考下面的對比圖，可以看出，40～60個(gè)字符數(shù)通常能夠取得最佳的閱讀體驗(yàn)。在網(wǎng)頁設(shè)計(jì)中，通常使用em和px來控制文本塊的寬度，借此來控制每行的字符數(shù)量。

三、網(wǎng)頁設(shè)計(jì)內(nèi)的視覺設(shè)計(jì)

（一）具有代表性的網(wǎng)站標(biāo)志

一個(gè)響亮且深刻的標(biāo)志必不可少，標(biāo)志最顯著的特征是有著獨(dú)具一幟的形態(tài)，易于辨識，同時(shí)顯現(xiàn)所代表機(jī)構(gòu)企業(yè)的自身特性。點(diǎn)擊該標(biāo)志，就可訪問與企業(yè)相關(guān)的網(wǎng)站。標(biāo)志廣告既有利于提高企業(yè)標(biāo)志和企業(yè)品牌的識別記憶，又實(shí)現(xiàn)了網(wǎng)絡(luò)連接。[2]在商場街道看到一些標(biāo)志，你會立刻想到所屬品牌，毋庸置疑大多數(shù)人腦海里下意識會出現(xiàn)相應(yīng)的企業(yè)品牌，如此可見這些公司的知名推廣程度之大、營銷之成功或者運(yùn)營時(shí)間之久，也絕對和這家公司的logo圖標(biāo)脫不開干系，這就是設(shè)計(jì)標(biāo)志的作用。設(shè)計(jì)是人類社會具有識別和傳達(dá)信息作用的象征性視覺符號，把理念和圖案結(jié)合，使人們留下深刻的印象和記憶。標(biāo)志設(shè)計(jì)在構(gòu)思上應(yīng)把握定位準(zhǔn)確、形象典型這兩大要點(diǎn)，能讓人一望而知、迅速精確地領(lǐng)悟。標(biāo)志設(shè)計(jì)自身價(jià)值不可低估，它相比較于文字，其快速識別性、易于理解性更加顯示出其存在的巨大價(jià)值。作為形象識別的統(tǒng)領(lǐng)因素，備受企業(yè)家和設(shè)計(jì)師的高度重視。

（二）網(wǎng)頁中色彩的表達(dá)與應(yīng)用

Web設(shè)計(jì)使用關(guān)鍵的視覺元素，例如布局，圖形和內(nèi)容等。布局是在網(wǎng)站中排列圖形，鏈接和文本變換視覺引導(dǎo)的一種方式。顏色的選擇范圍相當(dāng)廣泛，設(shè)計(jì)從黑白的簡單到多色的豐富，具體取決于用戶人群喜好和品牌的個(gè)性。一個(gè)好的網(wǎng)頁設(shè)計(jì)還包括特殊時(shí)日可以隨時(shí)替換的網(wǎng)頁的配色方案、版式、布局和圖片，以便滿足于不同的場合。這些視覺元素根據(jù)網(wǎng)頁的顏色，內(nèi)容和用途進(jìn)行適當(dāng)放置。色彩視覺內(nèi)容是網(wǎng)站的主要組成部分，給人們帶來第一直觀印象。

1、確保合理的色彩對比度

文本顏色和背景顏色疊加使用應(yīng)該有足夠的對比度，文本越明顯，用戶就越能快速清晰地獲取其中的信息。按照W3C（萬維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)制定，文本和背景的對比是有一定規(guī)則可循的：

圖中對比度不足的時(shí)候，圖中的字似乎“溶”到背景中去了，幾乎無法正常進(jìn)行閱讀。這些符合對比度的規(guī)范，可是過高的對比度有利有弊，連續(xù)對比度過高會導(dǎo)致視覺壓力，一個(gè)合理的對比度相當(dāng)重要。易讀性正常前提下確定了配色，還需要在盡可能多的設(shè)備上進(jìn)行測試，讓不同的用戶來體驗(yàn)瀏覽效果，因?yàn)樵O(shè)備的顯示模式和尺寸不同，做好對比度就可以盡量避免出現(xiàn)可讀性障礙的問題。

2、網(wǎng)站運(yùn)用的色彩心理學(xué)

通過色彩喜好選擇可以了解人的一部分性格，由此可知瀏覽網(wǎng)頁的色彩基調(diào)也可以分析出設(shè)計(jì)師以下兩種想法，告訴企業(yè)的文化特征或是想讓訪客保持怎樣的情緒瀏覽網(wǎng)站，因?yàn)檎{(diào)整獨(dú)特的色彩有助于創(chuàng)建想法，傳達(dá)信息，調(diào)用感情和提升用戶興趣的領(lǐng)域。人們對色彩會進(jìn)行聯(lián)想，從而引起心理上的共鳴。當(dāng)色彩的聯(lián)想達(dá)到共性反應(yīng)，并通過文化傳承而形成固定觀念時(shí)，就具備了象征意義。[3]顏色在很大程度上影響觀看者的當(dāng)下情緒，并且在一定程度上幫助他們提升瀏覽網(wǎng)站的內(nèi)容后的做出決策過程快慢或是否做出決定。譬如說，上網(wǎng)購票是一件需要耐心反復(fù)確認(rèn)的事情，那么以下這些網(wǎng)站的配色：藍(lán)色，藍(lán)色是最為鎮(zhèn)靜的顏色，從生理和心理方面來說，藍(lán)色能讓人心跳減慢、體溫降低，給人的感覺平靜、理性，可以使人的情緒得到舒緩，象征平靜、理智、純凈，藍(lán)色具有鎮(zhèn)定安神，緩解焦慮的效果[4]。以下旅游出行網(wǎng)站把藍(lán)色為主基調(diào)就給訪客在仔細(xì)確認(rèn)購票信息的時(shí)候起到了很好的冷靜作用，再加上豐富色彩的景點(diǎn)目的地選擇也讓顧客在旅游前就對景地心馳向往。

（三）富有強(qiáng)大吸引力的動態(tài)效果

動態(tài)網(wǎng)頁相比于傳統(tǒng)靜態(tài)網(wǎng)頁，它事實(shí)上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁文件，只有當(dāng)用戶請求服務(wù)器時(shí)才返回一個(gè)完整的網(wǎng)頁，動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以實(shí)現(xiàn)更多的功能，可以大大降低網(wǎng)站維護(hù)的工作量。平面視覺和不斷發(fā)展的新技術(shù)將會有更加深入的結(jié)合。

Catch Fish And Chip網(wǎng)站包含了這樣的一個(gè)動態(tài)效果，當(dāng)用戶停留在網(wǎng)頁頂端時(shí)，會有長長的導(dǎo)航菜單，快速進(jìn)行訪客的分流，而如果想繼續(xù)向下看下去把網(wǎng)頁往下拉的話，一大排信息會動態(tài)過度成一條扁平的菜單，給下頁的內(nèi)容騰出了不少屏幕空間。蘋果官網(wǎng)上能找到很多很典型的動態(tài)加載、視差滾動、視頻和鍵鼠結(jié)合等各種新技術(shù)。

只要我們稍加觀察，就會注意到新技術(shù)新審美對于現(xiàn)代網(wǎng)頁設(shè)計(jì)的影響，這些正在發(fā)生的新事物會給你留下深刻的印象。網(wǎng)頁設(shè)計(jì)師在盡量保持網(wǎng)頁設(shè)計(jì)持有足夠功能性的同時(shí)，還會注入更多新鮮的元素創(chuàng)意。

四、發(fā)展前景

（一）搜索引擎優(yōu)化（SEO）

搜索引擎優(yōu)化（SEO）是當(dāng)今網(wǎng)絡(luò)營銷領(lǐng)域的流行關(guān)鍵詞。更多的企業(yè)有著希望用戶更快地找到自己的網(wǎng)站的需求，訪問量在很大程度上決定著公司的業(yè)績。多數(shù)網(wǎng)民在檢索自己感興趣的內(nèi)容時(shí)，只點(diǎn)擊搜索首頁的前幾位網(wǎng)站，搜索結(jié)果兩頁以后的內(nèi)容更加可想而知無人問津。所以出現(xiàn)了SEO，SEO是指對網(wǎng)站的優(yōu)化，讓其在行業(yè)內(nèi)占據(jù)領(lǐng)先地位，獲得品牌收益，以確保在搜索引擎中具有更高的排名，更高的排名也就意味著有著更大范圍的推廣和更大的大眾知曉度。尋找服務(wù)的客戶會在搜索引擎中打入特定的關(guān)鍵字，并且通常會把關(guān)注點(diǎn)聚焦在生成的前4-5個(gè)列表中，做過SEO的企業(yè)也相應(yīng)會收益其中。

（二）Web2.0網(wǎng)站

因抖音、嗶哩嗶哩、facebook臉書各大軟件網(wǎng)頁的興起，出現(xiàn)了Web2.0，這一新鮮的網(wǎng)絡(luò)交互性更加注重用戶與用戶，用戶與平臺之間三者交互，主要特點(diǎn)是鼓勵(lì)用戶創(chuàng)造和分享，這就要求發(fā)揮用戶的主動性，加強(qiáng)用戶間的互動，web2.0的主旋律即是“用戶既是網(wǎng)站內(nèi)容的訪客，也是網(wǎng)站內(nèi)容的制造者?！彼跃W(wǎng)站的首頁既要突出主題同時(shí)也增添很多元素的音訊視頻信息，足以挑起用戶的好奇心，積極注冊參與和探索，許多自媒體就好像是雨后春筍般紛紛成立。Web2.0像是一扇交給你鑰匙的大門需要用戶自己開鎖進(jìn)去，可以看到目前多數(shù)web2.0網(wǎng)站首頁確實(shí)秉承了這樣的理念，如：Twitter首頁設(shè)計(jì)的比較簡潔，不用上下左右滑動就能顯示完成，里面設(shè)置了注冊登錄后才能使用相關(guān)的服務(wù)，注冊后網(wǎng)站能了解用戶的使用偏好，能保留用戶發(fā)表的內(nèi)容信息，更能給用戶推薦他所感興趣的內(nèi)容，這一設(shè)定看上去提高了訪客瀏覽內(nèi)容的門檻，但是為雙方精準(zhǔn)長久的合作發(fā)展起著良好方向引導(dǎo)。

參考文獻(xiàn)：

[1]?? 蔡玉碩，朱瑜珠.文字設(shè)計(jì)與版式編排[V].北京;中國建筑工業(yè)出版社，2018（5）：130-130.

[2]?? 羅萍.廣告視覺設(shè)計(jì)基礎(chǔ)[M].廈門：廈門大學(xué)出版社，2005（9）：240-240.

[3]?? 劉暢，潘榮.設(shè)計(jì)色彩：感知、表達(dá)與應(yīng)用[M].北京：中國建筑工業(yè)出版社，2019（5）：52-53.

[4]?? 張磊.視覺傳達(dá)中的創(chuàng)意標(biāo)志設(shè)計(jì)[M].太原;山西經(jīng)濟(jì)出版社，2019（11）：77-78.

作者簡介：

桂一銘（1996-），男，浙江人，浙江樹人大學(xué)。

二作：趙熙（1982-），女，江蘇人，浙江樹人大學(xué)講師，碩士，主要從事數(shù)字媒體交互設(shè)計(jì)、動畫理論研究。