一個網站中，圖片往往比文字更能吸引使用者，人的視線似乎總在第一眼就定位在圖片上。形成這種神奇現象的原因很簡單：每個人的大腦裡都住著一個“原始人”。
原始時代，人的大腦需要處理的內容大多和影像有關。比如，我們的祖先最關心哪裡新長出來可以吃的果實，哪裡有新的獵物，哪裡有猛獸出沒、需要避開危險。這些重要地點和周邊環境通過視覺和記憶儲存在大腦裡，在經歷漫長的進化後，人腦逐漸進化出最適宜生存的大腦結構。
因此，人類天生擅長處理和記憶影像。
研究表明，人腦對視覺影像的處理速度比文字快60000倍。
同樣，在網頁設計中，圖片更能發揮巨大作用。有一個經典說法：一圖勝千言。
瀏覽網頁時，使用者看到文字後經歷這樣的過程：閱讀瀏覽、將文字內容化、情景化。經過這幾個處理階段，使用者才能搞清楚這段文字想要描述或表達什麼。而視覺化的資訊（照片、圖片）可以讓人在3秒內迅速理解，不需要“翻譯”階段。
視覺影像在短時間內的重大影響力，決定了影像是視覺傳達的一個重要手段。
在網頁設計中，影像主要以圖片、照片、資訊圖、圖示等多種樣式展現。
那圖有什麼作用？我們認為更恰當的說法是“好圖勝千言”。
什麼是好圖？網頁設計中什麼樣的圖才是合適的？
本文分享一些網站中的經典圖的使用案例，讓大家瞭解好圖的作用。廢話不多說，先上圖說話：
1、Biamar
關鍵詞：時尚感 品牌 視差滾動 HTML5
Biamar網站首頁用了超大背景圖，高階、時尚是網站給人的第一感覺。
在背景圖中，連綿起伏的山巒具有層次，襯托了人物形象，營造的環境氛圍突出展示了服裝的時尚感，渲染並傳達了Biamar的品牌內涵。
此處使用的圖，符合Biamar針織衫的品牌風格，向使用者準確傳達了品牌理念。
網站採用了視差滾動技術，頁面用HTML5寫成，滑鼠滾動時頁面圖和文字出現不同層次，從視覺上更加襯托出網站的酷炫。
2、My Deejo
關鍵詞：HTML5 酷炫 360度全景3D展示 強互動性
開啟My Deejo網站，首頁的產品圖片無疑是最引人注目的：精緻的摺疊刀似乎懸浮在空中，從模糊的背景中凸顯出來，盡顯3D效果的視覺衝擊力。使用者的視線很容易被產品吸引，主動去閱讀文字，進一步瞭解產品特徵。
在瀏覽過程中，使用者會發現網站採用了超級酷炫的360度全景3D展示。通過滑動和滾動滑鼠，可以從全方位視角檢視摺疊刀的細節，並能自定義為刀身設定不同花紋和刀柄，充滿趣味性。
同時還能點選摺疊刀下面的OPEN/CLOSE幽靈按鈕，檢視刀身開啟和摺疊的狀態。
更棒的是，上圖的互動效果完整展示了各個零件拼出摺疊刀的動態效果，非常吸引人。
該網站的效果很容易激發使用者的興趣，讓人沉浸其中、玩得不亦樂乎，留下深刻印象。
雖然網站酷炫的互動效果似乎更吸引人，但開啟網站第一眼的驚豔，來自於產品圖片本身的精緻感。正是產品圖與背景的巧妙融合，完美展現了定製的個性化，才能發揮互動效果的最大作用。
關鍵詞：360度水平旋轉展示 產品圖動態旋轉 視差滾動 全面瞭解產品
EverEarth是由我們開發的網站，該網站的整體風格清新，產品圖片全部是拍攝的高清圖片，從不同角度展現產品細節。
網站採用了360度水平旋轉展示技術展示產品。
與摺疊刀定製案例不同的是，產品圖片是自動360度水平旋轉，非常方便使用者檢視產品各個側面的細節，幫助使用者全面瞭解產品，感覺與產品更貼近。
與靜態圖相比，動態影像顯然更容易得到人的注意力，不過對任何效果來說，只有適合的才是最好的。
針對某些行業的產品，高清產品圖片和360度水平旋轉展示可以發揮更好的作用，比如大型機械裝置、精密儀器、珠寶等產品。
4、POSCO
關鍵詞：線形圖 風格統一 專業性
POSCO網站的線形向量圖和線形圖示是網站的一個特色。這種獨特的線形圖，看起來簡潔、形象。
該網站中的線形圖有兩個重要作用，一是當多個頁面使用風格一致的線形圖時，讓網站具有統一性，能為網站塑造一種簡單、專業的形象。另一個作用是，使用者即使不看文字，也能通過線形圖瞭解文字傳達的含義。
通常，線形圖可以起到傳遞資訊的作用，好的線形圖可以作為網站統一而獨特的元素，讓網站具有一種設計感。
5、POSCO
關鍵詞：資訊圖 視覺化 易於傳播
同樣在POSCO網站上，還採用了扁平化的資訊圖設計。
該網站中，資訊圖將資料、文字轉化為更直觀的視覺化形式，讓人更容易理解和感受。
與文字相比，該案例使用更富有吸引力的資訊圖，並且其配色和網站整體風格相一致，讓使用者的注意力集中在資料上，讓人在腦海中迅速建立視覺化印象。
在網站中合理使用資訊圖，是提升傳播效果的最優途徑之一。
關鍵詞：流程圖 直觀 易理解 人文精神
在Glanway伽然的招聘申請中，以流程圖的形式展現了招聘申請流程，看上去一目瞭然。
上圖的整個流程用圖示、線條、文字搭配展現，強化了流程的圖順序，並視覺上增加了文字排版樣式，顯得美觀。
從視覺效果來說，純粹的文字描述在網頁中顯得單調或呆板，而不同樣式的流程圖往往比文字有更多樣式，甚至讓使用者感到操作步驟簡化，進而刺激使用者反應、促使人行動。
關鍵詞：手寫文字 情懷 經典 產生共鳴
如果讓你用圖片表達紀念，你會用什麼樣的圖？在Vito Salvatore網站上，一張和背景融為一體的照片讓人不由自主產生一種紀念的心情。
大背景圖模糊化，讓人的視覺集中在“照片”中的路虎車和人物上，色彩的巧妙變化，讓照片與周邊壞境融為一體，又凸顯了層次感。路虎第一款發現在1989年推出，照片下手寫的“1989”讓紀念味兒更濃，再加上包含“25 Years”的大號文字，讓整個頁面渲染出一種經典的感覺。
該網站此處圖片的使用，能夠激發使用者情感，引起使用者共鳴。
關鍵詞：手繪風 人物真實形象 親切感 人情味
The Lounge網站中，服務人員全部採用了手繪風的人物真實形象，是網站的一個特色。
該網站的真實人物形象展現讓使用者感受到服務背後有活生生的人，體驗到一種真實感和親切感。這種親切友好更有人情味，比較容易讓使用者產生信賴，無形中提升了網站使用者體驗。
另外，網站設計與業務緊密聯絡，手繪風格更是體現了一種藝術氣息，巧妙傳遞該企業的業務特色。
但設計師們需要注意，應謹慎選擇和設計人物真實形象，因為不恰當的人物照片出現在網站上，反而影響網站瀏覽效果。
該網站能夠取得更好效果的原因是：從整體看，無論是左側的真實人物形象，還是右側的手繪人物、以及其他元素（梳子、剪刀等）風格統一，而且在配色上協調、融合，讓網站整體風格保持著一致。
關鍵詞：卡通圖 情感化 打動使用者
La Baldufa網站的產品採用了大量可愛的卡通圖，充滿了童趣。
在網站上，所有的卡通圖顏色鮮亮柔和，顯得活潑可愛，非常符合嬰幼兒用品給人的感受。並且卡通圖的背景採用圓角設計，潛在蘊含並傳達出產品的安全性，也更好地襯托網站整體的卡通風格。
該網站的卡通圖符合產品定位，不僅是為了展示產品，還從整體營造了一種稚嫩、溫馨的氛圍，可以喚起人內心的柔軟，打動使用者。
10、Glamour.biz
關鍵詞：卡通手繪風 個性化 高識別度
Glamour.biz網站採用了卡通手繪風格的設計，首頁的圖是一個特徵鮮明的人物形象，不管是人物髮型、神態，還是動作，都展現一種強烈的個性化。
這種卡通手繪風格的圖塑造的個性化非常獨特，能吸引使用者的注意力，具有高識別度，不僅符合該企業的形象定位，還容易給使用者留下深刻印象。
關於圖的實際使用案例，以上就是本次分享。
從這些案例中我們可以發現，圖在塑造/影響網站風格、傳遞情感、打造品牌等方面起著非常重要的作用。進一步說，圖的作用可能是傳遞資訊、展示產品優點，也可能是傳達品牌內涵、激發使用者情感，甚至是刺激使用者反應、促進購買等。
當然，圖雖重要，但如果只是給文字隨便配圖，或者選擇了不合適的圖，會適得其反。如果想要達到目標，就要看設計師如何成功誘惑到使用者大腦中的“原始人”了。