交互設(shè)計(jì)定律的7個(gè)法則

2 評(píng)論 13153 瀏覽 144 收藏 10 分鐘

編輯導(dǎo)語:作為交互設(shè)計(jì)之父的阿蘭·庫珀最為人熟知的或許就是這句“除非有更好的選擇,否則就遵從標(biāo)準(zhǔn)”了,在交互設(shè)計(jì)領(lǐng)域有很多經(jīng)過了時(shí)間的驗(yàn)證的法則定律被認(rèn)作了標(biāo)準(zhǔn),那么你都知道都有哪些嗎?

除非有更好的選擇,否則就遵從標(biāo)準(zhǔn)。

改變哪幾個(gè)因素可以快速抓住雞蛋?距離?雞蛋的大???手速?

雞蛋哪里跑

一、菲茨定律:距離與大小

菲茨定律 | 距離與大小

菲茲定律由保羅.菲茨在1954年首先提出,菲茨定律在人機(jī)交互(HCI)和設(shè)計(jì)領(lǐng)域的影響廣泛而深遠(yuǎn):T代表完成移動(dòng)所需的平均時(shí)間,a代表光標(biāo)開始/停止時(shí)間,b代表光標(biāo)的移動(dòng)速度,D代表從起點(diǎn)到目標(biāo)中心的距離,W代表目標(biāo)的寬度。

簡而言之,大而近的目標(biāo)區(qū)域意味著用戶不需要做太精細(xì)的調(diào)整就可以輕易的到達(dá)目標(biāo)。

1. 滾屏吸頂

減少目標(biāo)距離,增加操作效率。吸頂效果,不管你向下滾屏了多遠(yuǎn),按鈕永遠(yuǎn)保留在頂部,隨時(shí)觸發(fā)保存動(dòng)作。

2. 增大目標(biāo)大小以縮短定位時(shí)間(邊緣無限大)

兩大主流OS中又有非常好的案例:Mac OS X默認(rèn)將底欄(Dock)放到了屏幕的最下方;這樣的話底欄就變得“無限可選中”,因?yàn)橛脩舨荒軐⒐鈽?biāo)移到底欄下方所以在向底欄方向做出大幅度移動(dòng)后光標(biāo)始終是落在底欄上的。

在Windows中,開始菜單在屏幕的左下角,這個(gè)角落是“無限可選中”的。

因?yàn)椴还苡脩舫笙陆欠较蜃龆啻蠓鹊臄[動(dòng),光標(biāo)總是會(huì)停在開始菜單按鈕的上方(另一個(gè)案例:QQ右上角吸附隱藏,光標(biāo)移動(dòng)到右上角彈出)。

3. 鼠標(biāo)右擊菜單設(shè)計(jì)/長按應(yīng)用出現(xiàn)菜單:縮短當(dāng)前位置到目標(biāo)區(qū)域的距離

右鍵菜單技術(shù)(或上下文菜單)是采取這種思路的一個(gè)很好的例子。為了彈出這種菜單,用戶只要將鼠標(biāo)指針移動(dòng)到需要對(duì)其進(jìn)行操作的某個(gè)對(duì)象所占據(jù)的區(qū)域中并單擊右鍵即可。

而在一般情況下,這個(gè)移動(dòng)的距離要遠(yuǎn)小于將鼠標(biāo)指針移動(dòng)到應(yīng)用程序主窗口頂部的下拉菜單區(qū)域。

4. 菲茨定律啟示

  1. 按鈕或點(diǎn)擊熱區(qū)加大一些,點(diǎn)擊更容易一些;
  2. 讓相關(guān)內(nèi)容更靠近彼此,這樣做不僅可以在視覺上增強(qiáng)用戶對(duì)它們相關(guān)性的認(rèn)識(shí),還可以減少光標(biāo)在他們之間移動(dòng)所需的距離和時(shí)間;
  3. 屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,因?yàn)檫吔鞘蔷薮蟮哪繕?biāo),你不可能用鼠標(biāo)超越它們。

二、??投桑簩W?/h2>

一個(gè)人面臨的選擇(n)越多,所需要作出決定的時(shí)間(T)就越長,用數(shù)學(xué)公式表達(dá)為反應(yīng)時(shí)間 T=a+b log2(n)。在人機(jī)交互中界面中選項(xiàng)越多,意味著用戶做出決定的時(shí)間越長。

??硕?| 專注

??硕捎置??海曼定律,以英美心理學(xué)家威廉·埃德蒙·??撕屠住ずB拿置?。

希克定律表示做決定所花費(fèi)的時(shí)間,與選項(xiàng)數(shù)目多少息息相關(guān)。這個(gè)法則可以用來測(cè)量人們面對(duì)多重選擇,需要多少時(shí)間才能做出決定。

??硕煞匠淌剑?/p>

T=a+b log2(n)

T=反應(yīng)時(shí)間,a=總的認(rèn)知時(shí)間,b=對(duì)選項(xiàng)認(rèn)知的處理時(shí)間(實(shí)證衍生出的常數(shù),對(duì)人來說約是0.155秒),n=選項(xiàng)的數(shù)量。從方程式可以看出,用戶面對(duì)的選項(xiàng)(n)越多時(shí),所需要的反應(yīng)時(shí)間(T)就越長。

1. 彈窗應(yīng)用

操作項(xiàng)的多少影響用戶的做決定時(shí)間:

2. keep界面

「開始跑步」作為最重要的按鈕,面積最大,顏色為鮮艷的品牌綠,按鈕所處位置最容易操作(費(fèi)茨定律可以解釋)。

在跑步的運(yùn)動(dòng)場(chǎng)景下,很容易受到燈光、路況等的影響,『暫?!慌c『結(jié)束』分為兩步設(shè)計(jì),有效避免誤操作。減少用戶做決定的時(shí)間。

3. ??硕蓡⑹?/h3>

當(dāng)選項(xiàng)增加,做決定的時(shí)間也增加。

三、特斯勒定律:復(fù)雜性轉(zhuǎn)移

特斯勒定律 | 復(fù)雜性轉(zhuǎn)移

1. 展開和收起

將復(fù)雜的信息收起來,展示重要且清爽的界面:

2. 特斯類定律啟示

四、接近法則:相關(guān)性

這個(gè)是格式塔(Gestalt)心理學(xué)中其中的一個(gè)法則。講的是,當(dāng)對(duì)象離得很近的時(shí)候,人們會(huì)傾向于認(rèn)為他們是相關(guān)的。

在信息布局上,應(yīng)將相關(guān)的信息放在一起:

接近法則 | 相關(guān)性

五、新鄉(xiāng)重夫:防錯(cuò)原則 | 容錯(cuò)

這里跟可用性中的“避免用戶犯錯(cuò)”的指標(biāo)是一致的。

在設(shè)計(jì)中,要注意從用戶出發(fā),預(yù)測(cè)到他們有可能發(fā)生錯(cuò)誤操作的步驟,能免則免,不能避免,則要及時(shí)向用戶反饋,讓用戶及時(shí)從當(dāng)前的錯(cuò)誤操作中恢復(fù)正確地操作。

新鄉(xiāng)重夫:防錯(cuò)原則/容錯(cuò)

六、奧卡姆剃刀原理:做減法

這個(gè)原理稱為“如無必要,勿增實(shí)體”,即“簡單有效原理”。這個(gè)原則強(qiáng)調(diào)的是:在相同的條件下,如果有兩個(gè)功能相等的設(shè)計(jì),首選方案簡單的那個(gè)。

有利于更好地傳達(dá)內(nèi)容、更好的用戶體驗(yàn)、打開速度更快:

奧卡姆剃刀原理 | 做減法

七、神奇數(shù)字7±2 法則:記憶性

這個(gè)應(yīng)該很多人都大概知道。就是說人的短暫認(rèn)知,在7±2個(gè)信息塊的時(shí)候有最佳的狀態(tài)。

1956年美國科學(xué)家米勒對(duì)人類短時(shí)記憶能力進(jìn)行了研究,他注意到一般人的記憶廣度大約為5到9個(gè)單位之間,就是7±2法則。

神奇數(shù)字7±2 法則 | 記憶性

啟示:PC端的導(dǎo)航或選項(xiàng)卡數(shù)量應(yīng)該控制在七個(gè)左右,移動(dòng)端底部標(biāo)簽通常情況下最多也是5個(gè)。

一共7個(gè)法則,你記住了嗎?

 

本文由 @菜蛋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 1956年美國科學(xué)家米勒對(duì)人類短時(shí)記憶能力進(jìn)行了研究。

    來自上海 回復(fù)
  2. 1956年美國科學(xué)家米勒對(duì)人類短時(shí)記憶能力進(jìn)行了研究,他注意到一般人的記憶廣度大約為5到9個(gè)單位之間,就是7±2法則。

    來自上海 回復(fù)