基于藝術處理加工的網頁設計研究

桂一銘 趙熙

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

關鍵詞：網頁設計;排版設計;設計心理學

一、當今時代下的網頁設計

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

二、網頁設計內的的排版設計

（一）不同服務功能的網頁排版

排版設計是一種能展示信息藝術化的形式，一個優秀的排版在能夠更好的展示信息的同時，又能夠體現出設計的美感，使客戶快速獲得信息的同時感受到設計的美。排版在UI設計中至關重要，一個出色的排版設計能夠讓用戶專注于接受信息內容，而不是排版本身上。

1、電子商務平臺的排版

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

2.企業網站的網頁排版

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

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

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

1、控制字體種類數量

充滿個性的字體層出不窮，而在網頁這空間并不多的地方承載不了過多的字體種類，當網頁文本內容中使用超過3 種完全不同的字體的時候，會讓網站顯得結構紊亂且不專業，太多字體和復雜的樣式都會對網頁整體布局產生不可逆的惡性影響，用戶會出現煩躁的心情，對用戶的閱讀體驗極具下降。

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

2、控制每行內容的長度

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

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

三、網頁設計內的視覺設計

（一）具有代表性的網站標志

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

（二）網頁中色彩的表達與應用

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

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

文本顏色和背景顏色疊加使用應該有足夠的對比度，文本越明顯，用戶就越能快速清晰地獲取其中的信息。按照W3C（萬維網聯盟）的標準制定，文本和背景的對比是有一定規則可循的：

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

2、網站運用的色彩心理學

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

（三）富有強大吸引力的動態效果

動態網頁相比于傳統靜態網頁，它事實上并不是獨立存在于服務器上的網頁文件，只有當用戶請求服務器時才返回一個完整的網頁，動態網頁以數據庫技術為基礎，可以實現更多的功能，可以大大降低網站維護的工作量。平面視覺和不斷發展的新技術將會有更加深入的結合。

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

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

四、發展前景

（一）搜索引擎優化（SEO）

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

（二）Web2.0網站

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

參考文獻：

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

[2]?? 羅萍.廣告視覺設計基礎[M].廈門：廈門大學出版社，2005（9）：240-240.

[3]?? 劉暢，潘榮.設計色彩：感知、表達與應用[M].北京：中國建筑工業出版社，2019（5）：52-53.

[4]?? 張磊.視覺傳達中的創意標志設計[M].太原;山西經濟出版社，2019（11）：77-78.

作者簡介：

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

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