美術(shù)設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用

摘要：進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)除了要會(huì)應(yīng)用相應(yīng)的web技術(shù)之外，設(shè)計(jì)者還應(yīng)當(dāng)具備一定的審美素養(yǎng)。為了做出更加美觀、人性化的網(wǎng)頁(yè)，本文從美術(shù)設(shè)計(jì)的角度，探討網(wǎng)頁(yè)布局和色彩的運(yùn)用。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；形式美法則；視覺(jué)體驗(yàn)

一、綜述

21世紀(jì)互聯(lián)網(wǎng)在商業(yè)、廣告業(yè)、信息業(yè)和通信業(yè)產(chǎn)生了廣泛而深刻的影響。互聯(lián)網(wǎng)由無(wú)數(shù)形形色色的網(wǎng)站構(gòu)成，而網(wǎng)站的基本元素就是網(wǎng)頁(yè)，是互聯(lián)網(wǎng)時(shí)代的一張“臉面”，而網(wǎng)頁(yè)設(shè)計(jì)行業(yè)也是這幾年最前沿的行業(yè)之一。伴隨互聯(lián)網(wǎng)的迅猛發(fā)展，瀏覽者的文化和審美層次都在提高，對(duì)網(wǎng)頁(yè)設(shè)計(jì)水準(zhǔn)也在上升?，F(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)需要加強(qiáng)美術(shù)設(shè)計(jì)理論知識(shí)和實(shí)踐能錄，使互聯(lián)網(wǎng)的容貌更加豐富。

網(wǎng)頁(yè)設(shè)計(jì)是一種基于顯示器顯示的加諸于視覺(jué)的整合設(shè)計(jì)，是以信息網(wǎng)絡(luò)為媒介和載體的綜合性藝術(shù)，是一種互動(dòng)型的媒體藝術(shù)。除了要求設(shè)計(jì)師熟練運(yùn)用美術(shù)知識(shí)之外，對(duì)設(shè)計(jì)心理學(xué)，人機(jī)工程學(xué)，科學(xué)技術(shù)發(fā)展及客戶需求等方面都要有所把握，設(shè)計(jì)出美觀，合理的人與計(jì)算機(jī)交互的平臺(tái)界面。

二、網(wǎng)頁(yè)的基本元素和近年來(lái)移動(dòng)端產(chǎn)生的新興變化

網(wǎng)頁(yè)的構(gòu)成包括文字，圖形，圖像，標(biāo)志，色彩等這些要素。網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)，是將大量信息通過(guò)收集、歸納、整理和美化，讓頁(yè)面有條理，完成一種具有創(chuàng)造性的思維活動(dòng)。

以往設(shè)計(jì)師在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候會(huì)考慮帶寬。以新浪新聞為例，在2000年左右人們依靠撥號(hào)上網(wǎng)的時(shí)代，大部分網(wǎng)頁(yè)是一個(gè)簡(jiǎn)單的文字頁(yè)面，主要用來(lái)發(fā)布新聞，展示公告，主要以文字進(jìn)行信息交流。單個(gè)新聞網(wǎng)頁(yè)主要分寬窄兩欄（banner），寬欄以文字輔以少數(shù)圖片，沒(méi)有特效邊框，窄欄是其他新聞標(biāo)題以及圖片廣告，廣告只有約110×75像素大小。因網(wǎng)速的快速提升，光纖的普遍使用，大幅提高的家庭網(wǎng)速使得絕大多數(shù)網(wǎng)頁(yè)傾向多圖化，高清化，UI個(gè)性化和立體化。網(wǎng)頁(yè)設(shè)計(jì)開(kāi)始吸收融合豐富的視覺(jué)元素，加入視頻、高清彩圖，開(kāi)始追求為形式美消耗大量數(shù)據(jù)流量。

用戶在使用大屏幕的計(jì)算機(jī)時(shí)，便于接收包括視頻，動(dòng)圖廣告在內(nèi)全面的信息，而當(dāng)用戶使用手機(jī)時(shí)，網(wǎng)頁(yè)字體小，F(xiàn)lash播放器的不兼容，GIF效果無(wú)法使用網(wǎng)站排版布局固定，文字內(nèi)容擠壓，操作和點(diǎn)擊困難，用戶們并不想在小的手機(jī)屏幕上看到大幅廣告。有越來(lái)越多的廠商在電腦端之外為Ipad和手機(jī)端配置一個(gè)移動(dòng)網(wǎng)址。用戶在訪問(wèn)時(shí)，瀏覽器會(huì)識(shí)別客戶使用的移動(dòng)設(shè)備型號(hào)，拋棄自適應(yīng)的頁(yè)面，手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)比計(jì)算機(jī)更簡(jiǎn)潔，界面弱化，著重突出功能，關(guān)注瀏覽者正在閱讀的重點(diǎn)。

三、運(yùn)用布局特點(diǎn)和黃金分割律進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)

網(wǎng)頁(yè)內(nèi)容與功能決定網(wǎng)頁(yè)的展示形式和界面設(shè)計(jì)。人眼只能產(chǎn)生一個(gè)視覺(jué)焦點(diǎn)，瀏覽網(wǎng)頁(yè)時(shí)，我們的視覺(jué)會(huì)產(chǎn)生自然流動(dòng)的習(xí)慣。網(wǎng)頁(yè)應(yīng)當(dāng)適應(yīng)不同計(jì)算機(jī)不同的分辨率，IE瀏覽器MAC系統(tǒng)瀏覽器等主流瀏覽器，注重色彩搭配及其對(duì)不同色域的支持。我們?cè)谠O(shè)計(jì)的時(shí)候，判斷出瀏覽網(wǎng)頁(yè)用戶的屏幕分辨率，根據(jù)不同的分辨率設(shè)計(jì)不同的瀏覽內(nèi)容，使用同一種的圖片處理效果，選擇適合的大小、搭配相應(yīng)的線條，以增進(jìn)信息傳達(dá)效果。網(wǎng)頁(yè)設(shè)計(jì)的圖與底之間關(guān)系也是圖形、圖像制作中應(yīng)考慮的因素，采用變形、模糊或虛化的方法進(jìn)行背景圖形、圖像的處理。創(chuàng)造有目的地視覺(jué)流動(dòng)方向，達(dá)到表達(dá)重點(diǎn)和詮釋內(nèi)容的目的，使瀏覽者能輕松找到需要的信息內(nèi)容。

在造型藝術(shù)中，比例起著特別重要的作用。文藝復(fù)興時(shí)代，設(shè)計(jì)師們力求在自己的創(chuàng)作作品中體現(xiàn)人體最重要的比例。那是就產(chǎn)生了關(guān)于完善的比例的學(xué)說(shuō)“黃金分割”：將一個(gè)整體分為兩個(gè)部分，較大部分和較小部分之比等于整體和較大部分之比，比值1：0.618或1.618：1，這個(gè)結(jié)果被公認(rèn)為最具有審美意義的比例，也是最能引起人的視覺(jué)美感的比例。

黃金分割的美學(xué)價(jià)值也由科學(xué)實(shí)驗(yàn)得到證實(shí)，引發(fā)了許多設(shè)計(jì)藝術(shù)在內(nèi)的重要應(yīng)用。隨著黃金分割研究的深入，黃金分割理論也得到了理論的發(fā)展。隨著我們的研究深入，黃金分割的應(yīng)用從建筑、雕塑、繪畫(huà)、平面設(shè)計(jì)領(lǐng)域進(jìn)一步擴(kuò)展到了平面設(shè)計(jì)領(lǐng)域，在進(jìn)行美學(xué)相關(guān)的設(shè)計(jì)時(shí)，設(shè)計(jì)師應(yīng)當(dāng)科學(xué)地遵從黃金分割律，達(dá)到視覺(jué)平衡。

四、色彩在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用

網(wǎng)頁(yè)設(shè)計(jì)的目的是創(chuàng)造一種人性化的視覺(jué)環(huán)境，除了提供用戶良好的視覺(jué)體驗(yàn)，還要滿足他們?cè)诓煌瑘?chǎng)合對(duì)信息的需求。在不同的場(chǎng)合人們對(duì)于網(wǎng)頁(yè)排版的功能美和美術(shù)美的的要求是不同的，因此，做到功能和美術(shù)美的交融統(tǒng)一除了重視基本的信息需求外，更要注意色彩的搭配。借助色輪和顏色生成器進(jìn)行輔助設(shè)計(jì)，選擇的顏色越多，配色方案就越多。

注重色彩搭配，使背景和文字符合基本的彩色構(gòu)成和視覺(jué)常識(shí)，出于界面設(shè)計(jì)對(duì)用戶視覺(jué)的引導(dǎo)，以達(dá)到統(tǒng)一的視覺(jué)效果，優(yōu)秀的網(wǎng)站頁(yè)面設(shè)計(jì)，不僅要有鮮明的主題，一統(tǒng)的風(fēng)格，還要重視內(nèi)容與形式的的統(tǒng)一。在設(shè)計(jì)文化類網(wǎng)站時(shí)，可以使用豐富的主題色，增強(qiáng)瀏覽者的興趣，給人帶來(lái)賞心悅目的感覺(jué)。機(jī)關(guān)部門(mén)的網(wǎng)站，因這些網(wǎng)站通常用來(lái)發(fā)布、公示信息，對(duì)美術(shù)設(shè)計(jì)的部分要求較低，應(yīng)當(dāng)降低設(shè)計(jì)創(chuàng)意的比重，僅以文字或欄目線條來(lái)區(qū)分，以給瀏覽者正規(guī)，官方的印象。科技類網(wǎng)站，使用簡(jiǎn)練的藍(lán)色，銀色等顏色為佳。女性主題的網(wǎng)站，使用明快的黃色，粉色等顏色為佳。在設(shè)計(jì)中充分發(fā)揮色彩情感。

五、形式美法則在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用

形式美法則是人類在創(chuàng)造美的形式、美的過(guò)程中對(duì)美的形式規(guī)律的經(jīng)驗(yàn)總結(jié)和抽象概括。主要包括：對(duì)稱均衡、單純齊一、調(diào)和對(duì)比、比例、節(jié)奏韻律。形式法則的運(yùn)用主要體現(xiàn)在造型、裝飾、色彩處理手法上。形式美法則在網(wǎng)頁(yè)設(shè)計(jì)的最初階段設(shè)計(jì)師的構(gòu)圖中的重要性不容忽視。設(shè)計(jì)需要滿足視覺(jué)審美的需求，使各元素在視覺(jué)上相對(duì)平穩(wěn)和均衡。在形式上，運(yùn)用形式美法則來(lái)協(xié)調(diào)和處理各個(gè)視覺(jué)要素之間的關(guān)系。在形式美法則中，對(duì)稱是指圖形或物體對(duì)中心點(diǎn)、中心線、對(duì)稱面，在形狀大小排列上具有對(duì)應(yīng)關(guān)系；均衡是不對(duì)稱形態(tài)的一種平衡。對(duì)稱與均衡是取得視覺(jué)平衡形式。對(duì)稱體現(xiàn)了靜感與穩(wěn)定性，具有安定的美，均衡則表現(xiàn)了律動(dòng)感，具有生動(dòng)、活潑的美。在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，注意形式上的和諧還需要視覺(jué)的信息的引導(dǎo)。在網(wǎng)頁(yè)版式設(shè)計(jì)上，對(duì)稱與均衡的運(yùn)用是常見(jiàn)的，一般來(lái)說(shuō)，完全對(duì)稱的版式并不多見(jiàn)，更多時(shí)候體現(xiàn)的是一種均衡，視覺(jué)元素在頁(yè)面中的組織形式需要滿足整體平衡同樣也要滿足人的心理因素。對(duì)稱和均衡的運(yùn)用在網(wǎng)頁(yè)版式設(shè)計(jì)中并不多見(jiàn)，而設(shè)計(jì)師需要掌控的是一種視覺(jué)上的整體平衡感，因?yàn)榫W(wǎng)頁(yè)時(shí)觀看者的心理因素的一種圖形化的投射，網(wǎng)頁(yè)過(guò)分地追求對(duì)稱，不僅僅會(huì)使得信息的分布不容易閱讀，可能還會(huì)使觀者產(chǎn)生心理情緒。

六、依據(jù)網(wǎng)頁(yè)的多媒體性而設(shè)計(jì)

設(shè)計(jì)是主觀和客觀共同作用的結(jié)果。和平面廣告，報(bào)刊雜志的版面不同，網(wǎng)頁(yè)設(shè)計(jì)技術(shù)性的體現(xiàn)在信息交互性、持續(xù)性、多維度性，和視覺(jué)聽(tīng)覺(jué)多媒體性方面。印刷品都有固定的規(guī)格尺寸，而網(wǎng)頁(yè)由瀏覽者掌握，網(wǎng)頁(yè)的組織結(jié)構(gòu)不像實(shí)物印刷產(chǎn)品那樣由線性結(jié)合，這種版式的不可控制性對(duì)網(wǎng)頁(yè)設(shè)計(jì)的藝術(shù)表現(xiàn)能力提出更高的要求。網(wǎng)頁(yè)設(shè)計(jì)如何從平面設(shè)計(jì)發(fā)展到立體性的多媒體設(shè)計(jì)，讓網(wǎng)絡(luò)技術(shù)和藝術(shù)設(shè)計(jì)緊密結(jié)合，是設(shè)計(jì)者需要應(yīng)對(duì)的問(wèn)題。制作多媒體網(wǎng)頁(yè)時(shí)，F(xiàn)lash和3D動(dòng)畫(huà)易于發(fā)揮創(chuàng)意，人機(jī)對(duì)話過(guò)程變得更加生動(dòng)，產(chǎn)生視覺(jué)與心理上的共鳴，帶給受眾視聽(tīng)的多重享受。例如現(xiàn)在流行的短視頻網(wǎng)站，其頁(yè)面具有很強(qiáng)的時(shí)代性，受眾廣泛，是對(duì)瀏覽者視覺(jué)和心理上的調(diào)劑，使其產(chǎn)生一種愉悅感，延伸想象空間，營(yíng)造出獨(dú)特的視聽(tīng)體驗(yàn)，這種加強(qiáng)的記憶性是指短視頻網(wǎng)站形象長(zhǎng)時(shí)間地保留在大腦印記中，同時(shí)產(chǎn)生條件反射。所以設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)可以加強(qiáng)多媒體構(gòu)成因素的作用，以簡(jiǎn)潔，快速，沖擊性強(qiáng)的視覺(jué)語(yǔ)言和視覺(jué)符號(hào)，調(diào)和、視覺(jué)誘導(dǎo)加強(qiáng)觀者的記憶。

結(jié)束語(yǔ)

網(wǎng)頁(yè)設(shè)計(jì)這個(gè)課題，在當(dāng)今科學(xué)技術(shù)不斷發(fā)展影響下的日常生活中，是一個(gè)新的平面設(shè)計(jì)種類。網(wǎng)頁(yè)設(shè)計(jì)是網(wǎng)絡(luò)技術(shù)與美術(shù)設(shè)計(jì)的統(tǒng)一，設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，要做到滿足用戶的需求心理，視覺(jué)美學(xué)和認(rèn)知習(xí)慣，以瀏覽者的角度進(jìn)行設(shè)計(jì)，跟上全新的多媒體數(shù)字時(shí)代，運(yùn)用黃金比例法則，形式美法則和軟件工具設(shè)計(jì)出理想的網(wǎng)頁(yè)。

參考文獻(xiàn)：

[1]張協(xié)和.工業(yè)美術(shù)設(shè)計(jì)淺說(shuō)[J].機(jī)械設(shè)計(jì)，1984（01）：8-13.

[2]冷德彤.現(xiàn)代設(shè)計(jì)中視覺(jué)傳達(dá)的形式美法則的解讀[J].南京廣播電視大學(xué)學(xué)報(bào)，2008（04）：79-82.

[3]王君.網(wǎng)頁(yè)設(shè)計(jì)在平面設(shè)計(jì)中的運(yùn)用[J].包裝工程，2012，33（16）：140-142+146.

[4]李珊珊.網(wǎng)頁(yè)設(shè)計(jì)中的美學(xué)概述2010.工程技術(shù)

[5]張亮.論網(wǎng)頁(yè)設(shè)計(jì)中的美學(xué).2009 大眾科技

[6]唐一鵬.美學(xué)原理在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用.福建信息技術(shù)教育.2006年01期

作者簡(jiǎn)介：陸煦（1987-），女，安徽淮北，安徽淮北煤電技師學(xué)院講師，研究方向：藝術(shù)設(shè)計(jì)