基于認(rèn)知心理的電商界面視覺(jué)優(yōu)化設(shè)計(jì)

王曉迎 代大齊 肖靜

【摘 要】 本文運(yùn)用認(rèn)知心理學(xué)原理，提出了電商界面視覺(jué)在“用戶引導(dǎo)”和“用戶體驗(yàn)”方面的優(yōu)化設(shè)計(jì)方案，旨在為電商企業(yè)在日益競(jìng)爭(zhēng)激烈的互聯(lián)網(wǎng)市場(chǎng)中贏得更多的市場(chǎng)占有率和用戶口碑。

【關(guān)鍵詞】 認(rèn)知心理學(xué)；電商界面；視覺(jué)引導(dǎo)；優(yōu)化設(shè)計(jì)

隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展和普及，電子商務(wù)行業(yè)蓬勃興起。網(wǎng)上購(gòu)物、訂票、學(xué)習(xí)等已經(jīng)成為了人們生活中的重要組成部分。電子商務(wù)界面設(shè)計(jì)的優(yōu)劣，直接影響到用戶的購(gòu)買(mǎi)率和參與率。本文運(yùn)用認(rèn)知心理學(xué)原理，提出了電商界面視覺(jué)在“用戶引導(dǎo)”和“用戶體驗(yàn)”方面的優(yōu)化設(shè)計(jì)方案，旨在為電商企業(yè)在競(jìng)爭(zhēng)日益激烈的互聯(lián)網(wǎng)市場(chǎng)中贏得更多的市場(chǎng)占有率和用戶口碑。

一、背景知識(shí)回顧

1、認(rèn)知心理學(xué)與人機(jī)視覺(jué)界面

作為心理學(xué)的一個(gè)分支，認(rèn)知心理學(xué)是二十世紀(jì)五十年代中期在西方興起的，[1]主要研究認(rèn)知的心智處理，其范圍涉及思維、記憶、推理、決定等諸多方面，所以也有人將認(rèn)知心理學(xué)稱(chēng)作為“信息加工心理學(xué)”。

隨著近年來(lái)互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展和人們的需求不斷提升以及智能手機(jī)的普及，人與電腦的交流可以方便快捷地通過(guò)電腦屏幕操作來(lái)完成。這種進(jìn)行人機(jī)交互的屏幕邏輯通常被稱(chēng)為“界面”，其中視覺(jué)界面占絕大多數(shù)。

2、電子商務(wù)界面的視覺(jué)特點(diǎn)

在電子商務(wù)的活動(dòng)中，用戶界面承載著重要的人機(jī)信息交換任務(wù)。電子商務(wù)界面主要體現(xiàn)出“數(shù)字化（無(wú)紙）”、“交互性（雙向溝通）”、“高效率（不受傳統(tǒng)時(shí)間空間制約）”的性質(zhì)。其視覺(jué)方面，具有高效性、快捷性、可擴(kuò)展性等特點(diǎn)。

基于認(rèn)知心理的電商界面視覺(jué)優(yōu)化設(shè)計(jì)，是通過(guò)認(rèn)知心理學(xué)的原理和方法，研究用戶對(duì)產(chǎn)品的使用習(xí)慣以及分析邏輯，使界面設(shè)計(jì)盡可能符合用戶對(duì)產(chǎn)品的期望，從而追求電商界面視覺(jué)的用戶引導(dǎo)和用戶體驗(yàn)達(dá)到較高的層次，提升產(chǎn)品在消費(fèi)者中的口碑。

二、電商界面用戶視覺(jué)引導(dǎo)的優(yōu)化設(shè)計(jì)

1、人眼視覺(jué)感知信息加工的特點(diǎn)

人眼視覺(jué)感知信息加工具有以下幾個(gè)特點(diǎn)。

（1）中央凹：人眼的視錐細(xì)胞主要聚集于“中央凹”的小區(qū)域內(nèi)，占視網(wǎng)膜面積的1%，這個(gè)區(qū)域具有較高的視覺(jué)分辨率。

（2）周邊視覺(jué)：周邊視覺(jué)不具備高分辨率，它們只提供低分辨率的視覺(jué)索引，用來(lái)引導(dǎo)眼球運(yùn)動(dòng)，使得“中央凹”處能夠抓住視覺(jué)線索從而看到視野里所有重要的東西。

（3）視覺(jué)感知的格式塔原理：[2]該原理認(rèn)為物體之間的相對(duì)距離、性質(zhì)等會(huì)影響人們感知它們是否以及如何組織在一起。也就是說(shuō)，我們?nèi)祟?lèi)的視覺(jué)系統(tǒng)會(huì)對(duì)看到的視覺(jué)信息進(jìn)行構(gòu)建結(jié)構(gòu)（分組或分類(lèi)）。比如，相互之間距離比較接近的會(huì)認(rèn)為是一組。又比如，性質(zhì)相似的會(huì)認(rèn)為是一組等等。

2、基于認(rèn)知心理學(xué)的用戶視覺(jué)引導(dǎo)優(yōu)化設(shè)計(jì)

認(rèn)知心理學(xué)認(rèn)為，認(rèn)知的過(guò)程包括接受、編碼、操作、提取和利用知識(shí)的過(guò)程。人類(lèi)認(rèn)識(shí)世界是從感覺(jué)和知覺(jué)開(kāi)始的。人們感知事物時(shí)需要以注意為前提，從眾多信息中將有用的信息進(jìn)行篩檢過(guò)濾，儲(chǔ)存到記憶系統(tǒng)，然后進(jìn)一步形成表象和概念。

根據(jù)人眼視覺(jué)感知信息加工的特點(diǎn)和認(rèn)知過(guò)程的原理，我們認(rèn)為：電商界面中的視覺(jué)流程，首先應(yīng)滿足最一般的人眼視覺(jué)閱讀規(guī)律：從上到下，從左到右。還有需要強(qiáng)調(diào)的是，界面的布局、色彩、圖標(biāo)等設(shè)計(jì)都會(huì)吸引用戶的眼球，對(duì)用戶的視覺(jué)有明顯的引導(dǎo)作用。因此，界面上的重要部分一定要醒目，千萬(wàn)不要放到盲區(qū)的位置上。

基于上面的分析，我們提出了電商界面的“用戶視覺(jué)引導(dǎo)”的優(yōu)化設(shè)計(jì)，主要針對(duì)“登錄注冊(cè)”、“首屏”這兩個(gè)在用戶引導(dǎo)方面最重要的部分。

（1）登錄注冊(cè)網(wǎng)站界面的優(yōu)化設(shè)計(jì)。電子商務(wù)網(wǎng)站登錄界面的優(yōu)化設(shè)計(jì)，我們認(rèn)為要以用戶引導(dǎo)為先，給用戶提供必要的引導(dǎo)提示。對(duì)于瀏覽者，可以按照游客的身份注冊(cè)并可以進(jìn)行部分產(chǎn)品的體驗(yàn)。對(duì)于成為正式用戶的瀏覽者，應(yīng)該提供更多的優(yōu)惠項(xiàng)目。這樣的設(shè)計(jì)讓人感覺(jué)登錄注冊(cè)網(wǎng)站界面清晰明了而且富有人情味兒。在界面的結(jié)構(gòu)設(shè)計(jì)上，要做到以下幾點(diǎn)。

一是簡(jiǎn)潔突出，大膽留白。由于登錄注冊(cè)界面往往需要填入一些用戶的相關(guān)信息，用戶會(huì)把一部分精力放在思考如何填寫(xiě)上，因此心理負(fù)擔(dān)會(huì)加重。這時(shí)登錄界面可以通過(guò)大量的留白，給用戶一種清晰明了的感覺(jué)，幫助用戶理清思路，快速和方便地進(jìn)行登錄信息的填寫(xiě)。

二是清晰準(zhǔn)確的提示也非常重要。人們?cè)跒g覽頁(yè)面的時(shí)候，首先注意的是標(biāo)題。好的標(biāo)題提示對(duì)用戶的引導(dǎo)作用非常之大，起著一種“敲門(mén)磚”的作用。標(biāo)題提示吸引人，用戶一般會(huì)主動(dòng)參與消費(fèi)活動(dòng)，這也是對(duì)用戶最好的引導(dǎo)。

三是有趣美觀的頁(yè)面設(shè)計(jì)。視覺(jué)上美觀的界面會(huì)給人留下好的第一印象。登陸界面的設(shè)計(jì)要美觀和諧，這樣用戶才樂(lè)于使用和點(diǎn)擊。

四是盡量減少表單域。從視覺(jué)角度來(lái)說(shuō)，電商網(wǎng)站登陸界面上顯示的表單域越少，轉(zhuǎn)化率就越高。特別是對(duì)新用戶來(lái)說(shuō)，過(guò)多的表單域會(huì)增加用戶的思考時(shí)間甚至造成用戶的思維混亂。所以盡量減少表單域，降低用戶登錄的難度，是形成良好用戶引導(dǎo)的必要條件。

（2）首屏的優(yōu)化設(shè)計(jì)。電子商務(wù)網(wǎng)站的首屏（指的是不滾動(dòng)網(wǎng)頁(yè)屏幕就能被用戶看到的畫(huà)面）。世界著名的網(wǎng)頁(yè)易用性專(zhuān)家尼爾森曾經(jīng)有報(bào)告顯示，首屏以上的關(guān)注度為80.3%，首屏以下的關(guān)注度僅有19.7%。這兩個(gè)數(shù)據(jù)足以表明，首屏對(duì)每一個(gè)需要轉(zhuǎn)化率的電商網(wǎng)站是非常重要的。在電子商務(wù)網(wǎng)站中，用戶最急切需要獲得的不外乎有兩點(diǎn)：吸引人的商品或店鋪，以及網(wǎng)站能夠給予他的信任感。因此，各類(lèi)宣傳推廣信息就成了電商首屏界面的首要選擇。需要注意的是，首屏在設(shè)計(jì)時(shí)一定要迎合用戶的閱讀習(xí)慣，進(jìn)行必要的提示和結(jié)構(gòu)化處理對(duì)用戶進(jìn)行友好的引導(dǎo)。切忌將首屏設(shè)計(jì)成雜亂的布告欄，這樣會(huì)造成大量的用戶流失。

三、電商界面用戶視覺(jué)體驗(yàn)的優(yōu)化設(shè)計(jì)

我們?nèi)祟?lèi)借助于“視覺(jué)、聽(tīng)覺(jué)、嗅覺(jué)、觸覺(jué)、味覺(jué)”所獲得的信息中，80%來(lái)自于視覺(jué)信息。因而，電商界面上用戶“視覺(jué)體驗(yàn)”就顯得尤為重要。

美國(guó)認(rèn)知心理學(xué)家Donald Norman曾在他的書(shū)籍《設(shè)計(jì)心理學(xué)》中提出“用戶體驗(yàn)”的定義。他認(rèn)為對(duì)于用戶來(lái)講，很多知識(shí)并不存在于他們的腦中，他們需要外部刺激（體驗(yàn)）才能獲得。以用戶為中心，增強(qiáng)用戶體驗(yàn)必須作到以用戶的角度去看問(wèn)題，也就是以用戶的需求和利益為基礎(chǔ)，讓用戶方便快捷地明白每一步的狀態(tài)和產(chǎn)品的使用方法以及帶給他們的利益。[3]根據(jù)以上原理，我們對(duì)電商界面用戶視覺(jué)體驗(yàn)進(jìn)行了優(yōu)化設(shè)計(jì)，主要體現(xiàn)在以下幾個(gè)方面。

1、界面的排版與布局

排版與布局是對(duì)界面里的文字、圖形、圖標(biāo)等因素進(jìn)行位置、大小的編排，以達(dá)到美觀且能夠傳達(dá)信息的過(guò)程。對(duì)電商界面用戶視覺(jué)體驗(yàn)進(jìn)行優(yōu)化設(shè)計(jì)，我們建議排版與布局要突出界面的“骨骼”。這是一種理性的排版與布局方式，需要界面中的文字與圖形按照一定的分組和結(jié)構(gòu)比例進(jìn)行排版和布局。這樣的排版和布局設(shè)計(jì)，會(huì)給用戶一種條理分明、邏輯清晰的視覺(jué)體驗(yàn)，增加用戶對(duì)網(wǎng)站和產(chǎn)品的信任感。

2、界面的色彩與紋理

電商界面設(shè)計(jì)，其顏色應(yīng)該控制在三種以內(nèi)，在同一色相中通過(guò)調(diào)節(jié)漸變來(lái)體現(xiàn)色彩的細(xì)節(jié)。純色應(yīng)該是使用最多的，適當(dāng)加一些紋理可以增加界面設(shè)計(jì)的層次感。界面使用互補(bǔ)色（一般是指色彩對(duì)比強(qiáng)烈的兩種顏色）、圖像尺寸相對(duì)較大、有動(dòng)態(tài)效果的按鈕或圖形，往往容易吸引用戶的視覺(jué)，因而界面上的重要內(nèi)容要注意使用上述設(shè)計(jì)規(guī)律。在界面設(shè)計(jì)中，設(shè)計(jì)師應(yīng)切忌只重視界面美化而忽略用戶的需求。也就是說(shuō)，設(shè)計(jì)師應(yīng)該將人的認(rèn)知規(guī)律和用戶需求放在首位，在此基礎(chǔ)上再合理的布局頁(yè)面元素和美化界面，從而正確地引導(dǎo)用戶的視覺(jué)體驗(yàn)。

3、扁平化設(shè)計(jì)和擬物化設(shè)計(jì)

扁平化設(shè)計(jì)是去掉冗余，讓最本質(zhì)的核心內(nèi)容展示出來(lái)的一種設(shè)計(jì)形式，具有抽象、極簡(jiǎn)和符號(hào)化的特點(diǎn)。與扁平化設(shè)計(jì)對(duì)應(yīng)的是擬物化設(shè)計(jì)。擬物化設(shè)計(jì)屬于偏寫(xiě)實(shí)風(fēng)格的界面設(shè)計(jì)形式，具有陰影、立體、漸變等效果，目前多用于游戲界面。對(duì)于電商界面用戶視覺(jué)體驗(yàn)的優(yōu)化設(shè)計(jì)，我們建議采用扁平化的設(shè)計(jì)風(fēng)格，這種設(shè)計(jì)風(fēng)格具有很多優(yōu)勢(shì)：其一，極簡(jiǎn)的元素；其二，貼切的圖標(biāo)；其三，更多的圓角；其四，中性之美等。這些都有助于消費(fèi)者對(duì)信息的快速閱讀和吸收，體現(xiàn)出用戶視覺(jué)體驗(yàn)的高效性。

四、結(jié)論和展望

基于認(rèn)知心理的電商界面視覺(jué)優(yōu)化設(shè)計(jì)，可以預(yù)測(cè)并引導(dǎo)用戶的視線走向，主動(dòng)調(diào)整界面中內(nèi)容的主次布局和色彩，按照認(rèn)知規(guī)律的視線運(yùn)動(dòng)來(lái)排版，實(shí)現(xiàn)電商界面視覺(jué)信息更好的用戶引導(dǎo)和用戶體驗(yàn)，從而提升產(chǎn)品在消費(fèi)者中的口碑。目前電商界面的設(shè)計(jì)，也出現(xiàn)了一些新的趨勢(shì)，如“疊加效果”、“個(gè)性化插畫(huà)”、“動(dòng)畫(huà)和交互功能”等等，需要我們密切關(guān)注。我們相信，隨著科技的進(jìn)步和人們需求的提高，電商界面視覺(jué)設(shè)計(jì)水平也將不斷的得到提升。

【參考文獻(xiàn)】

[1] 何亭.基于認(rèn)知心理的網(wǎng)絡(luò)界面設(shè)計(jì)研究[D]. 蘇州：蘇州大學(xué).2009.5.

[2] （美）約翰遜（Johnson，J.）.理解UI設(shè)計(jì)準(zhǔn)則[M].北京：人民郵電出版社，2011.9.

[3] 程安萍. 智能手機(jī)UI設(shè)計(jì)中用戶體驗(yàn)的視覺(jué)研究[D]. 北京：北京林業(yè)大學(xué).2016.6.

【作者簡(jiǎn)介】

王曉迎（1963—）女，副教授，研究方向：設(shè)計(jì)藝術(shù)學(xué).

代大齊，男，講師，研究方向：電子商務(wù).

肖 靜，女，講師，研究方向：UI設(shè)計(jì).