學(xué)交互必須知道的 13 個用戶體驗(yàn)定律

一直以來，設(shè)計師們都在努力簡化圍繞人類展開的交互體驗(yàn)，但是在這個簡化過程中，我們也許無意識地使我們的生活變得復(fù)雜了，當(dāng)然這就牽扯到另一個話題，我們可以在未來繼續(xù)探討，接下來還是回到本期主題：簡化體驗(yàn)！

簡化每一個具體的體驗(yàn) / 流程 / 交互之后，我們還要進(jìn)一步對其進(jìn)行優(yōu)化，提升用戶體驗(yàn)，使其更有效率，能夠讓用戶感到愉悅，但這些都是圍繞著 “使每一次互動 / 體驗(yàn)變得有意義” 而展開的。幾個世紀(jì)以來，世界各地的心理學(xué)家都在研究人類的這種“簡化并使每一次互動變得有意義”的行為習(xí)慣。心理學(xué)家們基于這些研究和觀察，將這些現(xiàn)象定義為成 “人類心理定律” ，而這些定律則成為了后來 “用戶體驗(yàn)設(shè)計”的基石 。

有趣的是，生活中我們在數(shù)字交互界面上都已體驗(yàn)過大多數(shù)的定律，也知道我們是如何

感知、理解不同的體驗(yàn) / 界面，并試圖理解一些抽象的案例。而用戶體驗(yàn)定律只是提出了人類心理感知的形式，接下來讓我們看看具體內(nèi)容。

1.美觀實(shí)用性法則

1.Aesthetic-Usability Effect

用戶通常將美觀的設(shè)計視為實(shí)用的設(shè)計。

我分析了豪華汽車公司：路虎（印度）的網(wǎng)站首頁橫幅（Hero Page）。極簡、干凈、嚴(yán)肅的設(shè)計和排版呈現(xiàn)了品牌和產(chǎn)品所承載的內(nèi)容，并讓這些看起來更加真實(shí)、可靠、強(qiáng)大、高端，而向用戶傳達(dá)這些情緒的，僅僅是一個簡單、美觀并兼具功能性的首頁橫幅。根據(jù)美觀實(shí)用性法則，視覺審美優(yōu)秀的設(shè)計會讓用戶的大腦對此產(chǎn)生積極的反饋，并讓用戶認(rèn)為這樣的設(shè)計在應(yīng)用時體驗(yàn)更好。

2.多爾蒂閾值

2. Doherty Threshold

當(dāng)計算機(jī)和用戶在雙方不必等待對方的速度進(jìn)行交互時，此時生產(chǎn)效率達(dá)到頂峰。深入了解路虎的產(chǎn)品之后，我還發(fā)現(xiàn)了一個應(yīng)用?“Doherty 閾值”?的交互：探索標(biāo)簽，SUV 的渲染加載需要幾毫秒的時間，雖然此處的等待可以忽略不計，但是此處出現(xiàn)的加載進(jìn)度條給了我一種安心提示，渲染馬上就可加載完成，讓用戶可以進(jìn)行下一步的探索。? ? ? ? ? ?

根據(jù) Doherty 閾值，一個交互需要在400毫秒內(nèi)對系統(tǒng)提供反饋，以此穩(wěn)定用戶的注意力，增強(qiáng)生產(chǎn)力，當(dāng)后臺在加載或處理數(shù)據(jù)時，動效可以視為其中的一種處理方式，通過視覺交互提升用戶的參與感。

3.費(fèi)茨法則

3. Fitt‘s Law

獲取目標(biāo)的時間是到目標(biāo)的距離和大小的函數(shù)。

?路虎在“我們的汽車”產(chǎn)品展示部分很好的闡釋了他們的設(shè)計是如何應(yīng)用?菲茲定律?的。我們在這一部分看到很多點(diǎn)擊 /? 觸控點(diǎn)，例如：菜單欄、咨詢框、溢出菜單，以及汽車展示卡片（最顯眼的部分），這些應(yīng)用元素分布均勻，排版均勻，留白恰到好處，并完美的運(yùn)用了負(fù)空間。

這樣的排布能讓用戶輕松的最大化識別，使用這些觸控點(diǎn)。這里最突出的是汽車展示卡片中的圖像部分，這些圖像放在最顯眼的位置，同時也是用戶最容易訪問的部分，完全符合菲茲定律的描述！

菲茲定律主要強(qiáng)調(diào)三個部分：

首先，觸控 / 點(diǎn)擊的目標(biāo)應(yīng)該足夠大，用戶可以輕松準(zhǔn)確的進(jìn)行點(diǎn)擊 / 觸控動作；

其次，目標(biāo)與目標(biāo)之間應(yīng)該留有足夠間距；

最后，觸控 / 點(diǎn)擊目標(biāo)應(yīng)該放在界面中易于訪問的位置。

4.目標(biāo)漸進(jìn)定律

4.Goal-Gradient Effect

離目標(biāo)越近，接近目標(biāo)的動力就越強(qiáng)。? ? ? ? ? ?

Infosys 是一家印度的科技公司，他們的網(wǎng)站很好的應(yīng)用了目標(biāo)漸進(jìn)定律?？吹侥莻€躺在標(biāo)題下方的藍(lán)色細(xì)橫條了嗎？這其實(shí)是一個進(jìn)度條，用來提示用戶還需要滑動多少內(nèi)容才能到達(dá)他們想要查看的區(qū)域，當(dāng)滑動到頁尾時這個進(jìn)度條會顯示加滿，以此告知用戶無需再滾動頁面。

目標(biāo)漸進(jìn)定律表明，當(dāng)用戶快越接近一個任務(wù)的尾聲時，他們工作速度會越快，以求盡快完成目標(biāo)，而人為的為項(xiàng)目加上進(jìn)度條，能夠幫助確保用戶更有動力地完成任務(wù)。

5.米勒定律

5.Miller’s Law

一般人的短期記憶中能容納的物體數(shù)量是7（ ±2 ）。

我們來看一下 Infosys 網(wǎng)站首頁上顯示的選項(xiàng)卡：點(diǎn)擊就能讓用戶返回首頁的公司 logo，導(dǎo)航下拉菜單，搜索 / 分享圖標(biāo)，“Let’s Talk” 聯(lián)系我們，以及溢出菜單。

在所有的按鈕中，logo、聯(lián)系我們和溢出菜單是三個最顯眼的部分，這些部分和客戶服務(wù)以及返回主頁在排版上有很巧妙的連接，他們能夠清晰的引導(dǎo)用戶進(jìn)行下一步探索。

這樣的排布詮釋了米勒定律所強(qiáng)調(diào)的：將內(nèi)容簡化成更小的元素，幫助用戶更輕松的理解、記憶，執(zhí)行任務(wù)。

6.臨近法則

6.Law of Proximity

人們會將相近或相鄰的內(nèi)容視為一組。? ? ??

Infosys 展示應(yīng)用 AI 技術(shù)的成功案例界面中，闡釋了他們是如何應(yīng)用?臨近法則?的。在成功案例這個界面中，我們可以看見四個內(nèi)容不同但設(shè)計風(fēng)格和排版相似的卡片緊湊的排列在一起。當(dāng)用戶打開這個界面且看到相近排列的四個卡片時就能得知，這一板塊陳列的是四個成功案例的故事。

根據(jù)臨近法則，相近排版能夠幫助用戶快速理清每個信息之間的關(guān)聯(lián)，在瀏覽時效率更高。

7.雅各布法則

7.Jakob’s Law

用戶在其他軟件里花費(fèi)了更多的時間，這意味著他們更習(xí)慣你的網(wǎng)頁的操作方式，并且希望其他網(wǎng)站也能對其效仿。? ? ? ? ? ? ?

這是印度電商 Flipkart 的網(wǎng)頁，他們的競爭對手分別是亞馬遜印度子公司以及本土網(wǎng)站 Snapdeal。Flipkart 的首頁很好地展示了?雅各布法則?的含義：他們并沒有使用和競爭對手一樣的設(shè)計，而是在布局、排版以及服務(wù)上采用了相似的設(shè)計，并融入了自己的品牌個性以及設(shè)計語言，但是在功能上和競爭者保留了相似之處。

根據(jù)雅各布法則，用戶期望在新的軟件上找到自己熟悉應(yīng)用的體驗(yàn)或者使用流程，利用這一法則，我們可以創(chuàng)造更好的用戶體驗(yàn)，這樣用戶就能將注意力放在如何完成他們的任務(wù)身上，而不是花費(fèi)更多精力和時間來適應(yīng)新的應(yīng)用。

8.同域原則

8.Law of Common Region

當(dāng)不同元素同時出現(xiàn)在劃分清晰的同一區(qū)域內(nèi)時，用戶會把這些元素視作同一分組。? ? ? ? ? ? ?

Flipkart 的另一個界面顯示應(yīng)用了?同域原則理論，并且他們在這同一頁面應(yīng)用了三次同域原則。標(biāo)題部分主色調(diào)為藍(lán)色出現(xiàn)在屏幕的最上方，用戶會默認(rèn)這一部分含有特殊的信息，例如 Flipkart 的 logo、搜索欄、登陸按鈕以及購物車。在 TV / 電器 和特色品牌這兩個部分也同樣應(yīng)用了同域原則，他們的背景都應(yīng)用了不同的顏色 / 陰影，這兩欄內(nèi)容都有一樣的頁邊距，陳列不同內(nèi)容的卡片、整體設(shè)計和風(fēng)格以及排版方式都是相似的。

同域原則是指，可以通過定義元素或元素組的背景，讓用戶意識到此時在瀏覽的是同一欄目的不同內(nèi)容，最簡單的方式之一就是在群組的背景添加方框來整合元素。

9.席克定律

9.Schick’s Law

當(dāng)選項(xiàng)增加時，人們做選擇花費(fèi)的時間就越長。

當(dāng)我進(jìn)入 Flipkart 網(wǎng)站，在不登陸賬號的情況下購買機(jī)器人吸塵器時，在確認(rèn)訂單這一環(huán)節(jié)，頁面會跳出一個菜單，用戶根據(jù)劃分的四個步驟就能輕松進(jìn)行付款，并且在這一過程中不會被其他無用信息干擾。

這就是?席克定律?的應(yīng)用了。

席克定律強(qiáng)調(diào)，交互過程中用戶的反映時長與應(yīng)用戶決策時長成正相關(guān)時，應(yīng)將復(fù)雜的任務(wù)轉(zhuǎn)化成多個小步驟，以此來減少認(rèn)知負(fù)荷，同時篩選并減少頁面中會出現(xiàn)的選項(xiàng)。

10.相似性原則

10.Law of similiarity

當(dāng)我們看到的信息有相同元素的設(shè)計（形狀、大小等）時，大腦默認(rèn)講這些信息歸為同一組。? ? ? ? ?

這是一家叫做 Mobikwik 的數(shù)字支付公司產(chǎn)品的主界面，如果我們觀察在線預(yù)付費(fèi)移動充值部分，用戶會注意到它由一組文本框和一個按鈕構(gòu)建的表單組成。

當(dāng)用戶剛打開這個界面時，用戶會把這些元素看成是一組內(nèi)容，而不是把這些信息單獨(dú)看成是 4 欄獨(dú)立的內(nèi)容。

根據(jù)相似性原則，視覺上顏色、形狀、大小、朝向以及動效相似的內(nèi)容會向用戶傳遞“我們是同一組分類”的信號，在并且這些內(nèi)容在功能上往往有一致性。

11.連通性原則

11.Law of Uniform Connectedness

視覺上有關(guān)聯(lián)的元素更容易被視作是互相之間有聯(lián)系的。? ? ? ? ? ?

同樣，還是在 Mobikwik 同一個支付界面上，左邊的菜單欄里排列了不同的選項(xiàng)，能夠間接引導(dǎo)用戶點(diǎn)擊到他們需要的頁面上。

這就是?連通性原則?的體現(xiàn)了：菜單里所有的選項(xiàng)都是深藍(lán)背景，在視覺上與頁面的其他內(nèi)容分隔開來，用戶看到左側(cè)的菜單欄時會自然而然的把這些內(nèi)容視為有相似功能的選項(xiàng)。

根據(jù)連通性原則，視覺上具有相似的形狀、線條、顏色、外框的元素會被認(rèn)為是具有相同功能的內(nèi)容。

12.雷斯多夫效應(yīng)

12.Von Restorff Effect

雷斯多夫效應(yīng)又稱隔離效應(yīng)，指當(dāng)許多相似內(nèi)容在同一時間出現(xiàn)時，與眾不同的最容易被人記住。

這是 Mobikwik 的打折特惠產(chǎn)品頁面，在眾多分類標(biāo)簽中你一眼就能看見 “cashback”，這個背景被改為藍(lán)色的標(biāo)簽在一眾灰色標(biāo)簽中脫穎而出，讓用戶第一眼就記住了它。這就是我們所說的?雷斯多夫效應(yīng)（隔離效應(yīng)）。

13.布拉格南茲法則

13.Law of Pr?gnanz

人們會將復(fù)雜的圖形簡單化以此減少認(rèn)知負(fù)荷。? ? ? ? ? ?

這是 Mobikwik 投資基金界面，右側(cè)的線狀圖顯示用戶在 Mobikwik 得到的投資回報，而曲線的走勢會隨著左側(cè)數(shù)據(jù)的變化而變化，用戶在解讀現(xiàn)狀圖時會將數(shù)值變化的曲線看作一個整體，而不是分散的數(shù)據(jù)讀數(shù)。

這就是?布拉格南茲法（則簡潔法則）的應(yīng)用。

根據(jù)布拉格南茲法則（也稱簡潔法則），人類的雙眼更喜歡閱讀風(fēng)格簡潔的圖表，因?yàn)閺?fù)雜的圖形會增加認(rèn)知負(fù)荷。

以上就是用戶體驗(yàn)設(shè)計的 13 條法則，你一定也注意到多個法則是如何在同一設(shè)計中的應(yīng)用，以及相互之間是如何配合的。

其實(shí)你很難找到應(yīng)用了所有以上法則的設(shè)計，為了讀者方便理解，我們對以上所有的法則分別進(jìn)行了介紹。當(dāng)然，用戶體驗(yàn)設(shè)計中的應(yīng)用法則肯定是不止我們介紹的這幾種，您可以瀏覽 lawsofux.com 查閱更多相關(guān)信息。以上，感謝此次閱讀，希望本篇文章對你未來的設(shè)計有所幫助。

原文：13 Laws of UX. and their use in digital interfaces | by Hitesh Jashnani | Muzli – Design Inspiration 作者：Hitesh Jashnani 譯者：高暢

?TCC翻譯情報局