2021-1-25 周周
交互設(shè)計(jì)之父的阿蘭·庫珀，最為人熟知的就是這句話：“除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)”。
a. 費(fèi)茨定律，它是在1954 年 ，由保羅.菲茨心理學(xué)家 Paul Fitts 首先提出，當(dāng)時(shí)用來預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間的數(shù)學(xué)模型，在人機(jī)交互和設(shè)計(jì)領(lǐng)域的影響力最為廣泛和深遠(yuǎn)。
b. 定義：從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來決定，到目標(biāo)的距離和目標(biāo)的大小
（上圖中的 D與W），用數(shù)學(xué)公式表達(dá)為時(shí)間 T = a + b log2(D/W+1)。
c. 費(fèi)茨定律，在產(chǎn)品設(shè)計(jì)中的價(jià)值是提高產(chǎn)品的可用性和易用性。例如：界面設(shè)計(jì)中，按鈕等可點(diǎn)擊對(duì)象要合理的設(shè)置大小尺寸才能容易操作，所以在移動(dòng)應(yīng)用中，圖標(biāo)按鈕會(huì)增加點(diǎn)擊熱區(qū)范圍，以便用戶輕松點(diǎn)擊按鈕，做到
產(chǎn)品設(shè)計(jì)上的可用性和易用性。
費(fèi)茨定律的思考分析，如下圖所示 。
1. 可點(diǎn)擊對(duì)象的設(shè)計(jì)，需要設(shè)計(jì)合理的大小和尺寸。功能設(shè)計(jì)的越大，用戶越容易點(diǎn)擊操作，交互效率越好。
2. 界面設(shè)計(jì)的屏幕邊緣或角，適合放置像菜單欄或按鈕這樣的設(shè)計(jì)元素，如果邊角是目標(biāo)，它們可無限高或無限寬，更容易觸達(dá)到操作目標(biāo)。不管你移動(dòng)了多遠(yuǎn)，點(diǎn)擊操作最終都會(huì)停在屏幕的邊緣，并定位在按鈕的上面。
3. 界面設(shè)計(jì)中，出現(xiàn)在用戶正在操作的對(duì)象旁邊的刪除列表（右滑刪除）比下方彈出選擇對(duì)象容易操作，右滑刪除交互可以被用戶打開得更快，更有效率，因?yàn)椴恍枰苿?dòng)到屏幕的其他位置，就可以刪除多余的列表。
4. Apple的iOS人機(jī)交互設(shè)計(jì)指南中指出，按鈕的點(diǎn)擊熱區(qū)大于44x44pt，這樣操作按鈕才會(huì)讓用戶覺得容易使用。
5. 費(fèi)茨定律案例：用戶在使用產(chǎn)品時(shí)，比較重要的操作，我們會(huì)放在移動(dòng)端應(yīng)用的屏幕邊緣處，方便我們的
用戶點(diǎn)擊操作產(chǎn)品的功能圖標(biāo)。如下圖所示。
2. Hick’s Law / 席克定律（?？朔▌t）
我們看一下，席克定律的數(shù)學(xué)公式表達(dá)是 : RT= a+blog2 ( n )。RT 表示反應(yīng)時(shí)間，a 表示跟做決定無關(guān)的總時(shí)間，b 表示根據(jù)對(duì)選項(xiàng)認(rèn)知的處理時(shí)間實(shí)證衍生出的常數(shù)，n 表示同樣可能的選項(xiàng)數(shù)。
在人機(jī)交互的界面設(shè)計(jì)中，選項(xiàng)越多，意味著用戶做出決定的時(shí)間就越長。
分布操作，專注當(dāng)前行為，就可以節(jié)約用戶作出決定的時(shí)間。如下圖所示。
其他符合席克定律的案例，如下圖所示：
a. 對(duì)于用戶，低頻率功能或不太重要的功能，可以收納起來。比如：個(gè)人中心的設(shè)置功能模塊。如下圖所示：
b. 分布操作，專注于當(dāng)前的行為設(shè)計(jì)，如下圖所示：
c. 在人機(jī)交互設(shè)計(jì)中，我們對(duì)核心功能選項(xiàng)做好設(shè)計(jì)上的歸類，可以提升用戶做選擇的效率。
比如：我們幫助用戶選擇 5 種核心的功能需求，它首先劃分了旅游場(chǎng)景下的功能分類，讓用戶對(duì)分類進(jìn)行選擇。
然后進(jìn)入選擇機(jī)票入口，這樣我們極大的化解了用戶面對(duì)很多旅游功能選項(xiàng)的難度和糾結(jié)，節(jié)約了用戶做決定的
時(shí)間。
d. 做好分類選擇，可以提高交互體驗(yàn)設(shè)計(jì)的效率，選擇你想要的商品并購買。如下圖所示。
3. 神奇數(shù)字 7 ± 2 法則
1. 因?yàn)槊绹J(rèn)知心理學(xué) George A Miller 的研究，人們短時(shí)記憶廣度大約為7個(gè)單位（字母、數(shù)字、中文等），也就是說每次只能處理 5 到 9 件事情。
2. 人的大腦認(rèn)知信息的能力有限，所以我們通過把信息分組和模塊分類，以此來認(rèn)識(shí)和思考一些復(fù)雜性的問題。
3. 神奇數(shù)字 7 ± 2 法則，應(yīng)用范圍很廣。例如我們記憶的電話號(hào)碼，可以分成三組數(shù)字：159 5555 6666 ，
這樣分組記憶起來就會(huì)容易很多。
4. UI 界面的導(dǎo)航設(shè)計(jì)，為了給用戶提供明確的設(shè)計(jì)向?qū)В瑑煞N導(dǎo)航（底部導(dǎo)航欄和頂部導(dǎo)航欄）的欄目設(shè)計(jì)通常都控制在 5 個(gè)之內(nèi)，欄目功能過多用戶不容易記憶，5 個(gè)之內(nèi)的導(dǎo)航設(shè)計(jì)方便用戶記憶和快速操作。
5. 移動(dòng)應(yīng)用的交互設(shè)計(jì)規(guī)律。神奇數(shù)字 7 加減 2 法則同樣適用，螞蟻金服的品類區(qū)的核心功能模塊的設(shè)計(jì)，懸浮卡片上只顯示 8 個(gè) 功能圖標(biāo)，如下圖所示。
6. 同一類功能和同一層級(jí)的元素出現(xiàn)時(shí)，數(shù)目一般控制在 5-9 個(gè)，如下圖所示。
7. 如果超過 5 個(gè)，可以右滑選擇你想要的產(chǎn)品功能，如下邊的右圖所示。
8. 神奇數(shù)字 7±2 法則，運(yùn)營廣告圖設(shè)計(jì)要抓住重點(diǎn)去設(shè)計(jì)，更好的引導(dǎo)用戶去瀏覽內(nèi)容和產(chǎn)品的交互體驗(yàn)。
如下圖所示，數(shù)字符號(hào)標(biāo)注-突出重點(diǎn)，主圖、主題、操作按鈕、主色氛圍等，我們會(huì)作出優(yōu)秀的運(yùn)營設(shè)計(jì)。
根據(jù)格式塔的心理學(xué)思考 ：當(dāng)對(duì)象離得太近的時(shí)候，人的意識(shí)會(huì)認(rèn)為界面元素之間是相關(guān)的。
在交互設(shè)計(jì)中，界面設(shè)計(jì)中的接近原則是對(duì)相似信息及功能類別進(jìn)行內(nèi)容分組和布局設(shè)計(jì)的優(yōu)化設(shè)計(jì)。
接近法則在界面設(shè)計(jì)中的作用，能夠直接影響到用戶與產(chǎn)品界面之間的視覺互動(dòng)，來引導(dǎo)用戶的瀏覽及點(diǎn)擊交互行為。因此，相似的內(nèi)容和功能模塊應(yīng)該彼此靠近，而關(guān)聯(lián)性較弱的內(nèi)容應(yīng)該保持大一點(diǎn)的間距。
接近法則運(yùn)用的目的：在視覺上通過組與組的區(qū)分，來劃分功能模塊之間的關(guān)聯(lián)性，讓界面變得更加清晰，同時(shí)幫助用戶在瀏覽頁面時(shí)，能夠清楚的看到到各個(gè)內(nèi)容模塊之間的關(guān)聯(lián)性，就是視覺信息的劃分和分組展示。
如下圖所示。同一類的功能可分為一組，組內(nèi)使用淺灰色的分割線來表達(dá)。而關(guān)聯(lián)性弱的功能模塊，組內(nèi)的可以用淺灰色的分割面表達(dá)，拉開組與組之間的距離，做好視覺信息的劃分效果。
a. “復(fù)制粘貼之父” Larry Tesler (1945-2020) 說過，“任何事物都具有其固有的復(fù)雜性，無法簡化”。
引入第三方登錄，減少注冊(cè)賬號(hào)的復(fù)雜步驟，節(jié)約用戶登錄或注冊(cè)這一流程上所耗費(fèi)的步驟和時(shí)間。
復(fù)雜性守恒定律，認(rèn)為每一個(gè)產(chǎn)品設(shè)計(jì)的過程中，都有其固有的復(fù)雜性，存在著一個(gè)臨界點(diǎn)，超過了這個(gè)點(diǎn)產(chǎn)品設(shè)計(jì)的過程就不能再簡化了，你只能將固有的復(fù)雜性從一個(gè)地方轉(zhuǎn)移到另外一個(gè)地方。
b. 以用戶為中心的產(chǎn)品設(shè)計(jì)，交互設(shè)計(jì)應(yīng)盡量簡化用戶層面上的交互設(shè)計(jì)的過程。比如：頂部導(dǎo)航欄的更多圖標(biāo)，就是將常用的功能整合并隱藏在首頁設(shè)計(jì)的更多功能模塊中。如下圖所示。
a. 防錯(cuò)原則，認(rèn)為大部分的意外都是由產(chǎn)品設(shè)計(jì)上的疏忽，而不是人為的操作疏忽。所以我們可以通過改變產(chǎn)品
體驗(yàn)設(shè)計(jì)把過失率降到。
我們?cè)谠O(shè)計(jì)過程中，要從用戶維度出發(fā)，做設(shè)計(jì)前思考用戶的使用場(chǎng)景，預(yù)測(cè)到他們有可能發(fā)生的誤操作狀態(tài)，
做到操作前給用戶的溫馨提示、操作中的實(shí)時(shí)告知、操作后給用戶的及時(shí)反饋。
b. 防錯(cuò)原則是著名的品質(zhì)管理專家新鄉(xiāng)重夫提出來的。原則最初是用于工業(yè)管理，在交互設(shè)計(jì)中也可以使用。
比如圖 1，今日幸運(yùn)星主題，分享給好友幫忙砍價(jià)。在沒有滿足條件時(shí)，通過彈窗來提示用戶去邀請(qǐng)好友，以此
來完成產(chǎn)品設(shè)計(jì)的任務(wù)。
比如圖 2，請(qǐng)輸入驗(yàn)證碼的彈窗，驗(yàn)證碼錯(cuò)誤，您還可以重復(fù) 3 次，只有信息都輸入正確時(shí)，用戶才能完成的這個(gè)界面任務(wù)，如下圖所示。
簡單有效原理，被稱為“如無必要，勿增實(shí)體”（Entities should not be multiplied unnecessarily），即如有兩個(gè)
功能相等的設(shè)計(jì)，那么選擇最簡單的、視覺干擾比較少的設(shè)計(jì)。在其他條件相同的情況下，要求得越少的那個(gè)就
越好，越有價(jià)值。
a. 合并多余流程，點(diǎn)擊極速支付，支付成功彈窗提示。
b. 高頻率使用的產(chǎn)品界面，保持清爽的設(shè)計(jì)感。
c. 優(yōu)先展示核心功能，減少點(diǎn)擊次數(shù)。如下圖所示。
圖 1，界面中清晰的品牌色的底部操作按鈕，可以明確的引導(dǎo)用戶去選擇優(yōu)質(zhì)的理財(cái)產(chǎn)品。
圖 2 ，摩拜單車首頁，用戶最關(guān)注的功能是掃碼開鎖的核心功能，方便用戶直接操作，提高交互效率。
d. 蘋果官方網(wǎng)站的簡約設(shè)計(jì)做的很棒。蘋果公司用一種很和品質(zhì)感的設(shè)計(jì)提供了足夠多的內(nèi)容，網(wǎng)站的文案，交互和圖片都比較集中展示，網(wǎng)頁設(shè)計(jì)沒有放一些使用戶分心的廣告和不重要的內(nèi)容。如下圖所示。
總結(jié)：
1. 在產(chǎn)品設(shè)計(jì)領(lǐng)域，有很多經(jīng)過時(shí)間檢驗(yàn)過的定律，可以作為產(chǎn)品設(shè)計(jì)的指導(dǎo)原理。作為交互設(shè)計(jì)之父的
阿蘭·庫珀，他最為人熟知的就是這句話 ：“ 除非有更好的選擇，否則就遵從標(biāo)準(zhǔn) ”。
2. 交互設(shè)計(jì)的定律，能夠幫助產(chǎn)品設(shè)計(jì)師對(duì)界面上的各種視覺元素進(jìn)行合理思考，從而發(fā)現(xiàn)一些用戶使用場(chǎng)景中的可用性問題。從產(chǎn)品設(shè)計(jì)的維度思考看，我們來改善產(chǎn)品設(shè)計(jì)的操作效率和用戶的滿意度。設(shè)計(jì)服務(wù)于產(chǎn)品、設(shè)計(jì)服務(wù)于商業(yè)。
a. 什么是用戶體驗(yàn)地圖 ？
定義：用戶體驗(yàn)地圖，是一種梳理產(chǎn)品體驗(yàn)問題的設(shè)計(jì)工具。展示的就是用戶在使用一款產(chǎn)品和設(shè)計(jì)服務(wù)的過程中，每一個(gè)階段的體驗(yàn)、用戶對(duì)產(chǎn)品直觀的心理感受。將用戶的所做、所思都展現(xiàn)出來，便于團(tuán)隊(duì)設(shè)計(jì)師全面思考產(chǎn)品帶給用戶的體驗(yàn)，挖掘設(shè)計(jì)的優(yōu)化點(diǎn)。例如，你去三亞去度假旅游，用戶體驗(yàn)地圖就是用圖形的形式，可視化的表達(dá)，將你在三亞的一天活動(dòng)情況記錄下來，其中包含你這段時(shí)間去過的旅游景點(diǎn)，以及在每個(gè)旅游景點(diǎn)的用戶
體驗(yàn)感受。
思考用戶體驗(yàn)地圖，適合在產(chǎn)品設(shè)計(jì)的那幾個(gè)階段繪制？
1. 原型制作前，設(shè)計(jì)師從直觀感覺的角度看，我們要了解自己的產(chǎn)品為用戶提供了什么功能、交互體驗(yàn)，同時(shí)協(xié)助我們的產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)，做好產(chǎn)品功能的體驗(yàn)設(shè)計(jì)。
2. 產(chǎn)品上線時(shí)，我們可以結(jié)合用戶調(diào)研、可用性測(cè)試等方法論。以此獲取用戶的美好體驗(yàn)和真實(shí)的心理感受，來幫助我們公司的產(chǎn)品設(shè)計(jì)發(fā)現(xiàn)問題，以此作為產(chǎn)品設(shè)計(jì)的迭代優(yōu)化的方向或者尋找新的創(chuàng)意設(shè)計(jì)機(jī)會(huì)點(diǎn)來解決問題。
a. 我們做好用戶體驗(yàn)地圖的兩個(gè)優(yōu)點(diǎn)：
1. 產(chǎn)品設(shè)計(jì)的體驗(yàn)?zāi)繕?biāo)是讓用戶用起來，感覺到產(chǎn)品具有可用性、好用性、易用性，那么產(chǎn)品設(shè)計(jì)也應(yīng)該從用戶
視角出發(fā)，用戶從產(chǎn)品那個(gè)觸點(diǎn)點(diǎn)擊進(jìn)來，怎樣點(diǎn)擊交互下一步，怎樣保持對(duì)產(chǎn)品的活躍度，如何傳播分享；定位用戶使用產(chǎn)品過程中的體驗(yàn)痛點(diǎn)。
2. 真正思考用戶需要什么功能，讓更多用戶參與進(jìn)來，換位思考我們產(chǎn)品帶給用戶具體什么感受，全局性的思維去思考產(chǎn)品的體驗(yàn)，與團(tuán)隊(duì)成員、產(chǎn)品交互設(shè)計(jì)、開發(fā)部門和項(xiàng)目負(fù)責(zé)人等達(dá)成一致性的共識(shí)、有效溝通和協(xié)作，一起制作出解決方案。
b. 思考用戶體驗(yàn)地圖的價(jià)值點(diǎn)
1. 基于用戶使用場(chǎng)景的設(shè)計(jì)是基于用戶達(dá)到某個(gè)體驗(yàn)設(shè)計(jì)目標(biāo)的一系列場(chǎng)景的分析與產(chǎn)品思考，理解用戶在每一個(gè)使用場(chǎng)景下的痛點(diǎn)及需求分析，同時(shí)結(jié)合用戶的上一場(chǎng)景，思考用戶下一步的體驗(yàn)?zāi)繕?biāo)，我們可以通過做好體驗(yàn)設(shè)計(jì)，來引起用戶情感上的共鳴。
2. 使用用戶體驗(yàn)地圖，團(tuán)隊(duì)成員可以從用戶的痛點(diǎn)出發(fā)，讓產(chǎn)品設(shè)計(jì)師、團(tuán)隊(duì)成員全面的思考產(chǎn)品體驗(yàn)，從用戶
體驗(yàn)地圖中來挖掘產(chǎn)品設(shè)計(jì)的機(jī)會(huì)點(diǎn)。
以途牛用戶體驗(yàn)地圖為例，如下圖所示。
我們運(yùn)用用戶體驗(yàn)地圖時(shí)，作為設(shè)計(jì)師或參與者需要切換成用戶視角、第一次使用者的角度去思考，去發(fā)現(xiàn)產(chǎn)品體驗(yàn)上的問題，同時(shí)解決產(chǎn)品體驗(yàn)中遇到的問題，提升用戶體驗(yàn)的滿意度。
制作用戶體驗(yàn)地圖時(shí)，四個(gè)關(guān)鍵點(diǎn)的思考：
1. 明確我們的核心用戶人群等; 2. 研究用戶的使用場(chǎng)景。3. 做好用戶的訪談和調(diào)研。4. 制作好用戶體驗(yàn)地圖。
制作用戶體驗(yàn)地圖的具體步驟如下：
1. 前期準(zhǔn)備工作：
我們可以先做用戶的深度訪談、用戶對(duì)產(chǎn)品反饋、產(chǎn)品設(shè)計(jì)的走查和交互的走查、產(chǎn)品的數(shù)據(jù)分析、同行業(yè)的競(jìng)品分析、訪談?dòng)脩舻确椒?，獲取大量真實(shí)可靠的資料。
我們就會(huì)認(rèn)識(shí)到：思考用戶在使用產(chǎn)品設(shè)計(jì)的過程中產(chǎn)生的行為數(shù)據(jù)、用戶體驗(yàn)和用戶內(nèi)心的真實(shí)感受。我們也可以思考產(chǎn)品的設(shè)計(jì)思路、產(chǎn)品的核心用戶人群等，以此作為我們制作用戶體驗(yàn)地圖過程中的重要參考和依據(jù)，知道用戶到底需要什么功能和流程，來幫助用戶解決問題。
2. 用戶調(diào)研的方法如下：
我們可以先采訪用戶或者做好調(diào)研和記錄，將我們的采訪或調(diào)研記錄的內(nèi)容做好整理歸檔，團(tuán)隊(duì)成員一起來拆解和記錄用戶的行為、用戶的直觀感受和用戶心中真實(shí)的想法。
3. 我們要梳理好關(guān)鍵產(chǎn)品設(shè)計(jì)任務(wù)的流程，就是用戶在使用產(chǎn)品功能的過程中，會(huì)面臨很多不同的場(chǎng)景或復(fù)雜的設(shè)計(jì)流程和體驗(yàn)設(shè)計(jì)的目標(biāo)。然后我們?cè)僮珜懹脩敉瓿擅總€(gè)關(guān)鍵任務(wù)的時(shí)間：比如，對(duì)于我們?nèi)粘Ｋ姷牟檎夜δ芏?，用戶希望更快的查找到自己想要的產(chǎn)品功能和體驗(yàn)?zāi)繕?biāo)。
我們?cè)賹懗鲫P(guān)鍵產(chǎn)品任務(wù)的用戶操作產(chǎn)品時(shí)的行為：
指的是用戶當(dāng)下在做什么，通常是用 “我+動(dòng)詞” 來表示，例如：我購買基金產(chǎn)品。
4. 我們?cè)俅_定好關(guān)鍵節(jié)點(diǎn)，寫出用戶調(diào)研過程中的痛點(diǎn)思考、用戶的滿意度思考，放在對(duì)應(yīng)的行為點(diǎn)的下方。
我們思考和分析用戶的痛點(diǎn)、用戶滿意度的調(diào)查，判斷用戶的情緒變化。分析結(jié)束后，需要將以上三類信息都寫下來，方便后續(xù)整理分組。把行為按照達(dá)成用戶目標(biāo)的邏輯順序整理出來，并做好歸類。例如：美團(tuán) App 的例子中分為 4 個(gè)階段，如下圖所示。
5. 我們來判斷：用戶在每個(gè)階段，體驗(yàn)產(chǎn)品設(shè)計(jì)任務(wù)中所產(chǎn)生的情緒高低的不同值，并把它們連成一條線，這樣就形成用戶的情緒曲線。
6. 也就是說，制作用戶體驗(yàn)地圖過程中，我們要思考用戶每個(gè)行為背后的痛點(diǎn)和產(chǎn)品設(shè)計(jì)上的機(jī)會(huì)點(diǎn)。
最后，制作好一張實(shí)用性很強(qiáng)的用戶體驗(yàn)地圖，以此來挖掘用戶的痛點(diǎn)問題，我們可以更好的去挖掘產(chǎn)品體驗(yàn)設(shè)計(jì)中的設(shè)計(jì)機(jī)會(huì)點(diǎn)，如下圖所示。
網(wǎng)上的案例欣賞，出境購物的用戶體驗(yàn)地圖，如下圖所示。
總結(jié)：
1. 我們制作用戶體驗(yàn)地圖，注重的是團(tuán)隊(duì)成員的洞察分析能力和對(duì)產(chǎn)品的思考能力，我們要用心思考產(chǎn)品設(shè)計(jì)中的核心用戶的痛點(diǎn)和產(chǎn)品設(shè)計(jì)中的機(jī)會(huì)點(diǎn)，我們要輸出一套符合用戶價(jià)值、商業(yè)價(jià)值和和產(chǎn)品功能價(jià)值的體驗(yàn)設(shè)計(jì)方案，以此解決用戶的體驗(yàn)問題，把產(chǎn)品做的更好，讓用戶使用產(chǎn)品過程中，產(chǎn)生愉悅感。
2. 制作用戶體驗(yàn)地圖的價(jià)值是，不僅能使我們以“用戶視角”的維度去思考，引導(dǎo)團(tuán)隊(duì)和設(shè)計(jì)師去思考問題并做好
產(chǎn)品的體驗(yàn)設(shè)計(jì)。同時(shí)我們也可運(yùn)用“全局性的設(shè)計(jì)思維” 去思考產(chǎn)品體驗(yàn)設(shè)計(jì)，去發(fā)現(xiàn)產(chǎn)品問題并解決產(chǎn)品設(shè)計(jì)中遇到的體驗(yàn)問題，讓我們產(chǎn)品帶給用戶的是：產(chǎn)品設(shè)計(jì)的可用性、好用性和易用性的價(jià)值。
文章來源：tob.design 作者：峻溪POINTV
藍(lán)藍(lán)設(shè)計(jì)( www.longkoushi.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.longkoushi.net