<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          交互設計七大原則之——費茨定律

          2022-6-10    博博

          通過改變目標的大小和到目標的距離來改變操作時間,幫助設計按鈕等的交互.證明了獲取目標的時間和目標的大小、距離的相關性。

          什么是菲茲定律?

          菲茲定律由心理學家Paul Fitt于1954年提出,它是物理世界中人體運動的數學模型。這一定律提出之后,在很多領域都得到了應用,但是在人機交互領域的影響尤為深遠,可以說是人機交互領域的第一條定律,它通常被用來解釋鼠標(PC端)和手勢(移動端)在界面中的移動規律。這項定律尤其適合按鈕等可點擊、可選擇、可交互的元素,目的:易于查找和選擇。作為一個數學模型,菲茲定律是有表達式的,表達式如下:

          T 是完成動作的時間a代表裝置開始結束的時間,b表示該裝置的速度,這些常數可從實測數據進行直線近似取得。D是起始位置到目標中心的距離。w是目標區域在運動維上的寬度。


          結論: 離目標距離越近,所需的時間越短;目標尺寸越大,完成速度越快,時間就越短。也就是說,預測點擊一個目標的時間,取決于目標和當前位置的距離+目標的大小。



          如何將菲茲定律應用在交互設計上?

          1 、放大可點擊元素的尺寸

          大且近的目標元素讓用戶不需要做太精細的調整就可以輕易選中。小而遠的按鈕則意味著用戶要將鼠標/手指移動比較長的一段距離,并且再進行精細的調整才能選中,這樣不僅難以點擊、且需要花費更多的時間。

          這里的大指按鈕的實際大小、也就是點擊熱區的大小,包含按鈕留白區域的大小。網頁設計里現在常見的設計方式就是大按鈕,四周大量留白; 而移動端設計里通常會擴展寬度,使用各種通欄按鈕,使用戶操作更加容易和快捷,可點擊圖標也會放大可點擊區域。


          注意: 并不能無限的放大。大小給可用性帶來的加成是有限制的,如果把一個很小的按鈕放大,它會變得更易于點擊;但是如果按鈕尺寸已經足夠大,那么再放大尺寸,也并不會提高可用性和用戶操作效率。


          2、 減少移動的距離

          依據菲茨定律所言,距離目標越近,用戶點擊越快。所以我們通常會縮短當前交互元素和目標元素的距離,來提高用戶的使用效率和交互體驗。

          1>減少絕對距離

          因為移動端用戶通常為單手操作,也就是大拇指為主要操作工具,在現在大屏手機泛濫的情況下,屏幕很多地方是單手無法觸及的,所以現在我們通常會把按鈕和常用操作元素放在頁面下方的易操作區域。

          2>減少相對距離

          在兩個或多個操作中,通過縮短可交互元素之間的距離來提高用戶的使用效率。比如確認刪除操作,因為它是重要的負向操作,所以對于雙重確認,相比于在當前列表區域確認刪除(如下圖微信),如果使用彈框,那么用戶手勢的移動距離相對會更長(如下圖淘寶)


          p:對于微信來說,刪除對話是用戶比較常執行的操作,因此便利性應該更高;而淘寶更想阻止用戶進行此操作。 也就是說并不是所有操作都需要縮短距離。


          3 、相關元素靠近

          相關的內容或者交互元素要彼此靠近,可以在視覺上增強他們之間的相關性認知


          4 、屏幕的邊緣和角落無限大

          因為屏幕的邊角有一個隱形的“結界”,可以阻止用戶鼠標因為大幅移動而超出目標區域范圍,因此用戶可以直接將鼠標大幅度移動到屏幕的邊緣、角落,而不用進一步微調。 所以屏幕的邊角適合放置菜單欄、按鈕這樣的元素,不管箭頭移動多遠,最終會停在屏幕的邊緣并定位到菜單上。 比如chrome瀏覽器它把TAB欄放在了屏幕最頂部邊界,用戶使用效率比較高。




          其他補充:


          1、餅狀菜單會比線型菜單更易選擇,而且錯誤率更低,這里面有兩個原因:

          • 餅狀菜單的每個菜單項和菜單中心的距離都一致

          • 餅狀菜單的每個菜單項的楔形目標區域都非常大,一般都會擴展到屏幕的邊緣


          2、 目標點的位置實際上是邊緣的一些像素加上邊緣之外的全部面積。所以,這樣看來目標點就足夠大了。原因是基于fitts定律,它的一個分母的增大了而使得界面的效率提高了




          總結:

          1、我們想要更容易點擊到控件,就應該放在屏幕的邊緣或角落里。讓常用的控件更大,更容易辨別;

          2、使用屏幕的邊緣和角落讓控件有效擴大,永遠不要把控件放在離屏幕邊緣或角落一個像素遠的地方;

          3、邊緣之外的地方,也可以算作目標點的面積,這樣一來,目標的面積就被無限的放大了,也更方便用戶操作。


          補充一張雅虎ued繪制的關于Fitts’ Law的Q版小漫畫,先初步了解下:


          作者:GIGI小王子

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合