久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

在移動界面設計中應用費茨法則

   在人機交互理論中,費茨法則是非常基本的準則。無論是桌面界面設計還是筆記本的界面設計,都要遵循這一定則,對于日益復雜的移動設備來說,這一法則是否依然適用?我們一起來探索一下。

  首先,來了解一下什么是費茨法則。Fitts法則最基本的觀點就是任何時候,當一個人用鼠標來移動指針時,屏幕上的目標的某些特征會使得點擊變得輕松或者困難。目標離的越遠,到達就越是費勁。目標越小,就越難點中。

在移動界面設計中應用費茨法則 三聯

  從鼠標到達目標的時間可以用公式Time = a + b log2 ( D / S + 1 )來計算。

  其中:D:鼠標達到目標的距離;S:目標的寬度(尺寸)費茨法則為人機交互提供了一個度量的法則,從而也為我們設計人機交互界面提供了科學依據,也就是告訴我們怎樣設計一個界面可以讓用戶比較容易使用,提高用戶的操作體驗。

  費茨法則最基本的理念便是,目標越小,越難以操作。

  我們拿Windows和Mac來做個對比:

  Windows的滾動條,向上箭頭在上方,向下箭頭在下方。這種設計更符合日常的心智模型,引導用戶效果更加。

  而Mac的滾動條,向上箭頭和向下箭頭是貼在一起的,這是根據費茨法則而設計的,目的是讓導航更加迅速。

osx vs. windows scrollbars

  在用戶體驗設計中,必須要考慮到操作所耗費的時間,耗時太長,用戶會感到不耐煩,因此需要研究費茨法則。所以,操作對象需要盡可能的大一點,這樣操作起來毫不費力。

  費茨法則在桌面中的應用

  尺寸和距離

  尺寸和距離是交互設計中最??紤]到的兩點,尤其是UI元素在與用戶進行交互的時候。一般來說,按鈕的尺寸和彼此距離都比較小,以便保證聯系性。同時也要注意像”刪除”、”退出”這種比較”危險”的按鈕,應該盡可能的離一些經常使用的按鈕遠一點,避免誤操作。

  邊緣

  邊角

  因為鼠標指針可以在邊角停止,因此邊緣的寬度可以被認為是無窮大的。用戶在此處的操作可以很精確,因為鼠標很容易就能到達邊緣。這就是為何Windows的開始菜單以及Mac的菜單都處于邊角。

  頂部和底部

  因為屏幕有所限制,所以頂部和底部很容易就能到達。

  菜單

  彈出菜單

  彈出菜單會在光標附近顯示,從而減少移動距離,減小移動時間。

  環形菜單

  彈出的環形菜單讓選項之間聯系更加緊密,更近距離。但是環形菜單為何不常見呢?因為首先設計起來不是很容易,其次沒有得到普及。

  費茨法則和移動界面設計

  首先要分兩種:一種是手機移動界面、另外一種是平板移動界面

  其次,持握方式、橫豎屏也是關鍵。

  雖然移動設備主要為觸控,但是費茨法則依然有效。跟桌面系統不一樣,手指無所限制,不受邊角以及屏幕四個邊緣的限制。

  拇指熱區

  我們可以根據拇指熱區來研究拇指的移動范圍,進而考慮到費茨法則的影響。

  費茨法則和手機

  屏幕豎直

  豎直屏幕相較水平屏幕在手機操作中更為常見,圖中為拇指的熱區(注意是右手拇指),然而拇指無法覆蓋上邊緣,這讓費茨法則的應用出現了一些變數,也讓整體操作不是那么的流暢、一體。

  所以,一些比較危險的操作對象(關閉、刪除等等)應該放在熱區之外,避免錯誤操作。高頻使用的按鈕放在哪里不用我多說了吧?

  屏幕水平

  一般用戶用雙手進行操作,熱區出現如下變化

  屏幕中間的區域不是很易于操作,頂部的中央和底部的中央也是如此。

  一手握住,一手點擊

  對于打字和游戲來說,這種持握方式不是很理想,但是手指操作范圍更廣。

  費茨法則和平板

  平板比較復雜,用戶的身體姿勢不同,持握方式也不盡相同,具體情況請自行想象。

  豎直方向

  在Josh Clark的”觸摸設計”中指出,大部分人會握住平板左右兩側的中部。因此頂部的兩個邊角變為了操作熱區。當然在輸入的時候,很多人會握住平板左右兩側的底部。

  水平方向

  一般都是兩手操作,不像豎直,還可以單手握住。要記住菜單和按鈕盡量放在側邊,這樣拇指操作起來方便。

  倚靠模式

  這種模式下,操作不受拇指熱區限制,整體遵循費茨法則。

  無縫轉換

  在實際應用中,用戶會很隨意的進行屏幕方向的轉換。然而有些轉換不是那么的流暢,我們需要更加無縫的轉換,讓界面更具”彈性”

  結論

  屏幕方向、持握方式,若想改善移動設備的用戶體驗,必須仔細研究這兩點。費茨法則在移動設備中依然有效,但是要受到這兩點的限制,情況更加復雜。

  科學的思考,細心的觀察,打造更好的移動用戶體驗。

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 日韩在线一区二区三区 | 欧美一区二区久久 | 天堂中文在线播放 | 国产成人免费视频网站高清观看视频 | 999久久久久久久久6666 | 国产亚洲欧美日韩精品一区二区三区 | 日韩在线视频观看 | av网站在线免费观看 | 精品国产乱码久久久久久闺蜜 | 欧美日韩网站 | 亚州成人 | 久久久久久久久久久爱 | 成人免费大片黄在线播放 | 老司机67194精品线观看 | 欧美一区二区三 | 婷婷丁香综合网 | av第一页| 狠狠热视频 | 亚洲成人综合在线 | 欧美4p| 国产精品国产三级国产aⅴ原创 | 日韩成人在线观看 | 亚洲日本中文 | 三级黄色片在线观看 | 日韩在线中文 | 一区二区三区四区电影视频在线观看 | 国产精品亚洲精品日韩已方 | 久草热播| 91影院| 天天干狠狠操 | 国产高清视频一区 | 午夜精品一区二区三区三上悠亚 | 女女百合av大片一区二区三区九县 | 国产三级一区二区 | 欧美一区二区三区一在线观看 | 国产在线观看一区二区 | 久久久亚洲一区 | 亚洲成人免费在线观看 | 欧美成人手机视频 | 国产黄色在线 | 免费一级大片 |