不向左也不向右膘侮,剛好擺中間

人生的路口屈糊,向左還是向右,會讓你遇到不同的人琼了,過上截然不同的生活逻锐。無所謂哪邊更好,不過是若干年后回頭望時雕薪,給你留下一個想象空間昧诱,假如當初當初沒做設(shè)計......用戶體驗設(shè)計里,一個圖標的擺放位置所袁,比如搜索圖標盏档,靠左還是靠右,則會分分鐘影響你的心情燥爷。

UX設(shè)計師日常問答場景再現(xiàn):

問:為什么你的設(shè)計里這個放大鏡要放在中間蜈亩,而不是放在右邊,或者放在左邊前翎?
自言自語:為什么稚配?
自言自語:為什么?
自言自語:為什么港华?
答:因為蘋果這么做的道川。


蘋果1.png

繼續(xù)答:網(wǎng)易也是這么做的。


有道1.png

沉默片刻立宜,繼續(xù)發(fā)問冒萄,
問:那為什么QQ是放在左邊?為什么微軟是放在右邊橙数?
QQ.png

PC.png

答:因為蘋果和網(wǎng)易的用戶體驗做的好尊流。
問者表示不能接受。

對話到此灯帮,我自己也表示不能接受自己的解釋奠旺。
于是蜘澜,我嘗試著用Fitts’ law來解釋這個問題,當然响疚,我對這個定律應(yīng)用的還不是那么嫻熟。我接下來又要一本正經(jīng)的胡扯了瞪醋,目的還是一樣忿晕,讓自己更好的吸收這個知識,也希望可以達到拋磚引玉的效果银受。一切都是為了我自己践盼。
首先先復(fù)述一下Fitts’ Law / 菲茨定律(費茨法則)

費茨法則 是一個人機互動以及人體工程學(xué)中人類活動的模型,它預(yù)測了快速移動到目標區(qū)域所需的時間是目標區(qū)域的距離和目標區(qū)域的大小的函數(shù)宾巍。費茨法則多用于表現(xiàn) 咕幻、 這個動作的概念模型,無論是用手或者手指進行物理接觸顶霞,抑或是在電腦屏幕上用假想的設(shè)備(例如鼠標)進行虛擬的觸碰肄程。 該法則由Paul Fitts 于 1954 年提出。
費茨法則可以用多種不同的公式進行表達选浑。比較通用的是用于一維運動的 Shannon 公式(由MacKenzie蓝厌,約克大學(xué)教授提出,并因為其與香農(nóng)定理的相似而命名)古徒。

T = a + b \\log_2 \\Bigg(1+\\frac{D}{W}\\Bigg)
T = a + b \\log_2 \\Bigg(1+\\frac{D}{W}\\Bigg)

T 是完成動作的平均時間拓提。(傳統(tǒng)的命名方式,會寫成MT 隧膘,表示運動時間 Movement Time
a 代表裝置(攔截)開始/結(jié)束的時間代态,b 表示該裝置本身的速度(斜率)。這些常數(shù)可以以測得數(shù)據(jù)進行直線近似的方式通過實驗取得疹吃。
D 是起始位置到目標中心的距離蹦疑。(傳統(tǒng)上來說,研究者多用 A 來表示互墓,意味著運動的振幅 Amplitude
W 是目標區(qū)域在運動維向上的寬度必尼。因為運動的最終點必須落在目標中心 ±W
?2以內(nèi),所以 W 也可以被認為是被允許的最終位置的容差篡撵。
從這個等式我們可以看出判莉,小并且/或者遠的目標,需要更長的時間才能得以準確到達育谬,這便是權(quán)衡指的動作的 速度的準確性券盅。
Fitts_law.png

這個公式對我來說,開始的時候很復(fù)雜膛檀。因為這里出現(xiàn)了log2,據(jù)說這是我們中學(xué)時候?qū)W過的以2為底的對數(shù).......我表示完全沒有印象锰镀。不過娘侍,不慌,科技進步為懶蛋造福泳炉。


計算器.jpg

也許你會說憾筏,說什么呢,看不下去了花鹅。好吧氧腰。

其實,你也不用計算刨肃。請注意這句話古拴,a和b這些常數(shù)可以測得數(shù)據(jù)進行直線近似的方式通過試驗取得。什么意思真友?
意思就是黄痪,有人已經(jīng)做過試驗了,比如coursera交互設(shè)計課程考試題里有道計算題就告訴你a和b的值盔然。

The Fitts’ law formulation to use is: t = a + b·log2(d/w). For the fixed cost portion a, use 0.8 seconds. For the control rate b of the mouse use 0.204 s/b (the reciprocal of 4.9 b/s).
......

假如我要對比Icon放置的位置桅打,對鼠標移動的速度的影響,那也就是意味者使用 t = a + b·log2(d/w)這個公式時轻纪,a.b和w都是一樣的油额。區(qū)別就在D,距離這個因素上刻帚。距離越遠潦嘶,移動時間越長。



為了一目了然崇众,我稍微夸張了一下掂僵,以鼠標停留的位置畫了一個直角三角形,顯而易見顷歌,斜邊大于直邊锰蓬。
我們大膽猜測放在中間這個方案更優(yōu),因為更快眯漩。

到這里芹扭,只能算我裝B成功。也許可以唬住一部分人赦抖。但是舱卡,不管是裝B也好,真研究也好队萤,這條定律請作為設(shè)計師的你知曉轮锥,它很重要。

如果遇到有人直接跟你說要尔,我數(shù)學(xué)不好舍杜,不要聽新娜。或者有人表現(xiàn)出了極大的興趣既绩,較真概龄。。熬词。旁钧。。
比如我互拾。我后來又嘗試了把窗口最大化,最小化嚎幸,自定義窗口大小等等操作颜矿。用這個定律來解釋貌似也有點不是那么確定。但是嫉晶,菲茨定律對于設(shè)計來說骑疆,真的是個重要的東西。它至少給我指明了方向替废。我下意識的去點搜索輸入框的時候箍铭,我發(fā)現(xiàn)了,無論圖標在哪椎镣,我點的都是中間诈火。
我又去觀察了我貌美如花的視覺設(shè)計師偲偲小姐(她經(jīng)常出現(xiàn)在我的用戶觀察作業(yè)里,我所有的故事板的女一状答。)


鼠標默認移動位置蘋果.JPG

鼠標默認移動到的位置qq.JPG

鼠標默認移動到的位置pc.jpg

她也是點中間冷守。
你點哪里,請試試惊科,歡迎留言反饋拍摇。

由此,我大膽猜測馆截。搜索圖標放在中間的方案比較優(yōu)充活,更符合用戶習(xí)慣。因為不論圖標放哪里蜡娶,人們都習(xí)慣去點中間混卵。所以,蘋果的設(shè)計就把圖標放中間翎蹈,迎合用戶習(xí)慣淮菠。

同時,圖標放在中間荤堪,在視覺上也有一定聚焦作用合陵,我覺得可以讓用戶枢赔,尤其是新手用戶可以在很短的時間內(nèi)明確移動時目標,減少參數(shù)A拥知,從而讓移動速度更快踏拜。
最后我也大膽表白,研究用戶體驗低剔,把玩競品速梗,我喜歡網(wǎng)易。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末襟齿,一起剝皮案震驚了整個濱河市姻锁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌猜欺,老刑警劉巖位隶,帶你破解...
    沈念sama閱讀 219,110評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異开皿,居然都是意外死亡涧黄,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3 395
  • 文/潘曉璐 我一進店門赋荆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來笋妥,“玉大人,你說我怎么就攤上這事窄潭〈盒” “怎么了?”我有些...
    開封第一講書人閱讀 165,474評論 0 356
  • 文/不壞的土叔 我叫張陵狈孔,是天一觀的道長信认。 經(jīng)常有香客問我,道長均抽,這世上最難降的妖魔是什么嫁赏? 我笑而不...
    開封第一講書人閱讀 58,881評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮油挥,結(jié)果婚禮上潦蝇,老公的妹妹穿的比我還像新娘。我一直安慰自己深寥,他們只是感情好攘乒,可當我...
    茶點故事閱讀 67,902評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著惋鹅,像睡著了一般则酝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上闰集,一...
    開封第一講書人閱讀 51,698評論 1 305
  • 那天沽讹,我揣著相機與錄音般卑,去河邊找鬼。 笑死爽雄,一個胖子當著我的面吹牛蝠检,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播挚瘟,決...
    沈念sama閱讀 40,418評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼叹谁,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了乘盖?” 一聲冷哼從身側(cè)響起焰檩,我...
    開封第一講書人閱讀 39,332評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎订框,沒想到半個月后锅尘,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,796評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡布蔗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了浪腐。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片纵揍。...
    茶點故事閱讀 40,110評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖议街,靈堂內(nèi)的尸體忽然破棺而出泽谨,到底是詐尸還是另有隱情,我是刑警寧澤特漩,帶...
    沈念sama閱讀 35,792評論 5 346
  • 正文 年R本政府宣布吧雹,位于F島的核電站,受9級特大地震影響涂身,放射性物質(zhì)發(fā)生泄漏雄卷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3 331
  • 文/蒙蒙 一蛤售、第九天 我趴在偏房一處隱蔽的房頂上張望丁鹉。 院中可真熱鬧,春花似錦悴能、人聲如沸揣钦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽冯凹。三九已至,卻和暖如春炒嘲,著一層夾襖步出監(jiān)牢的瞬間宇姚,已是汗流浹背匈庭。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留空凸,地道東北人嚎花。 一個月前我還...
    沈念sama閱讀 48,348評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像呀洲,于是被迫代替她去往敵國和親紊选。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,047評論 2 355

推薦閱讀更多精彩內(nèi)容