人生的路口,向左還是向右,會讓你遇到不同的人,過上截然不同的生活。無所謂哪邊更好,不過是若干年後回頭望時,給你留下一個想像空間,假如當初.互動設計裡,一個圖標的擺放位置,比如搜索圖標,靠左還是靠右,則會分分鐘影響你的心情。
互動設計師日常問答場景再現:問:為什麼你的設計裡這個放大鏡要放在中間,而不是放在右邊,或者放在左邊?
自言自語:為什麼?
自言自語:為什麼?
自言自語:為什麼?
答:因為蘋果這麼做的。
Mac OS-Finder界面
繼續答:網易也是這麼做的。
有道詞典
沉默片刻,繼續發問,
問:那為什麼QQ是放在左邊?為什麼微軟是放在右邊?
Mac QQ界面
Windows8 文件管理器界面
答:因為蘋果和網易的用戶體驗做的好。
問者表示不能接受。
對話到此,我自己也表示不能接受自己的解釋。
於是,我嘗試著用Fitts』 law來解釋這個問題,當然,我對這個定律應用的還不是那麼嫻熟。我接下來又要一本正經的胡扯了,目的還是一樣,讓自己更好的吸收這個知識,也希望可以達到拋磚引玉的效果。一切都是為了我自己。
首先先複述一下Fitts』 Law / 菲茨定律(費茨法則)
費茨法則 是一個人機互動以及人體工程學中人類活動的模型,它預測了快速移動到目標區域所需的時間是目標區域的距離和目標區域的大小的函數。費茨法則多用於表現 指、點 這個動作的概念模型,無論是用手或者手指進行物理接觸,抑或是在電腦屏幕上用假想的設備(例如滑鼠)進行虛擬的觸碰。 該法則由Paul Fitts 於 1954 年提出。
費茨法則可以用多種不同的公式進行表達。比較通用的是用於一維運動的 Shannon 公式(由MacKenzie,約克大學教授提出,並因為其與香農定理的相似而命名)。
T = a + b \log_2 \Bigg(1+\frac{D}{W}\Bigg)
T 是完成動作的平均時間。(傳統的命名方式,會寫成MT ,表示運動時間 Movement Time)
a 代表裝置(攔截)開始/結束的時間,b 表示該裝置本身的速度(斜率)。這些常數可以以測得數據進行直線近似的方式通過實驗取得。
D 是起始位置到目標中心的距離。(傳統上來說,研究者多用 A 來表示,意味著運動的振幅 Amplitude)
W 是目標區域在運動維向上的寬度。因為運動的最終點必須落在目標中心 ±W
⁄2以內,所以 W 也可以被認為是被允許的最終位置的容差。
從這個等式我們可以看出,小並且/或者遠的目標,需要更長的時間才能得以準確到達,這便是權衡指的動作的 速度的準確性。
這個公式對我來說,開始的時候很複雜。因為這裡出現了log2,據說這是我們中學時候學過的以2為底的對數..我表示完全沒有印象。不過,不慌,科技進步為懶蛋造福。
計算器界面
也許你會說,說什麼呢,看不下去了。好吧。
其實,你也不用計算。請注意這句話,a和b這些常熟可以測得數據進行直線近似的方式通過試驗取得。什麼意思?
意思就是,有人已經做過試驗了,比如coursera互動設計課程考試題裡有道計算題就告訴你a和b的值。
The Fitts』 law formulation to use is: t = a + b·log2(d/w). For the fixed cost portion a, use 0.8 seconds. For the control rate b of the mouse use 0.204 s/b (the reciprocal of 4.9 b/s).
.
假如我要對比Icon放置的位置,對滑鼠移動的速度的影響,那也就是意味者使用 t = a + b·log2(d/w)這個公式時,a.b和w都是一樣的。區別就在D,距離這個因素上。距離越遠,移動時間越長。
為了一目了然,我稍微誇張了一下,以滑鼠停留的位置畫了一個直角三角形,顯而易見,斜邊大於直邊。
我們大膽猜測放在中間這個方案更優,因為更快。
為了證明這個猜測,我又去觀察了我貌美如花的視覺設計師偲偲小姐(她經常出現在我的用戶觀察作業裡,我所有的故事板的女一。)
你也試試,歡迎留言反饋。
由此,我大膽猜測。搜索圖標放在中間的方案比較優,更符合用戶習慣。同時,圖標放在中間,在視覺上也有一定聚焦作用,我覺得可以讓用戶移動時目標明確,可以減少參數A,從而讓移動速度更快。
最後我也大膽表白,研究用戶體驗,把玩競品,我喜歡網易。
文/鮮核桃(簡書作者)
原文連結:http://www.jianshu.com/p/d989586e29ad
著作權歸作者所有,本文已獲得原作者授權。
關於「菲茨定律」的另一篇文章,請在靜Design的微信對話窗口輸入「定律」二字,獲取另一篇文章來查看。
AD時間:
靜電的UI設計教室(第三期)6月5日開課,歡迎加靜電微信hixulei諮詢報名。
第一手原創設計文章及內容
盡在靜design(長按關注)
覺得本文漲姿勢
請賜個贊並在下方發表評論