編者按：本文來(lái)自微信公眾號(hào)“UXRen”（ID：cnUXRen），作者UXRen社區(qū)，36氪經(jīng)授權(quán)發(fā)布。

翻譯：小黑，審校：惜惜

有些人常誤認(rèn)為設(shè)計(jì)就等同于創(chuàng)造力。實(shí)際上，設(shè)計(jì)不僅僅是常被描述的創(chuàng)造力的唯一結(jié)果。優(yōu)秀的用戶(hù)體驗(yàn)設(shè)計(jì)師往往是解讀人心的好手。他們能夠洞察用戶(hù)是如何看待一個(gè)設(shè)計(jì)并區(qū)分其優(yōu)劣的。

加州大學(xué)(圣地亞哥分校)設(shè)計(jì)實(shí)驗(yàn)室負(fù)責(zé)人唐·諾曼（Don Norman），在其《設(shè)計(jì)心理學(xué)》一書(shū)中對(duì)這個(gè)類(lèi)比做了如下描述：

我們必須以人們本來(lái)（自然）的方式而不是我們希望的方式進(jìn)行設(shè)計(jì)。參見(jiàn)另外一個(gè)章節(jié) “不要太講邏輯”，畢竟世界上還有一半的人還未達(dá)到平均水平。

作為設(shè)計(jì)師，為了能提出解決用戶(hù)問(wèn)題的方案，理解用戶(hù)的痛點(diǎn)是至關(guān)重要的。這個(gè)過(guò)程包括理解用戶(hù)行為，與他們產(chǎn)生共情，從而創(chuàng)建出一個(gè)能提升用戶(hù)工作效率的平臺(tái)。

為了幫助你理解用戶(hù)的感知，我們從設(shè)計(jì)心理學(xué)原理中提取了5個(gè)重要的經(jīng)驗(yàn)教訓(xùn)，讓我們開(kāi)始吧！

1、在UX設(shè)計(jì)中關(guān)注“少即是多”和“多即是少”

想象一下，去餐館時(shí)你需要從有100多個(gè)菜品的菜單中做出選擇。很明顯，從100多道菜品中選菜比從既定的20道菜品中做出選擇要花更長(zhǎng)的時(shí)間。設(shè)計(jì)也是如此。

大多數(shù)設(shè)計(jì)師對(duì)用戶(hù)設(shè)計(jì)都有一個(gè)普遍性觀點(diǎn)，那就是為用戶(hù)提供有驚喜感的選項(xiàng)。毫無(wú)疑問(wèn)，人們喜歡去做選擇，但太多的選項(xiàng)會(huì)令他們困惑。普通人一次能處理的信息量是有限的。

這與席克定律（Hicks Law）有關(guān)，如果給人們提供更多的選擇，那他們花在做決定上的時(shí)間也會(huì)更多。無(wú)論人們有意（或無(wú)意）察覺(jué)，人們做的決定很大程度取決于他們認(rèn)為“是否值得”。他們不僅會(huì)權(quán)衡成本，而且還會(huì)考慮決策帶來(lái)的收益，這被稱(chēng)為“成本效益分析”。

圖片來(lái)源:https://lawsofux.com/

圖片翻譯：

席克定律。選擇的數(shù)量越多，越復(fù)雜，決策所需要的時(shí)間越長(zhǎng)。

關(guān)鍵點(diǎn)：

更多的選項(xiàng)會(huì)導(dǎo)致更長(zhǎng)時(shí)間的思考并做出決定；

將復(fù)雜的任務(wù)分解為更小的步驟，為用戶(hù)簡(jiǎn)化選擇；

強(qiáng)調(diào)推薦選項(xiàng)，避免用戶(hù)無(wú)所適從。

那么如何將席克定律應(yīng)用到你的產(chǎn)品設(shè)計(jì)中？

這里有一個(gè)簡(jiǎn)單的原則。設(shè)計(jì)師應(yīng)時(shí)刻牢記用戶(hù)只會(huì)帶著特定目標(biāo)訪問(wèn)你的網(wǎng)站，不要提供過(guò)多的選項(xiàng)困擾他們。消除各種過(guò)度的強(qiáng)調(diào)、不必要的鏈接、文字、圖片、按鈕，讓用戶(hù)能夠找到他們需要的，并盡可能快速的、毫不分心的完成任務(wù)。還有一條經(jīng)驗(yàn)是將復(fù)雜的過(guò)程分解為簡(jiǎn)單且可控的多個(gè)小任務(wù)。通過(guò)提供清晰的路徑，讓你的用戶(hù)無(wú)縫導(dǎo)航，并盡可能早地激發(fā)啊哈時(shí)刻（Aha）！

2、讓最重要的信息保持在折疊線(xiàn)之上

圖片來(lái)源:https://lawsofux.com/

圖片翻譯：

圖片文字：網(wǎng)頁(yè)閱讀的F型規(guī)律。

用戶(hù)的視線(xiàn)通常先在內(nèi)容區(qū)域的頂部進(jìn)行水平移動(dòng)。這構(gòu)成了F上面那一橫。接下來(lái)，用戶(hù)的視線(xiàn)會(huì)向下一些，移動(dòng)到第二條水平線(xiàn)，通常這條線(xiàn)會(huì)比之前的水平線(xiàn)短些。這是F下面那條較短的橫線(xiàn)。最后，用戶(hù)的視線(xiàn)沿著左側(cè)垂直向下瀏覽內(nèi)容。在緩慢而有條理的瀏覽時(shí)，在眼動(dòng)熱力圖上會(huì)出現(xiàn)一條實(shí)條紋，在快速瀏覽的時(shí)候會(huì)出現(xiàn)一些斑點(diǎn)。這就是F的最后一豎。

關(guān)鍵點(diǎn)：

第一行文字會(huì)比同頁(yè)面上后幾行文字獲得更多的關(guān)注。

每行左側(cè)的頭幾個(gè)詞會(huì)比同一行中后續(xù)文字獲得更多的視線(xiàn)停留。

根據(jù)眼動(dòng)追蹤的相關(guān)研究，大多數(shù)用戶(hù)習(xí)慣以相似的眼睛注視模式（眼動(dòng)瀏覽方式）瀏覽網(wǎng)頁(yè)。研究表明，大多數(shù)的網(wǎng)頁(yè)熱力圖很好體現(xiàn)了訪客的集中注視區(qū)域和注視時(shí)長(zhǎng)。

最常見(jiàn)的瀏覽模式通常會(huì)形成一個(gè)“F”型區(qū)域，代表用戶(hù)的短時(shí)閱讀的跨度范圍。用戶(hù)首先在屏幕頂部的一條水平線(xiàn)上瀏覽，然后向下移動(dòng)一些并在水平方向的一小片區(qū)域內(nèi)閱讀。

根據(jù)尼爾森諾曼小組（NielsenNorman Group）在有45,237個(gè)PV（網(wǎng)頁(yè)訪問(wèn)量）的網(wǎng)頁(yè)上進(jìn)行的一項(xiàng)研究表明，人們往往只閱讀頁(yè)面上約20%的文本。更糟糕的是，在內(nèi)容較多的網(wǎng)站上，每增加100個(gè)字，人們只會(huì)額外多投入4秒。

那么，用戶(hù)體驗(yàn)設(shè)計(jì)師如何在他們的用戶(hù)體驗(yàn)策略中利用這一規(guī)律呢？我們應(yīng)該把關(guān)鍵信息放在被瀏覽最多的注視點(diǎn)上，并且盡量用簡(jiǎn)短但引人注目的標(biāo)題來(lái)吸引用戶(hù)的注意。

在一個(gè)人們不逐字閱讀的世界里，尼爾森諾曼小組提供了以下指導(dǎo)原則來(lái)讓文字更易掃讀。

高亮關(guān)鍵詞

意義明確的副標(biāo)題

帶項(xiàng)目符號(hào)的列表

每段文字表達(dá)1個(gè)觀點(diǎn)

倒金字塔結(jié)構(gòu)——從結(jié)論開(kāi)始

字?jǐn)?shù)為傳統(tǒng)寫(xiě)作的一半（或更少）

3、在設(shè)計(jì)中謹(jǐn)慎運(yùn)用色彩

色彩的美妙之處在于能幫助人們識(shí)別和區(qū)分相似物體。從心理學(xué)上講，色彩是人類(lèi)情感的驅(qū)動(dòng)力。人類(lèi)通過(guò)大腦的視覺(jué)系統(tǒng)感知或創(chuàng)造色彩，這意味著色彩實(shí)際上是主觀的，而不是客觀的。

設(shè)計(jì)師通常將色彩作為吸引用戶(hù)注意力的一個(gè)重要影響因素。它為設(shè)計(jì)師提供了一種與產(chǎn)品品牌建立聯(lián)系的紐帶。大多數(shù)用戶(hù)的購(gòu)買(mǎi)時(shí)長(zhǎng)和購(gòu)買(mǎi)決策很大程度上取決于色彩。

但色彩心理學(xué)如何幫助設(shè)計(jì)師創(chuàng)建一個(gè)更好的用戶(hù)體驗(yàn)設(shè)計(jì)策略呢？

根據(jù)喬·哈洛克（Joe Hallock，Azure的首席設(shè)計(jì)經(jīng)理）的觀點(diǎn)，性別間的色彩偏好存在顯著差異。男性和女性最喜歡的顏色是藍(lán)色，最不喜歡的顏色是橙色。此外，明艷的顏色通常是男性的首選，柔和的顏色是女性的首選。

這些發(fā)現(xiàn)清楚地說(shuō)明了為什么藍(lán)色是設(shè)計(jì)師最喜歡的顏色，為什么橙色使用得最少。不過(guò)，我們不應(yīng)該僅根據(jù)用戶(hù)喜好使用顏色，還應(yīng)該考慮用戶(hù)的行為和偏好。

圖片文字：不同性別對(duì)顏色的偏好不同

關(guān)鍵點(diǎn)：

男性更喜歡明艷的顏色，女性更喜歡柔和的顏色。

4、清晰表達(dá)哪些部分是相關(guān)的，哪些不是

在設(shè)計(jì)過(guò)程中，設(shè)計(jì)師通過(guò)展示元素的相關(guān)和不相關(guān)來(lái)表達(dá)結(jié)構(gòu)和聯(lián)系會(huì)更有意義。相關(guān)（相似性）或不相關(guān)（差異性）可以通過(guò)使用諸如形狀、顏色和尺寸等基本元素得到體現(xiàn)。

例如，salon的(舊版)網(wǎng)站由兩個(gè)部分組成，這兩個(gè)部分按照它們的相對(duì)尺寸分組。

在這里，用戶(hù)可以清楚地看到兩個(gè)獨(dú)立分組，分別是左側(cè)的頭條新聞和右側(cè)的熱門(mén)新聞。盡管這兩個(gè)組做的事情一樣，例如展示文章， 但是通過(guò)使頭條新聞部分尺寸更大，并以不同顏色強(qiáng)調(diào)作者姓名，而使用戶(hù)更加關(guān)注它。

這與相似定律有關(guān)，即人眼傾向于將設(shè)計(jì)中的相似元素視為一個(gè)完整的圖片、形狀或組，即使這些元素是分開(kāi)的。

圖片來(lái)源:https://lawsofux.com/

圖片文字：相似定律。人眼傾向于將設(shè)計(jì)中的相似元素視為一個(gè)完整的圖片、形狀或組，即使這些元素是分開(kāi)的。

關(guān)鍵點(diǎn)：

• 確保鏈接、導(dǎo)航與普通文本有視覺(jué)上的區(qū)分，且保持一致的樣式。

如果上面的例子仍然不能說(shuō)服你，那么讓我們來(lái)看看相似定律是如何在設(shè)計(jì)中表達(dá)“關(guān)聯(lián)”的。

鏈接和導(dǎo)航

鏈接和導(dǎo)航是為你的用戶(hù)快速提供整站導(dǎo)航的最常用方法。通常，讀者們不會(huì)為了找到他們想要的內(nèi)容去閱讀整個(gè)頁(yè)面， 他們會(huì)嘗試多次鏈接跳轉(zhuǎn)或使用導(dǎo)航來(lái)找到相關(guān)信息。

設(shè)計(jì)師有意或無(wú)意地把運(yùn)用相似定律作為網(wǎng)頁(yè)設(shè)計(jì)的日常。相似定律可以解釋為什么如此多的設(shè)計(jì)師喜歡使用帶藍(lán)色下劃線(xiàn)的文本作為超鏈接樣式，或至少讓所有鏈接看起來(lái)明顯且一致。

美國(guó)船主協(xié)會(huì)（Boatus）的官方網(wǎng)站使用下劃線(xiàn)和顏色來(lái)表達(dá)導(dǎo)航鏈接分組之間的關(guān)系。這使閱讀者能夠意識(shí)到相似的導(dǎo)航項(xiàng)是相關(guān)的，或者在網(wǎng)站的數(shù)據(jù)層級(jí)中具有相似位置。

5、通過(guò)組合相似內(nèi)容和區(qū)分不同內(nèi)容來(lái)簡(jiǎn)化視覺(jué)層級(jí)

與我們的app開(kāi)發(fā)者工作過(guò)的大部分客戶(hù)都曾這樣說(shuō)：“我們希望App設(shè)計(jì)簡(jiǎn)潔易懂，給用戶(hù)留下深刻印象?！?/p>

用戶(hù)們不喜歡雜亂無(wú)章的設(shè)計(jì)。一項(xiàng)由Hubspot組織的調(diào)查稱(chēng)，“訪客看重的是能輕松找到信息，而不是漂亮的設(shè)計(jì)或花哨的用戶(hù)體驗(yàn)”。

圖片來(lái)源: www.hubspot.com

設(shè)計(jì)師應(yīng)該將相似的元素、信息或內(nèi)容進(jìn)行分組，進(jìn)而簡(jiǎn)化布局。正確組合這些元素將提升用戶(hù)體驗(yàn)。

這與“接近法則”有關(guān)，該法則認(rèn)為，相關(guān)的元素應(yīng)彼此靠近，而不相關(guān)的元素應(yīng)相互遠(yuǎn)離或直接分開(kāi)。

圖片來(lái)源:https://lawsofux.com/

圖片文字：接近法則。人們傾向于將相鄰或接近的物體歸為一組。

關(guān)鍵點(diǎn)：

接近定律可以有效地讓用戶(hù)一眼就自動(dòng)將不同內(nèi)容分組。

設(shè)計(jì)師借助“接近法則”來(lái)提升可用性主要有兩個(gè)方法：

1.Help your users to find what they are looking for: Have you ever happened to stumble upon websites that have cluttered categories spread here and there. For an instance (see image below), say your users are looking to see the range of different available PCs and laptops on your website. If you want them to easily find the category, it’s wiser to group other related items in a part of the interface devoted to “Computers & Office” as compared to provide disorganized mess of categories shown below (left side).

幫助你的用戶(hù)找到他們正在尋找的東西：
你是否曾看到過(guò)那些分類(lèi)雜亂無(wú)章網(wǎng)站。如下圖，假設(shè)用戶(hù)正在你的網(wǎng)站上尋找不同種類(lèi)的 pc 和筆記本電腦。如果你想讓他們很容易地找到這個(gè)類(lèi)別，比起提供（左側(cè)圖片）亂七八糟的分類(lèi)，更明智的做法是將相關(guān)類(lèi)目分組到“計(jì)算機(jī)和辦公用品”（右側(cè)圖片）。

構(gòu)建元素的視覺(jué)層級(jí)以幫助人們了解頁(yè)面結(jié)構(gòu)：
構(gòu)建例如字體層次、顏色層次等視覺(jué)層次結(jié)構(gòu)可以幫助設(shè)計(jì)師甚至非設(shè)計(jì)師設(shè)計(jì)出美觀的頁(yè)面，并吸引正確的注意力。

提升你的UX設(shè)計(jì)水平

有一句諺語(yǔ)說(shuō): “如果一切都突出，那就什么都沒(méi)突出?！?這也適用于用戶(hù)體驗(yàn)設(shè)計(jì)。設(shè)計(jì)師不應(yīng)該用只是看上去好看的東西來(lái)愚弄用戶(hù)。事實(shí)上，他們必須在設(shè)計(jì)時(shí)考慮到用戶(hù)內(nèi)心的需求。在這篇文章中，我們解釋了5個(gè)心理學(xué)原理，可以幫助你提高設(shè)計(jì)水平。

在你的設(shè)計(jì)中，你最喜歡運(yùn)用哪些心理學(xué)原理？哪一個(gè)是你認(rèn)為最難駕馭的？請(qǐng)?jiān)谠u(píng)論區(qū)告訴我們。

原文鏈接

https://uxdesign.cc/5-key-lessons-from-psychology-in-design-to-help-you-advance-ux-2cbb837b4581（Michael Williams，2019.06.12）

本文經(jīng)授權(quán)發(fā)布，不代表36氪立場(chǎng)。如若轉(zhuǎn)載請(qǐng)聯(lián)系原作者。