歡迎來到上海仝薪網絡科技有限公司官網,上海網站建設公司上海網站制作公司微信網站上海競價托管公司
咨詢,就免費贈送域名與服務器,咨詢熱線:13761675098當前位置: 競價外包 > 建站知識 > 網站建設知識 >
聯系我們
電話咨詢:13761675098
E-mail:[email protected]
地址: 上海市金園一路1118弄

實例解析「交互設計七大定律」在設計中的應用

作者/整理:admin 來源:互聯網 2018-01-26

一、費茨定律(Fitts’ Law)

1、費茨定律(Fitts’ Law)簡介

費茨定律是由保羅·費茨(Paul M. Fitts)博士,在對人類操作過程中的運動特征、運動時間、運動范圍和運動準確性進行研究之后提出的,時間是 1954 年;該定律被用來預測從任意一點到目標中心位置所需時間的數學模型,在人機交互(HCI)和設計領域的影響卻最為廣泛和深遠。

費茨定律指的是:使用指點設備到達一個目標的時間,與當前設備位置和目標位置的距離(D)和目標大小(S)有關。用數學公式表達為:時間 T = a + b log2(D/S+1)。

如下圖:

上圖中,T指的是:移動設備所需時長;a、b指的是:經驗參數,它們依賴于具體的指點設備的物理特性,以及操作人員和環境等因素;D指的是:設備起始位置和目標位置之間的距離;S指的是:目標區域的面積大小。

2、費茨定律(Fitts’ Law)在設計中的應用

(1)按鈕等可點擊區域在合理的范圍之內越大越容易點擊,反之,可點擊區域越小,越不容易操作。

  • 案例一:比如淘寶和中國銀行的手機網頁端的登錄頁面

從下圖來看,左邊淘寶登錄界面的信息輸入區域很明顯比右邊中國銀行登錄界面信息輸入區域相互之間的距離和輸入面積更大一點,在視覺及輸入體驗上面淘寶也要比中國銀行的好很多;再看兩個頁面的登錄按鈕,右邊中國銀行界面的按鈕視覺上很小而且距離上方驗證碼輸入框的距離很近,這樣的按鈕不僅不好點擊還容易產生誤操作,相對而言,左圖淘寶頁面的按鈕間距和大小就很合適了,輸入和點擊體驗比左圖好很多。

  • 案例二:  比如小黃車和小藍單車首頁掃碼按鈕

小黃車和小藍單車首頁最重要的掃碼用車按鈕不約而同的使用了圓形按鈕,我們不看放置的位置,單看按鈕大小,小黃車的明顯要比小藍單車的大很多,筆者在使用兩者的時候,小黃車的操作按鈕要比小藍的舒服很多,因為小黃車的按鈕比較大,比起小藍單車的按鈕更容易點擊。

(2)屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,因為邊角是巨大的目標,它們無限高或無限寬,你不可能用鼠標超過它們。即不管你移動了多遠,鼠標最終會停在屏幕的邊緣,并定位到按鈕或菜單的上面。

  • 案例一:比如移動端的知乎、Twitter及Facebook內的發帖按鈕

通過下面三個界面,我們看到它們本身發布內容的按鈕都放置在了屏幕的右下角處,這樣的設計正是運用了上面的要點,使得用戶的操作難度和成本降低,提升了用戶體驗。

  • 案例二:例如Windows桌面底部導航和Mac桌面頂/底部導航欄

下面兩個操作系統我想大家都很熟悉,經常使用的都知道Windows桌面的默認導航欄是在固定底部的,而Mac導航的位置則是在頂部和底部都有,雖然,兩者導航看似處在屏幕的不同位置,實際上都是固定在屏幕的邊緣,還有,當你去設置導航欄的位置時,都是停留在屏幕邊緣四周,不會出現在屏幕中央的位置,這就是最經典的“費茨定律”用處了。

(3)出現在用戶正在操作的對象旁邊的控制菜單(右鍵菜單)比下拉菜單或工具欄可以被打開得更快,因為不需要移動到屏幕的其他位置。

  • 案例一:安卓8. 0 及IOS11 系統手機內長按APP出現的菜單

下圖分別是安卓及IOS最新系統長按應用圖標出現的快捷操作菜單欄,這樣的功能極大的提升了使用APP主要功能的效率,方便易用。

重庆时时彩官方网站app