網(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ā)揮交互效果的最大作用。
關(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)途徑之一。
關(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)。
關(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ù)共鳴。
關(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)格保持著一致。
關(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ì)合適的圖?在接下里的文章里,將和大家分享如何成功誘惑“原始人”。
本文地址:http://m.likemindfilms.com/tutorial/di3209.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線(xiàn)面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏