<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 費茨定律在設計中的運用

          2021-2-25    濤濤

          費茨定律由心理學家 Paul Fitts 提出,用來預測從任意一點到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動,接著你會放慢速度直至找到杯子把手,這個杯子把手的大小與你“抓住”它有著一定的關系。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          如上圖所示,如果光標現在在任易地點想要去點擊目標 target,最短路徑一定是 D,最短路徑上容錯的最長路徑是 D+W,只要水平上移動超過了 D+W 你就點不到了,而這個點擊動作所耗的時間是一個常數加上一個以 D 為正比 W 為反比的函數的和。

          讓我們來看下面這個例子:圖中右側的紅色方塊代表目標,虛線代表從起點至目標的移動軌跡,其范圍是用戶到達目標前微調以彌補誤差的區域,在右方有一個較大的目標,因為面積很大所以用戶從任意點快速點擊都會很容易,在目標上停下來之前不需要做太精細的調整。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          相反,如果把右邊紅色方塊縮小,用戶快速點擊目標會困難得多,需要做一系列精細的調整動作。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          但如果同樣大小的目標距離很近的話,因為到達目標范圍所需的初始動作很小,所以準確點擊它的難度也會小很多。距離越近, 初始動作因為幅度太大而超出目標區域的風險就越小。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          按鈕越大越容易點擊

          在頁面中,大而近的目標區域意味著用戶不需要做太精細的調整就可以輕易的到達目標。比如頁面中的大按鈕。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          將按鈕放置在離開始點較近的地方

          夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區域,相比常見頂部搜索欄更方便操作,效率更快。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          相關按鈕之間距離近點更易于點擊

          在設計注冊、登錄界面的時候,通常將「注冊」和「登錄」放到一起,不僅可以在視覺上增強用戶對他們相關性的認知,還可以減少在他們之間的距離 。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          △ 設計圖來自網絡 侵刪

          適用邊界

          費茨定律鼓勵減少距離,增加目標大小以提升用戶效率,但反過來亦適用,比如 iPhone 關機,不使用按鈕點擊,而采用滑動操作,這樣雖然降低了用戶操作效率,但增加用戶操作時間,以起到警示用戶謹慎避免誤操作的目的,所以“取消”按鈕放在底部方便點擊的地方。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          App 彈窗經常把“關閉”按鈕放在卡片的右上角離手遠的地方,還有開屏廣告,廣告商希望用戶花盡量多的時間停留在廣告內容上,這時候廣告主會把“跳過”按鈕放在難以點擊的右上角,以降低用戶的誤觸機率提高轉化。

          總結思考

          按鈕越大越容易點擊,在移動設備上通常增加按鈕點擊熱區范圍以便用戶不必精準地點擊目標也能操作成功,但是可點擊對象大小尺寸要合理不要過分的大;

          讓相關的內容更靠近彼此,在視覺上增強用戶對它們相關性的認知,不過也不能過分靠近,會造成點擊壓力;

          將按鈕放置在離開始點較近的地方,比如屏幕底部易操作區域;

          屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因為在屏幕邊緣和角落位置時它們是“無限可選中”的,可以大膽操作而無需“微調”;

          定律的反向使用可以適用一些特殊場景,比如想達到某種目的而降低按鈕被點擊的可能。


          文章來源:優設  作者:印跡拾光

          藍藍設計www.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.sdgs6788.com

          存檔

          日韩一区二区三区视频久久| 久久香蕉国产线看观看99| 亚洲欧美成人久久综合中文网 | 国产精品久久成人影院| 久久精品国产亚洲av日韩| 日本精品久久久久中文字幕| 久久97久久97精品免视看| 亚洲色欲久久久综合网东京热| 久久亚洲精品视频| 久久国内免费视频| 91久久成人免费| 久久综合香蕉国产蜜臀AV| 久久精品国产清自在天天线| 久久精品无码专区免费青青| 久久久久亚洲爆乳少妇无| 国产亚洲色婷婷久久99精品| 亚洲国产成人久久综合区| 亚洲国产精品久久久久婷婷老年| 老男人久久青草av高清| 久久久人妻精品无码一区| 日本免费一区二区久久人人澡 | 久久久国产精品网站| 久久亚洲国产精品成人AV秋霞| 国产精品九九久久免费视频| 久久久久久亚洲AV无码专区| 99精品久久精品一区二区| 久久久黄片| 久久天天躁狠狠躁夜夜不卡| 久久这里只精品国产99热| 国产综合久久久久| 99久久精品国产高清一区二区| 一本色道久久88精品综合| 欧美日韩久久中文字幕| 中文成人久久久久影院免费观看| 国产精品无码久久久久| 国产日韩久久免费影院| 国产成人精品久久亚洲| 久久激情亚洲精品无码?V| 久久99精品久久久久久不卡| 精品无码久久久久久久动漫| 久久久久久噜噜精品免费直播 |