一個網(wǎng)站中，圖片往往比文字更能吸引用戶雪情，人的視線似乎總在第一眼就定位在圖片上遵岩。形成這種神奇現(xiàn)象的原因很簡單：每個人的大腦里都住著一個“原始人”。
在原始時代巡通，人的大腦需要處理的內(nèi)容大多和圖像有關(guān)旷余。比如，我們的祖先最關(guān)心哪里新長出來可以吃的果實(shí)扁达，哪里有新的獵物正卧，哪里有猛獸出沒、需要避開危險跪解。這些重要地點(diǎn)和周邊環(huán)境通過視覺和記憶保存在大腦里炉旷，在經(jīng)歷漫長的進(jìn)化后，人腦逐漸進(jìn)化出最適宜生存的大腦結(jié)構(gòu)叉讥。
因此窘行，人類天生擅長處理和記憶圖像。
研究表明图仓，人腦對視覺影像的處理速度比文字快60000倍罐盔。
同樣，在網(wǎng)頁設(shè)計中救崔，圖片更能發(fā)揮巨大作用惶看。有一個經(jīng)典說法：一圖勝千言捏顺。
瀏覽網(wǎng)頁時，用戶看到文字后經(jīng)歷這樣的過程：閱讀瀏覽纬黎、將文字內(nèi)容化幅骄、情景化。經(jīng)過這幾個處理階段本今，用戶才能搞清楚這段文字想要描述或表達(dá)什么拆座。而可視化的信息（照片、圖片）可以讓人在3秒內(nèi)迅速理解冠息，不需要“翻譯”階段挪凑。
視覺影像在短時間內(nèi)的重大影響力，決定了圖像是視覺傳達(dá)的一個重要手段逛艰。
在網(wǎng)頁設(shè)計中躏碳，圖像主要以圖片、照片瓮孙、信息圖、圖標(biāo)等多種樣式展現(xiàn)选脊。
那圖有什么作用杭抠？AnyForWeb認(rèn)為更恰當(dāng)?shù)恼f法是“好圖勝千言”。
什么是好圖恳啥？網(wǎng)頁設(shè)計中什么樣的圖才是合適的偏灿？
本文分享一些網(wǎng)站中的經(jīng)典圖的使用案例，讓大家了解好圖的作用钝的。廢話不多說翁垂，先上圖說話：
1、Biamar
關(guān)鍵詞：時尚感 品牌 ?視差滾動 ?HTML5
Biamar網(wǎng)站首頁用了超大背景圖硝桩，高端沿猜、時尚是網(wǎng)站給人的第一感覺。
在背景圖中碗脊，連綿起伏的山巒具有層次啼肩，襯托了人物形象，營造的環(huán)境氛圍突出展示了服裝的時尚感衙伶，渲染并傳達(dá)了Biamar的品牌內(nèi)涵祈坠。
此處使用的圖，符合Biamar針織衫的品牌風(fēng)格矢劲，向用戶準(zhǔn)確傳達(dá)了品牌理念赦拘。
網(wǎng)站采用了視差滾動技術(shù)，頁面用HTML5寫成芬沉，鼠標(biāo)滾動時頁面圖和文字出現(xiàn)不同層次躺同，從視覺上更加襯托出網(wǎng)站的酷炫阁猜。
2、My Deejo
關(guān)鍵詞：HTML5 ? 酷炫 ? 360度全景3D展示 ?強(qiáng)互動性
打開My Deejo網(wǎng)站笋籽，首頁的產(chǎn)品圖片無疑是最引人注目的：精致的折疊刀似乎懸浮在空中蹦漠，從模糊的背景中凸顯出來，盡顯3D效果的視覺沖擊力车海。用戶的視線很容易被產(chǎn)品吸引笛园，主動去閱讀文字，進(jìn)一步了解產(chǎn)品特征侍芝。
在瀏覽過程中研铆，用戶會發(fā)現(xiàn)網(wǎng)站采用了超級酷炫的360度全景3D展示。通過滑動和滾動鼠標(biāo)州叠，可以從全方位視角查看折疊刀的細(xì)節(jié)棵红，并能自定義為刀身設(shè)置不同花紋和刀柄，充滿趣味性咧栗。
同時還能點(diǎn)擊折疊刀下面的OPEN/CLOSE幽靈按鈕逆甜，查看刀身打開和折疊的狀態(tài)。
更棒的是致板，上圖的交互效果完整展示了各個零件拼出折疊刀的動態(tài)效果交煞，非常吸引人。
該網(wǎng)站的效果很容易激發(fā)用戶的興趣斟或，讓人沉浸其中素征、玩得不亦樂乎，留下深刻印象萝挤。
雖然網(wǎng)站酷炫的交互效果似乎更吸引人御毅，但打開網(wǎng)站第一眼的驚艷，來自于產(chǎn)品圖片本身的精致感怜珍。正是產(chǎn)品圖與背景的巧妙融合端蛆，完美展現(xiàn)了定制的個性化，才能發(fā)揮交互效果的最大作用酥泛。
3欺税、EverEarth
關(guān)鍵詞：360度水平旋轉(zhuǎn)展示 ? 產(chǎn)品圖動態(tài)旋轉(zhuǎn) ?視差滾動 ?全面了解產(chǎn)品
EverEarth是由AnyForWeb開發(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)品圖片是自動360度水平旋轉(zhuǎn)，非常方便用戶查看產(chǎn)品各個側(cè)面的細(xì)節(jié)情组，幫助用戶全面了解產(chǎn)品燥筷，感覺與產(chǎn)品更貼近箩祥。
與靜態(tài)圖相比，動態(tài)影像顯然更容易得到人的注意力肆氓，不過對任何效果來說袍祖，只有適合的才是最好的。
針對某些行業(yè)的產(chǎn)品谢揪，高清產(chǎn)品圖片和360度水平旋轉(zhuǎn)展示可以發(fā)揮更好的作用蕉陋，比如大型機(jī)械設(shè)備、精密儀器拨扶、珠寶等產(chǎn)品凳鬓。
4、POSCO
關(guān)鍵詞：線形圖 ?風(fēng)格統(tǒng)一 ?專業(yè)性
POSCO網(wǎng)站的線形矢量圖和線形圖標(biāo)是網(wǎng)站的一個特色患民。這種獨(dú)特的線形圖缩举，看起來簡潔、形象匹颤。
該網(wǎng)站中的線形圖有兩個重要作用仅孩，一是當(dāng)多個頁面使用風(fēng)格一致的線形圖時，讓網(wǎng)站具有統(tǒng)一性印蓖，能為網(wǎng)站塑造一種簡單辽慕、專業(yè)的形象。另一個作用是另伍，用戶即使不看文字鼻百，也能通過線形圖了解文字傳達(dá)的含義绞旅。
通常摆尝，線形圖可以起到傳遞信息的作用，好的線形圖可以作為網(wǎng)站統(tǒng)一而獨(dú)特的元素因悲，讓網(wǎng)站具有一種設(shè)計感堕汞。
5、POSCO
關(guān)鍵詞：信息圖 ?可視化 ?易于傳播
同樣在POSCO網(wǎng)站上晃琳，還采用了扁平化的信息圖設(shè)計讯检。
該網(wǎng)站中，信息圖將數(shù)據(jù)卫旱、文字轉(zhuǎn)化為更直觀的可視化形式人灼，讓人更容易理解和感受。
與文字相比顾翼，該案例使用更富有吸引力的信息圖投放，并且其配色和網(wǎng)站整體風(fēng)格相一致，讓用戶的注意力集中在數(shù)據(jù)上适贸，讓人在腦海中迅速建立可視化印象灸芳。
在網(wǎng)站中合理使用信息圖涝桅，是提升傳播效果的最優(yōu)途徑之一。
6烙样、Glanway伽然
關(guān)鍵詞：流程圖 ?直觀 ? 易理解 人文精神
在Glanway伽然的招聘申請中冯遂，以流程圖的形式展現(xiàn)了招聘申請流程，看上去一目了然谒获。
上圖的整個流程用圖標(biāo)蛤肌、線條、文字搭配展現(xiàn)究反，強(qiáng)化了流程的圖順序寻定，并視覺上增加了文字排版樣式，顯得美觀精耐。
從視覺效果來說狼速，純粹的文字描述在網(wǎng)頁中顯得單調(diào)或呆板，而不同樣式的流程圖往往比文字有更多樣式卦停，甚至讓用戶感到操作步驟簡化向胡，進(jìn)而刺激用戶反應(yīng)、促使人行動惊完。
7僵芹、Vito Salvatore
關(guān)鍵詞：手寫文字 ?情懷 ?經(jīng)典 ?產(chǎn)生共鳴
如果讓你用圖片表達(dá)紀(jì)念，你會用什么樣的圖小槐？在Vito Salvatore網(wǎng)站上拇派，一張和背景融為一體的照片讓人不由自主產(chǎn)生一種紀(jì)念的心情。
大背景圖模糊化凿跳，讓人的視覺集中在“照片”中的路虎車和人物上件豌，色彩的巧妙變化，讓照片與周邊壞境融為一體控嗜，又凸顯了層次感茧彤。路虎第一款發(fā)現(xiàn)在1989年推出，照片下手寫的“1989”讓紀(jì)念味兒更濃疆栏，再加上包含“25 Years”的大號文字曾掂，讓整個頁面渲染出一種經(jīng)典的感覺。
該網(wǎng)站此處圖片的使用壁顶，能夠激發(fā)用戶情感珠洗，引起用戶共鳴。
8若专、The Lounge
關(guān)鍵詞：手繪風(fēng) ?人物真實(shí)形象 ?親切感 ?人情味
The?Lounge網(wǎng)站中许蓖，服務(wù)人員全部采用了手繪風(fēng)的人物真實(shí)形象，是網(wǎng)站的一個特色。
該網(wǎng)站的真實(shí)人物形象展現(xiàn)讓用戶感受到服務(wù)背后有活生生的人蛔糯，體驗(yàn)到一種真實(shí)感和親切感拯腮。這種親切友好更有人情味，比較容易讓用戶產(chǎn)生信賴蚁飒，無形中提升了網(wǎng)站用戶體驗(yàn)动壤。
另外，網(wǎng)站設(shè)計與業(yè)務(wù)緊密聯(lián)系淮逻，手繪風(fēng)格更是體現(xiàn)了一種藝術(shù)氣息琼懊，巧妙傳遞該企業(yè)的業(yè)務(wù)特色。
但設(shè)計師們需要注意爬早，應(yīng)謹(jǐn)慎選擇和設(shè)計人物真實(shí)形象哼丈，因?yàn)椴磺‘?dāng)?shù)娜宋镎掌霈F(xiàn)在網(wǎng)站上，反而影響網(wǎng)站瀏覽效果筛严。
該網(wǎng)站能夠取得更好效果的原因是：從整體看醉旦，無論是左側(cè)的真實(shí)人物形象，還是右側(cè)的手繪人物桨啃、以及其他元素（梳子车胡、剪刀等）風(fēng)格統(tǒng)一，而且在配色上協(xié)調(diào)照瘾、融合匈棘，讓網(wǎng)站整體風(fēng)格保持著一致。
9析命、La Baldufa
關(guān)鍵詞：卡通圖 情感化 打動用戶
La?Baldufa網(wǎng)站的產(chǎn)品采用了大量可愛的卡通圖主卫，充滿了童趣。
在網(wǎng)站上鹃愤，所有的卡通圖顏色鮮亮柔和簇搅，顯得活潑可愛，非常符合嬰幼兒用品給人的感受昼浦。并且卡通圖的背景采用圓角設(shè)計馍资，潛在蘊(yùn)含并傳達(dá)出產(chǎn)品的安全性筒主，也更好地襯托網(wǎng)站整體的卡通風(fēng)格关噪。
該網(wǎng)站的卡通圖符合產(chǎn)品定位，不僅是為了展示產(chǎn)品乌妙，還從整體營造了一種稚嫩使兔、溫馨的氛圍，可以喚起人內(nèi)心的柔軟藤韵，打動用戶虐沥。
10、Glamour.biz
關(guān)鍵詞：卡通手繪風(fēng) ?個性化 ?高識別度
Glamour.biz網(wǎng)站采用了卡通手繪風(fēng)格的設(shè)計，首頁的圖是一個特征鮮明的人物形象欲险，不管是人物發(fā)型镐依、神態(tài)，還是動作天试，都展現(xiàn)一種強(qiáng)烈的個性化。
這種卡通手繪風(fēng)格的圖塑造的個性化非常獨(dú)特，能吸引用戶的注意力胁赢，具有高識別度是己，不僅符合該企業(yè)的形象定位，還容易給用戶留下深刻印象带兜。
關(guān)于圖的實(shí)際使用案例枫笛，以上就是AnyForWeb的本次分享。
從這些案例中我們可以發(fā)現(xiàn)刚照，圖在塑造/影響網(wǎng)站風(fēng)格刑巧、傳遞情感、打造品牌等方面起著非常重要的作用无畔。進(jìn)一步說海诲，圖的作用可能是傳遞信息、展示產(chǎn)品優(yōu)點(diǎn)檩互，也可能是傳達(dá)品牌內(nèi)涵特幔、激發(fā)用戶情感，甚至是刺激用戶反應(yīng)闸昨、促進(jìn)購買等蚯斯。
當(dāng)然，圖雖重要饵较，但如果只是給文字隨便配圖拍嵌，或者選擇了不合適的圖，會適得其反循诉。如果想要達(dá)到目標(biāo)横辆，就要看設(shè)計師如何成功誘惑到用戶大腦中的“原始人”了。
設(shè)計師應(yīng)該怎樣選擇圖茄猫，怎樣設(shè)計合適的圖狈蚤？在接下里的文章里，AnyForWeb將和大家分享如何成功誘惑“原始人”划纽。
