任何一個一個職業都有自己的技術要求,很多人說做設計的更多的靠靈感,靠思維方式,其實裡面也有很多的規律或者說一個方法,今天我們就說說費茨定律在網頁設計中是起到了什麼樣子的作用吧!相比說到費茨定律不是所有人都知道,即使您是一個做本行的人,沒有經過深入的學習與探索可能也不知道這個定律,我們今天在說這個定律在網頁中是如何應用的就要先普及一下網站建設的小常識:
費茨定律(Fitts’s Law),是保羅·費茨在 1954 年釋出的,這個名詞對很多人來說非常陌生。該定律指的是:使用指點裝置到達一個目標的時間同以下兩個因素有關:
1. 裝置當前位置和目標位置的距離 (D) 。距離越長,所用時間越長;
2. 目標的大小 (S) 。目標越大,所用時間越短。
該定律可用以下公式表示:t = a + b log2 (D / S + 1)
其中 a,b 是經驗引數,它們依賴於具體的指點裝置的物理特性,以及操作人員和環境等因素。
該定律經常運用於滑鼠從點 A 到點 B 的運動。比如,以一個更有效的途徑使可接近性更大和提高點選率去放置內容,這個定律便顯得重要。我們可以這樣來理解:從指點位置到目標位置之間的距離越大,有效地移動到目標位置所需時間就越長。與此同時,還與目標位置大小有關,目標位置越小,所需時間就越長。因為目標位置大小會限制移動的速度,類似物體具有慣性一樣,目標位置小,移動速度越快,到達目標位置就越難停住,所以需要提前減速。目標位置越小,越需提早減速,整個過程所需時間就越長。
透過上面的講述,我們對費茨定律有了初步的認識,下面談談費茨定律在網頁設計中的應用。
1. 擴大超連結點選區域。在超連結周圍新增多餘的空白區域,使滑鼠點選時有一個緩衝調整區域,縮短指向點選目標的調整時間。比如分頁導航連結,每個分頁序號一般只包括一個細小的阿拉伯數字,排列在一起形成較小的間隙,瀏覽者很難快速準確地移動到每個阿拉伯數字上,出錯機率增大。可以透過在每個阿拉伯數字連結序號周圍新增上多餘的空間,擴大目標的點選範圍,來降底滑鼠移動到目標連結時的調整時間。
舉個例子,下面分別是 google 和百度搜尋結果頁的分頁效果圖:
從這兩幅圖可以看出,百度應用了費茨定律,其搜尋結果頁的分頁效果設計得要比 google 的方便易用省時。
再比如一些導航,當滑鼠移上去時點選目標背景圖自動放大,同樣也是應用了此原理。
2. 把多使用者想要點選的或需要引導多使用者點選的目標放大。
上圖是騰訊 WordPress 微信下載頁面的一小部份截圖,從頁面功能來看,瀏覽者進入此頁面的目的是下載 WordPress 微信。下載按扭是瀏覽者想點選的目標,因些做得比別的元素要大,要顯眼。在起到易於辯識同時節省了多使用者滑鼠移到按扭上微調所需的時間。
3. 將相關性點選目標儘量彼此靠近放在一起。相關性點選目標間移動的頻率相對較高,讓它們彼此靠近,減小了他們之間移動的距離,同時減少無需大福度位移而在它們之間移動微調的必要性。
4. 滑鼠移至點選目標時放大點選目標。當滑鼠即將移動到目標而準備進行微調時,由於點選目標自動放大,微調的必要性大大減少甚至有時無須再進行微調。如下圖中的設計: