起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí) 七個(gè)UI設(shè)計(jì)小Tip：從心理學(xué)角度談?wù)動(dòng)邢薜淖⒁饬?/h2>
編輯導(dǎo)語(yǔ)：小時(shí)候，搭一個(gè)積木、給娃娃梳妝打扮就可以玩一天；而長(zhǎng)大后，隨著時(shí)間的碎片化和生活節(jié)奏的加快，我們的注意力也被逐漸分散了，集中精力做一件事變得越來(lái)越難?；诖?，本文作者從心理學(xué)角度進(jìn)行了分析，并且分享了七個(gè)UI設(shè)計(jì)小Tip。
AUI，Augmented User Interface或Augmented User Interaction，是指有視覺(jué)或者確實(shí)深度信息的虛實(shí)結(jié)合的用戶所見(jiàn)界面。
人類的注意力非常有限，外界刺激即使經(jīng)過(guò)了感官系統(tǒng)被我們接收，能夠獲得我們注意的信息依然非常有限。
當(dāng)我們與界面進(jìn)行有目的的互動(dòng)時(shí)，一些行為和方式會(huì)因此變得可以預(yù)測(cè)或者遵循一定的模式，為了讓用戶更好的進(jìn)行人機(jī)交互，設(shè)計(jì)中很多原則由此而起。
而在AUI的設(shè)計(jì)中，與用戶互動(dòng)的是周圍整個(gè)虛實(shí)結(jié)合的世界，用戶所見(jiàn)界面里豐富多彩、或真或幻的畫面是體驗(yàn)的加分項(xiàng)也是消耗其注意力的風(fēng)險(xiǎn)因子。
于是，我們不得不持續(xù)來(lái)探討如何在UI設(shè)計(jì)中，讓用戶順暢而合理的進(jìn)行操作，而不至于隨意消耗其注意力或者被其注意力完全忽視。
那“注意力”到底是什么呢？
雖然我們對(duì)此有非常直觀的理解，但是認(rèn)知心理學(xué)領(lǐng)域?qū)Α白⒁狻钡亩x卻有一段又漫長(zhǎng)、又曲折、又充滿爭(zhēng)議的研究和討論，直到現(xiàn)在。
但有一點(diǎn)是得到廣泛認(rèn)同的，就是注意的本質(zhì)是一種選擇。人們對(duì)被選擇的信息投以了注意力的同時(shí)，必然對(duì)沒(méi)有被選擇的信息進(jìn)行了忽略。而UI作為人機(jī)之間傳遞信息的具象呈現(xiàn)，設(shè)計(jì)師不得不時(shí)時(shí)刻刻和用戶的注意力較勁。
為什么要較勁呢？
因?yàn)槲覀兊淖⒁饬φ娴氖鞘钟邢蓿憧梢园咽直凵熘?，你的注意力相?duì)于所有輸入信息的大小就相當(dāng)于你的大拇指指甲蓋相對(duì)于整個(gè)視野的大小。
當(dāng)然，這只是一個(gè)比喻，確切的說(shuō)，這個(gè)比喻是我們視網(wǎng)膜的中央凹區(qū)域相對(duì)于整個(gè)視網(wǎng)膜的大小。
一、設(shè)計(jì)最合適的視覺(jué)流，喚醒或節(jié)省用戶的注意力消耗
在《我們的視覺(jué)系統(tǒng)對(duì)AR設(shè)計(jì)的啟示》一文里，我有講過(guò)中央視野，中央視野的畫面就是投射在我們視網(wǎng)膜中央凹區(qū)域的；而投射在中央凹之外的畫面，清晰度會(huì)迅速降低，周邊視野的分辨率基本上等于我們隔著沾滿霧氣的浴室玻璃看出去一樣。
投射在中央凹這樣一個(gè)小區(qū)域的畫面，大概一個(gè)按鈕就占滿了。
真正讓用戶能夠無(wú)障礙的閱讀你設(shè)計(jì)的整個(gè)界面，是視覺(jué)系統(tǒng)在時(shí)間上的連續(xù)性構(gòu)成的，中央凹之外的周邊視覺(jué)信息會(huì)不斷的引導(dǎo)眼球運(yùn)動(dòng)，從而使中央視野快速的瀏覽以補(bǔ)全整個(gè)視野。
這就是在界面設(shè)計(jì)時(shí)呈現(xiàn)出“視覺(jué)流”的重要性。
視覺(jué)流是用戶掃描頁(yè)面的時(shí)候的視線跟蹤，好的設(shè)計(jì)能夠讓人們按照順暢的次序沿著它向前流動(dòng)，一般人的習(xí)慣是從左到右、從上到下，比如居中對(duì)齊的文字會(huì)比居左對(duì)齊的段落就會(huì)消耗更多的注意力，因?yàn)闊o(wú)意識(shí)的眼動(dòng)會(huì)將我們帶回到下一行同樣的起始位置，這時(shí)候周邊視野的信息會(huì)引導(dǎo)用戶做有意識(shí)的調(diào)整。
當(dāng)然，這并不說(shuō)明居中對(duì)齊的排版就一定不好，有的時(shí)候，我們或許就需要靠這一點(diǎn)點(diǎn)的消耗，來(lái)喚醒他的注意力。
二、使用“4±1”法則（而不是“7±1”），結(jié)構(gòu)化呈現(xiàn)界面布局
注意力的有限性除了中央凹的生理限制之外，工作記憶的容量也是一個(gè)原因。工作記憶就是暫時(shí)被你記住的東西，很多人都知道神奇的數(shù)字”7“就是工作記憶的容量。
確切的說(shuō)，它是由認(rèn)知心理學(xué)家Miller在上個(gè)世紀(jì)50年代提出來(lái)的，指人類能夠同時(shí)記住互不相關(guān)的東西的數(shù)量限制，“7±2”法則也被運(yùn)用在很多界面設(shè)計(jì)里。
值得提出的是，后來(lái)的實(shí)驗(yàn)和研究都認(rèn)為這個(gè)“7”偏高了，現(xiàn)在心理學(xué)家們會(huì)更傾向認(rèn)為“4±1”才更接近于人類一般水平的工作記憶容量。我在之前的文章也有提過(guò)，4±1，是一個(gè)界面上更理想呈現(xiàn)模式。
但在實(shí)際的項(xiàng)目中，很多界面需要承載的功能都遠(yuǎn)遠(yuǎn)大于4，在我承接的眾多ToB類項(xiàng)目中，有些頁(yè)面更是連7+2都扛不住。
而當(dāng)我們?cè)倩仡^去看這個(gè)神奇數(shù)字的定義，就發(fā)現(xiàn)里面有一個(gè)很有意思的詞語(yǔ)：“互不相關(guān)”。也就是說(shuō)，通過(guò)分類和整合，運(yùn)用格式塔原理，將視覺(jué)信息成結(jié)構(gòu)化的呈現(xiàn)給用戶，是可以讓用戶臨時(shí)接收更多信息的。
三、固定的路徑或位置會(huì)節(jié)省用戶的注意力，如果你要喚醒它，需要多花點(diǎn)心思
正因?yàn)樽⒁饬κ钟邢?，所以大多?shù)時(shí)候，我們傾向于使用自動(dòng)化思維。
即我們會(huì)更偏向于選擇熟悉的路徑，最常見(jiàn)的，很多用戶明明知道有快捷鍵可以使用，但依然會(huì)選使用鼠標(biāo)在頂部欄的某個(gè)功能下選擇某項(xiàng)子功能的某個(gè)更下級(jí)操作，他們做連續(xù)幾次的點(diǎn)擊，只為了不去背那個(gè)三個(gè)按鍵組合而成的快捷鍵。
這是一種惰性行為，在這種行為下用戶愿意為了少動(dòng)腦子而付出更長(zhǎng)鏈條的交互。
當(dāng)用戶已經(jīng)形成了惰性行為時(shí)，做出改變的成本要比預(yù)想得更高。人們甚至不會(huì)閱讀上面的文字或圖形，僅靠固定的路徑或位置來(lái)進(jìn)行操作，如果要重新規(guī)劃，最好能夠?qū)⒃械牟僮鞅Ａ粢欢螘r(shí)間。
四、欲擒故縱，不要試圖一直消耗用戶的注意力
一般來(lái)說(shuō)，人們保持集中的注意力上限是7-10分鐘，10分鐘以后，大腦需要經(jīng)過(guò)短暫的休息才能再次集中注意力。即使是設(shè)計(jì)需要用戶高度集中精神的專業(yè)技術(shù)輔助型應(yīng)用，也需要設(shè)置適當(dāng)?shù)姆潘牲c(diǎn)。
之前我有做過(guò)一個(gè)項(xiàng)目是輔助飛機(jī)制造的AR應(yīng)用，需要通過(guò)幾次識(shí)別輸入來(lái)到最后的插線環(huán)節(jié)，每一個(gè)環(huán)節(jié)其實(shí)都需要工作人員高度集中精力，里面每一個(gè)斷點(diǎn)（例如分界面顯示而不是連續(xù)顯示），都是大腦可以得到短暫休息的時(shí)機(jī)。
五、界面有跡可循，隨時(shí)拉回用戶心思
我們知道，注意力十分有限，并且持續(xù)時(shí)間不長(zhǎng)，除此以外，它還十分不穩(wěn)定。
臨時(shí)記憶里的“4±1”個(gè)位置會(huì)隨時(shí)被新的內(nèi)容所替換，在AUI設(shè)計(jì)中，真實(shí)世界原本豐富可變的刺激更是變成了不穩(wěn)定性的高風(fēng)險(xiǎn)來(lái)源，你有時(shí)候很難去完全想象在實(shí)際使用中，什么會(huì)影響用戶原本集中在界面中的注意力。
在每一個(gè)界面都提供可以讓他回憶起來(lái)的外部信息，識(shí)別比記憶容易許多，例如將任務(wù)的狀態(tài)和進(jìn)展明確的顯示出來(lái)，明確的區(qū)分已讀和未讀，已完成和未完成的狀態(tài)等。
六、嚇人一跳的重型利器非必要不使用，但有些值得注意變化，可以稍微動(dòng)一動(dòng)
當(dāng)然，談到注意力不得不說(shuō)一些重型利器，比如突然跳出的模態(tài)窗口，代表著危險(xiǎn)的帶動(dòng)畫的紅色，還有巨大而突然的噪音以及警示音。
因?yàn)榭赡苌婕暗轿ｋU(xiǎn)，我們?nèi)祟惖倪z傳特性會(huì)讓我們對(duì)它們尤其注意。這些嚇人一跳的利器如非必要，盡量不要使用，否則就會(huì)變成“狼來(lái)了”的故事。
但與此同時(shí)，由于變化盲的存在，我們可能會(huì)對(duì)目標(biāo)以外的變化視而不見(jiàn)。比如當(dāng)你過(guò)度關(guān)注價(jià)格時(shí)，可能會(huì)對(duì)頁(yè)面其他地方的圖片變化視而不見(jiàn)。如果的確需要，可以使用輕量一些的動(dòng)效來(lái)引導(dǎo)注意力。
七、頭尾很重要
開(kāi)頭是用戶開(kāi)始集中注意力與機(jī)器對(duì)話的第一印象，它會(huì)成為用戶對(duì)整個(gè)系統(tǒng)評(píng)價(jià)好壞的基石。
而一個(gè)完整的收尾則是一個(gè)軟件的體貼，畢竟，當(dāng)用戶完成了某個(gè)目標(biāo)，注意力一旦消失，就很容易遺漏一些簡(jiǎn)單的收尾工作，比如回到初始狀態(tài)，忘記息屏等。
一個(gè)好的第一印象和一個(gè)完整的收尾，是用戶再次選擇將注意力放在這里，打開(kāi)這個(gè)應(yīng)用或這個(gè)產(chǎn)品的原因。
作者：林影落，10年+體驗(yàn)設(shè)計(jì)師，專注AR及創(chuàng)新領(lǐng)域設(shè)計(jì)；微信公眾號(hào)：林間有影落
本文由 @林影落 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
編輯導(dǎo)語(yǔ)：小時(shí)候，搭一個(gè)積木、給娃娃梳妝打扮就可以玩一天；而長(zhǎng)大后，隨著時(shí)間的碎片化和生活節(jié)奏的加快，我們的注意力也被逐漸分散了，集中精力做一件事變得越來(lái)越難?；诖?，本文作者從心理學(xué)角度進(jìn)行了分析，并且分享了七個(gè)UI設(shè)計(jì)小Tip。
AUI，Augmented User Interface或Augmented User Interaction，是指有視覺(jué)或者確實(shí)深度信息的虛實(shí)結(jié)合的用戶所見(jiàn)界面。
人類的注意力非常有限，外界刺激即使經(jīng)過(guò)了感官系統(tǒng)被我們接收，能夠獲得我們注意的信息依然非常有限。
當(dāng)我們與界面進(jìn)行有目的的互動(dòng)時(shí)，一些行為和方式會(huì)因此變得可以預(yù)測(cè)或者遵循一定的模式，為了讓用戶更好的進(jìn)行人機(jī)交互，設(shè)計(jì)中很多原則由此而起。
而在AUI的設(shè)計(jì)中，與用戶互動(dòng)的是周圍整個(gè)虛實(shí)結(jié)合的世界，用戶所見(jiàn)界面里豐富多彩、或真或幻的畫面是體驗(yàn)的加分項(xiàng)也是消耗其注意力的風(fēng)險(xiǎn)因子。
于是，我們不得不持續(xù)來(lái)探討如何在UI設(shè)計(jì)中，讓用戶順暢而合理的進(jìn)行操作，而不至于隨意消耗其注意力或者被其注意力完全忽視。
那“注意力”到底是什么呢？
雖然我們對(duì)此有非常直觀的理解，但是認(rèn)知心理學(xué)領(lǐng)域?qū)Α白⒁狻钡亩x卻有一段又漫長(zhǎng)、又曲折、又充滿爭(zhēng)議的研究和討論，直到現(xiàn)在。
但有一點(diǎn)是得到廣泛認(rèn)同的，就是注意的本質(zhì)是一種選擇。人們對(duì)被選擇的信息投以了注意力的同時(shí)，必然對(duì)沒(méi)有被選擇的信息進(jìn)行了忽略。而UI作為人機(jī)之間傳遞信息的具象呈現(xiàn)，設(shè)計(jì)師不得不時(shí)時(shí)刻刻和用戶的注意力較勁。
為什么要較勁呢？
因?yàn)槲覀兊淖⒁饬φ娴氖鞘钟邢蓿憧梢园咽直凵熘?，你的注意力相?duì)于所有輸入信息的大小就相當(dāng)于你的大拇指指甲蓋相對(duì)于整個(gè)視野的大小。
當(dāng)然，這只是一個(gè)比喻，確切的說(shuō)，這個(gè)比喻是我們視網(wǎng)膜的中央凹區(qū)域相對(duì)于整個(gè)視網(wǎng)膜的大小。
一、設(shè)計(jì)最合適的視覺(jué)流，喚醒或節(jié)省用戶的注意力消耗
在《我們的視覺(jué)系統(tǒng)對(duì)AR設(shè)計(jì)的啟示》一文里，我有講過(guò)中央視野，中央視野的畫面就是投射在我們視網(wǎng)膜中央凹區(qū)域的；而投射在中央凹之外的畫面，清晰度會(huì)迅速降低，周邊視野的分辨率基本上等于我們隔著沾滿霧氣的浴室玻璃看出去一樣。
投射在中央凹這樣一個(gè)小區(qū)域的畫面，大概一個(gè)按鈕就占滿了。
真正讓用戶能夠無(wú)障礙的閱讀你設(shè)計(jì)的整個(gè)界面，是視覺(jué)系統(tǒng)在時(shí)間上的連續(xù)性構(gòu)成的，中央凹之外的周邊視覺(jué)信息會(huì)不斷的引導(dǎo)眼球運(yùn)動(dòng)，從而使中央視野快速的瀏覽以補(bǔ)全整個(gè)視野。
這就是在界面設(shè)計(jì)時(shí)呈現(xiàn)出“視覺(jué)流”的重要性。
視覺(jué)流是用戶掃描頁(yè)面的時(shí)候的視線跟蹤，好的設(shè)計(jì)能夠讓人們按照順暢的次序沿著它向前流動(dòng)，一般人的習(xí)慣是從左到右、從上到下，比如居中對(duì)齊的文字會(huì)比居左對(duì)齊的段落就會(huì)消耗更多的注意力，因?yàn)闊o(wú)意識(shí)的眼動(dòng)會(huì)將我們帶回到下一行同樣的起始位置，這時(shí)候周邊視野的信息會(huì)引導(dǎo)用戶做有意識(shí)的調(diào)整。
當(dāng)然，這并不說(shuō)明居中對(duì)齊的排版就一定不好，有的時(shí)候，我們或許就需要靠這一點(diǎn)點(diǎn)的消耗，來(lái)喚醒他的注意力。
二、使用“4±1”法則（而不是“7±1”），結(jié)構(gòu)化呈現(xiàn)界面布局
注意力的有限性除了中央凹的生理限制之外，工作記憶的容量也是一個(gè)原因。工作記憶就是暫時(shí)被你記住的東西，很多人都知道神奇的數(shù)字”7“就是工作記憶的容量。
確切的說(shuō)，它是由認(rèn)知心理學(xué)家Miller在上個(gè)世紀(jì)50年代提出來(lái)的，指人類能夠同時(shí)記住互不相關(guān)的東西的數(shù)量限制，“7±2”法則也被運(yùn)用在很多界面設(shè)計(jì)里。
值得提出的是，后來(lái)的實(shí)驗(yàn)和研究都認(rèn)為這個(gè)“7”偏高了，現(xiàn)在心理學(xué)家們會(huì)更傾向認(rèn)為“4±1”才更接近于人類一般水平的工作記憶容量。我在之前的文章也有提過(guò)，4±1，是一個(gè)界面上更理想呈現(xiàn)模式。
但在實(shí)際的項(xiàng)目中，很多界面需要承載的功能都遠(yuǎn)遠(yuǎn)大于4，在我承接的眾多ToB類項(xiàng)目中，有些頁(yè)面更是連7+2都扛不住。
而當(dāng)我們?cè)倩仡^去看這個(gè)神奇數(shù)字的定義，就發(fā)現(xiàn)里面有一個(gè)很有意思的詞語(yǔ)：“互不相關(guān)”。也就是說(shuō)，通過(guò)分類和整合，運(yùn)用格式塔原理，將視覺(jué)信息成結(jié)構(gòu)化的呈現(xiàn)給用戶，是可以讓用戶臨時(shí)接收更多信息的。
三、固定的路徑或位置會(huì)節(jié)省用戶的注意力，如果你要喚醒它，需要多花點(diǎn)心思
正因?yàn)樽⒁饬κ钟邢?，所以大多?shù)時(shí)候，我們傾向于使用自動(dòng)化思維。
即我們會(huì)更偏向于選擇熟悉的路徑，最常見(jiàn)的，很多用戶明明知道有快捷鍵可以使用，但依然會(huì)選使用鼠標(biāo)在頂部欄的某個(gè)功能下選擇某項(xiàng)子功能的某個(gè)更下級(jí)操作，他們做連續(xù)幾次的點(diǎn)擊，只為了不去背那個(gè)三個(gè)按鍵組合而成的快捷鍵。
這是一種惰性行為，在這種行為下用戶愿意為了少動(dòng)腦子而付出更長(zhǎng)鏈條的交互。
當(dāng)用戶已經(jīng)形成了惰性行為時(shí)，做出改變的成本要比預(yù)想得更高。人們甚至不會(huì)閱讀上面的文字或圖形，僅靠固定的路徑或位置來(lái)進(jìn)行操作，如果要重新規(guī)劃，最好能夠?qū)⒃械牟僮鞅Ａ粢欢螘r(shí)間。
四、欲擒故縱，不要試圖一直消耗用戶的注意力
一般來(lái)說(shuō)，人們保持集中的注意力上限是7-10分鐘，10分鐘以后，大腦需要經(jīng)過(guò)短暫的休息才能再次集中注意力。即使是設(shè)計(jì)需要用戶高度集中精神的專業(yè)技術(shù)輔助型應(yīng)用，也需要設(shè)置適當(dāng)?shù)姆潘牲c(diǎn)。
之前我有做過(guò)一個(gè)項(xiàng)目是輔助飛機(jī)制造的AR應(yīng)用，需要通過(guò)幾次識(shí)別輸入來(lái)到最后的插線環(huán)節(jié)，每一個(gè)環(huán)節(jié)其實(shí)都需要工作人員高度集中精力，里面每一個(gè)斷點(diǎn)（例如分界面顯示而不是連續(xù)顯示），都是大腦可以得到短暫休息的時(shí)機(jī)。
五、界面有跡可循，隨時(shí)拉回用戶心思
我們知道，注意力十分有限，并且持續(xù)時(shí)間不長(zhǎng)，除此以外，它還十分不穩(wěn)定。
臨時(shí)記憶里的“4±1”個(gè)位置會(huì)隨時(shí)被新的內(nèi)容所替換，在AUI設(shè)計(jì)中，真實(shí)世界原本豐富可變的刺激更是變成了不穩(wěn)定性的高風(fēng)險(xiǎn)來(lái)源，你有時(shí)候很難去完全想象在實(shí)際使用中，什么會(huì)影響用戶原本集中在界面中的注意力。
在每一個(gè)界面都提供可以讓他回憶起來(lái)的外部信息，識(shí)別比記憶容易許多，例如將任務(wù)的狀態(tài)和進(jìn)展明確的顯示出來(lái)，明確的區(qū)分已讀和未讀，已完成和未完成的狀態(tài)等。
六、嚇人一跳的重型利器非必要不使用，但有些值得注意變化，可以稍微動(dòng)一動(dòng)
當(dāng)然，談到注意力不得不說(shuō)一些重型利器，比如突然跳出的模態(tài)窗口，代表著危險(xiǎn)的帶動(dòng)畫的紅色，還有巨大而突然的噪音以及警示音。
因?yàn)榭赡苌婕暗轿ｋU(xiǎn)，我們?nèi)祟惖倪z傳特性會(huì)讓我們對(duì)它們尤其注意。這些嚇人一跳的利器如非必要，盡量不要使用，否則就會(huì)變成“狼來(lái)了”的故事。
但與此同時(shí)，由于變化盲的存在，我們可能會(huì)對(duì)目標(biāo)以外的變化視而不見(jiàn)。比如當(dāng)你過(guò)度關(guān)注價(jià)格時(shí)，可能會(huì)對(duì)頁(yè)面其他地方的圖片變化視而不見(jiàn)。如果的確需要，可以使用輕量一些的動(dòng)效來(lái)引導(dǎo)注意力。
七、頭尾很重要
開(kāi)頭是用戶開(kāi)始集中注意力與機(jī)器對(duì)話的第一印象，它會(huì)成為用戶對(duì)整個(gè)系統(tǒng)評(píng)價(jià)好壞的基石。
而一個(gè)完整的收尾則是一個(gè)軟件的體貼，畢竟，當(dāng)用戶完成了某個(gè)目標(biāo)，注意力一旦消失，就很容易遺漏一些簡(jiǎn)單的收尾工作，比如回到初始狀態(tài)，忘記息屏等。
一個(gè)好的第一印象和一個(gè)完整的收尾，是用戶再次選擇將注意力放在這里，打開(kāi)這個(gè)應(yīng)用或這個(gè)產(chǎn)品的原因。
作者：林影落，10年+體驗(yàn)設(shè)計(jì)師，專注AR及創(chuàng)新領(lǐng)域設(shè)計(jì)；微信公眾號(hào)：林間有影落
本文由 @林影落 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
抄書還沒(méi)抄明白，再看看設(shè)計(jì)師要懂心理學(xué)吧