DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> banner廣告圖片設計:增強用戶體驗與愉悅感
banner廣告圖片設計:增強用戶體驗與愉悅感
編輯:關於網頁技巧     

先來回顧一下廣告的認知心理流程:廣告心理包含以下流程:無意注意→有意注意→增強說服效果(記憶與再現、意象與聯想)→情感與決策。

 

在上一篇文章中講到:設計推廣banner時,如何在認知流程的第一階段——無意注意令信息hold住用戶眼球。接下來,進入認知流程第二階段——有意注意:當人們對推廣banner產生需求,有進一步了解的渴望,就會主動關注信息並進行進一步加工。本文通過對有意注意理論分析,使推廣banner不僅能吸引用戶,還能令其在加工信息時更流暢與舒適,增強用戶體驗與讀下去的信心與愉悅感。

有意注意是指,有預定目標,必要時還需要一定意志努力的注意;在心理學中有時有意注意也稱為積極注意或意志注意,因為它需要個人的積極性和意志努力。有意注意主動服從既定的目的任務,它受人們意識的自覺調節和支配。當人對活動目的、信息理解得越清晰、越深刻,與該活動有關的一切事物就越能引起有意注意。

 

在設計中,要使用戶對推廣banner所包含信息清晰與深刻理解,則需注意以下兩點:刺激物適量、編碼流暢

刺激物適量

(1)banner中區塊數量不超過5個:一方面過多的區塊會分散用戶的視覺焦點,產生凌亂感;另一方面令banner適當留白、防止過度擁擠。

修改前的banner區塊有4個,雖然沒有超過5個但相比之下,修改之後的banner有3個區塊,但整體性卻大大增強。

修改前banner分為4區塊

 

修改後banner為3區塊


(2)顏色保持在3-5中之間,防止視覺疲勞

修改之前的banner配色多達8種,雖然很漂亮,但banner內主要文字信息沒有很好凸顯;修改之後的banner配色控制在5種之內,不僅banner好看,而且各個內容比較清晰,一目了然。

修改前

 

修改後的兩幅

 

(3)信息單元≤7±2個組塊

1956年美國人米勒發表了一篇著名的論文《神秘的七加減二》,提出短時記憶(亦稱工作記憶,指信息一次呈現後,保持在一分鐘以內的記憶)的廣度是7±2個組塊,記憶廣度是指材料呈現一次後被試所能記住的最大量;短時記憶廣度的大小不決定其項目數,而決定其組塊的大小,組塊指將若干較小單位聯合而成熟悉的、較大的單位,它可以是7個字母、7個熟悉單詞、或7個常用短語。

在banner設計中呈現的組塊越多,加工信息就需占用更多認知資源,也就更費力費時。而用戶是以“最小費力”原則浏覽網頁一切,如果組塊過多,用戶為了避免費力加工就會放棄繼續浏覽,所以組塊數量要適當,最好不要大約7個組塊。

修改之前,banner將各個元素分開排列,每一元素自成組塊共5個組塊,無疑增加認知負擔;修改之後banner將同性質內容放一起,組成人名、地址、聯系信息三個組塊,減少信息加工單元,減少認知負擔更利於加工。

修改前 修改後

 

(4)在展現廣告時,避免多個元素動態展現(gif格式)

修改之前多個元素同時動態展現會令用戶抓不住重點,造成視覺疲勞;修改之後只對重點加以動態處理,主次分明。

修改前

 

修改後

 

2、編碼流暢性:

(1)文字風格相同或相似,防止字體風格反差太大,以保持認知流暢性易於信息快速加工。

修改前 修改後

 

(2)當大小字體在banner上下排列,選用小字可以適當誇大字間距,大字則適當減少字間距:視覺上令二者和諧,減少視線跨度與避免遺忘

 

(3)內容連貫不跳躍,文字或圖片連續不間斷

用戶浏覽網頁時,大腦會將作用於感官的事物知覺為一個整體,也就是通過對信息整理與組織,來對事物做出解釋,知道其意義並形成一個完整的印象。在將信息知覺為一個整體時,根據格式塔心理學派的研究,大腦遵循接近、相似與連續的組織原則:

格式塔心理學又稱為完形主義或完形心理學,由惠特海默、苛勒和考夫卡三位德國心理學家於1912年聯快創立,是一種注重整體組織的心理學理論體系。他們認為,元素的聚集不是一堆不相關、片段的單元和混亂的聚集,而是以相似性、接近性、連續性等原則組織成了有意義的整體。

所以我們在觀看banner時,根據相似性原則與接近性原則,在物理屬性方面相似的或者在空間上或時間上比較接近的成分容易被組織在一起形成整體,所以將同類型元素組合在一起,既節省了用戶二次歸類的時間又可以節省認知資源的分配,而且好的歸類能使banner符合根據中國人閱讀習慣,從左到右從上到下進行排版,有助於用戶更省時省力方便地加工信息。

修改之前的banner同為文字信息的小字內容沒有放在一起,造成用戶浏覽時視覺跳躍;修改之後將同類型元素進行整合,既方便用戶加工信息,又符合閱讀習慣,可謂一舉兩得。

修改前

 

修改後

 

最後,感謝蛋東同學孜孜不倦的設計~!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved