網(wǎng)頁(yè)設(shè)計(jì)中，誘惑大腦中的“原始人”

一個(gè)網(wǎng)站中，圖片往往比文字更能吸引用戶(hù)，人的視線(xiàn)似乎總在第一眼就定位在圖片上。形成這種神奇現(xiàn)象的原因很簡(jiǎn)單：每個(gè)人的大腦里都住著一個(gè)“原始人”。

原始時(shí)代，人的大腦需要處理的內(nèi)容大多和圖像有關(guān)。比如，我們的祖先最關(guān)心哪里新長(zhǎng)出來(lái)可以吃的果實(shí)，哪里有新的獵物，哪里有猛獸出沒(méi)、需要避開(kāi)危險(xiǎn)。這些重要地點(diǎn)和周邊環(huán)境通過(guò)視覺(jué)和記憶保存在大腦里，在經(jīng)歷漫長(zhǎng)的進(jìn)化后，人腦逐漸進(jìn)化出最適宜生存的大腦結(jié)構(gòu)。

因此，人類(lèi)天生擅長(zhǎng)處理和記憶圖像。                 

研究表明，人腦對(duì)視覺(jué)影像的處理速度比文字快60000倍。

同樣，在網(wǎng)頁(yè)設(shè)計(jì)中，圖片更能發(fā)揮巨大作用。有一個(gè)經(jīng)典說(shuō)法：一圖勝千言。

瀏覽網(wǎng)頁(yè)時(shí)，用戶(hù)看到文字后經(jīng)歷這樣的過(guò)程：閱讀瀏覽、將文字內(nèi)容化、情景化。經(jīng)過(guò)這幾個(gè)處理階段，用戶(hù)才能搞清楚這段文字想要描述或表達(dá)什么。而可視化的信息（照片、圖片）可以讓人在3秒內(nèi)迅速理解，不需要“翻譯”階段。

視覺(jué)影像在短時(shí)間內(nèi)的重大影響力，決定了圖像是視覺(jué)傳達(dá)的一個(gè)重要手段。

在網(wǎng)頁(yè)設(shè)計(jì)中，圖像主要以圖片、照片、信息圖、圖標(biāo)等多種樣式展現(xiàn)。

那圖有什么作用？我們認(rèn)為更恰當(dāng)?shù)恼f(shuō)法是“好圖勝千言”。

什么是好圖？網(wǎng)頁(yè)設(shè)計(jì)中什么樣的圖才是合適的？

本文分享一些網(wǎng)站中的經(jīng)典圖的使用案例，讓大家了解好圖的作用。廢話(huà)不多說(shuō)，先上圖說(shuō)話(huà)：

1、Biamar

關(guān)鍵詞：時(shí)尚感 品牌 視差滾動(dòng) HTML5

Biamar網(wǎng)站首頁(yè)用了超大背景圖，高端、時(shí)尚是網(wǎng)站給人的第一感覺(jué)。

在背景圖中，連綿起伏的山巒具有層次，襯托了人物形象，營(yíng)造的環(huán)境氛圍突出展示了服裝的時(shí)尚感，渲染并傳達(dá)了Biamar的品牌內(nèi)涵。

此處使用的圖，符合Biamar針織衫的品牌風(fēng)格，向用戶(hù)準(zhǔn)確傳達(dá)了品牌理念。

網(wǎng)站采用了視差滾動(dòng)技術(shù)，頁(yè)面用HTML5寫(xiě)成，鼠標(biāo)滾動(dòng)時(shí)頁(yè)面圖和文字出現(xiàn)不同層次，從視覺(jué)上更加襯托出網(wǎng)站的酷炫。

2、My Deejo

關(guān)鍵詞：HTML5  酷炫  360度全景3D展示  強(qiáng)互動(dòng)性

打開(kāi)My Deejo網(wǎng)站，首頁(yè)的產(chǎn)品圖片無(wú)疑是最引人注目的：精致的折疊刀似乎懸浮在空中，從模糊的背景中凸顯出來(lái)，盡顯3D效果的視覺(jué)沖擊力。用戶(hù)的視線(xiàn)很容易被產(chǎn)品吸引，主動(dòng)去閱讀文字，進(jìn)一步了解產(chǎn)品特征。

在瀏覽過(guò)程中，用戶(hù)會(huì)發(fā)現(xiàn)網(wǎng)站采用了超級(jí)酷炫的360度全景3D展示。通過(guò)滑動(dòng)和滾動(dòng)鼠標(biāo)，可以從全方位視角查看折疊刀的細(xì)節(jié)，并能自定義為刀身設(shè)置不同花紋和刀柄，充滿(mǎn)趣味性。

同時(shí)還能點(diǎn)擊折疊刀下面的OPEN/CLOSE幽靈按鈕，查看刀身打開(kāi)和折疊的狀態(tài)。

更棒的是，上圖的交互效果完整展示了各個(gè)零件拼出折疊刀的動(dòng)態(tài)效果，非常吸引人。

該網(wǎng)站的效果很容易激發(fā)用戶(hù)的興趣，讓人沉浸其中、玩得不亦樂(lè)乎，留下深刻印象。

雖然網(wǎng)站酷炫的交互效果似乎更吸引人，但打開(kāi)網(wǎng)站第一眼的驚艷，來(lái)自于產(chǎn)品圖片本身的精致感。正是產(chǎn)品圖與背景的巧妙融合，完美展現(xiàn)了定制的個(gè)性化，才能發(fā)揮交互效果的最大作用。

3、EverEarth

關(guān)鍵詞：360度水平旋轉(zhuǎn)展示 產(chǎn)品圖動(dòng)態(tài)旋轉(zhuǎn) 視差滾動(dòng) 全面了解產(chǎn)品

EverEarth是由我們開(kāi)發(fā)的網(wǎng)站，該網(wǎng)站的整體風(fēng)格清新，產(chǎn)品圖片全部是拍攝的高清圖片，從不同角度展現(xiàn)產(chǎn)品細(xì)節(jié)。

網(wǎng)站采用了360度水平旋轉(zhuǎn)展示技術(shù)展示產(chǎn)品。

與折疊刀定制案例不同的是，產(chǎn)品圖片是自動(dòng)360度水平旋轉(zhuǎn)，非常方便用戶(hù)查看產(chǎn)品各個(gè)側(cè)面的細(xì)節(jié)，幫助用戶(hù)全面了解產(chǎn)品，感覺(jué)與產(chǎn)品更貼近。

與靜態(tài)圖相比，動(dòng)態(tài)影像顯然更容易得到人的注意力，不過(guò)對(duì)任何效果來(lái)說(shuō)，只有適合的才是最好的。

針對(duì)某些行業(yè)的產(chǎn)品，高清產(chǎn)品圖片和360度水平旋轉(zhuǎn)展示可以發(fā)揮更好的作用，比如大型機(jī)械設(shè)備、精密儀器、珠寶等產(chǎn)品。

4、POSCO

關(guān)鍵詞：線(xiàn)形圖 風(fēng)格統(tǒng)一 專(zhuān)業(yè)性

POSCO網(wǎng)站的線(xiàn)形矢量圖和線(xiàn)形圖標(biāo)是網(wǎng)站的一個(gè)特色。這種獨(dú)特的線(xiàn)形圖，看起來(lái)簡(jiǎn)潔、形象。

該網(wǎng)站中的線(xiàn)形圖有兩個(gè)重要作用，一是當(dāng)多個(gè)頁(yè)面使用風(fēng)格一致的線(xiàn)形圖時(shí)，讓網(wǎng)站具有統(tǒng)一性，能為網(wǎng)站塑造一種簡(jiǎn)單、專(zhuān)業(yè)的形象。另一個(gè)作用是，用戶(hù)即使不看文字，也能通過(guò)線(xiàn)形圖了解文字傳達(dá)的含義。

通常，線(xiàn)形圖可以起到傳遞信息的作用，好的線(xiàn)形圖可以作為網(wǎng)站統(tǒng)一而獨(dú)特的元素，讓網(wǎng)站具有一種設(shè)計(jì)感。

5、POSCO

關(guān)鍵詞：信息圖 可視化 易于傳播

同樣在POSCO網(wǎng)站上，還采用了扁平化的信息圖設(shè)計(jì)。

該網(wǎng)站中，信息圖將數(shù)據(jù)、文字轉(zhuǎn)化為更直觀的可視化形式，讓人更容易理解和感受。

與文字相比，該案例使用更富有吸引力的信息圖，并且其配色和網(wǎng)站整體風(fēng)格相一致，讓用戶(hù)的注意力集中在數(shù)據(jù)上，讓人在腦海中迅速建立可視化印象。

在網(wǎng)站中合理使用信息圖，是提升傳播效果的最優(yōu)途徑之一。

6、Glanway伽然

關(guān)鍵詞：流程圖  直觀 易理解 人文精神

在Glanway伽然的招聘申請(qǐng)中，以流程圖的形式展現(xiàn)了招聘申請(qǐng)流程，看上去一目了然。

上圖的整個(gè)流程用圖標(biāo)、線(xiàn)條、文字搭配展現(xiàn)，強(qiáng)化了流程的圖順序，并視覺(jué)上增加了文字排版樣式，顯得美觀。

從視覺(jué)效果來(lái)說(shuō)，純粹的文字描述在網(wǎng)頁(yè)中顯得單調(diào)或呆板，而不同樣式的流程圖往往比文字有更多樣式，甚至讓用戶(hù)感到操作步驟簡(jiǎn)化，進(jìn)而刺激用戶(hù)反應(yīng)、促使人行動(dòng)。

7、Vito Salvatore

關(guān)鍵詞：手寫(xiě)文字 情懷 經(jīng)典 產(chǎn)生共鳴

如果讓你用圖片表達(dá)紀(jì)念，你會(huì)用什么樣的圖？在Vito Salvatore網(wǎng)站上，一張和背景融為一體的照片讓人不由自主產(chǎn)生一種紀(jì)念的心情。

大背景圖模糊化，讓人的視覺(jué)集中在“照片”中的路虎車(chē)和人物上，色彩的巧妙變化，讓照片與周邊壞境融為一體，又凸顯了層次感。路虎第一款發(fā)現(xiàn)在1989年推出，照片下手寫(xiě)的“1989”讓紀(jì)念味兒更濃，再加上包含“25 Years”的大號(hào)文字，讓整個(gè)頁(yè)面渲染出一種經(jīng)典的感覺(jué)。

該網(wǎng)站此處圖片的使用，能夠激發(fā)用戶(hù)情感，引起用戶(hù)共鳴。

8、The Lounge

關(guān)鍵詞：手繪風(fēng) 人物真實(shí)形象 親切感 人情味

The Lounge網(wǎng)站中，服務(wù)人員全部采用了手繪風(fēng)的人物真實(shí)形象，是網(wǎng)站的一個(gè)特色。

該網(wǎng)站的真實(shí)人物形象展現(xiàn)讓用戶(hù)感受到服務(wù)背后有活生生的人，體驗(yàn)到一種真實(shí)感和親切感。這種親切友好更有人情味，比較容易讓用戶(hù)產(chǎn)生信賴(lài)，無(wú)形中提升了網(wǎng)站用戶(hù)體驗(yàn)。

另外，網(wǎng)站設(shè)計(jì)與業(yè)務(wù)緊密聯(lián)系，手繪風(fēng)格更是體現(xiàn)了一種藝術(shù)氣息，巧妙傳遞該企業(yè)的業(yè)務(wù)特色。

但設(shè)計(jì)師們需要注意，應(yīng)謹(jǐn)慎選擇和設(shè)計(jì)人物真實(shí)形象，因?yàn)椴磺‘?dāng)?shù)娜宋镎掌霈F(xiàn)在網(wǎng)站上，反而影響網(wǎng)站瀏覽效果。

該網(wǎng)站能夠取得更好效果的原因是：從整體看，無(wú)論是左側(cè)的真實(shí)人物形象，還是右側(cè)的手繪人物、以及其他元素（梳子、剪刀等）風(fēng)格統(tǒng)一，而且在配色上協(xié)調(diào)、融合，讓網(wǎng)站整體風(fēng)格保持著一致。

9、La Baldufa

關(guān)鍵詞：卡通圖 情感化 打動(dòng)用戶(hù)

La Baldufa網(wǎng)站的產(chǎn)品采用了大量可愛(ài)的卡通圖，充滿(mǎn)了童趣。

在網(wǎng)站上，所有的卡通圖顏色鮮亮柔和，顯得活潑可愛(ài)，非常符合嬰幼兒用品給人的感受。并且卡通圖的背景采用圓角設(shè)計(jì)，潛在蘊(yùn)含并傳達(dá)出產(chǎn)品的安全性，也更好地襯托網(wǎng)站整體的卡通風(fēng)格。

該網(wǎng)站的卡通圖符合產(chǎn)品定位，不僅是為了展示產(chǎn)品，還從整體營(yíng)造了一種稚嫩、溫馨的氛圍，可以喚起人內(nèi)心的柔軟，打動(dòng)用戶(hù)。

10、Glamour.biz

關(guān)鍵詞：卡通手繪風(fēng) 個(gè)性化 高識(shí)別度

Glamour.biz網(wǎng)站采用了卡通手繪風(fēng)格的設(shè)計(jì)，首頁(yè)的圖是一個(gè)特征鮮明的人物形象，不管是人物發(fā)型、神態(tài)，還是動(dòng)作，都展現(xiàn)一種強(qiáng)烈的個(gè)性化。

這種卡通手繪風(fēng)格的圖塑造的個(gè)性化非常獨(dú)特，能吸引用戶(hù)的注意力，具有高識(shí)別度，不僅符合該企業(yè)的形象定位，還容易給用戶(hù)留下深刻印象。

關(guān)于圖的實(shí)際使用案例，以上就是本次分享。

從這些案例中我們可以發(fā)現(xiàn)，圖在塑造/影響網(wǎng)站風(fēng)格、傳遞情感、打造品牌等方面起著非常重要的作用。進(jìn)一步說(shuō)，圖的作用可能是傳遞信息、展示產(chǎn)品優(yōu)點(diǎn)，也可能是傳達(dá)品牌內(nèi)涵、激發(fā)用戶(hù)情感，甚至是刺激用戶(hù)反應(yīng)、促進(jìn)購(gòu)買(mǎi)等。

當(dāng)然，圖雖重要，但如果只是給文字隨便配圖，或者選擇了不合適的圖，會(huì)適得其反。如果想要達(dá)到目標(biāo)，就要看設(shè)計(jì)師如何成功誘惑到用戶(hù)大腦中的“原始人”了。

設(shè)計(jì)師應(yīng)該怎樣選擇圖，怎樣設(shè)計(jì)合適的圖？在接下里的文章里，將和大家分享如何成功誘惑“原始人”。