摘要：隨著中國互聯(lián)網的快速崛起，我國的網站數量在逐年的增加。企業(yè)也已認識到互聯(lián)網的快速發(fā)展所帶來的巨大收益，紛紛建立屬于自己品牌形象宣傳的新版企業(yè)網站或者電子商務類型網站。針對目前企業(yè)網站設計的特點，提出新的網站前端界面設計內容構成概念，旨在豐富基于企業(yè)網站界面設計的視覺傳達要素構成的理論和實踐內容。

關鍵詞：網頁設計；網頁界面設計；網頁視覺傳達要素；網站內容構成

★基金項目：山東協(xié)和學院職業(yè)教育創(chuàng)新發(fā)展高地理論實踐研究專項“新工科背景下基于OBE理念的《網頁網站設計》課程改革實踐與應用”（課題編號2020GD27）。

引言

據中國互聯(lián)網信息中心CNNIC發(fā)布的《中國互聯(lián)網第44次統(tǒng)計發(fā)展報告》中闡述：截止2019年6月，我國網民數量為8.54億人，手機網民數量8.47億人，農村網民數量為2.25億人，城鎮(zhèn)網民數量為6.3億人，使用臺式機上網、筆記本上網、平板電腦上網的比例分別為46.2%，36.1%和28.3%，網絡購物用戶規(guī)模6.39億，互聯(lián)網的普及率超過6成，移動互聯(lián)使用持續(xù)優(yōu)化。網站，已作為上網的主要依托，由于人們頻繁的使用網絡，而變得越來越重要。網站設計也得到突飛猛進的發(fā)展。一個優(yōu)秀的企業(yè)網站，通常具備合理布局的頁面元素、豐富多樣的內容、賞心悅目的編排方式和視覺效果，并在這幾個方面實現頁面整體的和諧統(tǒng)一。只有這樣，才能給網站瀏覽者留下深刻的印象。網站是由多個網頁通過超級鏈接組成的有機整體。現在網頁，無論是在內容層面，還是在形式層面，都已經有了極大的豐富，而網頁視覺設計也具有了視覺傳達的一般特征，在交互性方面、版式的不可控方面、技術和藝術的緊密性方面、多媒體的綜合性方面、多維性方面均有了較大的提高。網頁設計師必須具有強勢的主題訴求能力和內容選擇創(chuàng)造力。與傳統(tǒng)媒體不同，網站界面設計除了文本和圖像等基本元素外，還包含一些其他的重要元素。本文從網站內容建設方面入手，以SONY中國官方網站的截圖（如圖2所示）為例，詳述企業(yè)網站內容視覺傳達的構成要素。

1、網頁界面基本元素

1.1 文本

文本，即文字，是人類最重要的信息載體和表現形式，也是人類進行思想和情感交流的重要手段。文字是信息傳達中最普遍使用的視覺元素，是網頁的主體內容。文字對于網站的氣質風格有很大的影響，字體的樣式、字號大小、加粗、傾斜、下劃線、字距、行距、跳躍率、編排方式等字體效果可以明顯的突出信息訴求。網頁正文中使用較多的字體樣式一般為黑體和宋體，黑體用于網頁標題，宋體用于網頁正文部分，但不絕對；目前較為典型的中文屏幕字體黑體包括方正蘭亭黑、微軟雅黑、黑體、信黑體等，如圖1所示。

傳統(tǒng)而規(guī)范的字體，偏小的字號，整齊、低跳躍率的編排，會給人平靜、穩(wěn)重的感覺，營造一種安靜的氣質；相反，使用字形活躍的字體，或者排版不規(guī)則、高跳躍率的組織，會使網站形成活躍的氛圍。字距的大小由字體結構來決定，行距指的是臨近兩行文本之間的距離，行距過小容易造成上下文的干擾，行距過寬視覺效果變差、出現版面散、亂、無重心的視覺感受，也會降低文字的延續(xù)性。一般行距為1.25倍-2倍較佳。文字的排版方式受網站信息量和網站設計風格影響，文字信息量大時，采用齊頭齊尾的塊狀排版方式；文字信息量不大時，文字排版較為靈活，但要注意協(xié)調對比、統(tǒng)一、節(jié)奏和平衡，并注意把控視覺秩序。在設計頁面時，字體排版要注意兩點：（1）在頁面設計過程中，主、副標題要明確標出，可以利用不同字體的樣式或者字號大小粗確標注出來，主副標題要大小層次分明、主次分明，這樣瀏覽者可以輕松的抓取到它本身的在意點。（2）在網頁頁面中，使用的字體樣式不要過多，盡量不要超過三種，字體太多，會讓頁面很亂，沒有統(tǒng)一性。

1.2 圖像

圖像在網站中應用比較多，在網頁的信息訴求中起到體現風格、美化網頁、提供信息、展示作品的作用。與文字相比，圖像在信息傳遞方面更加直觀和生動，更易吸引用戶的視線，能夠更好的幫助用戶聚焦信息，并引導用戶行為。尤其是在產品銷售型企業(yè)網站中，圖像的作用更為顯著，它能直觀的突出產品整體外觀、提供相應產品信息和產品品質，一般宜用細膩、質感、分辨率高的位圖圖像，以體現產品的調性定位和風格。網頁中使用較多的圖像格式為JPG位圖圖像和GIF矢量圖圖像。JPG圖像在復雜圖像、細微色彩、陰影色彩、連續(xù)色調表現等方面具有明顯優(yōu)勢，使用有損壓縮模式，能夠將圖像壓縮在很小的儲存空間，圖像中重復或不重要的資料會被丟失，因此容易造成圖像數據的損傷，并失真。GIF矢量圖像在線條表現方面，具有相關的優(yōu)勢，支持放大、縮小、旋轉等方面，不失真，不影響清晰度，支持全透明/半透明（alpha）/不透明模式。

2、網頁界面擴展元素

2.1 網站LOGO

網站Logo是整個網站對外宣傳、展示的重要標識和標志，是網站特色和內涵的集中體現，它用于傳遞企業(yè)網站的定位和經營理念。 LOGO設計隸屬于企業(yè)VI視覺設計的表現點之一，其具有簡潔、明確、高度凝練，一目了然的視覺傳遞特性，特別強調辨識性和獨特性的要求，其目的為強化受眾區(qū)別性的記憶及持續(xù)的品牌忠誠度。Logo的內容通常包括特定的圖形和文本。其中，圖形往往與網站的具體內容或開發(fā)網站的企業(yè)文化緊密結合，以體現網站的定位和特色；文本主要起到加深用戶印象的作用，一般介紹網站的名稱、服務，也可以體現網站的價值觀、宣傳口號。簡潔、明快、流暢、瞬間印象的訴求使得LOGO的設計越來越追求獨特、高度的洗練。一般采用合成文字的設計方式。設計網站LOGO時，面向對象的應用要做出相應的規(guī)范，對指導網站的整體建設具有極現實的意義。

2.2 Banner

banner是企業(yè)網站的核心組成部分，其宣傳展示效果越來越受到設計師重視，其空間大小占據網頁界面設計一定的比例。banner的構成主要為企業(yè)文化活動形象展示區(qū)或為主推爆款產品的訴求展示區(qū)。Banner的設計表現形式會根據企業(yè)網站風格而設計多樣化，或企業(yè)活動拍攝、FLASH動畫、手繪插畫風格、C4D、高級圖像合成等設計手法，但不管使用何種手法，符合視覺主題表達及企業(yè)形象調性、激發(fā)目標客戶群的興趣和訴求核心的企業(yè)價值觀，才是banner設計的首要任務。在設計過程中， banner主題文字數量要適中，不能過多，要一目了然。通過文字排版及視覺傳達訴求，契合網頁設計要素，配合好文字樣式、

大小、粗細等效果，博人眼球，做好視覺沖擊點的設計。Banner的設計高度應根據品牌的要求來做相應的調整，最佳尺寸在450-1000PX。

2.3 圖形符號

在網頁設計中，圖形符號不占有一定的比例，但是圖形符號可以很深刻的影響網站的視覺美觀度，具有設計形態(tài)簡單、點綴、豐富、潤色的特點。網頁中的圖形符號，主要包括網站的ICON圖標、按鈕、項目符號等；圖標是具有指代功能的圖像，其存在的目的就是幫助用戶快速識別和找到網站中的相應內容，要求圖像設計與頁面整體風格統(tǒng)一、易于識別、與網頁相協(xié)調、富有創(chuàng)意、高度凝練等特性；按鈕的設計主要有兩種，一種是具有表單數據提交功能的按鈕，另一種是僅僅表示鏈接功能的“偽按鈕”。前者用于實現功能，后者側重設計美觀，強調整體的協(xié)調統(tǒng)一。

3、網頁頁面布局元素

3.1 導航系統(tǒng)

一個優(yōu)秀的企業(yè)網站必須具有清晰的層次結構，即物理結構和邏輯結構。通俗的講，物理結構是網站的實際目錄結構，就是由文件夾和文件構成的樹狀目錄；邏輯結構是網站內的鏈接構成的一個巨大的網絡圖，它反映網站強大的邏輯關系。網站導航根據所在網頁位置一般分為導航條設計（橫向）、側邊導航欄設計（縱向）、頂部導航設計、標簽導航、面包屑導航、多媒體導航等。導航的設計現在也是網站風格調性的表現點之一，好的導航設計在實用功能體現的同時，也能體現網站風格。定位好的扁平化導航設計，可以使企業(yè)網站的層次感分明，使瀏覽者能夠快速定位到相應的模塊，從而引發(fā)興趣、激發(fā)需求、產生信任、打消疑慮等一系列的心理過程。規(guī)模大一些的企業(yè)網站，導航系統(tǒng)往往需要兩到三層，甚至更多層級目錄。根據經驗，一般將網站的邏輯結構設計要素總結如下：1、網站主頁需要鏈接所有的頻道主頁。2、網站主頁一般不直接鏈接內容頁面，除非是非常想突出推薦的特殊頁面。3、所有的頻道主頁需要與其他頻道主頁相互鏈接，并能都返回到主頁。4、頻道主頁也需要連接到自己的頻道內容頁面，一般不連接其他頻道的內容頁面。5、所有內容頁面都能夠返回網站主頁。優(yōu)秀的網站其導航系統(tǒng)的物理結構和邏輯結構都會非常出色，兩者可以相互結合，又可以有所區(qū)分。而控制好的邏輯結構會使用戶體驗更加優(yōu)異，并且能夠促進和帶動整個網站的頁面在搜索引擎上的權重。

3.2 超級鏈接

超級鏈接可以將多個閑散的頁面組織起來，使多個頁面構成一個有機整體，超級鏈接在網頁中的運用，大體可以分為：站內鏈接，站外鏈接，文件下載鏈接、錨點鏈接、腳本鏈接、電子郵件鏈接等。在網站中應用比較多的為站內鏈接和錨點鏈接；站內鏈接可以將本網站內的文件串并起來構成一個有組織結構的整體；錨點鏈接可以將網頁內容較多時，將網站定位到本頁面的某一個位置或者另外頁面的某個固定位置。定位清晰明確，可以讓瀏覽者快速找到某個網頁位置，增加網頁內容的可讀性。

3.3 表格

表格，又稱為表，既是一種可視化交流模式，又是一種組織整理數據的手段。人們在通訊交流、科學研究以及數據分析活動當中廣泛采用著形形色色的表格。在企業(yè)網站設計中，它是重要的布局工具，起到網頁元素定位與組織布局的作用。通過表格菜單，可以從整體頁面規(guī)劃上進行有效的規(guī)劃和排版，在符合視覺流程的前提下，從整體上調控各個頁面元素的分布與排列。目前的網站設計中可以用Table+Div+Css來進行網頁的布局、定位和實施。

4、網頁界面增效元素

4.1 表單

表單是網頁中交互設計中的提供反饋和收集信息的重要工具，其作用對于用戶而言，是數據的錄入和提交的界面；而對于網站而言，是獲取用戶信息的途徑。表單實質由兩部分組成：一、存儲表單控件的網頁文件；二、處理表單提交數據的處理程序。該程序在服務器上運行，一般與后臺數據庫配合使用。在企業(yè)網站中的表單的主要應用有：用戶注冊表、網站反饋信息、調查問卷、站內搜索等。

4.2 多媒體及特效

多媒體的使用可以讓網頁元素更加豐富，多媒體包含的內容比較寬泛，在網頁設計中，特指音頻技術、視頻技術及動畫效果。音頻即為聲音，視頻元素可以將傳統(tǒng)媒體宣傳報道與網絡媒體相結合，利用網絡媒體7*24小時不間斷服務的特性，起到相互映襯或者不間斷廣告宣傳的作用。動畫元素可以摒棄因文字或圖像展示過于單調、刻板、局部等方面的缺陷，使主題的傳達訴求更具有直觀性和可信賴性。特效，即特殊效果，指的是在網頁中利用JAVA語言的腳本程序或者VB語言的腳本程序來完成特殊的網頁視覺效果制作，包含圖像特效、鼠標特效、代碼特效等。

5、小結

本文從網頁界面基本元素、網頁界面擴展元素、網頁界面布局元素、網頁界面增效元素四個方面來闡述企業(yè)網站視覺界面設計的元素的構成，重點分析了文本、banner及導航系統(tǒng)的設計，凝練提出了擴展元素部分的圖像符號的設計理論，豐富完善基于企業(yè)網站界面設計的視覺元素構成分析。

參考文獻：

[1] 楊飛飛.企業(yè)網站視覺互動設計與品牌傳[J].創(chuàng)意與設計，2013（6）：33-38.

[2] 劉桃媛.網頁界面設計中視覺要素的比例關系研究[D].南京：南京理工大學，2017.

[3] 郭芳.現代企業(yè)類網站版式設計研究[D].濟南：山東大學，2013.

[4] 馬福浚.基于視覺體驗理論的WEB界面設計研究[D].濟南：山東大學，2011.

作者簡介：郭恩，講師，現就職于山東協(xié)和學院，研究方向為WEB開發(fā)、數據庫系統(tǒng)、電子商務、管理信息系統(tǒng)。