UI設(shè)計(jì)原則背后的認(rèn)知心理學(xué)

　　了解人的感官和大腦是如何工作的，去衡量及判斷那些設(shè)計(jì)原則更靠譜;UI設(shè)計(jì)師需要確定哪個(gè)設(shè)計(jì)原則更適用于給定的環(huán)境，從而優(yōu)選應(yīng)用，UI設(shè)計(jì)師必須深思熟慮，而不是盲目的應(yīng)用設(shè)計(jì)原則，應(yīng)該理解其基本原則并有過(guò)應(yīng)用經(jīng)驗(yàn)的人來(lái)使用和詮釋;
 

　　所有設(shè)計(jì)原則其實(shí)都是基于人類心理學(xué)，從認(rèn)知和心理學(xué)角度剖析交互設(shè)計(jì)本質(zhì)，去解讀人們?nèi)绾胃兄W(xué)習(xí)、推理、記憶，以及把想法轉(zhuǎn)換為行動(dòng)。將實(shí)際的設(shè)計(jì)原則聯(lián)系起來(lái)會(huì)讓心理學(xué)變得更具體、更容易理解。
 

　　此篇是給自己解惑的文章，也是一篇學(xué)習(xí)筆記總結(jié);也讓自己知道就算背熟了著名的交互原則后仍做不好設(shè)計(jì)，究竟是因?yàn)槭裁?現(xiàn)實(shí)中，很多設(shè)計(jì)原則，有一致的場(chǎng)景卻又有互相沖突的場(chǎng)景，到底該怎么推斷那些設(shè)計(jì)準(zhǔn)則更靠譜?
 

　　我們的感知與現(xiàn)實(shí)存在一定的偏差
 

　　不要懷疑，就是我們所看到的并不是真相，我們的大腦在影響我們的感知;很大程度上是我們“期望”感知到的。感知至少受到以下3個(gè)因素影響，與現(xiàn)實(shí)存在偏差
 

　　1、過(guò)去：先入為主的經(jīng)驗(yàn)影響我們的感知
 

　　人常根據(jù)以往的經(jīng)驗(yàn)來(lái)對(duì)事物進(jìn)行理解和判斷;先入為主的經(jīng)驗(yàn)會(huì)給用戶不一樣的感知和理解;你看到什么取決于經(jīng)驗(yàn)/別人告訴你什么?
 

　　R.C.James的素描：給人的第一印象是隨手潑出的黑點(diǎn)，如果有人和你說(shuō)這是一只在樹附近嗅著地面的斑點(diǎn)狗后，你就很難再把這張素描看成是隨手潑出的黑點(diǎn)了;看過(guò)劉亦菲演的神雕俠侶小龍女后，后面再有(陳妍希、毛曉慧)翻拍都覺得沒有比劉亦菲更適合小龍女這個(gè)角色，而且還被黑的很慘;這都是因?yàn)槿藭?huì)被先入為主的經(jīng)驗(yàn)影響感知
 

　　我們認(rèn)知會(huì)受熟悉的感知框架影響;
 

　　我們生活中大部分時(shí)間都是在自己熟悉的環(huán)境中度過(guò)(比如：家、公司、去公司的路上、附近的商場(chǎng))，久而久之這些熟悉的環(huán)境會(huì)在我們心智中建立框架;比如，你并不需要經(jīng)常檢查你家里的東西，但你對(duì)家里夠熟悉，也就知道某些東西大概放在哪里，因?yàn)槟阋呀?jīng)建立了你對(duì)自己家的認(rèn)知，有點(diǎn)刻板印象那么回事，專家們都管這個(gè)叫“感知模式/感知框架”
 

　　感知框架能幫助我們應(yīng)付所處的世界，但是呢也會(huì)讓我們看到并不存在的東西;比如，有時(shí)候你覺得你身份證明明放在家里某個(gè)地方，你就是找半天沒找到;還有你去飯店吃飯，去飯店吃飯的心智框架里有部分是付款，可能你沒有付款走出來(lái)飯店，但你的潛意識(shí)以為自己已經(jīng)付款過(guò)了，查看賬單才發(fā)現(xiàn)真沒付!!!!
 

　　不同場(chǎng)合的心智框架影響我們?cè)诓煌瑘?chǎng)合下對(duì)期待見到的事物感知;使用電腦、網(wǎng)站及手機(jī)的人對(duì)桌面和文件、網(wǎng)頁(yè)瀏覽器、網(wǎng)站和各種類型的APP都會(huì)有相對(duì)應(yīng)的心智框架;用戶經(jīng)常不認(rèn)真看屏幕就點(diǎn)擊按鈕或鏈接，他們更多是靠以往的經(jīng)驗(yàn)來(lái)引導(dǎo)他們對(duì)界面的感知，沒錯(cuò)就是在盲點(diǎn)瞎點(diǎn)!!!能不動(dòng)腦就不會(huì)動(dòng)腦那種，所以知道這個(gè)原理我們可以更好的了解那些設(shè)計(jì)原則
 

　　所以這頁(yè)就是為什么UI設(shè)計(jì)原則中需要保持一致性，一致性也包括3個(gè)方面：
 

　　1.和用戶預(yù)期保持一致性。
 

　　如果不符合人熟悉的心智模型及框架，就很容易很抓狂;經(jīng)常炒股的朋友，會(huì)對(duì)紅色綠色很敏感，綠色代表下跌紅色代表漲，但其實(shí)北美的股票市場(chǎng)則反之，紅色代表下跌;很多用慣安卓的用戶，突然用iOS會(huì)很不習(xí)慣，最明顯的微信APP的iOS版本和安卓版本就有很多不一樣的地方;用習(xí)慣win的系統(tǒng)用戶新買了個(gè)macbook電腦，剛用的時(shí)候很奔潰，時(shí)時(shí)刻刻都感覺自己是個(gè)智障～
 

　　app中就有很多案例契合用戶心智模型，減輕用戶的學(xué)習(xí)成本和記憶負(fù)擔(dān)
 

　　QQ閱讀的電子書還是保留了翻頁(yè)效果都是模擬現(xiàn)實(shí)翻書的效果，這樣大大降低用戶理解左右滑控制翻書上下頁(yè)的理解成本。微信紅包設(shè)計(jì)形式就很像現(xiàn)實(shí)中的紅包，所以很多人也一下子就理解這是紅包，而且點(diǎn)開就是拆紅包了。網(wǎng)易云音樂也是做成黑膠唱片的即視感，播放暫停都會(huì)相應(yīng)變化，營(yíng)造了聽歌的氛圍。
 

　　微信朋友圈廣告的樣式也是符合用戶心智模型，呈現(xiàn)形式與好友發(fā)的朋友圈保持一致。以明星作為好友，插入大圖，底部還可以看到好友的評(píng)論和互動(dòng)，這樣給人的感覺就像好友發(fā)了一個(gè)狀態(tài)，而非一條赤裸裸的廣告。
 

　　還有在支付寶好友對(duì)話頁(yè)面轉(zhuǎn)賬的場(chǎng)景中，用戶有著不同的使用習(xí)慣，他們認(rèn)為來(lái)這里就是轉(zhuǎn)賬的，所以有的用戶進(jìn)入對(duì)話框后，輸入完數(shù)字，就認(rèn)為自己已經(jīng)轉(zhuǎn)賬成功了，其實(shí)并沒有，于是有了現(xiàn)在改版后的方案;bilili在輸入密碼的時(shí)候2個(gè)小人會(huì)捂住眼睛，像極了現(xiàn)實(shí)中別人輸入密碼自己會(huì)走開不偷看。
 

　　2. 和平臺(tái)規(guī)則保持一致性
 

　　產(chǎn)品的設(shè)計(jì)要和平臺(tái)的規(guī)范保持一致，比如ios、Android及網(wǎng)站規(guī)范;也需要與競(jìng)品保持一致比如同類型的app也會(huì)大同小異;
 

　　3. 產(chǎn)品內(nèi)部規(guī)范一致性。
 

　　其中包括迭代版本保持一致性，同一層級(jí)圖標(biāo)顏色字體保持一致性，品牌一致性，交互行為一致性;不同的品牌有自己的調(diào)性，可以直接通過(guò)設(shè)計(jì)語(yǔ)言傳達(dá)給用戶，而且能夠達(dá)到一個(gè)良好的品牌辨識(shí)度，成熟的產(chǎn)品有自己的設(shè)計(jì)標(biāo)準(zhǔn)。
 

　　4. 遵循用戶的操作習(xí)慣;
 

　　有時(shí)候在找某件東西的時(shí)候，如果它不在老地方或者看起來(lái)和以前不一樣，就算在我們眼前，我們也找半天，這也是因?yàn)槲覀兪芤酝慕?jīng)驗(yàn)影響感知;因此相同或相似產(chǎn)品的用戶習(xí)慣保持一致，即意味著用戶需要更少的時(shí)間去學(xué)習(xí)甚至不需要學(xué)習(xí);
 

　　微信的iOS和安卓版本不一致，是根據(jù)2個(gè)終端不一樣的交互習(xí)慣操作;比如微信2各版本的搜索位置不一致，安卓在右上角，iOS是一長(zhǎng)條;發(fā)現(xiàn)頁(yè)iOS是沒有搜索和添加的，安卓卻有;在iOS系統(tǒng)中，想要?jiǎng)h除一條信息只需要向左輕輕一劃，而在安卓系統(tǒng)中，需要長(zhǎng)按信息在彈出的選項(xiàng)中選擇刪除選項(xiàng)，然后再按確認(rèn)刪除的選項(xiàng);安卓左右劃可以切換4個(gè)tab但iOS卻不行，安卓和iOS二級(jí)頁(yè)面的返回鍵也是不一致，安卓底部有返回操作，iOS則是右滑返回上一級(jí)。
 

　　2、當(dāng)前：環(huán)境影響感知
 

　　周圍環(huán)境對(duì)感知的影響也同樣存在于不同感官之間。五個(gè)感官任何之一的感知都可能同時(shí)影響其他感官的感知。例如：我們聽到的能影響我們看到的，反之亦然;我們聽到、看到或者聞到的能影響我們的觸覺。
 

　　總之，對(duì)于識(shí)別一個(gè)字母、一個(gè)單詞、一張臉或者任何物體的神經(jīng)活動(dòng)，都包含了環(huán)境刺激產(chǎn)生的神經(jīng)信號(hào)的輸入。這個(gè)環(huán)境包括感知到的其他臨近對(duì)象和事件，甚至由環(huán)境激活的對(duì)以往感知到的對(duì)象和事件的記憶。
 

　　人們經(jīng)常根據(jù)周圍的情景去理解事物，視覺感知也是一樣的，上下文會(huì)影響我們對(duì)某一個(gè)詞的理解;環(huán)境有時(shí)候會(huì)產(chǎn)生歧義。同樣的一段話放在不同的語(yǔ)句當(dāng)中，會(huì)有不同的理解。視覺上也是如此：
 

　　視覺設(shè)計(jì)可以通過(guò)應(yīng)用的背景、界面元素的擺放等來(lái)烘托情感、主題和氣質(zhì)。比如天貓、京東及拼多多618這種節(jié)日活動(dòng)主場(chǎng)景，也是利用了這種心理將買買買的活動(dòng)氛圍營(yíng)造出來(lái)。
 

　　3、將來(lái)：目標(biāo)影響感知
 

　　除了視覺，我們的目標(biāo)還過(guò)濾其他感官的感知。
 

　　例如：在嘈雜的環(huán)境中與人交談，你能把大部分注意力放在他說(shuō)的話上，即使身邊還有許多人在對(duì)話。你對(duì)談話的興趣越大就越能過(guò)濾掉周圍的聲音。
 

　　當(dāng)用戶登錄網(wǎng)站執(zhí)行操作時(shí)通常都是帶有目的性的去操作，這個(gè)過(guò)程中會(huì)過(guò)濾與其達(dá)成目標(biāo)操作無(wú)關(guān)的東西，當(dāng)用戶在軟件或網(wǎng)站上尋找信息或某個(gè)功能時(shí)，他們并不會(huì)認(rèn)真的閱讀，只是快速而粗略的掃描屏幕上與目標(biāo)相關(guān)的東西。他們不是不僅僅忽略掉與目標(biāo)無(wú)關(guān)的東西，而是經(jīng)常不注意它們。
 

　　目標(biāo)影響我們注意什么--感知是主動(dòng)的，我們動(dòng)用五官去找到和目標(biāo)相關(guān)的東西。目標(biāo)使我們的感知系統(tǒng)對(duì)某些特性敏感--例如在下圖找紅色的圓點(diǎn)，大腦對(duì)紅色就會(huì)特別敏感，而其它顏色就幾乎不會(huì)被注意到，即使我們的確“看到”了它們
 

　　目標(biāo)對(duì)感知的過(guò)濾在成年人身上特別可靠，他們比兒童對(duì)目標(biāo)更專注。兒童更容易被刺激驅(qū)使，目標(biāo)較少地過(guò)濾他們的感知。這種特點(diǎn)使得他們比成年人更容易分心，但也使得他們觀察時(shí)更不容易被影響。
 

　　當(dāng)用戶充分的調(diào)動(dòng)感知來(lái)尋找目標(biāo)的時(shí)候，由于用戶的注意力處于一種高度的緊張狀態(tài)，這是一種不好的用戶體驗(yàn)，我們要做的是讓用戶能夠輕松的完成目標(biāo)任務(wù)，而不需要有高度的緊張和尋找。
 

　　比如淘寶在注冊(cè)賬號(hào)的時(shí)候，清晰告知用戶注冊(cè)整體流程狀態(tài)
 

　　由于用戶在完成某項(xiàng)操作的時(shí)候，非常容易忽略和目標(biāo)任務(wù)無(wú)關(guān)的信息，所以如果需要在用戶處理任務(wù)的過(guò)程中，使用戶注意到一些額外的重要信息的話，應(yīng)該將這些信息做的醒目或者將它們擺放到適當(dāng)?shù)奈恢?，比如：Behace在用戶創(chuàng)建密碼時(shí)，會(huì)貼心在下面把已滿足密碼項(xiàng)??，避免不滿足密碼要求又被打回
 

　　總結(jié)：最后對(duì)設(shè)計(jì)有什么影響?
 

　　避免歧義
 

　　避免顯示有歧義的信息，并通過(guò)測(cè)試確認(rèn)所有用戶對(duì)信息的理解是一致的。當(dāng)無(wú)法消除歧義時(shí)，要么依靠設(shè)計(jì)標(biāo)準(zhǔn)或用戶習(xí)慣，要么告知用戶用你期望的方式去理解歧義之處。
 

　　保持一致
 

　　在一致的位置擺放信息和控件。不同頁(yè)面上提供的相同功能的控件和數(shù)據(jù)顯示應(yīng)該擺放在每一頁(yè)上相同的位置，而且它們還應(yīng)該有相同的顏色、字體和陰影等。這樣的一致性能讓用戶很快找到和識(shí)別它們。一致性的交互設(shè)計(jì)原則對(duì)用戶而言可以讓信息傳達(dá)和用戶使用體驗(yàn)更好;對(duì)產(chǎn)品研發(fā)團(tuán)隊(duì)來(lái)說(shuō)，也會(huì)減少設(shè)計(jì)的研發(fā)成本
 

　　理解目標(biāo)
 

　　理解用戶目標(biāo)，知道它們強(qiáng)烈的要感知什么，從而確保提供必要的信息清晰的對(duì)應(yīng)用戶的感知，用戶去用一個(gè)系統(tǒng)是有目標(biāo)的。設(shè)計(jì)者應(yīng)該了解這些目標(biāo)，要認(rèn)識(shí)到不同用戶的目標(biāo)可能不同，而且他們的目標(biāo)強(qiáng)烈左右他們能感知到什么。在一次交互的每個(gè)點(diǎn)，確保提供了用戶需要的信息，并非常清晰地對(duì)應(yīng)到一個(gè)可能的用戶目標(biāo)，使用戶能夠注意到并使用這些信息。