網頁設計中,誘惑大腦中的“原始人” –

來人人都是產品經理【起點學院】,BAT實戰派產品總監手把手係統帶你學產品、學運營。

每個人的大腦裏都住著一個“原始人”。有一個經典說法:一圖勝千言。

一個網站中,桃園網頁設計,圖片往往比文字更能吸引用戶,人的視線似乎總在第一眼就定位在圖片上。形成這種神奇現象的原因很簡單:每個人的大腦裏都住著一個“原始人”。在原始時代,人的大腦需要處理的內容大多和圖像有關。比如,我們的祖先最關心哪裏新長出來可以吃的果實,哪裏有新的獵物,哪裏有猛獸出沒、需要避開危險。這些重要地點和周邊環境通過視覺和記憶保存在大腦裏,在經歷漫長的進化後,人腦逐漸進化出最適宜生存的大腦結搆。

因此,人類天生擅長處理和記憶圖像。

研究表明,人腦對視覺影像的處理速度比文字快60000倍。同樣,在網頁設計中,圖片更能發揮巨大作用。有一個經典說法:一圖勝千言。

瀏覽網頁時,用戶看到文字後經歷這樣的過程:閱讀瀏覽、將文字內容化、情景化。經過這幾個處理階段,用戶才能搞清楚這段文字想要描述或表達什麼。而可視化的信息(照片、圖片)可以讓人在3秒內迅速理解,不需要“繙譯”階段。

視覺影像在短時間內的重大影響力,決定了圖像是視覺傳達的一個重要手段。在網頁設計中,圖像主要以圖片、照片、信息圖、圖標等多種樣式展現。那圖有什麼作用?AnyForWeb認為更恰當的說法是“好圖勝千言”。什麼是好圖?網頁設計中什麼樣的圖才是合適的,台南網頁設計?本文分享一些網站中的經典圖的使用案例,讓大家了解好圖的作用。廢話不多說,先上圖說話:

1、Biamar

在揹景圖中,連綿起伏的山巒具有層次,襯托了人物形象,營造的環境氛圍突出展示了服裝的時尚感,渲染並傳達了Biamar的品牌內涵。此處使用的圖,符合Biamar針織衫的品牌風格,向用戶準確傳達了品牌理唸。網站採用了視差滾動技術,頁面用HTML5寫成,鼠標滾動時頁面圖和文字出現不同層次,從視覺上更加襯托出網站的酷炫。

2、My Deejo

關鍵詞:HTML5 酷炫 360度全景3D展示 強互動性打開My Deejo網站,首頁的產品圖片無疑是最引人注目的:精緻的折疊刀似乎懸浮在空中,網頁設計,從模糊的揹景中凸顯出來,儘顯3D效果的視覺沖擊力。用戶的視線很容易被產品吸引,主動去閱讀文字,進一步了解產品特征。

在瀏覽過程中,用戶會發現網站採用了超級酷炫的360度全景3D展示。通過滑動和滾動鼠標,可以從全方位視角查看折疊刀的細節,並能自定義為刀身設置不同花紋和刀柄,充滿趣味性。

同時還能點擊折疊刀下面的OPEN/CLOSE幽靈按鈕,查看刀身打開和折疊的狀態。

更棒的是,上圖的交互效果完整展示了各個零件拼出折疊刀的動態效果,非常吸引人。該網站的效果很容易激發用戶的興趣,讓人沉浸其中、玩得不亦樂乎,留下深刻印象。

雖然網站酷炫的交互效果似乎更吸引人,但打開網站第一眼的驚艷,來自於產品圖片本身的精緻感,桃園網頁設計。正是產品圖與揹景的巧妙融合,完美展現了定制的個性化,才能發揮交互效果的最大作用。

3、EverEarth 關鍵詞:360度水平旋轉展示 產品圖動態旋轉 視差滾動 全面了解產品EverEarth是由AnyForWeb開發的網站,該網站的整體風格清新,產品圖片全部是拍攝的高清圖片,從不同角度展現產品細節。

網站採用了360度水平旋轉展示技術展示產品。

與折疊刀定制案例不同的是,產品圖片是自動360度水平旋轉,台北網頁設計,非常方便用戶查看產品各個側面的細節,幫助用戶全面了解產品,感覺與產品更貼近。與靜態圖相比,動態影像顯然更容易得到人的注意力,不過對任何效果來說,只有適合的才是最好的。針對某些行業的產品,高清產品圖片和360度水平旋轉展示可以發揮更好的作用,比如大型機械設備、精密儀器、珠寶等產品。

4、POSCO

該網站中的線形圖有兩個重要作用,一是當多個頁面使用風格一緻的線形圖時,讓網站具有統一性,能為網站塑造一種簡單、專業的形象。另一個作用是,用戶即使不看文字,也能通過線形圖了解文字傳達的含義。通常,線形圖可以起到傳遞信息的作用,好的線形圖可以作為網站統一而獨特的元素,讓網站具有一種設計感。

5、POSCO

該網站中,信息圖將數據、文字轉化為更直觀的可視化形式,讓人更容易理解和感受。與文字相比,台中網頁設計,該案例使用更富有吸引力的信息圖,並且其配色和網站整體風格相一緻,讓用戶的注意力集中在數據上,讓人在腦海中迅速建立可視化印象。在網站中合理使用信息圖,是提升傳播效果的最優途徑之一。

6、Glanway伽然

上圖的整個流程用圖標、線條、文字搭配展現,強化了流程的圖順序,並視覺上增加了文字排版樣式,顯得美觀。從視覺效果來說,台中網頁設計,純粹的文字描述在網頁中顯得單調或呆板,響應式網頁設計,而不同樣式的流程圖往往比文字有更多樣式,甚至讓用戶感到操作步驟簡化,進而刺激用戶反應、促使人行動。

7、Vito Salvatore

關鍵詞:手寫文字 情懷 經典 產生共鳴如果讓你用圖片表達紀唸,你會用什麼樣的圖?在Vito Salvatore網站上,一張和揹景融為一體的照片讓人不由自主產生一種紀唸的心情。

大揹景圖模糊化,讓人的視覺集中在“照片”中的路虎車和人物上,色彩的巧妙變化,讓照片與周邊壞境融為一體,又凸顯了層次感。路虎第一款發現在1989年推出,照片下手寫的“1989”讓紀唸味兒更濃,再加上包含“25 Years”的大號文字,讓整個頁面渲染出一種經典的感覺。該網站此處圖片的使用,能夠激發用戶情感,引起用戶共鳴。

8、The Lounge

該網站的真實人物形象展現讓用戶感受到服務揹後有活生生的人,體驗到一種真實感和親切感。這種親切友好更有人情味,比較容易讓用戶產生信賴,無形中提升了網站用戶體驗。另外,網站設計與業務緊密聯係,手繪風格更是體現了一種藝術氣息,巧妙傳遞該企業的業務特色。

但設計師們需要注意,應謹慎選擇和設計人物真實形象,因為不恰當的人物照片出現在網站上,反而影響網站瀏覽效果。

該網站能夠取得更好效果的原因是:從整體看,無論是左側的真實人物形象,還是右側的手繪人物、以及其他元素(梳子、剪刀等)風格統一,而且在配色上協調、融合,讓網站整體風格保持著一緻。

9、La Baldufa

在網站上,所有的卡通圖顏色鮮亮柔和,顯得活潑可愛,非常符合嬰幼兒用品給人的感受。並且卡通圖的揹景採用圓角設計,潛在蘊含並傳達出產品的安全性,也更好地襯托網站整體的卡通風格。該網站的卡通圖符合產品定位,不僅是為了展示產品,還從整體營造了一種稚嫩、溫馨的氛圍,可以喚起人內心的柔軟,打動用戶。

10、Glamour.biz

關鍵詞:卡通手繪風 個性化 高識別度Glamour,網頁設計.biz網站採用了卡通手繪風格的設計,首頁的圖是一個特征鮮明的人物形象,不管是人物發型、神態,台北網頁製作公司,還是動作,都展現一種強烈的個性化。

這種卡通手繪風格的圖塑造的個性化非常獨特,能吸引用戶的注意力,具有高識別度,不僅符合該企業的形象定位,還容易給用戶留下深刻印象。關於圖的實際使用案例,以上就是AnyForWeb的本次分享。

從這些案例中我們可以發現,圖在塑造/影響網站風格、傳遞情感、打造品牌等方面起著非常重要的作用。進一步說,圖的作用可能是傳遞信息、展示產品優點,也可能是傳達品牌內涵、激發用戶情感,甚至是刺激用戶反應、促進購買等。

當然,圖雖重要,但如果只是給文字隨便配圖,或者選擇了不合適的圖,會適得其反。如果想要達到目標,就要看設計師如何成功誘惑到用戶大腦中的“原始人”了。設計師應該怎樣選擇圖,怎樣設計合適的圖?在接下裏的文章裏,AnyForWeb將和大家分享如何成功誘惑“原始人”。

本文由 @AnyForWeb設計師尛沫 投稿發佈於人人都是產品經理 ,未經許可,禁止轉載。