對許多產(chǎn)品經(jīng)理和設(shè)計(jì)師來說，設(shè)計(jì)評(píng)審PK仿佛夢魘，設(shè)計(jì)師辛辛苦苦出的方案，可能遭受多方質(zhì)疑。也許方案本身是優(yōu)秀的，但卻無法用理論說服對方，結(jié)果越改越丑。

　　自1879年科學(xué)心理學(xué)誕生以來，心理學(xué)家開展了大量研究，對人類認(rèn)知、情感、記憶等各方面的規(guī)律進(jìn)行深入探討。許多結(jié)論都能對產(chǎn)品設(shè)計(jì)提供理論支持，再次略作總結(jié)分享簡，請各位看官不吝賜教。

　　一款軟件產(chǎn)品最先呈現(xiàn)給用戶的是產(chǎn)品界面。良好的界面元素容易識(shí)別、易于理解、能夠快速記憶，且較少出現(xiàn)誤操作。

1. 界面元素的編碼特征

　可識(shí)別性

　　以費(fèi)希納、韋伯等最早一批心理學(xué)先驅(qū)就是以研究感知覺閾限為起點(diǎn)的，他們的研究指出人的視覺、聽覺等只能加工特定強(qiáng)度范圍的刺激。在界面設(shè)計(jì)過程中，應(yīng)當(dāng)注意元素的可識(shí)別性。例如文字的不能太小，顏色也不能太淺。

　　某款手機(jī)瀏覽器打開web頁面的效果

　　可辨別性

　　知覺心理學(xué)研究表明，人的知覺能力存在差別閾限。兩種刺激必須大于差別閾限，才能被辯論出來。不同界面元素(特別是近似的、相鄰的)的視覺特征應(yīng)能明顯區(qū)分，防止用戶需要努力辨別，增加認(rèn)識(shí)資源。

　　某款手機(jī)瀏覽器打開web頁面的效果

　意義性

　　刺激必須是有意義的，能夠被人理解。因此，文字表達(dá)上、符號(hào)圖標(biāo)的設(shè)計(jì)上，都應(yīng)保證用戶能夠正確理解，不會(huì)出錯(cuò)。

　　對圖標(biāo)意義性的可用性測試：先對用戶進(jìn)行測試，看正確識(shí)別的比率有多高;

　　過一段時(shí)間后，對相同用戶進(jìn)行再測，看正確率的維持情況。O表示original, R表示Retest。

標(biāo)準(zhǔn)化

　　在不同條件下，刺激的意義需統(tǒng)一。例如，每個(gè)地方紅燈都表示停止，綠燈是表示通行。對于同系列軟件來說，不同平臺(tái)的圖標(biāo)和控件樣式，也應(yīng)避免意義沖突。

　　Android平臺(tái)對話框樣式的統(tǒng)一性問題

2. 界面元素的兼容性

　　刺激兼容性是指在不同場景、不同情境下的通用性。刺激的兼容性越好，學(xué)會(huì)的速度就越快、反應(yīng)時(shí)間越少、錯(cuò)誤越少、心理負(fù)荷越小。

概念兼容性

　　例如，SOS、110、119這些縮寫，概念兼容性都是極好的。再比如，紅色表示停止、綠色表示通行和安全;選中使用“勾選”等等。

　動(dòng)作兼容性

　　順時(shí)值旋轉(zhuǎn)與數(shù)值增加有關(guān)，如調(diào)節(jié)音量的旋鈕;指針往上調(diào)節(jié)，表示數(shù)值增加，如溫度計(jì)刻度。

　　在某款手機(jī)播放器中，調(diào)節(jié)音量采用上下鍵，本身符合動(dòng)作兼容性，但音量指示為左右方向，二者的心智模型發(fā)生沖突。

方式兼容性

　　Wickens, Sandry, Vidulich(1983)的研究證實(shí)，在言語任務(wù)中，刺激以聽覺形式呈現(xiàn)，以語言形式反應(yīng)，反應(yīng)時(shí)間最快;在空間任務(wù)中，刺激以圖形呈現(xiàn)，以動(dòng)作形式反應(yīng)時(shí)，反應(yīng)時(shí)間最快。

3. 顏色的認(rèn)知加工

　　顏色與對比度

　　人眼對顏色對比度的知覺受空間布局的影響。如下圖，兩幅圖的黑白顏色一樣，但前者色塊越大，對比度顯得也更大。

顏色與注意資源

　　同一屏幕內(nèi)，如果使用過多的色彩，會(huì)分散注意，使用戶無法快速找到目標(biāo)。

顏色性別差異

　　Newcastle 大學(xué)的神經(jīng)科學(xué)專家AnyaHurlbert的研究(2007)發(fā)現(xiàn)，盡管被調(diào)查者都更喜歡藍(lán)色，但女性的選擇更靠近藍(lán)色譜系中偏粉紅色的一端。多項(xiàng)研究也得出了類似的結(jié)論(Silver，1988;Ellis & Ficek, 2000)

　　2003年，Hallock, Joe開展了一項(xiàng)針對顏色偏好的專項(xiàng)調(diào)查(樣本量230)，結(jié)果如下。

顏色的年齡差異

　　Adams , Russell研究發(fā)現(xiàn)兒童更喜歡波長長的顏色，例如紅色、黃色。年齡較大的女性比男性更喜歡黑色和紫色(Silver & Ferrante, 1995)。Hemphill & Michael(1996 )的研究也支持了這點(diǎn)。我國關(guān)于色彩偏好的研究也有此發(fā)現(xiàn)(陳立，1965)。

　　Hallock, Joe的研究發(fā)現(xiàn)，隨著年齡的增長，對藍(lán)色的喜好非常穩(wěn)定，越來越多的人不太喜歡橙色。

　　顏色與情緒

　　色彩和情緒之間的關(guān)系與色彩偏好緊密相關(guān)，而色彩偏好和某種色彩是否會(huì)引出積極或消極的情緒有關(guān)(Naz, K., Helln, H., 2004)。

　　Boyatzis和Varghese在1994年研究兒童的色彩情緒聯(lián)系時(shí)發(fā)現(xiàn)，兒童趨向把積極情緒(例如高興，強(qiáng)大)與亮顏色聯(lián)系(例如藍(lán)色、綠色)，把消極情緒(例如悲傷、憤怒)與暗顏色聯(lián)系(例如 黑色與灰色)。在一個(gè)對澳大利亞大學(xué)生的顏色情緒聯(lián)系的研究中，Hemphill(1996)也發(fā)現(xiàn)亮顏色主要引出積極的情緒聯(lián)想，而暗顏色主要引出的是消極的情緒聯(lián)想。

　　Camgoz, N., Yener, C.(2002)的研究發(fā)現(xiàn)顏色的色調(diào)、飽和度和明度三個(gè)屬性對色彩偏好有非常重要的影響。被試最偏愛的是飽和度和明度大的組合，隨著明度和飽和度的增加，被試對顏色的喜好程度也隨之增加。

顏色的文化差異

　　不同的群體，顏色的文化內(nèi)含也有差異。如下圖，不同國家滅火器使用了不同的顏色，反映出顏色的文化差異。

　　許多研究者和設(shè)計(jì)師都曾分析總結(jié)過不同國家的顏色內(nèi)涵。這些文化差異是我們設(shè)計(jì)過程中需要注意的，尤其是對于產(chǎn)品的國際版本。

　　整理自《The Zen of CSS Design: Visual Enlightenment for the Web》

顏色錯(cuò)覺

　　有關(guān)顏色的錯(cuò)覺有很多種，有的錯(cuò)覺現(xiàn)象是設(shè)計(jì)過程中需要避免的，而有的則可加以利用。這里僅作初步分析，舉例如下：

　　避免紅藍(lán)重疊和紅綠重疊，因?yàn)檫@樣會(huì)引起視覺深度的錯(cuò)覺。如下圖，藍(lán)色色塊像是顯示在紅色的上方。

　　背景顏色對目標(biāo)顏色的知覺會(huì)有影響。如下圖，左右相同顏色的X，但由于背景不同，知覺的色彩出現(xiàn)明顯差異。

色盲

　　人群中色盲的發(fā)生率還是挺高的，男性為8%，女性為0.5%。

　　在色盲人群眼中的世界，遠(yuǎn)沒有正常人看到的精彩。紅綠色盲的人可能會(huì)分不清交通紅綠燈的差異(如下圖)。我們在產(chǎn)品設(shè)計(jì)過程中，也需要注意這一點(diǎn)，盡量避免由于色盲原因而無法感知重要的變化信息。

4. 字體的視覺加工

字體粗細(xì)

　　有研究者推薦，理想閱讀效果的字體粗細(xì)可設(shè)為：白底黑字1：6-1：8;黑底白字1：8-1：10。(注：1：6的意思是，筆劃粗細(xì)為1，文字高度為6)

　　隨著亮度的下降，粗體字更容易被識(shí)別。如下圖所示，左側(cè)的文字較容易識(shí)別。

　　在較低亮度或較低對比度的條件下，可使用粗一點(diǎn)的字體，如1：5;字體顏色很亮?xí)r，粗細(xì)可至1：12-1：20。

文字和底色

　　黑底白字，文字的顏色會(huì)向黑色背景散射，這稱為散射現(xiàn)象。如下圖，同樣粗細(xì)的字體，白顏色的字顯得比黑顏色的字更粗一些。

　　由于紅色與藍(lán)色對比影響知覺的原因，應(yīng)避免紅字藍(lán)底或藍(lán)字紅底的情況出現(xiàn)(如下圖)。

　　有設(shè)計(jì)師曾總結(jié)出符合良好知覺效果的文字底色對比方案，具體如下：

字母大小寫

　　研究表明，小寫字母更容易辯認(rèn)，因?yàn)樗奶卣鞲菀妆粎^(qū)別。

文字信息的認(rèn)知加工

　　一段文字怎樣呈現(xiàn)，才最容易閱讀?這不僅涉及到呈現(xiàn)的視覺效果，還跟行文風(fēng)格、句子結(jié)構(gòu)和內(nèi)容有關(guān)。研究表明，句子類型和文字順序都會(huì)影響文字加工的速度。

　　句子類型：主動(dòng)句、肯定句，比否定句、被動(dòng)句更容易被理解

　　文字順序：應(yīng)與動(dòng)作順序匹配，例如“先選1，后選2”的誤操作比“選2之前先選1”更小

5. 界面布局與認(rèn)知加工

信息密度

　　對于相同信息容量的內(nèi)容，呈現(xiàn)的刺激密度越大，搜索時(shí)間越長，錯(cuò)誤率越高。如下圖，A的信息密度比B更大，信息搜索的難度也就更大。

信息組合

　　如上圖，A只有一個(gè)組合，B有多個(gè)組合。有研究表明，當(dāng)一個(gè)組合的視角小于5度時(shí)(40CM視距，12-14個(gè)字，6-7行的高度)，在組中搜索信息的時(shí)間較為固定，當(dāng)視角超過5度時(shí)，搜索時(shí)間就顯著增加。

　　因此，理想的頁面布局是，將信息設(shè)置為小于5度視角的多個(gè)組合，將最有利于用戶快速搜索信息。

復(fù)雜度

　　有研究發(fā)現(xiàn)，將文字按組塊豎排，復(fù)雜度比橫排更小，更易于搜索信息。如下圖：(當(dāng)然，圖B的局部密度也較小，組塊的視角也在5度左右)

6. 圖表與認(rèn)知加工

　　一幅好的圖表比得上1000字的文字說明。但需要注意所使用的圖表類型，避免引起誤解。舉例如下：

　　看圖1，給人感覺隨著時(shí)間推進(jìn)，A和B的差距越來越大，但圖2告訴我們并非如此;

　　看圖3，給人感覺B約為A的3倍，C約為A的4倍，而圖4告訴我們并非如此。

7. 符號(hào)(圖標(biāo))

　　一般來說，符號(hào)的表現(xiàn)力會(huì)比文字更好，因?yàn)樗恍枰?jīng)過語義加工，直接是視覺加工。

選擇符號(hào)的標(biāo)準(zhǔn)

1.可識(shí)別性：具體做法可以是，將符號(hào)呈現(xiàn)給用戶，請他說出是什么;

　　2.匹配：給定系列符號(hào)和解釋，要求將它們對應(yīng)起來，記錄并分析所用的時(shí)間及錯(cuò)誤;

　　3.偏好：詢問用戶喜好程度和意見

如何檢驗(yàn)符號(hào)的好壞?

　　方法1：再測法，即先對用戶進(jìn)行測試，看正確識(shí)別的比率有多高;過一段時(shí)間后，對相同用戶進(jìn)行再測，看正確率的維持情況。如下圖，O表示original, R表示Retest，可以看出，第1個(gè)圖標(biāo)的再測正確率編低。

　　方法2：反應(yīng)時(shí)法，即同時(shí)給用戶呈現(xiàn)(呈現(xiàn)時(shí)間很短)多個(gè)符號(hào)圖標(biāo)，要求用戶以最快的速度判斷它的意義。反應(yīng)時(shí)最短、錯(cuò)誤率最低的圖標(biāo)，為最理解的方案。

符號(hào)標(biāo)準(zhǔn)化

　　如果需要在不同場景中使用同樣符號(hào)，要保證符號(hào)的標(biāo)準(zhǔn)化，在各場景中的意義相同。

文章題目：淺談?wù)J知心理學(xué)與產(chǎn)品設(shè)計(jì)的結(jié)合
文章網(wǎng)址：http://www.rwnh.cn/news/163804.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、動(dòng)態(tài)網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)公司、域名注冊、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)