1. 理論表述
任意一點移動到目標中心位置所需要的時間,與目標距離正相關,與目標大小負相關。
2. 研究背景
1954 年,Paul Morris Fitts 根據信息類比提出一個假設,該假設能夠量化「移動到目標選擇任務」這個操作的難度「1」。雖然該假設還未涉及到人機交互中的具體參數,卻給了后來的交互研究人員極大的啟發。
我們現在經??吹降?Shannon 公式(即上面那個公式)是由約克大學教授 Scott Mackenzie 在 1992 年提出的一個菲茨公式的變體「2」,該變體被廣泛地應用于需要指針操作的人機交互系統當中。作為交互設計和 UI 設計的理論基礎,它更簡潔明了地闡述了時間 T 和目標距離 D 以及目標大小 W 之間的函數關系:因為以 2 為底的指數函數是遞增函數,所以,T 與 D 正相關(D 越大 T 越大),而與 W 負相關(W 越大 T 越小)。
人們做出一個移動指針的操作通常需要兩步:
菲茨定律所包含的兩點內容:
綜合兩者來看,菲茨定律中的 D 在第一步中起更為明顯的作用,而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示,主要也是從這兩方面入手。
案例1:系統右鍵菜單,微信彈出菜單
最典型的例子就是菜單,無論是 PC/Mac 中的右鍵菜單還是微信聊天頁里面的加號鍵都遵循著這一原則。作為用戶,點擊這類按鈕之后一定會有后續的任務和操作,所以這些任務都被安排在了距離所點擊區域更近的菜單中。
案例2:夸克和 Safari 的 url 輸入框位置比較
另外一個例子是瀏覽器的搜索欄輸入框,現在已經有一些瀏覽器(比如簡單搜索、夸克)會將輸入框以及一些其他更常用操作置于底部,這是因為我們正常握持手機時,大拇指離底部更近,所以需要進行點擊操作的話底部的輸入框操作起來更方便,也更快。
這一點在現今的 APP 中做得已經非常到位了。
案例3:哈羅出行
作為哈羅單車租用操作的入口,頁面中的「開鎖」按鈕做得足夠大,用戶可以輕易快速地點擊到這個使用頻率最大的按鈕。登錄(也就是開始)按鈕也是一樣的道理。
還有一個比較特殊的就是對于邊角的利用,無論是在 Windows 還是在 MacOS 中,邊角總是有一些比較重要的操作,比如 Windows 的「開始菜單」(在左下角),MacOS 的 Dock 欄(在底部)以及頂部狀態欄,包括 Mac 特有的觸發角。
案例4:MacOS 觸發角設置
為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權重相當之高的組件或者操作呢?在硬件設備中邊角是一個極其特殊的存在,由于指針再怎么移動都不可能超越屏幕邊界,只能停留在邊界上,所以邊界對于用戶的操作來說是「無限可觸發」的,這有什么意義呢?這意味著對于隱性存在的目標來說,W 趨于無限大。
既然 W 趨于無限大,根據公式時間 T 就趨于常量 a。
結論就是無論指針距離目標物多遠,所需要花費的時間都已經達到了理論的最小值,輕松且高效。而在移動 APP 中同樣有邊角的應用,比如最近拿了 Google Play 設計大獎的 Drops。
案例5:Drops
創新的交互將屏幕底邊充分的利用了起來,只要將單詞移到底部,就代表用戶已經記住這個單詞了。注意整個底部都是可以觸發的,而不僅僅是腦袋那個圓形區域。本來「移動」這個操作對于「按鈕」來說更加繁瑣,但是在 Drop 的應用場景下這樣的移動反而沒有覺得麻煩,滑起來相當帶勁。
菲茨定律給我們的啟示通常都是正向的,都是以縮短用戶的操作時間為主要目標,但也有一些場景需要反其道而行之。比如如果遇到需要用戶謹慎的操作時,可以逆向運用菲茨定律,增加操作的復雜度。
案例6:iPhone 關機和微信刪除聊天窗
iPhone 的滑動關機延長了用戶關機操作的時間,以提醒用戶此操作為不可逆,需要謹慎操作。微信也是同理,甚至還縮小了刪除按鈕的大小,以達到警示的目的。
另一個典型就是彈出窗口的關閉按鈕。
案例7:Luckin Coffee 的彈出窗
彈出窗口里一般都包含了開發商的推廣、廣告、運營活動等等,所以開發商會希望用戶花盡量多的時間去注意到它們的內容,這時候雞賊的開發商會把關閉按鈕做得又小又遠(遠離視覺中心),讓用戶花更多的時間去尋找和點擊它們,效果拔群。
注意點1:D 不能過分短
過分短的間距不僅無法提升操作效率,反而會造成視覺壓力從而降低用戶體驗。
反面案例1:唯物魔改版
按照菲茨定律魔改的唯物登錄頁面,理應操作得更迅捷方便,然而實際上除了視覺上造成額外的擁擠感、破壞畫面負空間構成之外,我嘗試著點了一下覺得十分逼仄擠手,所以過度縮減按鈕間的間距并不合理。
注意點2:W 不能過分大
大尺寸的點擊目標確實能夠有效地降低用戶操作成本,但是過分大的目標也會很直接地破壞畫面的平衡,浪費屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關系,當按鈕已經足夠大時,再增大就沒有什么體驗上的提升了,如下圖所示。
反面案例2:KEEP 魔改版
與唯物類似,當按鈕大到一定程度之后,會對畫面造成恐怖的破壞效果。
轉載請注明:優設網
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章:
手機及小程序界面設計之一:讓設計更有說服力的20條經典原則:菲茨定律
手機及小程序界面設計之六:讓設計更有說服力的20條經典原則:菲茨定律
手機及小程序界面設計之八:如何適配iPhone X?來看滴滴出行的實戰案例復盤!
現在大多數的 PM /交互/ UI 設計師,在設計產品的時候都是以 iOS 為基準 思考產品上的各種功能邏輯、交互狀態,而很容易忽略了某些功能在 Android 里并不能「一稿適應兩端」,部分產品差異在安卓上是不一樣的。
所以本文就講下 Android 和 iOS 9大產品/交互差異,希望你在日后的產品設計時,可以考慮到更多層面的知識點。
對在于一些虛擬商品的支付上,如 vip 會員、xx幣,xx豆。iOS 和 Android 就存在不同的支付規則:Android 基本無限制,無抽成。而 iOS 限制比較多,而且要抽成大約 30% 的手續費。
舉個例子:同樣充值 30 元,Android 端會得到 300 金幣,而在 iOS 中,只有 210 金幣。正因這個抽成規則的不同(沒辦法,這是蘋果硬性規定的),才會出現各種平臺的虛擬貨幣,在 Android 和 iOS 中的充值比例是不一樣的,如快手:
所以對于虛擬商品在 iOS 端的抽成規則,在產品設計時一定得考慮清楚,因為這關系產品的商業和盈利模式。通常有 2 種解決思路:
A. 讓用戶承擔 30% 的抽成:
同樣的價格,iOS 用戶得到的商品少些
如同樣充值 30 元,Android 端會得到 300 金幣,而在 iOS 中,只有 210 金幣。像快抖音、陌陌等各種貨幣充值。
同樣的商品,iOS 用戶支付更高的費用
如 3 個月的 vip 會員,Android 端定價是 58 元,iOS 端則可以設為 68 元。如優酷、騰訊視頻的 vip 會員價格。
B. 公司自己承擔 30% 的抽成:
如 iOS 端充值 30 元,公司實收 21 元,但 iOS 用戶能得到和 Android 一樣的 300 個金幣。(理論上是有這個解決思路,但現實中很少有公司去實現,畢竟抽成成本就擺在那里)
另外還需要注意的是:因為抽成規則的不同,對于同一個 ID 的賬戶余額,在 Android 和 iOS 端中是不能通用的。因此在產品設計時需要將這點告知用戶,預防用戶犯錯、以及惡意刷幣。
Android 由于開源的特性,因此對接的都是第三方支付平臺,如微信支付、支付寶、銀聯卡等。 而 iOS 出于系統的封閉性和安全性考慮,只能調用蘋果自己的支付系統:登錄 Apple ID ,然后用授權的支付方式(支付寶、銀聯卡)進行付款。
「狀態欄」也就是我們手機界面最頂部的電池欄,它除了可以在不同背景里切換顏色外,在交互的觸發上,Android 和 iOS 中也各不相同。
iOS :用戶在 Y 軸滾動了很長內容時,點擊狀態欄可以快速回到初始位置。
Android :無論用戶滾動了多長內容,都是點擊無任何效果。
雖然這一交互差異是 iOS 專有的,但它卻啟發我們一個新的設計思路:在必要的時候,狀態欄可以為產品承載新的交互狀態。如網易的 LOFTER( iOS 端),用戶離開音樂播放界面時,狀態欄就用于顯示音樂信息和操作入口,方便用戶在瀏覽其他內容時可以快速關閉音樂,極大提升了用戶的操作效率。
這種大多應用于運營的「拉新」場景,為了能讓新用戶得到好處(紅包、優惠券、更好看的內容等)。通常會讓新用戶下載產品 APP 領取。而由于 Android 與 iOS 的下載方式不同,會帶來不同的交互狀態和產品邏輯。
Android :可以在當前頁面(后臺)下載,也可以在應用商店下載;過程中可以顯示進度,且允許用戶暫停下載;下載完成后調起安裝頁面,用戶可以取消安裝,也可以自動安裝……正因為 Android 下載軟件的各種便捷性,所以才會帶來各種交互狀態:未下載、下載中、暫停中、已下載但未安裝、已安裝。這些都是交互設計師需要特別注意的,每個不同的狀態背后都會不同的產品邏輯。
iOS :只能跳轉到 App Store 里下載,所有下載流程和狀態都是在那完成的,可以脫離開活動頁面,相比于 Android 的下載方式就簡單很多。跳轉的方式可以是全屏幕,也可以是半屏。
Android :由于安卓的開源特性,當有新版本時都會提示用戶更新,且每個產品內部都帶有「版本更新」入口。而更新的方式可分 2 種:
iOS :而 iOS 端出于對用戶體驗的考慮,是禁止向用戶提示版本更新信息的。這也是為什么絕大部分的 iOS 產品,都是沒有「版本更新」入口的原因(像 QQ 、支付寶、百度網盤等大廠產品)。
即使有,點擊了也直接跳轉到 App Store 查看版本情況。且下載渠道都固定在 App Store 里。理所應當的,軟件的更新方式也只能在 App Store 里進行,無法做到與 Android 一樣后臺下載、后臺更新。
在手機鍵盤里輸入文字時,iOS 由于系統的限制,對文字的發送指令只能在鍵盤上來完成,因此 iOS 用戶的交互操作都全部集中在鍵盤右下角。
而 Android 端就靈活很多,不僅可以在鍵盤上執行發送指令,也可以在輸入欄/搜索欄周邊新增操作入口。
長按一張圖片后,都會彈出一個列表浮層,因為 iOS 手機只有一個「Home 鍵」 而已,為方便用戶退出浮層才增加了「取消」入口。
而 Android 手機本來就有「返回」虛擬鍵,安卓用戶的退出/返回行為都習慣于通過虛擬鍵觸發,所以多做一個「取消」的意義性不大。
iOS 端一直教育著用戶使用「左滑」刪除列表信息,所有的刪除功能都是支持「左滑」來實現的。
而 Android 系統大部分只能通過「長按」來觸發編輯狀態,其中就包括了刪除功能。
不過現在也有極少數的產品,正在逐漸打破這兩端間的「刪減」界限,比如網易郵箱(Android)就做到了左滑刪除信息。
當我們第一次打開產品、允許了獲取消息通知的權限后,所有的信息傳輸都會基于服務器進行推送。而兩端在這塊的推送機制又有所不同:
iOS :所有新信息都會實時推送到你的手機里,即使你關閉了軟件,還是一樣會收到提示。就算是你處于斷網狀態,信息也會先儲存于蘋果服務器,等你聯網時再一次性把收到的信息推送給你。既釋放手機內存,又不會讓用戶遺漏有新消息。
Android :而安卓則不同,你若退出了產品,數據的推送只有等你再次打開產品時,才會通知你有多少新信息。雖然減少了對用戶的干擾性,但也增加了服務器數據儲存的壓力,還容易耽誤用戶接收新消息。
也就是我們手機的搜狗輸入法鍵盤,在微信聊天內、手機短信里復制了一段內容后,由于 Android 與 iOS 的平臺特性差異,會給兩端用戶帶來不同的交互差異。
iOS :復制完文字后,打開輸入法鍵盤會顯示來自剪切板的文字內容。用戶只需點擊,即可將文字復制在搜索欄、輸入欄等需要文字填寫的操作區域里,無需觸發「粘貼」操作。
Android :而有些安卓機(如小米/錘子/樂視等),無論你復制了什么信息(文字、數字、網址等),都很難實現輸入法里的「剪切板」功能。用戶需要觸發「粘貼」功能,才能輸入剛剛的復制內容。
而對于特定的信息類型:如網址。用戶復制網址往往都帶有極強的目標性、搜索性,一些瀏覽器產品會預判用戶這一操作行為,將復制的網址前置展示出來,以抵消 Android 端對于復制文字帶來的系統限制。如 QQ 瀏覽器(安卓端)就有 2 種解法方法:
方法1:利用安卓系統的消息權限,在手機界面的頂部彈出網址欄提示,無論是在微信還是短信中,復制網址后都能快速地觸達目標。
方法2:復制網址后打開搜索功能,會將網址自動定位并粘貼到搜索欄中,便于用戶查詢。
而 UC 和百度也有類似的解決辦法:將復制后的廣泛信息(文字/數字/網址/郵箱地址等等)嵌入在搜索框下方,用戶點擊就能搜索。
這也是一種妥當的解決方法,因為用戶可復制的信息類型特別廣泛、目標不是很清晰。無法準確判斷出用戶一定會有搜索訴求。所以才將復制后的信息放在搜索框下面,而不是自動粘貼到搜索框中,既考慮了用戶目標,又兼顧了操作效率。
以上就是 Android 與 iOS 的差異總結,若有描述得不當請多指教!下面是總結文件。
轉載請注明:優設網
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章:
手機及小程序界面設計之一:讓設計更有說服力的20條經典原則:菲茨定律
手機及小程序界面設計之六:讓設計更有說服力的20條經典原則:菲茨定律
手機及小程序界面設計之八:如何適配iPhone X?來看滴滴出行的實戰案例復盤!
@布萊恩臣 :iPhone X 在 2017 年上市以來,全面屏手機就開始逐漸普及。iPhone 8 的 4.7 寸屏幕到目前最新機型 iPhone 11 的 6.1 寸屏幕,以及 Pro Max 系列的 6.5 寸,各種各樣的劉海屏、水滴屏、挖孔屏、折疊屏等等屏幕方式隨之出現,物理 Home 鍵都被舍棄改成虛擬按鍵,甚至是沒有虛擬按鍵的手勢滑動操作。
而這些手機都有一個共同的特點,就是屏幕尺寸越來越大。屏幕尺寸變大后,手握手機的方式和界面交互操作方式也隨之改變,那對于設計而言,是否也應該隨之進行改變呢?
想單手點擊屏幕的操作,需要手足夠靈活進行一輪操作才能夠到屏幕上方,過程中稍有不慎,手機隨時會砸地上。作者的手機屏幕已經修了幾次,差不多趕上一臺二手機的價格了。
在 2013 年,國外設計師 Steven Hoober 發表了一篇《手機界面設計》的研究報告中,對一千三百名手機使用者進行量化研究數據:
據當時研究的數據可以看出,有近半的用戶是單手使用手機(現在肯定不止)。當用戶單手操作的時候,實際拇指可以觸摸到的區域是如下圖這樣的。綠色區域是拇指的正常操作區域,黃色區域是拇指能觸碰到的最大限度范圍,紅色區域是觸摸比較困難的區域。
然而這份研究報告的數據是在 2013 年發布,當時還沒有全面屏的出現,如果把上面研究結論的區域,套用到如今的手機屏幕尺寸上,頂部的紅色區域會占更大比例。以 iPhone 11 尺寸比例作為參考,如下圖:
拇指可操作范圍大約在 3 分之 2 的區域,可見想要觸碰到紅色區域是有一定難度的。也正是因為這份報告只適合當時的手機市場情況,在當今已經不適用了,因此需要重新去考慮如何為大屏幕手機進行界面設計。
根據 2020 年手機UX設計趨勢,大屏幕設計將會成為熱點。根據數據報告中有說明,2018 年 10 月使用大屏手機的用戶比例是16.3%,到 2019 年 12 月,該數據已經上升到 41%,并且會在未來更多新機型的出現中持續上漲。
那隨著大屏幕手機的普及,就意味著設計師在設計界面的時候,要為大屏幕手機的使用場景進行界面調整,避免用戶難以使用的體驗問題。以下是我整理的一些設計建議方案:
1. 頭部區域設計更高
通過將標題欄的信息區域放大,盡量把主要操作內容向拇指區域靠近。
2. 常用導航與操作居于底部
比起導航欄放在頂部,更適合大屏幕手機的方式是將導航和重要操作盡量往屏幕底部放置。
3. 手勢操作頁面切換與返回
抖音和 Instagram story 等短視頻應用界面都是通過手勢滑動屏幕的方式,對頁面進行切換,操作的學習成本很低,而且主要操作也在屏幕底部。這種操作方式也會在今年越來越多地被使用。
4. 提示彈窗從底部升起
常用的彈窗,很多是設計在屏幕中間彈出,為了適配大屏幕,不妨嘗試從底部彈出,關鍵選項都能輕松選擇,提高轉化率。
5. 使用大卡片
屏幕尺寸變大以后,使用整張大卡片可以讓用戶瀏覽內容更專注,大面積的配圖和留白,也能提高用戶的點擊欲望。
除此以外,作為手機廠商,在發布大屏幕手機的時候,就有對界面操作做了一些對應系統級的設計調整,比如界面下拉懸停,鍵盤單手模式,屏幕邊緣滑動返回等等。
大屏幕尺寸已經是趨勢,屏幕大意味著內容可以更大限度地得到展示,有利于產品提供更多的服務,不再糾結首屏無法展示完主要內容。在這個信息爆炸的時代,用戶也不再滿足于小屏幕的瀏覽方式??梢哉f,大屏幕已經是無法改變的趨勢。與其擔心問題到來,設計師更應該思考如何去適應產品的快速迭代,不斷更新自己的設計思維模型,更全面思考問題,產出更合理、體驗更好的設計方案。
希望本文內容可以對你有所啟發。
轉載請注明:優設網
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章:
手機及小程序界面設計之一:讓設計更有說服力的20條經典原則:菲茨定律
手機及小程序界面設計之六:讓設計更有說服力的20條經典原則:菲茨定律
手機及小程序界面設計之八:如何適配iPhone X?來看滴滴出行的實戰案例復盤!
1. 理論表述
任意一點移動到目標中心位置所需要的時間,與目標距離正相關,與目標大小負相關。
2. 研究背景
1954 年,Paul Morris Fitts 根據信息類比提出一個假設,該假設能夠量化「移動到目標選擇任務」這個操作的難度「1」。雖然該假設還未涉及到人機交互中的具體參數,卻給了后來的交互研究人員極大的啟發。
我們現在經??吹降?Shannon 公式(即上面那個公式)是由約克大學教授 Scott Mackenzie 在 1992 年提出的一個菲茨公式的變體「2」,該變體被廣泛地應用于需要指針操作的人機交互系統當中。作為交互設計和 UI 設計的理論基礎,它更簡潔明了地闡述了時間 T 和目標距離 D 以及目標大小 W 之間的函數關系:因為以 2 為底的指數函數是遞增函數,所以,T 與 D 正相關(D 越大 T 越大),而與 W 負相關(W 越大 T 越?。?
人們做出一個移動指針的操作通常需要兩步:
菲茨定律所包含的兩點內容:
綜合兩者來看,菲茨定律中的 D 在第一步中起更為明顯的作用,而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示,主要也是從這兩方面入手。
案例1:系統右鍵菜單,微信彈出菜單
最典型的例子就是菜單,無論是 PC/Mac 中的右鍵菜單還是微信聊天頁里面的加號鍵都遵循著這一原則。作為用戶,點擊這類按鈕之后一定會有后續的任務和操作,所以這些任務都被安排在了距離所點擊區域更近的菜單中。
案例2:夸克和 Safari 的 url 輸入框位置比較
另外一個例子是瀏覽器的搜索欄輸入框,現在已經有一些瀏覽器(比如簡單搜索、夸克)會將輸入框以及一些其他更常用操作置于底部,這是因為我們正常握持手機時,大拇指離底部更近,所以需要進行點擊操作的話底部的輸入框操作起來更方便,也更快。
這一點在現今的 APP 中做得已經非常到位了。
案例3:哈羅出行
作為哈羅單車租用操作的入口,頁面中的「開鎖」按鈕做得足夠大,用戶可以輕易快速地點擊到這個使用頻率最大的按鈕。登錄(也就是開始)按鈕也是一樣的道理。
還有一個比較特殊的就是對于邊角的利用,無論是在 Windows 還是在 MacOS 中,邊角總是有一些比較重要的操作,比如 Windows 的「開始菜單」(在左下角),MacOS 的 Dock 欄(在底部)以及頂部狀態欄,包括 Mac 特有的觸發角。
案例4:MacOS 觸發角設置
為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權重相當之高的組件或者操作呢?在硬件設備中邊角是一個極其特殊的存在,由于指針再怎么移動都不可能超越屏幕邊界,只能停留在邊界上,所以邊界對于用戶的操作來說是「無限可觸發」的,這有什么意義呢?這意味著對于隱性存在的目標來說,W 趨于無限大。
既然 W 趨于無限大,根據公式時間 T 就趨于常量 a。
結論就是無論指針距離目標物多遠,所需要花費的時間都已經達到了理論的最小值,輕松且高效。而在移動 APP 中同樣有邊角的應用,比如最近拿了 Google Play 設計大獎的 Drops。
案例5:Drops
創新的交互將屏幕底邊充分的利用了起來,只要將單詞移到底部,就代表用戶已經記住這個單詞了。注意整個底部都是可以觸發的,而不僅僅是腦袋那個圓形區域。本來「移動」這個操作對于「按鈕」來說更加繁瑣,但是在 Drop 的應用場景下這樣的移動反而沒有覺得麻煩,滑起來相當帶勁。
菲茨定律給我們的啟示通常都是正向的,都是以縮短用戶的操作時間為主要目標,但也有一些場景需要反其道而行之。比如如果遇到需要用戶謹慎的操作時,可以逆向運用菲茨定律,增加操作的復雜度。
案例6:iPhone 關機和微信刪除聊天窗
iPhone 的滑動關機延長了用戶關機操作的時間,以提醒用戶此操作為不可逆,需要謹慎操作。微信也是同理,甚至還縮小了刪除按鈕的大小,以達到警示的目的。
另一個典型就是彈出窗口的關閉按鈕。
案例7:Luckin Coffee 的彈出窗
彈出窗口里一般都包含了開發商的推廣、廣告、運營活動等等,所以開發商會希望用戶花盡量多的時間去注意到它們的內容,這時候雞賊的開發商會把關閉按鈕做得又小又遠(遠離視覺中心),讓用戶花更多的時間去尋找和點擊它們,效果拔群。
注意點1:D 不能過分短
過分短的間距不僅無法提升操作效率,反而會造成視覺壓力從而降低用戶體驗。
反面案例1:唯物魔改版
按照菲茨定律魔改的唯物登錄頁面,理應操作得更迅捷方便,然而實際上除了視覺上造成額外的擁擠感、破壞畫面負空間構成之外,我嘗試著點了一下覺得十分逼仄擠手,所以過度縮減按鈕間的間距并不合理。
注意點2:W 不能過分大
大尺寸的點擊目標確實能夠有效地降低用戶操作成本,但是過分大的目標也會很直接地破壞畫面的平衡,浪費屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關系,當按鈕已經足夠大時,再增大就沒有什么體驗上的提升了,如下圖所示。
反面案例2:KEEP 魔改版
與唯物類似,當按鈕大到一定程度之后,會對畫面造成恐怖的破壞效果。
參考資料