設計師必讀:搜索欄設計的「潛規則」

2021-02-24 靜Design

人生的路口,向左還是向右,會讓你遇到不同的人,過上截然不同的生活。無所謂哪邊更好,不過是若干年後回頭望時,給你留下一個想像空間,假如當初.互動設計裡,一個圖標的擺放位置,比如搜索圖標,靠左還是靠右,則會分分鐘影響你的心情。

互動設計師日常問答場景再現:

問:為什麼你的設計裡這個放大鏡要放在中間,而不是放在右邊,或者放在左邊?
自言自語:為什麼?
自言自語:為什麼?
自言自語:為什麼?
答:因為蘋果這麼做的。


Mac OS-Finder界面


繼續答:網易也是這麼做的。


有道詞典


沉默片刻,繼續發問,
問:那為什麼QQ是放在左邊?為什麼微軟是放在右邊?


Mac QQ界面

Windows8 文件管理器界面

答:因為蘋果和網易的用戶體驗做的好。
問者表示不能接受。

對話到此,我自己也表示不能接受自己的解釋。

於是,我嘗試著用Fitts』 law來解釋這個問題,當然,我對這個定律應用的還不是那麼嫻熟。我接下來又要一本正經的胡扯了,目的還是一樣,讓自己更好的吸收這個知識,也希望可以達到拋磚引玉的效果。一切都是為了我自己。

首先先複述一下Fitts』 Law / 菲茨定律(費茨法則)


費茨法則 是一個人機互動以及人體工程學中人類活動的模型,它預測了快速移動到目標區域所需的時間是目標區域的距離和目標區域的大小的函數。費茨法則多用於表現 指、點 這個動作的概念模型,無論是用手或者手指進行物理接觸,抑或是在電腦屏幕上用假想的設備(例如滑鼠)進行虛擬的觸碰。 該法則由Paul Fitts 於 1954 年提出。
費茨法則可以用多種不同的公式進行表達。比較通用的是用於一維運動的 Shannon 公式(由MacKenzie,約克大學教授提出,並因為其與香農定理的相似而命名)。


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


T 是完成動作的平均時間。(傳統的命名方式,會寫成MT ,表示運動時間 Movement Time)

a 代表裝置(攔截)開始/結束的時間,b 表示該裝置本身的速度(斜率)。這些常數可以以測得數據進行直線近似的方式通過實驗取得。

D 是起始位置到目標中心的距離。(傳統上來說,研究者多用 A 來表示,意味著運動的振幅 Amplitude)

W 是目標區域在運動維向上的寬度。因為運動的最終點必須落在目標中心 ±W
⁄2以內,所以 W 也可以被認為是被允許的最終位置的容差。

從這個等式我們可以看出,小並且/或者遠的目標,需要更長的時間才能得以準確到達,這便是權衡指的動作的 速度的準確性。


這個公式對我來說,開始的時候很複雜。因為這裡出現了log2,據說這是我們中學時候學過的以2為底的對數..我表示完全沒有印象。不過,不慌,科技進步為懶蛋造福。


計算器界面

也許你會說,說什麼呢,看不下去了。好吧。

其實,你也不用計算。請注意這句話,a和b這些常熟可以測得數據進行直線近似的方式通過試驗取得。什麼意思?

意思就是,有人已經做過試驗了,比如coursera互動設計課程考試題裡有道計算題就告訴你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都是一樣的。區別就在D,距離這個因素上。距離越遠,移動時間越長。



為了一目了然,我稍微誇張了一下,以滑鼠停留的位置畫了一個直角三角形,顯而易見,斜邊大於直邊。

我們大膽猜測放在中間這個方案更優,因為更快。

為了證明這個猜測,我又去觀察了我貌美如花的視覺設計師偲偲小姐(她經常出現在我的用戶觀察作業裡,我所有的故事板的女一。)




你也試試,歡迎留言反饋。

由此,我大膽猜測。搜索圖標放在中間的方案比較優,更符合用戶習慣。同時,圖標放在中間,在視覺上也有一定聚焦作用,我覺得可以讓用戶移動時目標明確,可以減少參數A,從而讓移動速度更快。

最後我也大膽表白,研究用戶體驗,把玩競品,我喜歡網易。

文/鮮核桃(簡書作者)
原文連結:http://www.jianshu.com/p/d989586e29ad
著作權歸作者所有,本文已獲得原作者授權。

關於「菲茨定律」的另一篇文章,請在靜Design的微信對話窗口輸入「定律」二字,獲取另一篇文章來查看。

AD時間:

靜電的UI設計教室(第三期)6月5日開課,歡迎加靜電微信hixulei諮詢報名。



第一手原創設計文章及內容

盡在靜design(長按關注)

覺得本文漲姿勢

請賜個贊並在下方發表評論

相關焦點

  • 我的世界:被「玩壞」的裝備欄,來自P圖大神對裝備欄的七個設計
    在玩遊戲的同時,p圖大神們也熱衷於對遊戲畫面的設計,特別是將其與現實結合起來。一些趣味的合成表、生物搞怪模樣都出自他們之手,這些也深受玩家們喜愛。今天我們來看一看大神們設計的裝備欄又會是什麼趣味模樣!一、黃金套裝
  • 設計師的糾結:12個自相矛盾的圖形設計
    of graphic design」(12個自相矛盾的圖形),對於一些年輕的圖形設計師也許會有一些啟示。Adrian Shaugnhnessy1989年創立了自己的設計公司。如今,他經營著ShaughnessyWorks,一家結合設計諮詢與評論的公司。「甲方虐我千百遍,我待甲方如初戀,他日我若為甲方,虐遍天下設計院。」以此送給正掙扎在各種矛盾中的設計師們,共勉,祝你們心理健康,腸胃通暢。
  • 完整版:iPhone X 界面設計尺寸和適配
    標題寫著「iPhone X 適配、指南、設計稿」 內容卻是發布會回顧和手機介紹。索性自己去官網找素材寫一篇只針對iPhone X適配的貼子,與設計圖無關的內容通通不提過去,我們拿到的手機是方方正正的矩形,所以整個屏幕都可以看做是安全區域Safe Area,而如今由於iPhone X屏幕上的「劉海」以及屏幕四周採用圓角的設計,需要設計師對繪圖區域做出調整。
  • 世紀難題:設計師到底要不要會編程
    從Sketch到Pixate再到Framer,設計師的工具箱已變得越來越簡單有效,可以用來製作原型原型。製作應用程式的成本從未如此低。而且從來沒有這麼快。對於開發人員來說,這意味著他們可以開始學習設計了。
  • 植物還是動物,太佩服園藝設計師了!
    如果說景觀設計師是一種高大上的職業的話,那麼園藝造景師絕對不是一個口碑好的職業,枯燥乏味是人們對園藝工作者的第一印象,每天聽著無聊的音樂
  • 交通工具:設計師Iago Valiño為Dyson設計電動踏板車Moovo
    核心提示2020年,設計師Iago Valiño為戴森Dyson設計了一輛具有揮手感控和生物識別技術的概念電動踏板車
  • Win20驚豔設計:這才是Win10該有的樣子
    Windows 10被吐槽的地方很多,無論UI界面設計還是功能特性,都有很多完全可以做得更好的地方,也不斷有網友給微軟獻計獻策,打造自己心目中的概念設計
  • 未來的燈光設計師
    未來的燈光設計師燈光是空間的靈魂燈光設計是什麼?藝術、氣氛、層次、情感.隨著城市的發展和人民生活水平的提高,豐富多彩的燈光文化和高科技的燈光技術越來越多地受到人們的關注,燈光設計師逐漸成為獨具潛力的職業。2020年11月2日至11月8日,設計學院在華豐線場課堂成功舉辦燈光設計師培訓。設計學院2019級共28名學生參加培訓。
  • 設計師維權:蘋果Beats品牌被判賠償設計師2500萬美元!
    Dre 應支付設計師 Steven Lamar 2500萬美元設計版稅!Beats 的第一批設計是由 Steven Lamar 和一家名為 Pentagram 的公司製作生產的。▼隨後 Jimmy Iovine 將 Steven Lamar 介紹給了蘋果的零售副總裁。Lamar 想在 Apple Store 裡面出售 Beats 耳機,並且連產品包裝都是圍繞這一目標來設計的。
  • 娛樂圈潛規則!
    娛樂圈潛規則!     娛樂圈的「潛規則」由來已久,大家心照不宣。演員袁立最近便因為「潛規則」的事情鬧得挺「火」的。原因是浙江衛視《演員的誕生》導演以「確保晉級」為條件,勸服袁立上節目,結果袁立被淘汰了。
  • 「666666」 新年溜起來,[Midnight Design 半夜設計]邀請6位設計師跨界創作雞年賀卡
    這次 Midnight Design 半夜設計 邀請6 位橫跨品牌、音樂、書籍、藝文、插畫等各個領域都很溜的設計師,並與RETRO印刷JAM 攜手合作Risograph 孔版印刷的賀年卡套組,同時結合AR技術(擴增實境
  • 【元典•欣賞】設計師眼中的《穹頂之下》
    柴靜的霧霾紀錄片《穹頂之下》這兩天刷爆了我們的朋友圈,成為人人關心的話題,那麼設計師們是怎樣發出他們的呼聲的呢?雖然,一張海報,一幅作品遠遠不足以改變現實,但是希望能吸引更多人關注,讓我們通過設計的力量帶給大家更多的提醒和支持。
  • 室內設計師證書:黃志達推薦的行業頂尖證書
    室內設計行業已越來越為眾人熟知,隨著生活水平的提高,生活的品質與個性化需求也隨之而來,而這些恰恰可以通過室內設計師的協助來實現。
  • 羅子雄:如何成為一名優秀的設計師?
    羅子雄是稀土的第18位用戶,在設計界他是一個響噹噹的人物,很少有人像他這樣在 16 歲的時候創立了在設計界頗有影響力的網站,聚攏了那個時代幾乎最優秀的年輕設計師;也很少有人像他這樣,有勇氣嘗試諸多陌生的領域,從平面設計到網頁設計到遊戲開發,再到影視特效,再到移動平臺的互動設計。他從一個領域走向另一個領域,跨界多年從未感到不適,而且在每個領域都做到出類拔萃。
  • NISSAN人物微紀錄片:日產中國設計師劉恩泓
    NISSAN邀請的設計師是日產中國設計中心創意設計經理劉恩泓,在3分多鐘的影片裡,他向我們介紹了他的工作以及NISSAN Design  China設計團隊。劉恩泓是一名來自臺灣的設計師 ,曾主導設計了納智捷U6 SUV,2010年加入日產,目前是日產中國設計中心創意設計經理。2015年,他作為主設計師,與團隊 完成了日產新藍鳥的設計。
  • 白馬瓷磚攜手島城知名設計師,開業不忘公益!
    12月16日,是馬拉西亞進口(白馬)瓷磚開業的日子,同時也是「白馬紅心耀青島,為愛設計」公益活動的啟動儀式。「白馬紅心耀青島,為愛設計」公益活動由(進口陶瓷品牌)白馬瓷磚聯合山東青創工坊設計傳媒愛心發起,邀約島城知名設計師共同開展的,旨在呼籲島城建材裝飾設計圈朋友們積極獻愛心的公益活動。
  • 為大眾而設計:太陽能公益吊燈
    編輯手記知乎上最近有一個熱帖『「窮人買不起好設計」是真的嗎?』
  • 一日一技:直接在Chrome搜索單詞
    由於我經常使用有道詞典進行查詢,所以我的一般流程為:1.在瀏覽器輸入http://youdao.com/2.選擇翻譯語言為「中英」或者「英中」3.輸入要查詢的單詞4.點擊翻譯按鈕這個過程比較繁瑣,我們可以使用Chrome瀏覽器的快捷搜索功能來實現。首先在有道詞典上使用「中英」搜索一個中文的英文寫法,例如:開發。 如下圖所示。
  • 一個設計師眼中的Google: 宇宙裡最值錢的一個偶然
    Google搜索的天才設計我更傾向於在三個層面去分析設計。大家可以去看我的"Design thinking, unboxed"一文。1、戰略設計:打造一種有意義的體驗。2、互動設計:打造一種有用處的體驗。3、情感設計:打造一種愉悅性的體驗。
  • 矮凳網發起「設計志願者」公益設計活動:助力解決各方「缺設計」難題
    設計師又該如何用設計為國家貢獻自己的一份力?我們深知設計擁有改變世界的力量設計具備超前的影響力設計師一直在為解決世界的難題而不斷努力>我們在此倡導設計師有一份光發一份熱利用設計幫助更多的困難人群同時也在公益實踐中深化公眾對設計的感知以提升設計的社會影響