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

        • 看懂設計(一):菲茲定律在UI設計中的實際應用

          2020-3-1    鶴鶴

          菲茲定律在交互設計中的應用是很普遍和廣泛的,有時候在我們設計界面之時,不知不覺就應用了菲茲定律,但是我們卻未察覺。

          關于菲茲定律的具體內容,可以說是大家耳熟能詳,甚至在學生時代就有所了解:從一個起始位置移動到最終目標點所需的時間由兩個參數來決定,到目標的距離(D)和目標的大?。╓),可以用數學公式表達為:

           

          在當今互聯網背景下簡單來解釋說,就是大而近的目標區域意味著用戶用需要耗費太大的精力即可輕易點擊或者關注到目標,反之,小而遠的目標區域則意味著用戶將耗費一些時間和動作才能觸及到目標。在一般情況下,讓用戶耗費時間和動作的操作,會使人產生負面的用戶體驗。

           

          以上說的,其實是對菲茲定律表象的解釋,每個人在網上也會搜到很多類似的解釋。當你搜索時會發現,關于對菲茲定律的應用,網上絕大多數的資料都是在以PC端界面作為定律的解釋,但移動界面卻少之又少,這里面的一部分原因是菲茲定律提出的時間,一部分也是因為在移動端的設計中,菲茲定律會變得很零散和瑣碎,很難真正用幾句話來總結,這篇文章也是我第一次試著在移動端的交互設計的范疇內對菲茲定律的應用進行簡單的總結。

           

          1. 讓按鈕更大一些

          我在這一部分分了幾種情況,分別進行討論,其一呢,就是fab button。在現有的fab button中,大家會發現,雖然按照正常iOS的設計規范,一般按鈕的大小都會被設計為88px,但是在設計fab button時,我們一般都會選擇大一些的尺寸,例如100px、110px、120px。

           

           

          其二就是頁面內功能按鈕的大小,我們在做界面設計的時候,都知道做到統一性,但很少去深入地想,界面統一的背后是在像用戶傳達一個什么意思。

          舉個例子,這是【洋蔥數學】和【360家庭防火墻】的登錄界面,市面上的登錄界面大多大同小異,基本組成就是賬號+密碼+按鈕(或手機號+按鈕等)的組合。

           

          那我們來思考一個問題:為什么在手機號只有11位已經確定的情況下,輸入框和【下一步】按鈕還要做這么長,接近通欄的一個樣式。

          我試著來找到這個問題的答案,第一個,是對于品牌設計規范的執行,對邊距是有一定要求的,也就是我們常說的保持頁面元素的統一性;第二個,即是對菲茲定律的應用,在這個頁面中,最核心的兩個功能【輸入】和【下一步】給予他們一個足夠的大小,會讓用戶的注意力更加集中,避免被分散精力。

           

          2. 讓相關聯的信息內容距離更近

          這也和設計原則中的親密性相一致。依舊可以用我們常見的信息輸入界面來加以印證。這兩個界面是我隨手做的,對比一下即可看出優劣。

            

          在相關性比較強的功能中,拉近彼此距離,既能夠給信息一個清晰的層級,更能夠減少用戶的操作成本。

           

          3. 界面的邊界會讓用戶操作更加精準和容易

           

          在研究交互界面的時候,我們總聽到一個說法,“界面的邊界是無限的”,它當然不是在說界面是無限大的,對于一塊屏幕來說,在進行操作的時候,無論是PC的鼠標光標,還是移動屏幕的手指,在操作到界面邊緣時,因為無法延伸,所以最精準。

           

          這也是我們看絕大多數fab button彈出的菜單是在界面邊緣,而不是在界面中央的原因。

          除此之外,還有在很多安卓手機中,卸載app時會讓用戶把要卸載的app拖拽到屏幕上邊緣的區域進行卸載,這樣相比給一個【X】按鈕,會更加精準,而且拖拽的操作也會給用戶更多思考的空間和時間,減少誤操作的概率。

           

           

          但是,這個但是很重要,不要把所有既定的法則都奉為圭臬,所有事物都要辯證著看,在沒有限定條件的情況下,菲茲定律的應用不會有任何問題,但是如果加以條件的限定,就不是這么簡單了。

          簡單舉個例子:在進行刪除等負向操作時,很多app會把確認刪除等操作做得離你的上一步操作區域更遠,或者讓確認按鈕更加不明顯,這是在幫助用戶,或者說希望用戶在做負向操作時,有更多的思考空間和時間,規避誤操作的影響。

           

          在《看懂設計》這個系列里,我會選擇性地對在交互設計中常常被應用的設計心理學、方法論等進行簡潔有案例的解析,例如大家耳熟能詳的交互設計7大定律、斯金納箱理論、邊際效應、錨定效應、格式塔理論等等讓大家盡可能地在實際案例中找到它們的應用,而不是讓這些方法論成為我們腦海中的空中樓閣,知道、聽說過,但是不會應用。

          轉自:站酷-鹿爺不是咸魚 


          日歷

          鏈接

          個人資料

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

          存檔

          99久久精品国产麻豆| 欧美噜噜久久久XXX| 2020久久精品国产免费| 蜜臀av性久久久久蜜臀aⅴ麻豆| 色综合久久中文字幕无码| 国产精品成人无码久久久久久| 久久人人爽人人澡人人高潮AV | 久久影院午夜理论片无码| 久久乐国产精品亚洲综合 | 久久99精品国产麻豆| 91久久精品国产免费直播| 中文字幕久久精品| 品成人欧美大片久久国产欧美| 伊人久久大香线蕉精品不卡| 国内精品久久久久久久97牛牛| 欧美精品一区二区久久 | 久久久不卡国产精品一区二区 | 94久久国产乱子伦精品免费| 久久久久亚洲精品日久生情| 久久精品国产亚洲Aⅴ香蕉| 亚洲精品乱码久久久久久按摩| 精品久久久久中文字| 久久黄色视频| 国产叼嘿久久精品久久| 久久天堂电影网| 久久91精品综合国产首页| 久久国产亚洲精品无码| 天天久久狠狠色综合| 久久精品人人做人人爽电影蜜月| 漂亮人妻被中出中文字幕久久| 国产精品成人久久久| 欧美激情精品久久久久久久九九九| 伊人久久大香线蕉精品| 久久综合综合久久97色| 91精品国产91久久久久久蜜臀| 久久国产精品无码一区二区三区| 久久精品国产2020| 亚洲国产美女精品久久久久∴| 亚洲AV无一区二区三区久久| 久久亚洲精品成人AV| 国产精品久久久久久搜索|