首頁 > 網頁教程 > 設計分享 > 分享:幫你讀懂交互設計的7大定律

分享:幫你讀懂交互設計的7大定律

時間:2019-10-18    來源:UXD筆記

在交互設計領域,有很多經過時間檢驗過的定律及法則,來作為設計的指導原理,它能夠幫助產品設計者對界面上的各種視覺元素進行合理評估,從而發現一些使用過程中的可用性問題,還可以根據這些法則從界面的維度來改善操作效率和使用滿意度。

我們在產品設計的過程中會經歷非常多的決策階段,大到一個功能流程的閉環設計,小到思考一個元素的最合理布局,在這些場景中,我們首選的解決方案當然是更適合當前功能特性和使用場景的方案,如果沒有合適的方案或者在幾種方案面前猶豫不決時,一般都會選擇遵守設計規則和接近設計規則的那個方案。這些所謂的規則也是交互設計的基礎理論和方法論,我們能否在工作中信手拈來并且靈活運用它呢?同時也為了將來能夠掌握「舌戰群猿」這門高級技能,我們還是要從打牢基礎開始。今天就讓我們回到起點,聊一聊交互設計的 7 大定律。

費茨定律

費茨定律是人機交互和人體工程學中人類活動的模型,它預測了從任意位置快速移動到一個目標位置所需的時間,由 2 個位置的距離(D)和目標大小(S)有關。

此處有 2 個參數條件:

  • 距離(D):起始位置離目標位置距離越遠,我們到達目標位置所花費的時間就越長。反之,離目標位置越近,我們所花費的時間就越短;
  • 目標大小(S):目標面積越大,我們定位到目標所花費的時間就越短。反之,目標面積越小,精準定位到目標上的時間就越長。
1. 生活中的「費茨定律」

汽車上的剎車踏板和油門踏板相距很近,并且剎車踏板的物理面積要比油門踏板大,這樣可以使駕駛員在相對最短的時間內,把腳從油門踏板移動到剎車踏板上,從而最快最準確地觸發剎車踏板,確保事故的發生率和減少事故的損傷。

這也就是為什么右腳正確的姿勢是腳跟始終在剎車踏板下,加速時,以腳跟為軸,腳掌向右旋轉至油門位置并輕踩油門,目的都是為了在最短的時間、最自然的行為下,快速觸發安全操作。

相反,動漫城里那些賽車游戲的剎車踏板比油門踏板小很多,而且距離遠,這又是為什么?這也正是應用費茨定律的高明之處,因為游戲中我們需要更快的速度去超越對手,在踩下油門踏板的那一刻,要讓玩家達到用戶體驗的「爽」點,因此你會更容易踩到油門踏板,而且人身安全不會受到威脅。

這就是菲茨定律在不同場景下所起到的不同作用。設計起源于生活,在我們的界面設計中也是相同的道理。

2. 界面中的「費茨定律」

費茨定律在產品界面設計中的主要作用是提高產品的可用性。更準確地說,它所提高的是產品可用性中的效率指標,幫助用戶更快速地完成某個操作或任務流。

距離目標位置盡量縮短,相關操作保持親密性

多數產品在設計頁面模態彈窗,引導用戶進行操作行為時,都會將操作控件放在固定的頁面位置(一般居中或者處于頁面底部)。但「抖音」的設計卻讓人眼前一亮:系統會判斷用戶進行觸發時,手指與屏幕的接觸位置,并將模態彈窗的操控按鈕顯示在離用戶手指最近的位置。

隨用戶手部活動區域變化而靈活變更位置,使用戶在進行手勢交互的過程中,操作動作能始終在手部的舒適區域內進行,是應對大屏時代十分友好的體驗設計,也是該定律運用得比較好的設計點之一:即起始位置到目標位置的距離。

比如 QQ 的登錄界面,登錄按鈕的面積恰好比大拇指端的面積大一些(考慮到拇指點擊的舒適感),而且按鈕所在的位置無論是喚起鍵盤或未喚起鍵盤,始終都保持在拇指可觸的舒適位置,所以根據前面的參數條件,此按鈕的面積(S)及觸達距離(D)均是最佳。

假設把登錄按鈕放在屏幕下方,雖然說拇指默認懸停的位置在屏幕的下方,此時距離登錄按鈕理論上是最近的,但是還要考慮后續場景:一是鍵盤喚起,二是與輸入框的親密性。因此有效觸發登錄按鈕的行為是發生在后續場景中,所以放在距離輸入框最近的位置才合理。

除了移動端之外,在 PC 端做后臺表單設計時,我們經常把決策性按鈕緊跟在表單下方,距離表單最近的位置,這也是為了縮短光標移動的距離,使操作項(要輸入的表單)和決策項(提交/取消按鈕)更具有關聯性。

但是,該頁面的內容過多時,則會把決策性按鈕適配到第二屏以下,這樣的做法也不友好,也就違背了該定律,所以 PC 端單頁面長表單的決策按鈕設計一般有 2 種處理方式。

思考

那是不是所有的交互方式都需要考慮最近的距離呢?答案是否定的,正如前面電玩城剎車踏板的例子,菲茨定律的作用可以走向另一個極端。在界面設計中,可以有意識地將一些操作放在死角處,即相對不容易點擊到、感知到的地方,這就是為了延長用戶的感知時間,感知時間長即操作完成時間長,操作成本也就越高,從而減少誤操作的可能性。

目標尺寸大小要合適

目標可點擊熱區在合適的范圍之內,越大越容易精準點擊,越小則容易誤操作和點擊無效。在iOS人機交互指南中也規定了最小點擊熱區為 44*44,就是為了保證每次點擊都能夠得到有效的反饋,防止因為操作熱區過小而導致難以點擊。這里可能有朋友會說「移動端當中存在文字按鈕,這種是不是字號要放大呢?」字號根據設計規范去設定就好,文字也可以讓開發同學把點擊熱區放大,但是字號不變,這是 2 種不同的交互方式,一個是元素可見,一個是元素可觸。

說到點擊熱區,就不得不提拇指在手機屏幕上的移動范圍,根據研究表明,人們在使用手機的時候,75% 的交互操作都是由拇指驅動的,而拇指默認懸停的位置恰好在屏幕下方,所以這里依然要考慮菲茨定律的作用,如果目標位置超過了拇指舒適的移動范圍,操作成本就會無形中增加,比如手機在手掌中向右傾斜才能接近大拇指,需要拿出慵懶的左手才能點擊到……

屏幕的邊界「無限大」,更容易觸達

邊界是非常明顯的目標位置,它固定在屏幕邊緣,在物理上限制了鼠標光標不能超過它們,不管鼠標移動了多遠,光標最終還是在屏幕的邊緣蠢蠢欲動。所以可以利用設備屏幕的特點,將鼠標非常快速移動到邊緣或角落,而不用進一步微調才能觸發他,同時也不必擔心鼠標滑過了操作區域,因為他會被屏幕邊界擋住,這里就可以把屏幕邊緣看作「無限大」,雖然位置在邊角,但也可以快速觸達。

屏幕的邊邊角角很適合放置菜單欄、按鈕組及一些輔助性操作,比較有代表性的就是 Mac 系統的邊界交互,他們把顯示器邊角和觸控板的交互發揮到了極致,據說蘋果公司已經為這個設計申請了專利。

米勒定律(7±2法則)

米勒定律(7±2法則)是交互設計中一個常用的定律。1956 年美國心理學家喬治·米勒對短時記憶能力進行了定量研究,他發現人的短時記憶能力廣度為 7±2 個信息塊,記憶信息超過了該范圍就容易出錯。這說明人的大腦短時記憶容量約為「7」,并在 7+2 與 7-2 之間浮動,因此心理學家把這個神奇的記憶容量規律稱為「7±2法則」。

由 7±2 法則我們可以得出,一般人接受新事物的記憶容量最多不會超過 9。為了方便理解這個法則,我們做個示范,請讀一遍下面的隨機字母,然后移開眼睛回憶一下,看看你還能想起幾個?

通常會想起 5~9 個,即 7±2 個,這個有趣的現象就是 7±2 效應。

米勒定律(7±2法則)適用于生活中的方方面面,比如設計一個相對復雜的任務:通過減少每個組塊中元素的數量(不超過9個),當用戶使用你的界面時,確保用戶的大腦可以最大限度地記住這些內容,當項目列表變得很長時,可讀性和易讀性會變得很弱,就需要用戶花費額外的時間來閱讀或搜索。

1. 生活中的「米勒定律」

這個法則不僅僅可以用于移動端和 PC 端的設計中,在生活中很多場景也可以用到,比如電話號、銀行卡號、身份證號,我們總是喜歡把一長串數字拆分開來讀寫,目的就是降低記憶成本,提高信息的易讀性,從而達到視覺防錯的作用。

2. 界面中的「米勒定律」

在交互設計中,我們可以經常利用米勒定律,來減少用戶的認知負荷,提高信息的易讀性,畢竟信息設計也是提高用戶體驗的重要一環。界面中的「米勒定律」主要強調的是信息與信息之間的組合模式。

除此之外,米勒定律還強調了在設計過程中預見性和適當規劃的重要性,當你在不斷為產品添加更多功能時,產品界面必須能夠適應這些新功能,而又不會破壞原有的視覺基礎,畢竟重建產品需要花費大量的時間和資源。

分段記憶,信息分層

設計源自于生活,我們生活中的記憶方式也映射到了界面設計中,也就是把手機號碼分為 3-4-4 的規則來記憶。我們可以做一個對比,數字 A 是沒有分段的數字,數字 B 是通過空格分段隔開的數字,讓你在 3 秒之內記住這串數字,你感覺哪組數字更利于你的記憶呢?很明顯是數字 B 利于閱讀和記憶。

就連我自己給別人發電話號碼,或手寫的時候也會分段隔開一段距離,用戶體驗無處不在。

分段記憶還可以用于文章排版,長文本很多人閱讀起來非常痛苦,尤其是純文字的、排版臟亂差的長文本。之所以看起來非常痛苦,是因為段與段之間沒有留白,整個界面缺少呼吸感,信息與信息之間沒有整合,所以閱讀起來有較大的記憶負擔,看的時候還經常串行,最后也沒記住什么。

寫到這里相信大家也能感受得到,我通過公眾號發布的文章,大段與大段、小段與小段之間都有留白,而且選擇了舒適的字號、字間距及行間距,這些都是我在預覽模式下檢查了好幾遍才定出的一套規則,同時重點文字都會通過顏色對比突出展示,目的就是為了幫助讀者記憶和提高易讀性,并且配圖都會美化一下。閱讀,也是一種體驗。

導航和選項卡通常不要超過9個

網頁設計的一級導航通常不要超過 9 個,如果導航和選項卡內容過多時,可以通過聚合按鈕來包容其他次要入口或子入口,這個做法在 PC 端最為常見,其設計原理也同席克定律。移動端的標簽欄一般不超過 5 個、選項卡一般不超過 7 個,如果有更多的選項可以左滑查看其他,或者點擊右邊的「聚合按鈕」查看更多。

用戶使用導航是希望能夠快速找到自己想要的內容,這種訴求一般非常急切,如果還不能快速地找到自己想要看的內容,很有可能會流失掉。所以,簡化產品導航使它盡可能的少于 9 個會讓用戶對于產品的內容一目了然。

系列位置效應

系列位置效應描述了一個物體在序列中的位置影響我們對它的記憶,主要有 2 種:

  • 首因效應:相對中間位置,我們對一個系列最前面的物體的記憶力更清晰;
  • 新近效應:相對中間位置,我們更容易對序列末尾的物體記憶更清晰。

也可以理解為我們的大腦傾向于回憶起某件事的起始和結尾,最不容易回憶起中間的內容。生活中也有同樣的效應,很多事情隨著時間的流逝只記住了開頭和結果,中間的過程最容易遺忘,你還記得與初戀的情書內容嗎?肯定想不起來了吧,但怎么開始追他的、結果怎樣,這些卻歷歷在目。這種記憶特性也會映射到界面設計中。

比如商品詳情頁,它的閱讀體驗和產品重要信息從什么時候真正開始?又到什么時候結束呢?設計師應該如何布局詳情頁的開始和末尾內容呢?這些都是用戶體驗設計人員在設計時必須搞明白的關鍵問題。下面以 Apple 官網舉例,整個詳情頁可以分為三大部分:開頭、中間、結尾。

席克定律

希克定律是一種心理物理學定律。用戶所面臨的選擇數量越多,做出選擇所花費的時間就越長,在人機交互的界面中選項越多,意味著用戶做出決策的時間越長。

我們在做設計時,應該思考「在不妨礙用戶選擇的情況下,如何提供較少的選項」。多而亂的選項會延長用戶做決策的時間,甚至對一些「選擇困難戶」來說,會直接導致任務流失敗。全部的選項沒必要平鋪出來,選項與選項之間一定有著某種聯系,所以也可以對選項進行同類分組和多層級分布,這樣用戶使用效率相對會更高(排除選項均是獨立和業務要求的場景)。

席克定律雖然給設計帶來的是克制,但也不能用于極端場景,妨礙用戶選擇,強迫用戶遵照產品目標去選擇,比如某產品退押金的流程設計,從發現退款按鈕到「好像申請成功」的過程,你是不是暗自吐槽過?當然這里是站在用戶角度去看待這個設計,如果站在產品角度去審視它,會發現它是一個產品、交互、UI 三者配合非常棒的案例。

1. 生活中的「席克定律」

下圖有兩個電視遙控器,在你第一次使用它們做出開/關機、切換頻道、加減音量這些主要操作時,你會覺得哪個使用起來更有效率?感知程度更強?很顯然是圖2,連老人用戶都可以快速學會并做出正確的操作行為,而圖1卻需要我們花時間去研究這些按鈕在什么位置,去看手指有沒有對準按鈕,因為它們太多太小了,甚至一些圖標我都不明白是什么意思,有些按鈕可能永遠都不會去點擊。

這就是席克定律在遙控器上的作用,雖然這個案例也可以套用在其他理論上,比如交互設計四策略(刪除、組合、隱藏、轉移),這就和我們做功能設計一樣,功能層級也需要細分出:核心功能、輔助功能、邊緣功能等,而核心功能一定是進入到產品內第一個發現的功能,且操作頻率最高、能夠解決用戶主要訴求的功能,所以它的視覺優先級往往是最突出的。而在電視遙控器中,開/關機、切換頻道、加減音量就是核心功能。

2. 界面中的「席克定律」

在人機交互領域中,我們通常是如何運用席克定律來幫助用戶增強感知和節約選擇時間的呢?

減少選項并提供默認值,方便用戶選擇

選項越多,用戶決策的時間就越長,減少用戶思考的時間就是減少操作時間和學習成本,優秀的用戶體驗就是讓設備變得更聰明,讓用戶「不思考」就做出正確選擇。這里的「不思考」就是無意識的行為慣性,比如常規的單選/復選框,用戶一看就知道圓形是單選、方形是復選,根本不用思考就能通過薄弱的感知進行選擇,因為這些早已植入他們的認知里。除此之外,我們還可以針對用戶不同的使用場景精簡選項,方便決策和降低誤操作的概率。對于一個小模塊來說,一般可選項不要超過 9 個,9 個以上就存在一定的記憶負擔,對于超過 9 個的,可以用一些交互來約束用戶的行為,比如「展開/收縮」、分頁、分步等等。

選項分類分層,信息區分主次

在菜單欄的設計過程中,我們可以將被選項進行同類分組和多級分層的設計,這樣使用效率會更高,其次重點信息和推薦信息需要和普通信息在視覺上做區分,要有一個明顯的對比,這樣才能搶占視覺并在第一時間感知到。

如下圖,試想如果把所有城市依次平鋪在界面上,不依照熱門、歷史、國內/海外、首字母來分類,用戶可能在選擇地區上要花費很長時間,甚至是無從下手,直接進行搜索,而搜索的實際也是輔助功能。同時,我們做分步分層設計時,也應該合理的控制結構的廣度與深度,因為每增加一個層級就意味著用戶選擇的成本增加,而廣度太廣又會導致用戶在瀏覽上花費較多的時間。

分步完成,分步顯示

分解復雜流程:讓用戶一步步操作,而不是全部堆到用戶眼前,這就是為什么強調一個頁面只做一件事的原則,通過分步完成一個任務流,在操作感知上比填寫一大堆信息的壓力要更低,同時還能降低其他信息給用戶帶來的干擾,幫助他們將注意力聚焦在該步驟當中。

愛彼迎中大部分錄入項都是采用分步分頁來完成的:

場景細分:當用戶填寫表單時,先展示較少的可填項,當填完最后一項或選擇「其他」時,再展開剩余的表單,目的也是為了減輕大量表單給用戶感知上帶來的壓力,由此來達到場景細分的目的。在錄入場景中,能將信息整合為選項的,就千萬別讓用戶輸入,因為輸入的時間成本較高,且容易出錯,開放的輸入條件也不利于統計一些數據,所以通過固定的選項來約束用戶的行為。

接近法則(親密性)

我們通常把位置相對靠近的事物當成一個整體:

同樣都是圓,在視覺呈現上你會認為哪些是一組的呢?

接近法則的「權重」非常大,大到可以抵消其他法則,比如為上面的圓形添加顏色,甚至改變形狀,我們也會把接近圖形當成一個組:

接近法則也是格式塔理論中我們最為熟悉、最常用的一種法則,它描述的是觀察者看到彼此鄰近(空間或時間)的物體時,會將它們視為一個整體。在界面設計中,對信息的組織已經離不開這個法則了,它在界面中所體現的就是把相關的信息塊組合在一起,不太相關的分離開,增強與區分元素之間的關聯性,所強調的是空間和位置。接近法則產生于群組,它可以減少信息設計的復雜性,對引導用戶的視覺流、用戶對界面的解讀起到至關重要的作用。

1. 生活中的「接近法則」

在我們小區的規劃效果圖中,標段與標段(區)之間通常會利用相對較寬的過道、綠植、圍欄來劃分它們之間的關系,從而增強人們的感知。類似的還有商場的店面布局,服裝類、生活類、電子設備類等等。

相關推薦
網頁交互設計的一些理解
深挖交互設計的細節提升用戶滿意度
8個原則打造優秀的用戶體驗
交互設計中6個通用原則的介紹
如何杜絕網頁設計中視噪對用戶的影響
電子商務網站如何設計高效易用的網站左側導航樹
網頁視覺設計如何針對用戶有效表達信息
交互設計之淺談下意識設計
前瞻:2012年Web設計和開發的15個最新趨勢
用戶體驗評估之用戶心理負荷的測量
百度統計流量研究院設計過程及思路詳解
給不完整視覺信息尋找最簡單直接的解讀辦法
移動應用開發:無線終端用戶理解工作方法分享
分享:體驗設計師需要學習的一些前端技術
分享:5招助你打造更加簡潔的用戶界面
淺談界面UI設計中的包容性設計
仿生設計—讓互聯網產品更易用
淺談交互設計中的默認值對用戶的影響
深入分析網頁柵格系統的規范制作
深入談交互設計之人人都懂交互設計
移動應用設計的橫豎屏切換中的界面設計與體驗提升
交互設計:移動應用與PC應用的交互差異淺析
交互設計師應該如何設計直觀且有說服力的作品集
移動設備動畫設計的12個原則分享
分析用戶界面中扁平化設計的優缺點
分享淘寶購便利交互設計心得
富有靈感和創意的web布局及交互設計賞析
符合用戶操作習慣的網站界面設計分享
18個超棒的響應式Web設計前端開發教程
在視覺設計中對像素的深度解析
網頁設計中創新式布局與交互設計思考
換湯不換藥?看應用們如何“為iOS 7設計”
產品設計:萬水千山總是情 不要圖片行不行
APP瀏覽體驗設計的思考:如何理解用戶的眼?
網頁設計怎么破?創新式布局與交互的設計
四大網頁設計秘訣:讓用戶第一眼就愛上你的網站

精彩推薦

熱門教程

重庆时时开奖直播app 今日开奖结果黑龙江p62 知乎豆瓣微博发文赚钱 云南时时彩三星基本走势 河北11选5投注技巧 加拿大28计划软件安卓版 摆摊小吃和开小吃店哪个赚钱 500彩票极速快3 线上任务赚钱的平台 极速快乐十分是哪里的 梦幻现在开召唤兽店赚钱吗 捕鱼欢乐颂旧版 街机金蟾捕鱼外挂 广西快乐10分助手 通比牛牛平台手机版 2019短网址赚钱 欢乐生肖五星走势图乐彩网