2016-11-10 ui設(shè)計分享達人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，?請點這里
要探索費茲定律的運用方式，我們首先需要了解這條定律是什么，它是怎樣誕生的。
費茲定律由俄亥俄州立大學的心理學家Paul Fitts于1954年提出，旨在為人類在電腦屏幕上點擊目標對象的行為建立模型，同時涉及到了肢體移動及鼠標行為方面的問題。
舉個栗子，設(shè)想你的注意力和鼠標指針正停留在某個網(wǎng)站的logo上，而你被告知要去點擊頁面中的某個按鈕，于是你需要將注意力焦點及鼠標指針都移動到那個按鈕上。這個移動過程當中的效率問題就是費茲定律所關(guān)注的。
費茲定律的原始公式是這樣的：
MT=a + b * log2(D/W + 1)
其中MT代表位移所需花費的時間，這是我們最需關(guān)注和解決的問題。a與b兩個變量代表系統(tǒng)方面的耗時及效率，屬于經(jīng)驗參數(shù)。D代表初始位置與目標位置之間的距離，W代表目標對象的尺寸。
這套公式所表達的基本概念是：目標對象距離越遠或尺寸越小，用戶點擊的困難就越大，耗時越長；反之，距離越近、尺寸越大，就越容易準確點擊，耗時越少。
拿實例說事兒，來對比一下Windows與Mac(OS X Lion之前的版本)中的滾動條。在Windows中，縱向滾動條上下兩端各有一個按鈕，里面的圖標分別是向上和向下的箭頭；橫向滾動條也是類似。這種模式確實更符合用戶的心智模型，因為觸發(fā)左右移動的交互對象分別處于左右兩端，你到左邊尋找向左移動的方法時會看到左箭頭按鈕，向右側(cè)也是一樣；而Mac系統(tǒng)則將左右按鈕并列在同一側(cè)，使左右導航的點擊操作所需跨越的距離大大的縮短，提高了操作效率。
在UX的世界中，目標用戶群的特征是我們需要時刻牢記在心的，對于費茲定律的運用也是同樣的道理。對于目標用戶中包含了兒童、老人甚至是殘障人士的產(chǎn)品來說，界面交互元素的尺寸需要更大，以便這類相對特殊的用戶可以很容易的點擊操作。
在設(shè)計任何一個可交互的UI元素時，我們都需要考慮它的尺寸以及與其他元素之間的相對距離關(guān)系。市面上有各種各樣的設(shè)計規(guī)范，其中多數(shù)都會提到按鈕最小尺寸以及與其他交互元素之間排布距離方面的問題。盡量將多個常用的功能元素放置在距離較近的位置；另外需要考慮的是，對于那些會產(chǎn)生高風險的交互元素，在很多時候你不希望用戶能夠很輕松的點擊到它們，這種情況下要盡量將這些元素與那些較為常用的界面元素放置在相對距離較遠的位置上。如下圖所示，這里的危險操作(刪除按鈕)與常用的下載按鈕之間的距離就過近了。
角落 - 對應著費茲公式中的“W”，處于界面角落上的元素可以被看做是具有無限大尺寸的，因為當鼠標指針處于屏幕邊緣時，它就會停下移動，無論怎樣繼續(xù)向“外”挪動鼠標，指針的位置都不會改變。用戶可以很輕松的點擊到處于角落的交互元素，只要將鼠標向角落的方向猛的劃過去就OK，屏幕邊緣會自動將指針限定在角落的位置上。這也正是Windows的開始按鈕以及Mac的系統(tǒng)菜單被放置在左下角或左上角的原因之一。
頂部和底部 - 與“角落”類似，由于屏幕邊緣的限制，界面頂部和底部也是容易容易定位和點擊的位置，不過確實沒有角落更容易，因為這兩個位置只在縱向上受到了約束，在橫向上依然需要用戶手動定位；但怎樣都比邊緣以內(nèi)的元素更容易點擊。出于這個原因，蘋果將菜單放置在了整個屏幕的頂部，也就是最頂端的位置，而不是像Windows那樣只將菜單放在了當前活躍窗口自身的頂部。
彈出菜單 - 讓彈出菜單呈現(xiàn)在鼠標指針旁邊，可以減少下一步操作所需要的移動距離，進而降低操作時間的消耗。
輪盤彈出菜單 - 從費茲定律的角度來看，輪盤彈出菜單是一種很棒的模式，因為整個菜單是以鼠標指針所在的位置為圓心來呈現(xiàn)的，每個菜單項距離鼠標指針都很近，而且等距。那么為什么這種形式并不是非常普及呢？坦誠的說，最主要的原因還是設(shè)計方面的難度較大，而且通常不會被包含進各種標準的UI控件庫。
我們接下來要分別了解兩種主要類型的移動設(shè)備。之所以要分開講，是因為它們各自的尺寸特性確實導致了一些交互上的區(qū)別。我們將用手機指代3.5寸屏幕的設(shè)備，用平板電腦指代7寸屏設(shè)備。當然，這樣按照尺寸進行的分類并不很，我們只是通過這種方式在本文中說事兒。
即使是同一款移動設(shè)備，交互方式也會隨著屏幕定向方式的變化而有所區(qū)別。這一點有別于傳統(tǒng)桌面設(shè)備，因為無論在怎樣的情況下，我們使用鼠標的方式都是一致的。你可能會想到筆記本上的觸控板，但這類設(shè)備并不會改變費茲定律在桌面設(shè)備中的運用特性。
角落和邊緣效應同樣會作用于觸屏移動設(shè)備當中，但方式有所不同。與桌面設(shè)備不同，你的手指并不會像鼠標指針那樣真正受到屏幕邊框的限制，處于這些位置的元素不再有所謂的無限尺寸。那么為什么說這類效應同樣可以體現(xiàn)在移動設(shè)備中呢？
多數(shù)情況下，人們都是通過拇指在觸屏移動設(shè)備上進行操作的，所以我們需要在拇指的移動范圍考慮費茲定律的作用。不過，一旦界面元素的定位超出了拇指熱區(qū)的范圍，那么針對該元素的操作就需要付出更多的努力，相應的，費茲定律的公式中也需要增加額外的變量來應對移動時間的增長。在接下來的討論中，我們需要始終記住這一點。
我們首先來看豎屏的情況，因為這是3.5寸設(shè)備最常見的使用方式。我并不想總是拿蘋果當做例子，但他們確實在幕后做了很多聰明的好事，其中有些在體驗提升方面的努力和堅持是不為普通用戶所知的。(4S以及之前的)iPhone的尺寸是恰到好處的，因為它可以保證人類平均的拇指長度能夠觸及到屏幕上的任何一個位置。而回頭看看臺式設(shè)備，通常，要使指針跨越全屏，我們一次只能移動約四分之三的距離，然后就需要抬起鼠標再移動一次，完成剩下的路程。
正如Josh Clark所說，在移動設(shè)備中對特定的UI元素所進行的布局都是有講究。iPhone中的原生工具欄與Tab欄都是定位在屏幕底部的，因為在正常豎屏持機的情況下，這個區(qū)域正是拇指伸直或彎曲所能覆蓋到的范圍。而要觸及到頂部標題欄中的元素，需要的成本則略高，因為這個位置已經(jīng)超出了拇指熱區(qū)的范圍，有些用戶需要改變手掌的姿勢才能夠到左上角的按鈕；將拇指移動到這里的行為已經(jīng)不是簡單的無障礙的過程了。
而Andorid的模式則有所不同，他們將相關(guān)工具及菜單放在了界面頂部。這不是沒原因的，因為Andorid設(shè)備的一些硬件控制是位于屏幕底部的，所以他們將界面中的菜單放置在頂部，以避免兩組交互元素由于位置過近而導致用戶產(chǎn)生誤操作；這是費茲定律的一個很直接的體現(xiàn)(雖然是相反的)。
此外，我們還可以在一些可能帶來風險的交互環(huán)節(jié)(“關(guān)閉”、“刪除”、“取消”等等)當中看到費茲定律的某種衍生，例如在iPhone中的列表單元里向左滑動展開“刪除”按鈕，或是點擊左側(cè)的刪除圖標而激活右側(cè)“刪除”按鈕的雙重確認方式，都是通過在交互過程中人為的制造距離和障礙來增大操作困難度，以達到防錯的目的。
在橫屏狀態(tài)下，如果你想盡量降低用戶手指操作的移動成本，那么屏幕左右邊緣的位置則是你必須考慮的重要區(qū)域。橫屏的時候，用戶通常是雙手操作的，拇指熱區(qū)變成了兩個，費茲定律適用的范圍擴大了很多。
不過相應的，屏幕正中的上下兩側(cè)就變成了最難觸及到的地方，所以一些常用的或重要的操作要盡量避免被布局在這些位置，而對于一些刻意要增加難度的操作，則可以考慮這些位置。
另外一種情況就是用戶會一手拿著手機，另外一只手進行操作。這種情況下拇指作用范圍的問題就不存在了。不過很多用戶在這種時候只會固定的使用一只手指進行操作，這其實不大理想，特別是在打字或游戲等情境中。
Josh Clark曾經(jīng)強調(diào)過，很多人在使用平板的時候會拿著機身的上半部分，特別是在半臥或仰臥的狀態(tài)下。這時，屏幕左上角或右上角就是最重要的熱區(qū)，你需要考慮將一些常用的或是需要吸引注意力的元素放置在這些位置。
不過從我的個人經(jīng)驗來說，我也確實見過很多人拿著平板的機身底部進行使用，特別是在打字的時候。這種情況下，拇指熱區(qū)又轉(zhuǎn)移到了屏幕的左下角或右下角。所以能否針對自己產(chǎn)品的特性來規(guī)劃出一個最得當?shù)牟季衷瓌t，這也是作為設(shè)計師需要面對的挑戰(zhàn)。
對于平板來說，在豎屏狀態(tài)下單手持機還算相對輕松，但要橫過來就有些挑戰(zhàn)了，由于設(shè)備本身相對較重，所以會有掉落的危險。在橫屏的時候，用戶通常都是雙手同時持機的。另外需要記得的一點是，橫屏時，home鍵(或安卓的菜單按鍵)總會出現(xiàn)在一側(cè)的，這時如果界面?zhèn)冗呏虚g位置出現(xiàn)大量常用交互對象的話，有可能會因為與硬件按鈕距離過近而產(chǎn)生誤操作。
前面提到的這些都屬于用戶自己持機的情況，但很多時候你也可以看到人們是在“?？磕Ｊ健毕率褂闷桨宓?，例如放在膝上、桌上或是支架上。這時，拇指熱區(qū)就不再是問題了，費茲定律的作用范圍可以延展到全屏。
要記住，切換持機方式和屏幕定向是用戶經(jīng)常會做的事情，他們在切換的時候甚至不會多做考慮，只是想得到一個當下最方便最舒服的狀態(tài)。對于設(shè)計師來說，除非確定在開發(fā)過程中固化了定向規(guī)則，否則不能假設(shè)用戶一定會保持在某種定向模式下持續(xù)的使用。我們要對每種定向模式所對應的交互特征心知肚明，在每種模式中都考慮費茲定律的作用范圍，在設(shè)計中進行相應的體現(xiàn)。
費茲定律可以在不同的平臺中以不同的形式發(fā)生作用，要打造上乘的產(chǎn)品體驗，我們就需要了解這些作用形式。特別是在移動設(shè)備上，我們會面臨很多在傳統(tǒng)桌面設(shè)備中不曾遇到的挑戰(zhàn)與變數(shù)。當然，費茲定律絕不是唯一需要考慮的設(shè)計原理，但絕對是非常常用的、幾乎會在界面設(shè)計過程中時時處處體現(xiàn)出來的一個。
藍藍設(shè)計( www.teruid.com?)是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計?、 cs界面設(shè)計?、 ipad界面設(shè)計?、 包裝設(shè)計?、 圖標定制?、 用戶體驗 、交互設(shè)計、?網(wǎng)站建設(shè)?、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.teruid.com
