我總是對人腦的工作方式感到著迷。同時我也相信對于設(shè)計師來說，熟悉認(rèn)知科學(xué)也是非常必要的技能。為了提高我的專業(yè)技能仗阅，或者幫助其他人學(xué)習(xí)一些新東西，所以我決定寫一些我感興趣的話題国夜。

Photo by Andrew Neel on Unsplash

我們通過（視覺减噪，觸覺，聽覺）感覺設(shè)計车吹，然后迅速地被大腦處理筹裕。但作為設(shè)計師，我們必須了解如何創(chuàng)造與人類大腦相關(guān)的設(shè)計經(jīng)驗窄驹。作為設(shè)計師朝卒，我們必須明白如何創(chuàng)造體驗，并且知道大腦如何處理這些信息的乐埠。作為一個設(shè)計師抗斤，你必須有這個能力在產(chǎn)品交互過程中控制人類的思想，甚至在用戶結(jié)束與產(chǎn)品的交互后仍能控制丈咐。

在文章中瑞眼，我把重點放在我們大腦的注意力如何工作上，并通過這個方法影響設(shè)計

注意力=工作記憶

任何我們看到的扯罐、聽到的负拟、觸摸到的烦衣，聞到的都是通過我們的大腦處理歹河、并形成印象。

這個印象的組成包括：

瞬間記憶
短期記憶
長期記憶

瞬間記憶包含那些我們注意力關(guān)注的（側(cè)重）信息花吟，由于我們的瞬間記憶容量非常薪掌纭（研究表明對于不同的主題大概會記住5~7組信息），所以我們的注意力都是有選擇性的衅澈。

我們的大腦是非常簡單的沒有能力在同一時間去處理發(fā)生在我們周圍的所有事情键菱。大腦會將信息的焦點放到最有意義/關(guān)聯(lián)的部分，而這個關(guān)聯(lián)性是由我們的目標(biāo)決定的今布。

我們的大腦每秒都會接受到1100萬的數(shù)據(jù)经备，但是我們每秒僅僅只能處理50個的數(shù)據(jù)

如果目標(biāo)轉(zhuǎn)移了拭抬，瞬間記憶的內(nèi)容非常容易被遺忘。我們中的很多人一定遇到過這種狀況：

在你數(shù)數(shù)的途中侵蒙，如果有人突然打斷你造虎。之后你必須重新開始，因為你不記得你離開的確切位置了纷闺。 你走進一個房間算凿，突然之間你發(fā)現(xiàn)你忘記進來這里的原因。

瞬間記憶與設(shè)計連接

模式

在設(shè)計中使用模式的概念有很多好處犁功。它允許我們在切換上下文的時候氓轰，有更多的行為（方法）用更少的動作/權(quán)限。例如浸卦，在sketch里（一個設(shè)計軟件）署鸡，你發(fā)現(xiàn)自己在處于選擇模式。這意味著镐躲，在拖動期間储玫，你可以選擇屏幕上的對象。如果你進入繪圖模式萤皂，這意味著現(xiàn)在你拖動的同時撒穷，還能繪制一個長方形。

同時瞬間記憶是非常不穩(wěn)定的裆熙，假設(shè)用戶在沒有任何反饋的時候端礼，沒辦法記住自己在哪個模式下。所以當(dāng)用戶使用模式時入录，強調(diào)用戶所在的當(dāng)前的模式是非常重要的蛤奥。Sketch通過為每種模式設(shè)置不同的光標(biāo)來區(qū)分。

Rectangle mode, select mode, drag mode in Sketch.

搜索

在用戶使用網(wǎng)頁搜索功能的時候僚稿，用戶輸入關(guān)鍵詞—>查看結(jié)果凡桥。注意力由輸入轉(zhuǎn)移到查看搜索結(jié)果。這意味著蚀同，用戶會忘記他們最開始輸入的內(nèi)容缅刽。

具有搜索功能的站點，哪怕在展示搜索結(jié)果的時候蠢络，都應(yīng)該顯著的顯示用戶輸入的關(guān)鍵詞衰猛。

說明

假如用戶需要通過5步以上的操作完成他的目標(biāo)，就要保證他們有清晰的說明刹孔，告訴他們怎么做到這步的啡省。毫無疑問，大部分的用戶沒有能力去記住每次增加的步驟。

應(yīng)該給用戶一個簡單的回顧卦睹，讓用戶檢查自己的路徑

導(dǎo)航

如果你的設(shè)計需求是一個復(fù)雜多層的導(dǎo)航畦戒，那么它需要給用戶反饋，他現(xiàn)在在哪里结序，以及如何到達(dá)的兢交。去記住到達(dá)這個頁面之前經(jīng)過的所有步驟，對用戶來說是一個挑戰(zhàn)笼痹。

設(shè)計師應(yīng)該盡最大的努力去避免讓用戶大腦過載配喳，導(dǎo)致他們忘記最初的目的。這就是為什么面包屑（通常是一個箭頭或者一個斜線代表頁面的層級）在許多產(chǎn)品中流行的原因凳干。

In Edookit teacher system you can clearly see where you currently are with the help of breadcrumbs as well as highlighted menu and submenu item.

視覺-眼凹（eye fovea）

我們的大腦主要通過眼睛來獲取信息晴裹。我們的眼睛在感知設(shè)計中起到了重要的作用。人的眼睛結(jié)構(gòu)十分復(fù)雜救赐，但是我們最重要的發(fā)現(xiàn)是眼睛中間有個部分被稱為“眼凹”涧团。它是一個很小的圓圈（1.5mm寬）同時它也是大腦獲取信息的重要部分。

這里有三個原因：

1经磅，這小小的地方比其他地方有更大的分辨率泌绣。

2，在這個凹槽的視網(wǎng)膜細(xì)胞接近1：1的神經(jīng)節(jié)神經(jīng)（傳遞信息到大腦）预厌，這就是為什么他們在傳輸數(shù)據(jù)到大腦時不做任何的數(shù)據(jù)簡化--用眼睛直接對不同信息做區(qū)分阿迈。

3，這種凹陷區(qū)域只占眼睛的百分之一轧叽，但是我們大腦的視覺皮層對此投入了50%的資源苗沧。

所有的這些導(dǎo)致人類的注意力非常狹隘。

image

另外一方面炭晒，我們的周邊視力比較差待逞。說實話，想想你現(xiàn)在讀這篇文章的方式网严。你僅僅只是集中在確切的文字上识樱，其他所有東西都被忽略了。這是整個設(shè)計中很小的一個部分震束。有趣的是怜庸，我們大腦通過我們的記憶和期望，試圖幫助我們的眼睛填補周邊視力丟失的細(xì)節(jié)驴一。

眼球的凹陷對界面設(shè)計的影響

這些發(fā)現(xiàn)非常容易適用于界面設(shè)計休雌。

用戶沒有能力一次性看到整個網(wǎng)站的架構(gòu)灶壶。他們只能瀏覽頁面肝断。這意味著他們的眼睛非常迅速的從一個部分瀏覽到另外一個部分。最吸引人的通常是具有強烈對比性的和運動中元素

image

重要的，具有關(guān)聯(lián)性的信息必須離得近一些胸懈，讓用戶能夠感知這些元素。利用格式塔原則：

彼此接近的對象或者形狀會成組

image

例如，錯誤提示必須在輸入的附近晾浴。

一個用戶集中在輸入密碼上星岗，如果錯誤提示在頁面的另外一個部分，用戶則可能會漏掉錯誤提示首有。

另外一個例子（下圖）是營銷拷貝燕垃，這個頁面中它應(yīng)該說服用戶去點擊按鈕。而標(biāo)題和按鈕的對比井联，讓這部分變成用戶最先注意到的焦點卜壕。

Marketing microcopy, email field and CTA button or closely together so the user doesn’t have to scan other parts of the page

The error message is shown directly underneath the input field. The user doesn't have to move his eyes far away.

注意力盲區(qū)

人的注意力是以目標(biāo)為導(dǎo)向的。我們傾向于關(guān)注能夠?qū)崿F(xiàn)目標(biāo)的事情上烙常。其他的一切都不相關(guān)轴捎，除非它以某種方式引起我們的注意，否則就一直停留在邊緣上蚕脏。這個心理現(xiàn)象被稱為視覺盲區(qū)侦副。

查看視頻，試著數(shù)數(shù)白衣服傳球的次數(shù)驼鞭。

我們的設(shè)計目標(biāo)應(yīng)該是與用戶的大腦建立聯(lián)系秦驯，例如使用格式塔原理。

如果不能挣棕，我們應(yīng)該通過活動的元素和強烈的視覺對比來抓住用戶的注意力汇竭。數(shù)據(jù)證明，只有遵守這些規(guī)則穴张，用戶才不會錯過重要的設(shè)計細(xì)節(jié)细燎。

這是我對人類注意力以及如何利用最近發(fā)現(xiàn)的認(rèn)知科學(xué)來影響我們設(shè)計的一些隨筆。在寫這篇文章時皂甘，我深受Jeff Johnson寫的《Designing with the Mind in Mind》的影響玻驻。

原文鏈接