豆瓣界面新改版 “菲茲定律”幫你解讀背後思緒

剖析自力博客和行業網站之間的差別
2016-05-13
蝸牛般的跟風者:本來最沒有狼性的是搜搜
2016-05-13
Show all

豆瓣界面新改版 “菲茲定律”幫你解讀背後思緒

  豆瓣改版以後,關於豆瓣導航條的計劃特征引發瞭人人的普遍評論辯論,個中,菲茲定律在用戶界面計劃的運用再次吸收瞭人人的存眷和看重。

  海旭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、邊沿以外的處所,也能夠算作目的點的面積,如許一來,目的的面積就被無窮的放大瞭,也更便利用戶操縱。

  起源;唯美圖片

Comments are closed.