豆瓣改版：菲茲定律極其在產品界面中的應用實例

0 評論 2979 瀏覽 1 收藏 5 分鐘

豆瓣改版之后，關于豆瓣導航條的設計特性引起了大家的廣泛討論，其中，菲茲定律在用戶界面設計的應用再次吸引了大家的關注和重視。

海旭Roy的文章深入淺出地向我們介紹了菲茲定律極其在產品界面中的應用實例，通過這篇文章我們可以獲得的認識在于，新改版后的豆瓣界面，從某種角度而言就是遵循“菲茲定律”不斷優化用戶操作的產物。

今天說說費茲定律(Fitts’ law)，網上有很多資料，算是老生常談。下面看一張圖，網上找到的，算是fitts在手機終端上的一些應用吧。

　　一，什么是Fitts定律

物體從開始的位置移動到最后的目標所需的時間取決于兩個因素：到目標的距離A和目標的大小。

t = a + b log2 (2A / W)

其中a(=0.230s)，b(=0.166s)是經驗參數，A=指示位置與目標的距離，W=目標尺寸。它們依賴于具體的指點設備的物理特性，以及操作人員和環境等因素。

　　結論：目標越大，指向越快，時間越短。同樣地，目標越近，指向越快，時間越短。也就是說，定位一個目標的時間，取決于目標與當前位置的距離，以及目標的大小(在特定場景下，當然還會有其他因素)。

　　二，菲茲定律的應用

目前應用在PC端和移動終端產品的設計上。

1、在設計用戶界面的過程中，按鈕以及一些GUI控件的尺寸應設計得比較合理，相比而言，點擊小的控件會相對困難一些。因此在當前的軟件及網站的GUI設計過程中，工具欄的圖標都在變大，另外一些文字性說明的按鈕背景區域也在增大。

2、不論鼠標移到什么地方，由于鼠標都可以一直保持在屏幕的邊緣，因此邊緣或是角落區域相比其他區域更容易到達。在Mac OS X產品系統界面設計中的Dock設計，頂端的菜單欄設計，以及Windows XP系統界面的左下角“開始”按鈕和Mac OS X系統界面的菜單欄設計均是這個理論的實際應用體現。

　　3、彈出菜單會比下拉菜單選擇得更快，因為用戶避免了在菜單間滑動。

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

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

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

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

　　案例：

　　三，菲茲定律告訴我們的道理

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

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

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

來源：PMTOO

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
旺旺旺旺旺仔
一直很尊重奶茶，沒去冰，沒少糖，沒少喝。
4320篇作品 34246379總閱讀量
04-132084 瀏覽
大模型「涌現」的四個關鍵
06-264080 瀏覽
零售業的增量市場
05-076559 瀏覽
有效用戶訪談的關鍵因素有哪些？不聊常見的訪談技巧，聊關鍵思維和執行SOP
10-225047 瀏覽
AI時代下，硬件產品規劃手冊
03-064953 瀏覽
鯨探、薄盒、頭號藏品，數藏一級梯隊開始“放長線，釣大魚”
評論
評論請登錄
  1. 目前還沒評論，等你發揮！