付　昕

（江西信息應(yīng)用職業(yè)技術(shù)學(xué)院，江西　南昌　330043）

圖片優(yōu)勢(shì)效應(yīng)在網(wǎng)頁(yè)設(shè)計(jì)中的研究與應(yīng)用

付昕

（江西信息應(yīng)用職業(yè)技術(shù)學(xué)院，江西南昌330043）

圖片在網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)重要的比重，基于互聯(lián)網(wǎng)技術(shù)的發(fā)展，“圖”和“文”成為網(wǎng)頁(yè)信息的主要載體，尤其是圖片所具有的視覺(jué)元素是其它方式所不能媲美的，因此圖片在網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)勢(shì)非常明顯。文章首先闡述圖片優(yōu)勢(shì)效應(yīng)在網(wǎng)頁(yè)設(shè)計(jì)中的體現(xiàn)，然后分析制約圖片優(yōu)勢(shì)效益的因素，最后提出基于圖片優(yōu)勢(shì)效應(yīng)的網(wǎng)頁(yè)設(shè)計(jì)的策略。

圖片優(yōu)勢(shì)效應(yīng)；網(wǎng)頁(yè)設(shè)計(jì)；應(yīng)用

在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常會(huì)應(yīng)用到圖片，根據(jù)網(wǎng)頁(yè)設(shè)計(jì)環(huán)境的不同，圖片應(yīng)用的內(nèi)容、形式方式也不同，但是正是基于圖片所具有的抽象性、理性與感性特點(diǎn)的存在使得有效的應(yīng)用圖片可以極大豐富網(wǎng)頁(yè)界面，對(duì)網(wǎng)頁(yè)設(shè)計(jì)中的圖片優(yōu)勢(shì)效應(yīng)探討是為了讓網(wǎng)頁(yè)中的信息進(jìn)行更有效的傳達(dá)，通過(guò)圖片在網(wǎng)頁(yè)設(shè)計(jì)中的良好應(yīng)用，發(fā)揮優(yōu)勢(shì)效應(yīng)，能夠幫助提高網(wǎng)頁(yè)信息的品質(zhì)，增強(qiáng)傳播的力量。

1　圖片優(yōu)勢(shì)效應(yīng)在網(wǎng)頁(yè)設(shè)計(jì)中的體現(xiàn)

圖片應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)勢(shì)主要體現(xiàn)在：一是圖片認(rèn)知優(yōu)勢(shì)效應(yīng)。在復(fù)雜的網(wǎng)頁(yè)信息中，人們希望一眼就可以全面了解網(wǎng)頁(yè)的主要信息，而圖片則成為人們快速直觀了解信息的主要途徑，從認(rèn)知心理角度分析，知覺(jué)具有記憶的能力，如果讓用戶加深記憶就需要通過(guò)“提煉”信息增強(qiáng)知覺(jué)記憶，而圖片可以整合許多不同的視覺(jué)元素，傳遞整合的信息，因此符合“精煉”的特點(diǎn)；二是圖片情感優(yōu)勢(shì)。情感的產(chǎn)生主要是因?yàn)槿耸艿酵饨绲拇碳ざa(chǎn)生的，視覺(jué)為情感產(chǎn)生提供了渠道，而圖片信息具有很強(qiáng)的視覺(jué)元素，因此圖片所反映的信息具有很強(qiáng)的視覺(jué)沖擊，比如觀看國(guó)慶閱兵圖片會(huì)讓人產(chǎn)生自豪感。同時(shí)圖片也會(huì)產(chǎn)生不同的情緒和情感，不同的人看同一圖片會(huì)因?yàn)閭€(gè)人因素產(chǎn)生不同的情感。抽象的圖形沒(méi)有既定的標(biāo)準(zhǔn)因此也具有更大的創(chuàng)作空間和情感空間。圖標(biāo)圖形類圖片常常是擬物化的，因此給人的感覺(jué)是活潑和生動(dòng)的。

2　制約圖片優(yōu)勢(shì)效益的因素

雖然圖片在網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)重要的地位，有效的圖片應(yīng)用可以提升網(wǎng)頁(yè)設(shè)計(jì)的質(zhì)量，但是由于受到一些客觀因素的存在，使得網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用圖片優(yōu)勢(shì)效應(yīng)時(shí)存在一些制約因素，其主要體現(xiàn)在兩個(gè)方面：

2.1外部制約因素

首先是圖片和文字的相關(guān)性。一般網(wǎng)頁(yè)設(shè)計(jì)中所應(yīng)用到的圖片主要是為了配合文字將網(wǎng)頁(yè)信息形象地展現(xiàn)給用戶需求者，如果圖片和文字結(jié)合不合理，那么就會(huì)影響到用戶瀏覽信息的質(zhì)量，從而使得圖片應(yīng)用產(chǎn)生負(fù)面影響；其次網(wǎng)頁(yè)排版。圖片應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)中需要根據(jù)網(wǎng)頁(yè)設(shè)計(jì)的需求進(jìn)行相應(yīng)的排版，而有效的圖片排版可以為網(wǎng)頁(yè)設(shè)計(jì)增加活力，比如經(jīng)常使用的搜狗拼音網(wǎng)頁(yè)界面，其是以一張圖片作為背景進(jìn)行平鋪設(shè)計(jì)的，但是如果網(wǎng)頁(yè)中的文字沒(méi)有有序排版，那么用戶在進(jìn)行瀏覽時(shí)就會(huì)形成圖片干擾用戶視覺(jué)的效果，從而影響用戶讀取文字的效率。因此發(fā)揮圖片應(yīng)用效應(yīng)的關(guān)鍵在于實(shí)現(xiàn)文字與圖片的有效結(jié)合，按照二者的規(guī)律進(jìn)行合理的排版，以此發(fā)揮圖片的最大化效應(yīng)。

2.2內(nèi)部制約因素

內(nèi)部制約因素主要是從圖片的自身入手的：首先是圖片的清晰度影響其效應(yīng)。圖片清晰度主要是從圖片所反映信息的清晰度而言的，如果圖片清晰度存在問(wèn)題那么就影響信息需求者的信任，以淘寶網(wǎng)頁(yè)為例，如果圖片清晰度那么就無(wú)法真實(shí)的反映產(chǎn)品信息。尤其是在個(gè)性化的網(wǎng)頁(yè)設(shè)計(jì)中，不清晰的圖片應(yīng)用會(huì)產(chǎn)生制約網(wǎng)頁(yè)信息傳遞的效應(yīng)；其次圖片的真實(shí)性。圖片真實(shí)性問(wèn)題是影響用戶瀏覽網(wǎng)頁(yè)的最大因素，一旦圖片所使用的信息存在虛假，那么就會(huì)導(dǎo)致網(wǎng)頁(yè)內(nèi)容不被人們所認(rèn)可；最后圖片的色彩。圖片與色彩的聯(lián)系比較緊密，一般充滿活力的顏色可以吸引人的注意力，同樣不合理的應(yīng)用顏色也會(huì)起到反面的效果。

3　基于圖片優(yōu)勢(shì)效應(yīng)的網(wǎng)頁(yè)設(shè)計(jì)策略

結(jié)合影響圖片優(yōu)勢(shì)效應(yīng)因素的存在，文章主要從認(rèn)知優(yōu)勢(shì)效應(yīng)和情感效應(yīng)兩個(gè)方面闡述網(wǎng)頁(yè)設(shè)計(jì)的策略：

3.1圖片認(rèn)知設(shè)計(jì)策略

人們?cè)跒g覽網(wǎng)頁(yè)時(shí)往往會(huì)存在因?yàn)榫W(wǎng)頁(yè)信息繁雜而出現(xiàn)快速忘記的現(xiàn)象，針對(duì)此種問(wèn)題需要在網(wǎng)頁(yè)設(shè)計(jì)時(shí)要保證視覺(jué)效果的針對(duì)性設(shè)計(jì)，讓視覺(jué)符合用戶不同認(rèn)知階段的心理模型。圖片表達(dá)屬于精煉的信息表達(dá)方式，有效的圖片應(yīng)用可以提升人的理解力，因此需要從圖表表征、圖片信息以及圖片的簡(jiǎn)化設(shè)計(jì)方法入手進(jìn)行設(shè)計(jì)，如圖1所示。一是圖片表征設(shè)計(jì)。圖片表征就是以圖片的形式來(lái)說(shuō)明網(wǎng)頁(yè)信息的方式。網(wǎng)頁(yè)設(shè)計(jì)中的圖片表征是指利用網(wǎng)頁(yè)中的圖片，讓展示的信息，更容易發(fā)現(xiàn)、辨認(rèn)、學(xué)習(xí)和記憶，幫助用戶和網(wǎng)頁(yè)進(jìn)行更有效率的溝通?？梢哉f(shuō)網(wǎng)頁(yè)設(shè)計(jì)中所應(yīng)用的圖片所反映的信息越精辟越好，比如隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，越來(lái)越多的網(wǎng)頁(yè)設(shè)計(jì)時(shí)在有益的采取多增加圖片減少用戶認(rèn)知負(fù)擔(dān)方面的設(shè)計(jì)，因此在具體的應(yīng)用時(shí)可以根據(jù)實(shí)際情況進(jìn)行圖片表征的應(yīng)用；二是圖片簡(jiǎn)化設(shè)計(jì)。圖片風(fēng)格與網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格有直接的關(guān)系，為降低認(rèn)知感，需要對(duì)圖片減少簡(jiǎn)化設(shè)計(jì)，在滿足基本信息傳遞的基礎(chǔ)上盡可能降低圖片的風(fēng)格，比如蘋(píng)果操作系統(tǒng)（Iphone Operating System，IOS）從最初的擬物化設(shè)計(jì)風(fēng)格到如今IOS7的扁平化風(fēng)格，數(shù)字界面風(fēng)格更加簡(jiǎn)約，信息傳達(dá)更加條理清晰。圖片簡(jiǎn)化設(shè)計(jì)主要包括對(duì)圖片構(gòu)成元素的簡(jiǎn)化、對(duì)圖片排版的簡(jiǎn)化以及圖片色彩的簡(jiǎn)化；三是圖片信息的可視化設(shè)計(jì)。網(wǎng)頁(yè)中的圖片信息可視化指的是在網(wǎng)頁(yè)中，利用圖形圖像等視覺(jué)元素將要表達(dá)的信息通過(guò)視覺(jué)圖片上來(lái)呈現(xiàn)。圖片的可視化有助于提升用戶的認(rèn)知度，提高用戶在流量網(wǎng)頁(yè)時(shí)的愉悅感。圖片可視化就是將文字、示意圖、數(shù)據(jù)圖形無(wú)縫地結(jié)合起來(lái)，以此達(dá)到傳遞網(wǎng)頁(yè)信息的目的。

圖1　圖片認(rèn)知設(shè)計(jì)策略

3.2圖片情感設(shè)計(jì)策略

圖片是表達(dá)網(wǎng)頁(yè)設(shè)計(jì)情感的主要途徑，圖片的視覺(jué)美觀是圖片情感的基礎(chǔ)，圖片的情感效果與用戶瀏覽網(wǎng)頁(yè)的內(nèi)在需求有直接的關(guān)系，因此基于人的情感考慮，圖片情感設(shè)計(jì)主要包括視覺(jué)提示設(shè)計(jì)和故事敘述設(shè)計(jì)，具體的設(shè)計(jì)策略，如圖2所示。

圖2　網(wǎng)頁(yè)圖片的情感設(shè)計(jì)策略

一是圖片的視覺(jué)提示設(shè)計(jì)。圖片的構(gòu)成元素比較多，可以說(shuō)用眼睛看到的事情都可以用圖片表達(dá)，因此圖片視覺(jué)提示設(shè)計(jì)主要包括：（1）色彩情感提示。網(wǎng)頁(yè)設(shè)計(jì)時(shí)需要根據(jù)主題風(fēng)格設(shè)計(jì)成相應(yīng)的顏色，比如新聞網(wǎng)主要應(yīng)用紅色圖片作為網(wǎng)頁(yè)的設(shè)計(jì)顏色，而食品網(wǎng)頁(yè)則主要是應(yīng)用暖色，以此給讀者一種溫暖的感覺(jué)；（2）形狀的情感提示。網(wǎng)頁(yè)中的圖片是由各種形狀的圖像構(gòu)成，因此具有豐富的情感特點(diǎn)，不同的形狀會(huì)給人不同的感覺(jué)；（3）內(nèi)容情感提示。圖片本身的內(nèi)容引導(dǎo)著人們的視線和行動(dòng)，如果人們認(rèn)為是積極的提示，他們傾向于產(chǎn)生積極的情感，進(jìn)而會(huì)按照這種內(nèi)容提示繼續(xù)瀏覽，如果人們認(rèn)為是消極的提示，那么就很難進(jìn)行下一步的操作。

二是圖片的故事敘述設(shè)計(jì)。其主要包括：①圖片本身內(nèi)容的情感流。不同的圖片內(nèi)容可以表達(dá)不同的情感流露，比如在看到“南京大屠殺”圖片時(shí)會(huì)產(chǎn)生憤怒之情。②圖片營(yíng)造網(wǎng)頁(yè)的環(huán)境。網(wǎng)頁(yè)可以用大圖平鋪充滿整個(gè)屏幕，讓圖片營(yíng)造一定的環(huán)境，增強(qiáng)用戶情感的喚醒程度，為用戶在“真實(shí)”的環(huán)境中“聽(tīng)故事”作準(zhǔn)備。③圖片的組合帶來(lái)的故事敘述。在網(wǎng)頁(yè)中使用多張圖片的排列和組合可以讓整個(gè)網(wǎng)頁(yè)的情感更加活潑生動(dòng)。

4　結(jié)語(yǔ)

總之，圖片的優(yōu)勢(shì)效應(yīng)可以讓網(wǎng)頁(yè)設(shè)計(jì)具有更好的視覺(jué)沖擊效果，因此只有徹底地掌握和了解圖像在網(wǎng)頁(yè)設(shè)計(jì)中的重要地位，采用積極有效的處理辦法，才可以讓圖片在網(wǎng)頁(yè)中發(fā)揮出最大的作用，進(jìn)而達(dá)到實(shí)用又美觀的最終目的。

［1］劉青玲.圖片優(yōu)勢(shì)效應(yīng)在網(wǎng)頁(yè)設(shè)計(jì)中的研究與應(yīng)用探討［J］.科技創(chuàng)新與應(yīng)用，2015（21）：86-88.

［2］李玉榮.淺談圖片在網(wǎng)頁(yè)設(shè)計(jì)中的重要作用及處理方法［J］.科技創(chuàng)新與應(yīng)用，2015（8）：56.

Research and application of picture superiority effect in Web design

Fu Xin
（Jiangxi Vocational and Technical College of Information Application， Nanchang 330043， China）

Pictures occupy an important proportion in Web design based on the development of Internet technology. “Picture”and “Text”has become the main carrier of information on the Website， especially the visual elements of image can not be matched， so the superiority of picture in Web design is obvious. This paper firstly describes the advantages effects of image reflected in Web design， and then analyzes constraint factors of advantage effectiveness. Finally， it puts forward Web design strategy based on picture advantages.

picture advantage effect； Web design； application

付昕（1984— ），女，江西南昌，碩士，講師；研究方向；計(jì)算機(jī)圖形圖像制作。