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

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；網(wǎng)頁(yè)界面設(shè)計(jì)；網(wǎng)頁(yè)視覺(jué)傳達(dá)要素；網(wǎng)站內(nèi)容構(gòu)成

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

引言

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

1、網(wǎng)頁(yè)界面基本元素

1.1 文本

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

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

1.2 圖像

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

2、網(wǎng)頁(yè)界面擴(kuò)展元素

2.1 網(wǎng)站LOGO

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

2.2 Banner

banner是企業(yè)網(wǎng)站的核心組成部分，其宣傳展示效果越來(lái)越受到設(shè)計(jì)師重視，其空間大小占據(jù)網(wǎng)頁(yè)界面設(shè)計(jì)一定的比例。banner的構(gòu)成主要為企業(yè)文化活動(dòng)形象展示區(qū)或?yàn)橹魍票町a(chǎn)品的訴求展示區(qū)。Banner的設(shè)計(jì)表現(xiàn)形式會(huì)根據(jù)企業(yè)網(wǎng)站風(fēng)格而設(shè)計(jì)多樣化，或企業(yè)活動(dòng)拍攝、FLASH動(dòng)畫、手繪插畫風(fēng)格、C4D、高級(jí)圖像合成等設(shè)計(jì)手法，但不管使用何種手法，符合視覺(jué)主題表達(dá)及企業(yè)形象調(diào)性、激發(fā)目標(biāo)客戶群的興趣和訴求核心的企業(yè)價(jià)值觀，才是banner設(shè)計(jì)的首要任務(wù)。在設(shè)計(jì)過(guò)程中， banner主題文字?jǐn)?shù)量要適中，不能過(guò)多，要一目了然。通過(guò)文字排版及視覺(jué)傳達(dá)訴求，契合網(wǎng)頁(yè)設(shè)計(jì)要素，配合好文字樣式、

大小、粗細(xì)等效果，博人眼球，做好視覺(jué)沖擊點(diǎn)的設(shè)計(jì)。Banner的設(shè)計(jì)高度應(yīng)根據(jù)品牌的要求來(lái)做相應(yīng)的調(diào)整，最佳尺寸在450-1000PX。

2.3 圖形符號(hào)

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

3、網(wǎng)頁(yè)頁(yè)面布局元素

3.1 導(dǎo)航系統(tǒng)

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

3.2 超級(jí)鏈接

超級(jí)鏈接可以將多個(gè)閑散的頁(yè)面組織起來(lái)，使多個(gè)頁(yè)面構(gòu)成一個(gè)有機(jī)整體，超級(jí)鏈接在網(wǎng)頁(yè)中的運(yùn)用，大體可以分為：站內(nèi)鏈接，站外鏈接，文件下載鏈接、錨點(diǎn)鏈接、腳本鏈接、電子郵件鏈接等。在網(wǎng)站中應(yīng)用比較多的為站內(nèi)鏈接和錨點(diǎn)鏈接；站內(nèi)鏈接可以將本網(wǎng)站內(nèi)的文件串并起來(lái)構(gòu)成一個(gè)有組織結(jié)構(gòu)的整體；錨點(diǎn)鏈接可以將網(wǎng)頁(yè)內(nèi)容較多時(shí)，將網(wǎng)站定位到本頁(yè)面的某一個(gè)位置或者另外頁(yè)面的某個(gè)固定位置。定位清晰明確，可以讓瀏覽者快速找到某個(gè)網(wǎng)頁(yè)位置，增加網(wǎng)頁(yè)內(nèi)容的可讀性。

3.3 表格

表格，又稱為表，既是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段。人們?cè)谕ㄓ嵔涣?、科學(xué)研究以及數(shù)據(jù)分析活動(dòng)當(dāng)中廣泛采用著形形色色的表格。在企業(yè)網(wǎng)站設(shè)計(jì)中，它是重要的布局工具，起到網(wǎng)頁(yè)元素定位與組織布局的作用。通過(guò)表格菜單，可以從整體頁(yè)面規(guī)劃上進(jìn)行有效的規(guī)劃和排版，在符合視覺(jué)流程的前提下，從整體上調(diào)控各個(gè)頁(yè)面元素的分布與排列。目前的網(wǎng)站設(shè)計(jì)中可以用Table+Div+Css來(lái)進(jìn)行網(wǎng)頁(yè)的布局、定位和實(shí)施。

4、網(wǎng)頁(yè)界面增效元素

4.1 表單

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

4.2 多媒體及特效

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

5、小結(jié)

本文從網(wǎng)頁(yè)界面基本元素、網(wǎng)頁(yè)界面擴(kuò)展元素、網(wǎng)頁(yè)界面布局元素、網(wǎng)頁(yè)界面增效元素四個(gè)方面來(lái)闡述企業(yè)網(wǎng)站視覺(jué)界面設(shè)計(jì)的元素的構(gòu)成，重點(diǎn)分析了文本、banner及導(dǎo)航系統(tǒng)的設(shè)計(jì)，凝練提出了擴(kuò)展元素部分的圖像符號(hào)的設(shè)計(jì)理論，豐富完善基于企業(yè)網(wǎng)站界面設(shè)計(jì)的視覺(jué)元素構(gòu)成分析。

參考文獻(xiàn)：

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

[2] 劉桃媛.網(wǎng)頁(yè)界面設(shè)計(jì)中視覺(jué)要素的比例關(guān)系研究[D].南京：南京理工大學(xué)，2017.

[3] 郭芳.現(xiàn)代企業(yè)類網(wǎng)站版式設(shè)計(jì)研究[D].濟(jì)南：山東大學(xué)，2013.

[4] 馬?？?基于視覺(jué)體驗(yàn)理論的WEB界面設(shè)計(jì)研究[D].濟(jì)南：山東大學(xué)，2011.

作者簡(jiǎn)介：郭恩，講師，現(xiàn)就職于山東協(xié)和學(xué)院，研究方向?yàn)閃EB開(kāi)發(fā)、數(shù)據(jù)庫(kù)系統(tǒng)、電子商務(wù)、管理信息系統(tǒng)。