超周全！聊聊交互設(shè)計背后的生理學(xué)原理

金蝶云之家用戶研究員-鄭少娜：交互設(shè)計準(zhǔn)則的背后每每隱含著一些設(shè)計的生理學(xué)原理，文章整頓了一些認(rèn)知生理學(xué)中對交互設(shè)計有所啟發(fā)的知識點(diǎn)，一路來學(xué)習(xí)下。

某次放工偶遇一開發(fā)，他問：“你們尋常做的交互設(shè)計，有什么準(zhǔn)則嗎？”我列舉了尼爾森十原則之類，卻遭到對方的進(jìn)一步嫌疑，好像認(rèn)為這不過是一些約定俗成的規(guī)矩，細(xì)究下來背后卻沒有什么站得住腳的道理。

當(dāng)然不是如許。這些交互設(shè)計準(zhǔn)則背后，都有其依循的生理學(xué)原理，其中認(rèn)貼心理學(xué)應(yīng)當(dāng)占有了很大一部分。

所以借此機(jī)會，也整頓了一下認(rèn)貼心理學(xué)中對交互設(shè)計有所啟發(fā)的一些知識點(diǎn)（參考《認(rèn)知與設(shè)計——理解UI設(shè)計準(zhǔn)則》）包括：

• 中間凹與邊界視野——如何呈現(xiàn)信息以獲取細(xì)致力
• 格式塔原理——如何處理不同界面元素的關(guān)系
• 時間感知——如何讓應(yīng)用具有高相應(yīng)度
• 意識與偶然識——別讓用戶思考
• 記憶的局限——如何降低工作記憶負(fù)擔(dān)

一. 中間凹與邊界視野——如何呈現(xiàn)信息以獲取細(xì)致力

原理

人眼重要通過視網(wǎng)膜成像。視網(wǎng)膜中的視錐細(xì)胞大約占有視網(wǎng)膜面積的1%，重要集中在中間凹中，在中間凹之外（稱為邊界視野）視錐細(xì)胞分布的密度很低。邊界視野重要分布的是視桿細(xì)胞，大約占有視網(wǎng)膜面積的99%。中間凹處的成像最清晰、分辨率很高；而邊界視野分辨率極低，人眼在邊界視野基本處于“失明”狀況，所見的東西差不多跟通過覆滿水霧的浴室門看東西的結(jié)果一樣。

這是由于在中間凹處每個視錐細(xì)胞都與一個神經(jīng)節(jié)細(xì)胞相連，神經(jīng)節(jié)細(xì)胞是視覺信息處理和傳導(dǎo)的起點(diǎn)；而在邊界視野中，一個神經(jīng)節(jié)細(xì)胞會與多個視錐細(xì)胞和視桿細(xì)胞相連。雖然中間凹僅占視網(wǎng)膜面積的1%，但是大腦皮層中負(fù)責(zé)處理視覺信息的部分中有50%是用來接收來自中間凹的視覺輸入。

中間凹并不大，當(dāng)用戶與電腦屏幕距離正常時，它在屏幕上只有1-2厘米的大小。中間凹成像的區(qū)域就是我們的眼睛的諦視點(diǎn)，因此我們每個瞬間看到的景象都只有諦視點(diǎn)是清晰的，其他區(qū)域特別很是模糊。但既然邊界視野的分辨率這么低，為什么我們會覺得本身所見的景象其實(shí)全都很清晰呢？

這是由于我們的眼睛諦視點(diǎn)會以每秒三次的速度快速跳動，有選擇性地對四周環(huán)境進(jìn)行諦視，大腦再根據(jù)這些視覺輸入和我們已有的經(jīng)驗(yàn)去添補(bǔ)視野的其他部分，讓我們能夠?qū)λ闹墉h(huán)境形成一個充足清晰的感知。

除此之外，在視網(wǎng)膜中還有一個叫做「盲點(diǎn)」的存在。盲點(diǎn)是眼球中視覺神經(jīng)和血管的出口，在這個地方?jīng)]有視錐細(xì)胞和視桿細(xì)胞，無法感知任何光源。也就是說當(dāng)我們諦視著一個地方時，四周環(huán)境中會存在一個點(diǎn)使我們無法「看到」的，我們之所以無法感知是由于雙眼球的存在以及大腦的主動「腦補(bǔ)」。

邊界視野看東西很模糊，但是也有其不可替換的作用。它能夠發(fā)現(xiàn)四周環(huán)境中的關(guān)鍵信息，一旦發(fā)現(xiàn)這種關(guān)鍵信息，它就會指導(dǎo)中間凹去細(xì)心查看這個信息。邊界視野對運(yùn)動的物體特別很是敏感，這是由于在進(jìn)化過程中我們必要很快發(fā)現(xiàn)四周運(yùn)動的物體，它可能是可以吃的小動物，或者企圖吃掉我們的猛獸。

所以我們常常會對邊界視野中的運(yùn)動物體比較敏感，一旦發(fā)現(xiàn)我們幾乎會不由自立地看向它。邊界視野還有一個特別能力就是能夠在陰郁環(huán)境下很好地工作，視錐細(xì)胞風(fēng)俗高亮度，而視桿細(xì)胞更適應(yīng)陰郁環(huán)境。所以在陰郁環(huán)境下不直接諦視物體反而更能夠看清楚。

啟示

操作反饋和錯誤信息：

• 反饋信息盡量落在中間凹中。假如要對用戶當(dāng)前的操作進(jìn)行反饋，反饋信息與用戶當(dāng)前的諦視點(diǎn)不要超過1-2厘米，否則這些信息就會處于邊界視野，用戶很可能察覺不到。
• 邊界視野上的反饋信息必須充足清晰，比如使用大字體、獨(dú)特的顏色，或者使用動效。想象一下把邊界視野都打上馬賽克的樣子，假如這時候提醒信息仍然能夠吸引細(xì)致，我們才有理由認(rèn)為用戶能夠看到。
• 邊界視野上的反饋信息要有同一且易識別的特點(diǎn)，比如使用用戶風(fēng)俗的警示符號，或者標(biāo)準(zhǔn)的紅色字體透露表現(xiàn)錯誤。這些易于識別的特點(diǎn)讓用戶能夠輕易分辨出這是什么類型的信息。
• 需要時使用對話框。對話框中斷了用戶當(dāng)前的操作、要求用戶細(xì)致特定信息并作出相應(yīng)。對話框要鄭重使用，由于會對用戶造成打攪，尤其是模態(tài)對話框。使用對話框還有另一個弊端就是用戶會有風(fēng)俗化（habituation），即重復(fù)暴露在刺激環(huán)境中會導(dǎo)致對該刺激反應(yīng)傾向降低——對話框的泛濫讓用戶對對話框特別很是不敏感，每每不看內(nèi)容就會直接關(guān)閉。

讓用戶更快找到信息：

• 網(wǎng)頁上的重點(diǎn)信息，可以通過顏色、字體、外形等要素與其他信息做出差異化的表現(xiàn)。用戶通過邊界視野的指導(dǎo)和諦視點(diǎn)的跳動來在界面上探求信息。假如要讓用戶更快找到所需的信息，就要讓這些信息在邊界視野上也充足顯明。
• 假如信息許多并且無法展望用戶的目標(biāo)（比如菜單欄、應(yīng)用中間），就盡量通過圖標(biāo)差異化地表現(xiàn)每個選項。要讓每個圖標(biāo)都容易辨認(rèn)有點(diǎn)困難，比較好的方法是賦予每個圖標(biāo)獨(dú)特的顏色和輪廓，不要太華麗也不要有過多的細(xì)節(jié)。

二. 格式塔原理——如何處理不同界面元素的關(guān)系

我們獲得的視覺輸入是自力的點(diǎn)、線和區(qū)域，而我們會在神經(jīng)體系層面上將這些信息知覺為團(tuán)體的外形和物體。

接近性原理：在位置上相互靠近的物體傾向于被感知為一組。

如iOS體系的設(shè)置，通過位置親疏關(guān)系來表現(xiàn)分組。

相似性原理：看起來相似的物體傾向于被感知為一組。

如付出寶首頁的元素雖然許多，但是根據(jù)相似性可以清晰地分為幾組。

延續(xù)性原理：我們傾向于將線條和外形感知為延續(xù)的團(tuán)體。

典型的例子是IBM的logo設(shè)計，我們并不把這些元素感知為自力的橫線，而是感知為團(tuán)體的字母。

交互上典型的例子是滑動條，如iOS的亮度調(diào)節(jié)，我們不會把左右兩邊視為自力的橫線，而是會在心中把它們連接起來，視為一個團(tuán)體。

封閉性原理：與延續(xù)性原理相干，我們傾向于將分散的元素感知為封閉的物體。

下圖是印象筆記PC與Mac端多選筆記的表現(xiàn)結(jié)果，我們會將后面的線條視為一個封閉卡片（代表著一個筆記）的一部分，而不是視為自力的非封閉圖形。

主體/背景原理：我們傾向于將元素區(qū)分為主體和背景，其中主體占有了我們重要的細(xì)致力。

iOS體系的選項菜單、toast、對話框等都行使了這個原理，將用戶本來操作的界面作為背景，而將當(dāng)前必要用戶去關(guān)注的信息作為前景。

共同命運(yùn)原理：一路運(yùn)動的物體傾向于被感知為一組或者彼此相干。

這比較多用于動效設(shè)計，通過不同元素的共同運(yùn)動表現(xiàn)其親緣關(guān)系。

幾種格式塔原理之間并不是相互自力的，在設(shè)計中每每必要綜合運(yùn)用。

三. 時間感知——如何讓應(yīng)用具有高相應(yīng)度

一個交互體系的相應(yīng)度，即能否及時告知用戶當(dāng)前的狀況而不必要他們無故等待，是影響用戶寫意度的最緊張因素。

下面列出的是與人機(jī)交互有關(guān)的一些時間間隔，以及與之對應(yīng)的認(rèn)知原理：

除了讓體系反饋保持在要求的時延之內(nèi)，還有一些進(jìn)步相應(yīng)度的tips：

• 進(jìn)度條必要讓用戶感到體系正在運(yùn)作，并且清楚進(jìn)度和必要等待的時間，不要一向停在99%，也不要只表現(xiàn)已完成而忽略未完成。
• 盡量不要在單位子義務(wù)內(nèi)發(fā)生耽誤。上文提到用戶會將義務(wù)拆解為子義務(wù)，完成每個子義務(wù)期間用戶都是處于高度專注的狀況，此時發(fā)生耽誤影響較大。
• 假如加載必要長時間，先渲染出緊張信息讓用戶看到。
• 行使余暇時間先做些事情，不要等待用戶發(fā)出指令后才開始慢吞吞地舉措。

四. 意識與偶然識——別讓用戶思考

人腦可以認(rèn)為是由三個部分組成：舊腦、中腦和新腦。舊腦重要由腦干組成，掌管著人的本能反應(yīng)和身體的主動調(diào)節(jié)功能。中腦位于舊腦之上新腦之下，控制著情緒反應(yīng)。新腦重要由大腦皮層組成，掌管著只有高級哺乳動物才具備的意識活動。

我們的思維可以分為兩種：

• 由舊腦和中腦產(chǎn)生的偶然識的、主動化的、情緒化的思維，稱為體系一。
• 由新腦產(chǎn)生的故意識的、理性的思維，稱為體系二。

體系一只會根據(jù)本身已知的東西做判斷，不在乎邏輯性和正確性，并且反應(yīng)更加快速，它在大部分情況下都運(yùn)作優(yōu)秀，因此也不必要體系二出馬。

體系二掌管的是更加高級的認(rèn)知能力，它每每在體系一無法做出合理反應(yīng)，或者我們對反應(yīng)效果的要求比較高的時候，才會親自出馬。體系二運(yùn)作的成本較高，必要進(jìn)行故意識的監(jiān)控并消費(fèi)有限的細(xì)致力資源，并且只能按照順序一件一件完成。相比之下體系一的運(yùn)作就輕松得多，也許可「多線程」操作。

舉個例子：當(dāng)你早期刷牙時，打字時，開車時，都幾乎不必要辛苦去想如何完成這些事情。由于這些是你已經(jīng)習(xí)得的舉動，只必要使用體系一就能夠完成，你甚至可以一邊唱著一首認(rèn)識的歌曲，一邊給本身做早餐。但是，要用到體系二時，比如算一道數(shù)學(xué)題、背出你部門里30小我的名字、決定今天午時吃什么，我們就會開始覺得這些事情“有難度”，它必要消費(fèi)我們的認(rèn)知資源。

這些知識給交互設(shè)計的啟發(fā)是，盡量讓用戶使用體系一就能夠完成操作，盡可能少消費(fèi)用戶的認(rèn)知資源，如許用戶會覺得體系很「易用」。

用戶已經(jīng)學(xué)會的操作可以用體系一輕松完成。因此在設(shè)計時盡量保持用戶已有的操作風(fēng)俗，讓用戶使用以往的經(jīng)驗(yàn)、而不必要重新學(xué)習(xí)，就能完成義務(wù)。

用戶對軟件體系存在許多圖式（即schema，是認(rèn)知的基本單元，用于詮釋感知、調(diào)節(jié)舉動和存儲知識），所以他們每每根據(jù)對特定界面或控件的特定期望進(jìn)行反應(yīng)，而不細(xì)心去看現(xiàn)實(shí)表現(xiàn)在界面上的內(nèi)容。

假如某個元素的設(shè)計吻合用戶對按鈕的圖式，用戶就會認(rèn)為它可以點(diǎn)擊；假如用戶的圖式中對話框的確定操作在右邊而取消操作在左邊，他可能在意識到你調(diào)換了操作位置之前就已經(jīng)完成了點(diǎn)擊。我們要削減消費(fèi)用戶的認(rèn)知資源，就必要去了解、遵循用戶已有的圖式，以及在應(yīng)用中建立穩(wěn)固的圖式，這也是為什么我們必要在設(shè)計中遵循同等性原則。

不要讓用戶去思考：A跟B的概念有什么區(qū)別？為什么沒有反應(yīng)、我到底操作成功了嗎？找不到刪除訂單的操作，它應(yīng)該在哪里？這個東西選中后會有什么結(jié)果？用戶對這些事情想的越多，就說明體系越難用。用戶的細(xì)致力是有限的，應(yīng)該盡量削減用戶對工具的細(xì)致，如許他才能全神貫注去完成他的目標(biāo)義務(wù)。

五. 記憶的局限——如何降低工作記憶負(fù)擔(dān)

人的記憶分為短期記憶和長期記憶。短期記憶也稱工作記憶，是為了完成義務(wù)而一時儲存的信息，一樣平常保留幾分之一秒到幾秒。長期記憶是我們“記住”的東西，長期記憶包括但不等于“永世記憶”，保留時間也可能只有幾分鐘、幾天、幾年。

長期記憶對應(yīng)著神經(jīng)體系的某個活動模式，參與該模式的神經(jīng)元通過突觸建立聯(lián)系，神經(jīng)元上的這種轉(zhuǎn)變可能是長期的甚至是永世的。神經(jīng)活動模式可以被再次激活，這就是我們回憶的過程。神經(jīng)活動模式假如經(jīng)常被激活，其連結(jié)也會變得越來越穩(wěn)定，這就是為什么經(jīng)常復(fù)習(xí)有助于鞏固知識。

工作記憶是感覺、細(xì)致和長期記憶留存征象的組合。來自人體各個感覺器官的信息，會被短暫地存儲下來，其中一部分可以被細(xì)致到，進(jìn)入到工作記憶中。長期記憶中的內(nèi)容也是工作記憶的候選來源。而細(xì)致機(jī)制負(fù)責(zé)對感覺和激活的長期記憶進(jìn)行篩選，因此進(jìn)入工作記憶中的信息都是我們「細(xì)致」到的部分，是屬于上一部分所述的體系二的工作。

我們一次只能細(xì)致一件事，假如你覺得你能同時細(xì)致兩件，那是由于你在兩件事之間快速地切換你的細(xì)致力。

工作記憶的容量有限，大約是4±1，即我們能夠同時記住的互不相干的東西的數(shù)量在3~5之間。此外，工作記憶還特別很是不穩(wěn)固，假如我們將細(xì)致轉(zhuǎn)移到新事物上，之前工作記憶中的內(nèi)容就可能遺失。

Tips：

• 避免使用模式，即避免同個操作在不同模式下有不同的結(jié)果。用戶常常會忘掉當(dāng)前處在哪個模式下，因此很容易犯錯。除非在使用模式時特別很是清晰地將模式標(biāo)示出來。
• 讓用戶知道他使用的搜索詞是什么?！坝脩艟尤粫康酵舯旧硭训氖鞘裁磫?？”了解了工作記憶的特點(diǎn)之后，大概我們會更能理解這種題目。
• 每個網(wǎng)頁應(yīng)該只有一個舉措召喚按鈕（Call To Action），避免干擾用戶細(xì)致。
• 提供操作提醒和幫助時，不要一次呈現(xiàn)太多信息，用戶記不住。
• 層級低的導(dǎo)航更好用，由于用戶會忘掉本身所處的位置。

迎接關(guān)注微信公眾號：「UXD-Cloudhub」