交互設計原則和理論2——七大定律

交互設計七大定律:費茨定律(Fitts’ Law)、希克定律(Hick’s Law )、7±2 法則、接近法則(The Law Of Proximity)、防錯原則、複雜性守恆定律/泰思勒定律(Tesler’s Law )、簡單有效原理/奧卡姆剃刀原理(Occam’s Razor )。


一、費茨定律(Fitts’ Law)

設計師只要知道遊標與目標物距離D,及目標物與遊標的垂直寬度W與操作速率有關即可。而座落在螢幕邊端的目標,因爲滑鼠移動至低時,會停在邊界,可視爲目標物的寬度無限大,亦即操作速率最快。



費茨定律可以簡單理解爲:任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。


菲茨定律的啓示:

1.按鈕可點擊的對象需要合理的尺寸大小,將用戶越可能想要點擊的按鈕儘量放大。目標越大,越容易點擊或操作;

如100offer與摩拜單車的操作按鈕,按鈕的尺寸大一些會讓用戶知道哪裏是需要操作的地方,對用戶來說更直觀易用。


2.讓相關的操作按鈕兩者更相近,這樣不僅在視覺上增強用戶對他們的相關性認知,而且距離越近越容易操作。

如 Behance 的登錄註冊界面,下圖爲例:左圖是登錄按鈕距離填寫賬號密碼的輸入框很近,這樣用戶就很容易操作。右圖我把他們的距離拉大,明顯能感受到登錄按鈕與輸入框割裂得很嚴重。若用戶想要點擊登錄按鈕還可能需要把鼠標移動一大段的距離,交互成本變得很高。


3.屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,因爲邊角是巨大的目標,它們無限高或無限寬,你不可能用鼠標超過它們。即不管你移動了多遠,鼠標最終會停在屏幕的邊緣,並定位到按鈕或菜單的上面。

爲什麼chrome比IE用起來順手?其實也和費茲定律有關,chrome視窗最大化後,其各分頁tab是在邊界,鼠標可以迅速上移至頂部邊界。而IE上方爲視窗的Title Bar,往下一層纔是tab,所以鼠標要移動位置才能點擊到,較爲花費心力。


二、希克定律(Hick’s Law)

席克定律的核心意義:人在面臨選擇越多的時候,所需要作出選擇的時間就越長。

簡單來說就是當選項增加時,做決定的時間就會增加。希克定律多應用於軟件或網站界面的菜單設計中,在移動設備中也很適用。

我們在菜單欄的設計過程中,可以對選項進行同類分組和多層級分佈,這樣用戶的使用效率會更高,所用時間會更短。下圖圖左對地域進行分類分組,試想一下若是把所有城市依次排開,不按熱門與首字母來分類,把所有城市名稱全鋪展在界面上,用戶可能在選擇地區時要花費2分鐘的時間。圖右是電商平臺,對商品類別進行分類,用戶可以根據分類定位到自己要賣的商品,省去很多查找時間。


還有一個很直觀的例子是電視機遙控器。在智能電視還沒有普及的時代,電視遙控器可能有50多個按鈕,說明書可能都需要看好一會。而現在只需要10個按鈕,也不需要再去翻看遙控器說明書即可上手使用。


三、7±2 法則

1956 年喬治米勒對短時記憶能力進行了定量研究,他發現人類頭腦最好的狀態能記憶含有7(±2)項信息塊,在記憶了 5-9 項信息後人類的頭腦就開始出錯。與席克定律類似,神奇數字 7±2 法則也經常被應用在移動應用交互設計上,如應用的選項卡不會超過 5 個。

在生活中我們經常會把一長串的數字分成7個左右的數組來記憶,這樣會使難度降低很多,米勒稱這種單位爲“組塊”。

這一定律我們可以應用到設計中的有:

1.導航和選項卡最多不超過9個。


2.如果導航和選項卡內容很多,可以用一個層級結構來展示各段及其子段,並注意其深廣度的平衡。


3.把大段整塊的信息分隔成小段,並顯著標記每個信息段和子段,以便清晰確認各自的內容。



四、接近法則(The Law Of Proximity)

接近法則是感知組織格式塔法的一部分,它指出彼此接近或接近的物體往往被組合在一起。換句話說,我們的大腦可以很容易地將物體彼此靠近地關聯起來,比分開很遠的物體更好。這種聚類的發生是因爲人類具有組織和組合事物的自然傾向。 從另一個角度說,此相關的物體應當靠近,歸組到一起。

例如微信的發現頁面,我們第一印象就是相互靠近就是同類型的一組功能。


五、防錯原則

防錯原則認爲大部分的意外都是由設計的疏忽,而不是人爲操作疏忽。因此,在設計中要有必要的防錯機制。在此,特別要注意在用戶操作具有毀滅性效果的功能時要有提示,防止用戶犯不可挽回的錯誤。

在界面中經常能看到類似的例子,如條件未滿足時,按鈕不可點擊。

表單輸入有誤時,提醒用戶輸入正確的文本信息。


六、複雜性守恆定律/泰思勒定律(Tesler’s Law )

特斯勒定律,又稱複雜性守恆定律,指出每一個應用程序具有無法被轉移或者隱匿的複雜固有量。相反,它必須在產品開發或用戶交互中處理。這就提出了誰應該解決複雜性的問題。例如,軟件開發人員是否應該增加軟件代碼的複雜性,以使用戶更簡單,或者用戶應該處理複雜的界面,以便軟件代碼可以簡單。——《維基百科》

該定律認爲每一個過程都有其固有的複雜性,存在一個臨界點,超過了這個點過程就不能再簡化了,你只能將固有的複雜性從一個地方移動到另外一個地方。比如我們如果發現頁面的功能是必須的,但當前的頁面信息過載,那麼就需要將次要的功能收起或者轉移。

例如蘋果的 Mac book 從以前的7個功能9個插口,到現在僅有的5個插口。



七、簡單有效原理/奧卡姆剃刀原理(Occam’s Razor )

Occam的剃刀( 拉丁文:lex parsimoniae 「 簡約法則 」)是一種解決問題的原則,最簡單的解決方案往往是正確的解決方案。當提出相互競爭的假設來解決問題時,應該選擇具有最少假設的解決方案。這個想法歸功於奧克漢姆的威廉(約1287-1347),他是英國方濟各會修士,學者哲學家和神學家。————《維基百科》

通俗點理解爲“不要浪費較多東西去做用較少的東西同樣可以做好的事情。”或者表述爲“在其他條件相同的情況下,要求得越少的那個就越好,越有價值"。

奧卡姆剃刀原理的啓示:

1)不必要的元素會導致設計效率的降低,並且會增加不可預期的後果。在設計中我們可以去掉不必要的干擾元素,這樣頁面會比較純粹、簡潔。(這一點對於目前互聯網產品功能設計、篩選、優先級等有一定的指導性意義)

2)幾個功能相同的設計,在都可用的情況下,選擇視覺干擾較少的設計。

可用奧卡姆剃刀原理來對多個功能相等的設計進行評價、選擇。這裏功能相等指在相同的衡量標準下設計的可比性能。其次在所選擇的設計裏評價每一個元素。在不損及功能的情況下,去掉儘可能多的元素。最後,在不損及功能的情況下,使餘下的元素盡少出現。

如下圖,圖一與圖二均爲登錄頁,圖一在頁面左半部分增加了公司介紹。但用戶在填寫信息時很容易被頁面其他元素干擾,例如圖中的logo、文字描述、優勢介紹等。增加流程以外的內容,勢必會對用戶操作進行干擾,降低表單填寫效率,並且可能會導致無法預期的後果(用戶關閉頁面)。

在功能性頁面,我們需要知道在這個頁面用戶行爲是什麼。流程內的引導儘量弱化於主流程,流程外的內容,沒有必要不要增加。這點Slack與Teambition的轉化性頁面就做的很純粹簡潔。




希望此篇文章對你有幫助。


相關推薦:

17組值得收藏的設計規範&組件庫下載

國外設計團隊的高頻設計工具與協作工具

交互設計原則和理論1——尼爾森十大可用性原則

給初級UI&UE設計師的Sketch資源分享

如何構建設計語言系統

在構建設計規範之前,你需要看看這些設計資源

16個表單優化技巧

怎樣提高註冊登錄流程的交互體驗

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章