交互設(shè)計之父的阿蘭·庫珀，最為人熟知的就是這句話：“除非有更好的選擇，否則就遵從標準”。

1. Fitts’ Law / 菲茨定律（費茨法則）

a. 費茨定律，它是在1954 年 ，由保羅.菲茨心理學家 Paul Fitts 首先提出，當時用來預(yù)測從任意一點到目標中心位置所需時間的數(shù)學模型，在人機交互和設(shè)計領(lǐng)域的影響力最為廣泛和深遠。

b. 定義：從一個起始位置移動到一個最終目標所需的時間由兩個參數(shù)來決定，到目標的距離和目標的大小

（上圖中的 D與W），用數(shù)學公式表達為時間 T = a + b log2(D/W+1)。

c. 費茨定律，在產(chǎn)品設(shè)計中的價值是提高產(chǎn)品的可用性和易用性。例如：界面設(shè)計中，按鈕等可點擊對象要合理的設(shè)置大小尺寸才能容易操作，所以在移動應(yīng)用中，圖標按鈕會增加點擊熱區(qū)范圍，以便用戶輕松點擊按鈕，做到

產(chǎn)品設(shè)計上的可用性和易用性。

費茨定律的思考分析，如下圖所示 。

1. 可點擊對象的設(shè)計，需要設(shè)計合理的大小和尺寸。功能設(shè)計的越大，用戶越容易點擊操作，交互效率越好。

2. 界面設(shè)計的屏幕邊緣或角，適合放置像菜單欄或按鈕這樣的設(shè)計元素，如果邊角是目標，它們可無限高或無限寬，更容易觸達到操作目標。不管你移動了多遠，點擊操作最終都會停在屏幕的邊緣，并定位在按鈕的上面。

3. 界面設(shè)計中，出現(xiàn)在用戶正在操作的對象旁邊的刪除列表（右滑刪除）比下方彈出選擇對象容易操作，右滑刪除交互可以被用戶打開得更快，更有效率，因為不需要移動到屏幕的其他位置，就可以刪除多余的列表。

4. Apple的iOS人機交互設(shè)計指南中指出，按鈕的點擊熱區(qū)大于44x44pt，這樣操作按鈕才會讓用戶覺得容易使用。

5. 費茨定律案例：用戶在使用產(chǎn)品時，比較重要的操作，我們會放在移動端應(yīng)用的屏幕邊緣處，方便我們的

用戶點擊操作產(chǎn)品的功能圖標。如下圖所示。

2. Hick’s Law / 席克定律（?？朔▌t）

我們看一下，席克定律的數(shù)學公式表達是 : RT= a+blog2 ( n )。RT 表示反應(yīng)時間，a 表示跟做決定無關(guān)的總時間，b 表示根據(jù)對選項認知的處理時間實證衍生出的常數(shù)，n 表示同樣可能的選項數(shù)。

在人機交互的界面設(shè)計中，選項越多，意味著用戶做出決定的時間就越長。

分布操作，專注當前行為，就可以節(jié)約用戶作出決定的時間。如下圖所示。

其他符合席克定律的案例，如下圖所示：

a. 對于用戶，低頻率功能或不太重要的功能，可以收納起來。比如：個人中心的設(shè)置功能模塊。如下圖所示：

b. 分布操作，專注于當前的行為設(shè)計，如下圖所示：

c. 在人機交互設(shè)計中，我們對核心功能選項做好設(shè)計上的歸類，可以提升用戶做選擇的效率。

比如：我們幫助用戶選擇 5 種核心的功能需求，它首先劃分了旅游場景下的功能分類，讓用戶對分類進行選擇。

然后進入選擇機票入口，這樣我們極大的化解了用戶面對很多旅游功能選項的難度和糾結(jié)，節(jié)約了用戶做決定的

時間。

d. 做好分類選擇，可以提高交互體驗設(shè)計的效率，選擇你想要的商品并購買。如下圖所示。

3. 神奇數(shù)字 7 ± 2 法則

1. 因為美國認知心理學 George A Miller 的研究，人們短時記憶廣度大約為7個單位（字母、數(shù)字、中文等），也就是說每次只能處理 5 到 9 件事情。

2. 人的大腦認知信息的能力有限，所以我們通過把信息分組和模塊分類，以此來認識和思考一些復(fù)雜性的問題。

3. 神奇數(shù)字 7 ± 2 法則，應(yīng)用范圍很廣。例如我們記憶的電話號碼，可以分成三組數(shù)字：159  5555  6666 ，

這樣分組記憶起來就會容易很多。

4. UI 界面的導(dǎo)航設(shè)計，為了給用戶提供明確的設(shè)計向?qū)?，兩種導(dǎo)航（底部導(dǎo)航欄和頂部導(dǎo)航欄）的欄目設(shè)計通常都控制在 5 個之內(nèi)，欄目功能過多用戶不容易記憶，5 個之內(nèi)的導(dǎo)航設(shè)計方便用戶記憶和快速操作。

5. 移動應(yīng)用的交互設(shè)計規(guī)律。神奇數(shù)字 7 加減 2 法則同樣適用，螞蟻金服的品類區(qū)的核心功能模塊的設(shè)計，懸浮卡片上只顯示 8 個 功能圖標，如下圖所示。

6. 同一類功能和同一層級的元素出現(xiàn)時，數(shù)目一般控制在 5-9 個，如下圖所示。

7. 如果超過 5 個，可以右滑選擇你想要的產(chǎn)品功能，如下邊的右圖所示。

8. 神奇數(shù)字 7±2 法則，運營廣告圖設(shè)計要抓住重點去設(shè)計，更好的引導(dǎo)用戶去瀏覽內(nèi)容和產(chǎn)品的交互體驗。

如下圖所示，數(shù)字符號標注-突出重點，主圖、主題、操作按鈕、主色氛圍等，我們會作出優(yōu)秀的運營設(shè)計。

4. The Law Of Proximity 接近法則

根據(jù)格式塔的心理學思考 ：當對象離得太近的時候，人的意識會認為界面元素之間是相關(guān)的。

在交互設(shè)計中，界面設(shè)計中的接近原則是對相似信息及功能類別進行內(nèi)容分組和布局設(shè)計的優(yōu)化設(shè)計。

接近法則在界面設(shè)計中的作用，能夠直接影響到用戶與產(chǎn)品界面之間的視覺互動，來引導(dǎo)用戶的瀏覽及點擊交互行為。因此，相似的內(nèi)容和功能模塊應(yīng)該彼此靠近，而關(guān)聯(lián)性較弱的內(nèi)容應(yīng)該保持大一點的間距。

接近法則運用的目的：在視覺上通過組與組的區(qū)分，來劃分功能模塊之間的關(guān)聯(lián)性，讓界面變得更加清晰，同時幫助用戶在瀏覽頁面時，能夠清楚的看到到各個內(nèi)容模塊之間的關(guān)聯(lián)性，就是視覺信息的劃分和分組展示。

如下圖所示。同一類的功能可分為一組，組內(nèi)使用淺灰色的分割線來表達。而關(guān)聯(lián)性弱的功能模塊，組內(nèi)的可以用淺灰色的分割面表達，拉開組與組之間的距離，做好視覺信息的劃分效果。

5. Tesler’s Law 泰思勒定律（復(fù)雜性守恒定律）

a.  “復(fù)制粘貼之父” Larry Tesler (1945-2020) 說過，“任何事物都具有其固有的復(fù)雜性，無法簡化”。

引入第三方登錄，減少注冊賬號的復(fù)雜步驟，節(jié)約用戶登錄或注冊這一流程上所耗費的步驟和時間。

復(fù)雜性守恒定律，認為每一個產(chǎn)品設(shè)計的過程中，都有其固有的復(fù)雜性，存在著一個臨界點，超過了這個點產(chǎn)品設(shè)計的過程就不能再簡化了，你只能將固有的復(fù)雜性從一個地方轉(zhuǎn)移到另外一個地方。

b. 以用戶為中心的產(chǎn)品設(shè)計，交互設(shè)計應(yīng)盡量簡化用戶層面上的交互設(shè)計的過程。比如：頂部導(dǎo)航欄的更多圖標，就是將常用的功能整合并隱藏在首頁設(shè)計的更多功能模塊中。如下圖所示。

6. 新鄉(xiāng)重夫：防錯原則

a. 防錯原則，認為大部分的意外都是由產(chǎn)品設(shè)計上的疏忽，而不是人為的操作疏忽。所以我們可以通過改變產(chǎn)品

體驗設(shè)計把過失率降到。

我們在設(shè)計過程中，要從用戶維度出發(fā)，做設(shè)計前思考用戶的使用場景，預(yù)測到他們有可能發(fā)生的誤操作狀態(tài)，

做到操作前給用戶的溫馨提示、操作中的實時告知、操作后給用戶的及時反饋。

b. 防錯原則是著名的品質(zhì)管理專家新鄉(xiāng)重夫提出來的。原則最初是用于工業(yè)管理，在交互設(shè)計中也可以使用。

比如圖 1，今日幸運星主題，分享給好友幫忙砍價。在沒有滿足條件時，通過彈窗來提示用戶去邀請好友，以此

來完成產(chǎn)品設(shè)計的任務(wù)。

比如圖 2，請輸入驗證碼的彈窗，驗證碼錯誤，您還可以重復(fù) 3 次，只有信息都輸入正確時，用戶才能完成的這個界面任務(wù)，如下圖所示。

7. Occam’s Razor 奧卡姆剃刀原理（簡單有效原理）

簡單有效原理，被稱為“如無必要，勿增實體”（Entities should not be multiplied unnecessarily），即如有兩個

功能相等的設(shè)計，那么選擇最簡單的、視覺干擾比較少的設(shè)計。在其他條件相同的情況下，要求得越少的那個就

越好，越有價值。

a.  合并多余流程，點擊極速支付，支付成功彈窗提示。

b. 高頻率使用的產(chǎn)品界面，保持清爽的設(shè)計感。

c. 優(yōu)先展示核心功能，減少點擊次數(shù)。如下圖所示。

圖 1，界面中清晰的品牌色的底部操作按鈕，可以明確的引導(dǎo)用戶去選擇優(yōu)質(zhì)的理財產(chǎn)品。

圖 2 ，摩拜單車首頁，用戶最關(guān)注的功能是掃碼開鎖的核心功能，方便用戶直接操作，提高交互效率。

d. 蘋果官方網(wǎng)站的簡約設(shè)計做的很棒。蘋果公司用一種很和品質(zhì)感的設(shè)計提供了足夠多的內(nèi)容，網(wǎng)站的文案，交互和圖片都比較集中展示，網(wǎng)頁設(shè)計沒有放一些使用戶分心的廣告和不重要的內(nèi)容。如下圖所示。

總結(jié)：

1. 在產(chǎn)品設(shè)計領(lǐng)域，有很多經(jīng)過時間檢驗過的定律，可以作為產(chǎn)品設(shè)計的指導(dǎo)原理。作為交互設(shè)計之父的

阿蘭·庫珀，他最為人熟知的就是這句話 ：“ 除非有更好的選擇，否則就遵從標準 ”。

2. 交互設(shè)計的定律，能夠幫助產(chǎn)品設(shè)計師對界面上的各種視覺元素進行合理思考，從而發(fā)現(xiàn)一些用戶使用場景中的可用性問題。從產(chǎn)品設(shè)計的維度思考看，我們來改善產(chǎn)品設(shè)計的操作效率和用戶的滿意度。設(shè)計服務(wù)于產(chǎn)品、設(shè)計服務(wù)于商業(yè)。

二.  用戶體驗地圖的制作思考：

a. 什么是用戶體驗地圖 ？

定義：用戶體驗地圖，是一種梳理產(chǎn)品體驗問題的設(shè)計工具。展示的就是用戶在使用一款產(chǎn)品和設(shè)計服務(wù)的過程中，每一個階段的體驗、用戶對產(chǎn)品直觀的心理感受。將用戶的所做、所思都展現(xiàn)出來，便于團隊設(shè)計師全面思考產(chǎn)品帶給用戶的體驗，挖掘設(shè)計的優(yōu)化點。例如，你去三亞去度假旅游，用戶體驗地圖就是用圖形的形式，可視化的表達，將你在三亞的一天活動情況記錄下來，其中包含你這段時間去過的旅游景點，以及在每個旅游景點的用戶

體驗感受。

思考用戶體驗地圖，適合在產(chǎn)品設(shè)計的那幾個階段繪制？

1. 原型制作前，設(shè)計師從直觀感覺的角度看，我們要了解自己的產(chǎn)品為用戶提供了什么功能、交互體驗，同時協(xié)助我們的產(chǎn)品設(shè)計團隊，做好產(chǎn)品功能的體驗設(shè)計。

2. 產(chǎn)品上線時，我們可以結(jié)合用戶調(diào)研、可用性測試等方法論。以此獲取用戶的美好體驗和真實的心理感受，來幫助我們公司的產(chǎn)品設(shè)計發(fā)現(xiàn)問題，以此作為產(chǎn)品設(shè)計的迭代優(yōu)化的方向或者尋找新的創(chuàng)意設(shè)計機會點來解決問題。

b. 為什么要設(shè)計用戶體驗地圖 ？

a. 我們做好用戶體驗地圖的兩個優(yōu)點：

1. 產(chǎn)品設(shè)計的體驗?zāi)繕耸亲層脩粲闷饋?，感覺到產(chǎn)品具有可用性、好用性、易用性，那么產(chǎn)品設(shè)計也應(yīng)該從用戶

視角出發(fā)，用戶從產(chǎn)品那個觸點點擊進來，怎樣點擊交互下一步，怎樣保持對產(chǎn)品的活躍度，如何傳播分享；定位用戶使用產(chǎn)品過程中的體驗痛點。

2. 真正思考用戶需要什么功能，讓更多用戶參與進來，換位思考我們產(chǎn)品帶給用戶具體什么感受，全局性的思維去思考產(chǎn)品的體驗，與團隊成員、產(chǎn)品交互設(shè)計、開發(fā)部門和項目負責人等達成一致性的共識、有效溝通和協(xié)作，一起制作出解決方案。

b. 思考用戶體驗地圖的價值點

1. 基于用戶使用場景的設(shè)計是基于用戶達到某個體驗設(shè)計目標的一系列場景的分析與產(chǎn)品思考，理解用戶在每一個使用場景下的痛點及需求分析，同時結(jié)合用戶的上一場景，思考用戶下一步的體驗?zāi)繕耍覀兛梢酝ㄟ^做好體驗設(shè)計，來引起用戶情感上的共鳴。

2. 使用用戶體驗地圖，團隊成員可以從用戶的痛點出發(fā)，讓產(chǎn)品設(shè)計師、團隊成員全面的思考產(chǎn)品體驗，從用戶

體驗地圖中來挖掘產(chǎn)品設(shè)計的機會點。

c. 如何制作用戶體驗地圖 ？

以途牛用戶體驗地圖為例，如下圖所示。

我們運用用戶體驗地圖時，作為設(shè)計師或參與者需要切換成用戶視角、第一次使用者的角度去思考，去發(fā)現(xiàn)產(chǎn)品體驗上的問題，同時解決產(chǎn)品體驗中遇到的問題，提升用戶體驗的滿意度。 

制作用戶體驗地圖時，四個關(guān)鍵點的思考：

1. 明確我們的核心用戶人群等;  2. 研究用戶的使用場景。3. 做好用戶的訪談和調(diào)研。4. 制作好用戶體驗地圖。

制作用戶體驗地圖的具體步驟如下：

1. 前期準備工作：

我們可以先做用戶的深度訪談、用戶對產(chǎn)品反饋、產(chǎn)品設(shè)計的走查和交互的走查、產(chǎn)品的數(shù)據(jù)分析、同行業(yè)的競品分析、訪談用戶等方法，獲取大量真實可靠的資料。

我們就會認識到：思考用戶在使用產(chǎn)品設(shè)計的過程中產(chǎn)生的行為數(shù)據(jù)、用戶體驗和用戶內(nèi)心的真實感受。我們也可以思考產(chǎn)品的設(shè)計思路、產(chǎn)品的核心用戶人群等，以此作為我們制作用戶體驗地圖過程中的重要參考和依據(jù)，知道用戶到底需要什么功能和流程，來幫助用戶解決問題。

2. 用戶調(diào)研的方法如下：

我們可以先采訪用戶或者做好調(diào)研和記錄，將我們的采訪或調(diào)研記錄的內(nèi)容做好整理歸檔，團隊成員一起來拆解和記錄用戶的行為、用戶的直觀感受和用戶心中真實的想法。

3. 我們要梳理好關(guān)鍵產(chǎn)品設(shè)計任務(wù)的流程，就是用戶在使用產(chǎn)品功能的過程中，會面臨很多不同的場景或復(fù)雜的設(shè)計流程和體驗設(shè)計的目標。然后我們再撰寫用戶完成每個關(guān)鍵任務(wù)的時間：比如，對于我們?nèi)粘Ｋ姷牟檎夜δ芏?，用戶希望更快的查找到自己想要的產(chǎn)品功能和體驗?zāi)繕恕?/span>

我們再寫出關(guān)鍵產(chǎn)品任務(wù)的用戶操作產(chǎn)品時的行為：

指的是用戶當下在做什么，通常是用 “我+動詞” 來表示，例如：我購買基金產(chǎn)品。

4. 我們再確定好關(guān)鍵節(jié)點，寫出用戶調(diào)研過程中的痛點思考、用戶的滿意度思考，放在對應(yīng)的行為點的下方。

我們思考和分析用戶的痛點、用戶滿意度的調(diào)查，判斷用戶的情緒變化。分析結(jié)束后，需要將以上三類信息都寫下來，方便后續(xù)整理分組。把行為按照達成用戶目標的邏輯順序整理出來，并做好歸類。例如：美團 App 的例子中分為 4 個階段，如下圖所示。

5. 我們來判斷：用戶在每個階段，體驗產(chǎn)品設(shè)計任務(wù)中所產(chǎn)生的情緒高低的不同值，并把它們連成一條線，這樣就形成用戶的情緒曲線。

6. 也就是說，制作用戶體驗地圖過程中，我們要思考用戶每個行為背后的痛點和產(chǎn)品設(shè)計上的機會點。

最后，制作好一張實用性很強的用戶體驗地圖，以此來挖掘用戶的痛點問題，我們可以更好的去挖掘產(chǎn)品體驗設(shè)計中的設(shè)計機會點，如下圖所示。

網(wǎng)上的案例欣賞，出境購物的用戶體驗地圖，如下圖所示。

總結(jié)：

1. 我們制作用戶體驗地圖，注重的是團隊成員的洞察分析能力和對產(chǎn)品的思考能力，我們要用心思考產(chǎn)品設(shè)計中的核心用戶的痛點和產(chǎn)品設(shè)計中的機會點，我們要輸出一套符合用戶價值、商業(yè)價值和和產(chǎn)品功能價值的體驗設(shè)計方案，以此解決用戶的體驗問題，把產(chǎn)品做的更好，讓用戶使用產(chǎn)品過程中，產(chǎn)生愉悅感。

2. 制作用戶體驗地圖的價值是，不僅能使我們以“用戶視角”的維度去思考，引導(dǎo)團隊和設(shè)計師去思考問題并做好

產(chǎn)品的體驗設(shè)計。同時我們也可運用“全局性的設(shè)計思維” 去思考產(chǎn)品體驗設(shè)計，去發(fā)現(xiàn)產(chǎn)品問題并解決產(chǎn)品設(shè)計中遇到的體驗問題，讓我們產(chǎn)品帶給用戶的是：產(chǎn)品設(shè)計的可用性、好用性和易用性的價值。

文章來源：tob.design     作者：峻溪POINTV

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)