2019-11-22 資深UI設(shè)計(jì)者
這個(gè)是視覺(jué)通路的說(shuō)明圖，是認(rèn)知心理學(xué)的一個(gè)知識(shí)。外界信息從眼睛到LGN之后，會(huì)往兩個(gè)方向走，一個(gè)形成腹側(cè)通路另一個(gè)形成背側(cè)通路。也就是一個(gè)形成“你看到是什么”，另一個(gè)形成“這個(gè)東西離你有多遠(yuǎn)”。
這是的研究，就是主視覺(jué)皮層那塊區(qū)域并不像我們想象的一樣，是一個(gè)簡(jiǎn)單的、從下往上的一個(gè)回饋。它真正來(lái)自LGN的信息輸入只占到10%，LGN從眼睛獲得信息也不超過(guò)10%。你可以想一下眼睛到LGN，到大腦皮層形成視覺(jué)的過(guò)程。大腦皮層中的視覺(jué)信息90%是它自己產(chǎn)生的，只有10%是來(lái)自LGN。LGN當(dāng)中視覺(jué)信息的90%由大腦皮層自己產(chǎn)生的，只有10%來(lái)自眼睛。
做一下乘法，你就會(huì)發(fā)現(xiàn)，即使是眼睛看到的數(shù)據(jù)信息完全進(jìn)入大腦皮層，它至多只能占到10%，如果他不是至多10%的話，有可能眼睛實(shí)際進(jìn)入大腦皮層的數(shù)據(jù)信息只有1%。也就是說(shuō)大腦主要是在生產(chǎn)信息，而不是在接受信息。所以你應(yīng)該把你的精力用于研究那90%左右的信息是怎么產(chǎn)生的、它是什么樣的規(guī)律。
本書(shū)的結(jié)構(gòu)第一從設(shè)計(jì)實(shí)現(xiàn)角度來(lái)講比例構(gòu)圖、構(gòu)建頁(yè)面的具體結(jié)構(gòu)、柵格系統(tǒng)、組織原則等等。
第二部分是主要的部分，從第八章一直到十六章是從認(rèn)知智能的角度，就是你怎么處理信息的角度去做這個(gè)交互設(shè)計(jì)。第十章這里頭有一個(gè)叫模因論，模因論就是把模因類比成基因。
第十三章和第十六章寫(xiě)的就更抽象一些，第十三章主要是講人工智能的基礎(chǔ)，第十四章是講應(yīng)用，第十五章就是和今天話題有相關(guān)的地方，就是VR、5G這些，第十六章是我研究生畢業(yè)論文，我個(gè)人認(rèn)為沒(méi)寫(xiě)完，又寫(xiě)了一遍，是從心理學(xué)角度去闡述，為什么我們?cè)O(shè)計(jì)和國(guó)外的設(shè)計(jì)是不一樣的。
我們先有一個(gè)感性認(rèn)識(shí)，認(rèn)知與UI設(shè)計(jì)有什么關(guān)系？這其中有兩點(diǎn)。
第一個(gè)就是古騰堡定律與內(nèi)隱記憶。古騰堡定律，大家都聽(tīng)過(guò)吧，（注：該法則描述了一個(gè)理論：人的眼球移動(dòng)規(guī)律趨向于從上到下，從左到右，在視覺(jué)區(qū)域中，左上角通常為視覺(jué)起始點(diǎn)，右下角為視覺(jué)終點(diǎn)，而右上和左下是視覺(jué)落盲點(diǎn)。）也就是F形閱讀。這是尼爾森·諾曼在2006年產(chǎn)出的一個(gè)結(jié)論，即人瀏覽頁(yè)面的方式會(huì)形成一個(gè)F型的路徑。
但是有個(gè)公司叫EyeQuant，他們是做一些眼動(dòng)儀及其研究的。他們統(tǒng)計(jì)了大概是15萬(wàn)張前六秒人的注意力的熱區(qū)圖，它形成了大概這個(gè)結(jié)果。
EyeQuant就說(shuō)尼爾森·諾曼的結(jié)論可能不太對(duì)，它不是F型的，他給出了很多結(jié)果。
你會(huì)發(fā)現(xiàn)這個(gè)圖很多時(shí)候是居中或者是中間等等。于是EyeQuant公司的研究結(jié)論就是：有太多因素影響眼球運(yùn)動(dòng)，不用把F型法則當(dāng)做金科玉律。他們?cè)诠倬W(wǎng)上發(fā)了一個(gè)帖子，這是他們這結(jié)論，底下是論文的網(wǎng)址，大家也可以自己看一下文章，判斷一下EyeQuant說(shuō)的對(duì)不對(duì)。
我們來(lái)了解一下古騰堡定律，如果大家不了解，我先來(lái)解釋一下。古騰堡是一個(gè)德國(guó)人，他發(fā)明了獨(dú)立印刷術(shù)，他認(rèn)為人的閱覽瀏覽頁(yè)面的規(guī)律是從左上到右下的。左上是第一注意區(qū)，然后是右下，另外兩個(gè)區(qū)域是最容易被人忽略掉的。
上方是熱力圖，大家可以看一下，這兩個(gè)圖其實(shí)是有關(guān)聯(lián)的，熱力圖和古城堡定律大家注意看，最關(guān)鍵的點(diǎn)都是左邊。比如當(dāng)你做web導(dǎo)航的時(shí)候，你一般會(huì)把導(dǎo)航放到左上角，很少有人放在右上角。跟我們閱讀習(xí)慣是相關(guān)的。讀書(shū)寫(xiě)字都是從左開(kāi)始的，所以熱力圖表現(xiàn)出來(lái)并不是徹底的居中或者是在右下，左邊還是一個(gè)很重要的位置。第二點(diǎn)是2006年的互聯(lián)網(wǎng)產(chǎn)品形態(tài)和現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品形態(tài)是不同的，過(guò)了十幾年了，拿現(xiàn)在的數(shù)據(jù)說(shuō)以前的事情，有效性是有限的。
另外，有幾個(gè)反例它是沒(méi)法解釋的。大家有沒(méi)有關(guān)注過(guò)阿拉伯語(yǔ)的網(wǎng)站，你會(huì)發(fā)現(xiàn)它的導(dǎo)航是倒過(guò)來(lái)的。我看了之后我以為是有個(gè)鏡子，它其實(shí)是正確的，因?yàn)榘⒗氖菑挠蚁蜃髸?shū)寫(xiě)的。通過(guò)以上，我們可以認(rèn)識(shí)到古騰堡定律其實(shí)還是起作用的，它是根據(jù)你的書(shū)寫(xiě)的方向形成的。
有關(guān)網(wǎng)頁(yè)布局的規(guī)律，應(yīng)該是：同時(shí)受到古騰堡定律以及產(chǎn)品自身因素的影響。那么EyeQuant公司做的那個(gè)研究有沒(méi)有價(jià)值呢？是有價(jià)值的，它確實(shí)是往中間偏了，但是這是和產(chǎn)品的特性有關(guān)，因?yàn)?6年之后越來(lái)越多電商的頁(yè)面，包括純展示的東西越來(lái)越多了，居中構(gòu)圖的情況也越來(lái)越多，很多吸引注意的圖片放到中心位置了，所以它會(huì)影響整個(gè)觀感。
古騰堡定律在認(rèn)知心理學(xué)里實(shí)際就是內(nèi)隱記憶。內(nèi)隱記憶就是：無(wú)法通過(guò)有意識(shí)的過(guò)程而接觸的知識(shí)。舉個(gè)例子，騎自行車(chē)大家都會(huì)吧。如果我跟你說(shuō)有本書(shū)教騎自行車(chē)，你看完了就能學(xué)會(huì)，這不可能對(duì)吧，你需要自己練習(xí)騎。你學(xué)會(huì)了之后，當(dāng)你要教別人，你也沒(méi)辦法通過(guò)語(yǔ)言告訴他，你只能說(shuō)你必須得練，這個(gè)就是內(nèi)隱記憶。
生活當(dāng)中有一個(gè)體驗(yàn)，我相信所有人都會(huì)有，就是不管是用是安卓還是iOS都會(huì)有一個(gè)問(wèn)題，就是比如你把A左邊的應(yīng)用刪了，iOS系統(tǒng)會(huì)讓后面的應(yīng)用自動(dòng)補(bǔ)位，它會(huì)把A應(yīng)用推到第一個(gè)位置，結(jié)果就是你每一次想要打開(kāi)A應(yīng)用時(shí)候很容易點(diǎn)錯(cuò)。這也是內(nèi)隱記憶在起作用。
這是內(nèi)隱記憶的分類，有四種。騎自行車(chē)與古騰堡定律和第一種程序性記憶比較相關(guān)。第二種是知覺(jué)表征系統(tǒng)，大家聽(tīng)說(shuō)過(guò)無(wú)意識(shí)設(shè)計(jì)吧，這就和知覺(jué)啟動(dòng)是相關(guān)的。條件反射就不用說(shuō)了，巴甫洛夫的狗玩搖鈴它就流口水。非聯(lián)想學(xué)習(xí)中的習(xí)慣化和敏感化是什么意思呢？就是比如說(shuō)你家里有一個(gè)空氣凈化器，打開(kāi)的時(shí)候你會(huì)感覺(jué)它發(fā)出的噪音很明顯，但是過(guò)一段時(shí)間你又不太注意它的噪音了，就是習(xí)慣化。
敏感化是什么呢？煙塵和污染的空氣非常刺激呼吸道，所以一旦霧霾 ，呼吸道不好的人就會(huì)非常敏感，非常難受。比如說(shuō)北京的霧霾，一開(kāi)始可能不太注意到它，但是在北京待十年的結(jié)果是只要看天，我就能估算出這個(gè)pm2.5是多少值，正負(fù)不超過(guò)50，非常精準(zhǔn)。比如一看今天這個(gè)天氣情況，我猜污染指數(shù)有150，一查手機(jī)大概130左右。這就是敏感化，你對(duì)這個(gè)刺激的信息處理會(huì)變得更快。
畫(huà)表情的秘訣，這個(gè)是其中一個(gè)例子，它涉及到一塊腦區(qū)叫梭狀回面孔區(qū)。大家可以看一下，這些表情有一個(gè)什么樣的共同點(diǎn)。
大多數(shù)的表情是沒(méi)鼻子的，或者鼻子特別小。再看一下這兩張圖片，有什么明顯差異么？
這兩個(gè)照片差異非常明顯，這個(gè)叫撒切爾效應(yīng)。這時(shí)候你感覺(jué)還行，兩個(gè)人可能眼睛不太一樣，但是當(dāng)把照片導(dǎo)過(guò)來(lái)的時(shí)候，反差就特別大，你就感覺(jué)右邊那不是個(gè)人，對(duì)吧？
這叫面孔倒立效應(yīng)，只有正立的時(shí)候，才能有效識(shí)別面孔。就是必須得形成倒三角你才能有效識(shí)別一張面孔。鼻子并不參與三角區(qū)的方向判定。
你會(huì)發(fā)現(xiàn)插座也會(huì)被當(dāng)成表情，面孔倒立效應(yīng)的基礎(chǔ)是部分神經(jīng)的特異化，部分神經(jīng)元是專門(mén)用來(lái)處理面部信息的，識(shí)別人的情緒對(duì)人的認(rèn)知是很有作用的?？焖俚嘏袛嘁粋€(gè)人的情緒，對(duì)社會(huì)化動(dòng)物來(lái)說(shuō)非常關(guān)鍵。有一塊腦區(qū)專門(mén)處理人臉識(shí)別，識(shí)別情緒。
以上大家可以形成一個(gè)大概印象，就是認(rèn)知心理學(xué)可能會(huì)和你的設(shè)計(jì)相關(guān)聯(lián)，也說(shuō)明了認(rèn)知科學(xué)對(duì)UI的指導(dǎo)性，這是我的一個(gè)觀點(diǎn)。右邊是它的邏輯事實(shí)，書(shū)中盡量去證明這個(gè)觀點(diǎn)。
第一，廣義的設(shè)計(jì)概念。想證明認(rèn)知科學(xué)對(duì)UI設(shè)計(jì)的指導(dǎo)性，得先說(shuō)清廣義設(shè)計(jì)概念。我對(duì)它的定義是解決問(wèn)題的目的與恰當(dāng)方式的綜合。
你想解決這個(gè)問(wèn)題是吧？方式的綜合前面還有一個(gè)恰當(dāng)，我強(qiáng)調(diào)這個(gè)恰當(dāng)。
第一個(gè)先說(shuō)他目的性，比如說(shuō)你設(shè)計(jì)一個(gè)汽車(chē)、設(shè)計(jì)一個(gè)界面、設(shè)計(jì)一個(gè)流程，是有目的的，不是無(wú)目的的。第二是設(shè)計(jì)是解決問(wèn)題的恰當(dāng)手段，設(shè)計(jì)是你要找一個(gè)恰當(dāng)?shù)慕鉀Q方法。比如你累了怎么辦，你可以造個(gè)沙發(fā)、設(shè)計(jì)個(gè)躺椅。還有各種各樣的方式，哪一種方式是最恰當(dāng)?shù)姆绞剑窃O(shè)計(jì)出來(lái)的。這都是各種各樣能解決你累了的一個(gè)手段，但是你一定要找到那個(gè)最合適的。
這個(gè)之后我們還要定義一下UI的概念，這也是我個(gè)人的觀點(diǎn)和定義。就是解決虛擬界面信息傳輸問(wèn)題的目的與恰當(dāng)方式的綜合。
我是交互設(shè)計(jì)師，我沒(méi)有用比如說(shuō)交互或者視覺(jué)這個(gè)概念，因?yàn)槲艺J(rèn)為這個(gè)概念有些窄，并不是說(shuō)我區(qū)分不了視覺(jué)設(shè)計(jì)師和交互設(shè)計(jì)師。別人問(wèn)你如何區(qū)分交互設(shè)計(jì)師和UI設(shè)計(jì)的時(shí)候，你就用一句話就能區(qū)分：你和界面之間有沒(méi)有一次以上的信息互動(dòng)？如果有，那就是交互要介入，如果沒(méi)有一次就夠了，基本就是視覺(jué)的活。
傳統(tǒng)設(shè)計(jì)的目的、主題和體驗(yàn)公式。首先傳統(tǒng)設(shè)計(jì)處在兩個(gè)過(guò)程的中間，第一個(gè)是“人-自然“中間，也就是人造物，就是你要通過(guò)你設(shè)計(jì)的工具去改造自然。種個(gè)地、開(kāi)個(gè)礦等，你設(shè)計(jì)這個(gè)東西是在告訴別人怎么用。比如說(shuō)不能把門(mén)把手放到轉(zhuǎn)軸的內(nèi)側(cè)，他一定放到轉(zhuǎn)軸的外側(cè)，這個(gè)門(mén)把手就是在提示我們?cè)趺慈ゲ僮鬟@門(mén)，怎么推這個(gè)門(mén)。這是基于材料及其加工工藝的造型理論。
另一個(gè)就是設(shè)計(jì)處在“人-人造物-他人“的認(rèn)知過(guò)程中間。它所具有的特性是示能性與自我定位。比如說(shuō)我穿衣服，你會(huì)發(fā)現(xiàn)我沒(méi)有一個(gè)紅色和綠色的衣服，我喜歡穿藍(lán)色，黑色等，這實(shí)際是對(duì)自己身份認(rèn)識(shí)的一種構(gòu)建，向別人傳達(dá)出一種信息的設(shè)計(jì)物。傳統(tǒng)設(shè)計(jì)都會(huì)包含這些信息，你住什么地方，穿什么衣服，看什么書(shū)，都會(huì)有這兩個(gè)作用。
這是史上特別著名的穿絲襪的潮男叫路易十四。你會(huì)發(fā)現(xiàn)這個(gè)東西就是在兩方面表達(dá)出傳統(tǒng)設(shè)計(jì)的作用，第一個(gè)就是示能性。高跟鞋的形狀一定是后邊開(kāi)口前面是收口的，因?yàn)槟阋涯_放進(jìn)去。高跟提高你的身高。這個(gè)執(zhí)杖寬頭的地方是用來(lái)放手的，窄頭的地方是用來(lái)杵地的。傳統(tǒng)設(shè)計(jì)的主題是基于材料及其加工工藝的造型理論與設(shè)計(jì)實(shí)踐，這是我的觀點(diǎn)。我本科是學(xué)工業(yè)設(shè)計(jì)的，讀研究生的時(shí)候也是學(xué)工業(yè)設(shè)計(jì)的，我發(fā)現(xiàn)我做的所有的事情都是圍繞造型和工藝的造型理論。
舉幾個(gè)例子，輪胎演化過(guò)程、手機(jī)演化過(guò)程，你會(huì)發(fā)現(xiàn)材料的變化，造型的變化。
再來(lái)看一個(gè)深刻的例子。
這是一個(gè)著名的女設(shè)計(jì)師設(shè)計(jì)的，她為什么能做成這個(gè)東西？是因?yàn)樗鲞@個(gè)東西的時(shí)候，出現(xiàn)了新的數(shù)學(xué)工具來(lái)幫助建筑造型，很多原有的建筑學(xué)派不愿意用這套東西，但是她非常激進(jìn)，要用的數(shù)學(xué)工具來(lái)處理這個(gè)造型，才能做成這個(gè)建筑。
包括大家現(xiàn)在坐的車(chē)，你會(huì)發(fā)現(xiàn)曲面的車(chē)越來(lái)越多，車(chē)越來(lái)越漂亮，是因?yàn)閿?shù)字化之后，加工的工藝更好了，能做出特別漂亮的曲面。原來(lái)為什么紅旗特別貴？因?yàn)槟鞘抢蠋煾涤缅N子敲出來(lái)的，不是像現(xiàn)在數(shù)控技術(shù)就把它弄出來(lái)的。勞斯萊斯也都是敲出來(lái)的，所以很貴，想做很好看的曲面成本極高，但現(xiàn)在就成了很容易的一個(gè)事情。
傳統(tǒng)設(shè)計(jì)的體驗(yàn)公式就是E=e*n，e是衰減的。e就是每一次使用的體驗(yàn)，比如說(shuō)手機(jī)，你拿到手機(jī)的時(shí)候是一個(gè)體驗(yàn)，是一個(gè)e，用了多少次，n就是幾。比如說(shuō)我做一個(gè)椅子，用一次是e，用了多少回，它的乘積是整個(gè)體驗(yàn)。n是不會(huì)變的， e是唯一的關(guān)鍵，而且他每一次都一樣。所以傳統(tǒng)設(shè)計(jì)里對(duì)它的造型會(huì)非?？粗?，到底表現(xiàn)出什么東西，好不好用，會(huì)特別關(guān)鍵。
我再說(shuō)一下UI設(shè)計(jì)的目的、主題和體驗(yàn)公式，UI設(shè)計(jì)的目的和傳統(tǒng)設(shè)計(jì)不一樣的地方是，它示能性更主要，自我定位更次要。我舉一個(gè)例子，馬云想用支付寶，不好意思，他也得跟我們用的一樣。不管多有錢(qián)的人都好，還是只能用Facebook不太可能為這個(gè)人單獨(dú)設(shè)計(jì)出一款來(lái)。也就是說(shuō)UI設(shè)計(jì)是絕對(duì)平等的，只能說(shuō)買(mǎi)個(gè)皮膚，你可以花錢(qián)，但大多數(shù)情況下，它的主體功能是不區(qū)分消費(fèi)能力的，所有人用的支付寶都是一樣。不管這個(gè)人多窮、多有錢(qián)。
所以UI設(shè)計(jì)更主要的是通過(guò)界面來(lái)告訴你這個(gè)東西怎么用，是比自我定位更重要的。所以我們主要考慮的是界面能不能告訴用戶是干嘛用的，怎么用，這是最關(guān)鍵的。這和傳統(tǒng)設(shè)計(jì)不一樣，傳統(tǒng)設(shè)計(jì)因?yàn)橛胁牧铣杀镜膯?wèn)題，一定會(huì)涉及到選擇和自我定位的關(guān)系的問(wèn)題。
UI的設(shè)計(jì)體驗(yàn)公式就是E=a*b*c*…*n。這里為什么用乘法而沒(méi)用加法呢？大家知道有一個(gè)叫迷失度的一個(gè)概念，它是形容網(wǎng)頁(yè)體驗(yàn)中，如果a是零的話，后面做再好也沒(méi)有用。比如說(shuō)用戶找不到入口，到界面這卡在這了，這界面如果是0.1，那后邊所有的轉(zhuǎn)化率就全是0.1乘以這個(gè)系數(shù)。所以它并不要求每一個(gè)頁(yè)面達(dá)到百分之百，但是它強(qiáng)調(diào)整體乘積一定是一個(gè)高值，比如說(shuō)這個(gè)頁(yè)面的轉(zhuǎn)化率提高了，提高3%，下一頁(yè)面降低5%，它是一個(gè)乘積的關(guān)系，每個(gè)頁(yè)面都很重要，它是一個(gè)拉長(zhǎng)的一個(gè)體驗(yàn)公式。最后乘以一個(gè)使用次數(shù)。
我們?cè)倩氐秸J(rèn)知心理學(xué)，我家有三本到四本心理學(xué)的書(shū)，來(lái)看看他們每個(gè)人是怎么定義認(rèn)知心理學(xué)的。
斯騰伯格所著的是一本賣(mài)得比較好的書(shū)，大家可以看一下，認(rèn)知心理學(xué)規(guī)定了研究范疇是什么，這是斯滕伯格寫(xiě)的，他認(rèn)為認(rèn)知心理學(xué)就是研究人如何覺(jué)知，學(xué)習(xí)、記憶和思考問(wèn)題的。
下面這本書(shū)是三個(gè)人合著的，他們壓根沒(méi)有給認(rèn)知心理學(xué)一個(gè)明確的定義，只是提到這是有關(guān)于思考者的心智的科學(xué)。但是他說(shuō)的不是很具體，而是寫(xiě)了一堆研究對(duì)象，你把它抽象一下，會(huì)發(fā)現(xiàn)關(guān)鍵詞實(shí)際和斯坦伯格的是一樣，覺(jué)知、學(xué)習(xí)、思考、語(yǔ)言。
再來(lái)看第三個(gè)，艾森克和基恩干脆就沒(méi)定義認(rèn)知心理學(xué)是什么東西，他說(shuō)現(xiàn)在這個(gè)東西是一個(gè)特別廣泛的研究領(lǐng)域。
這三本書(shū)里頭有兩本書(shū)的第二章叫認(rèn)知神經(jīng)學(xué)，有一本是在第一章的第三部分叫認(rèn)知神經(jīng)學(xué)。我原本為我的書(shū)取名叫《認(rèn)知與UI設(shè)計(jì)》，就是這個(gè)原因。很難把認(rèn)知心理學(xué)和認(rèn)知神經(jīng)學(xué)切得特別開(kāi)，它們的聯(lián)系實(shí)際是很廣泛的。
UI設(shè)計(jì)圍繞覺(jué)知、注意、記憶與識(shí)別會(huì)有一些簡(jiǎn)單的例子。
視覺(jué)組織原則，這個(gè)是格式塔閉合原則，這是從神經(jīng)學(xué)層面解釋格式塔的閉合原則。就是有一個(gè)未封閉的圖形，大家可以看到左邊，你知道他是未封閉的，包括有那種特別的那種三角，有兩個(gè)半圓，三個(gè)半圓，我們會(huì)把它腦補(bǔ)成一個(gè)閉合的圖形，這個(gè)是有神經(jīng)學(xué)基礎(chǔ)的。
有個(gè)叫赫布定律，這個(gè)是什么意思呢？?jī)蓚€(gè)神經(jīng)元如果彼此之間互相刺激，他的神經(jīng)的突觸就會(huì)變多，它表現(xiàn)在除了突觸增多還有髓鞘增厚，都會(huì)使神經(jīng)之間的聯(lián)系變得更緊。
細(xì)胞集合的定義就是，人對(duì)信息整個(gè)識(shí)別過(guò)程是這樣的，過(guò)去你接受過(guò)原始刺激，你會(huì)記住它，比如說(shuō)右邊這個(gè)完整的圓，你第一次看到這個(gè)圓，會(huì)形成刺激，再看這個(gè)圓又形成刺激，它會(huì)形成一個(gè)完整的赫布集合。等你再看到左邊這個(gè)不完整的圓的時(shí)候，就是一個(gè)不完整的刺激，它會(huì)激活原來(lái)形成的赫布集合，讓你產(chǎn)生錯(cuò)覺(jué)認(rèn)為它是原來(lái)的完整的狀態(tài)。識(shí)別和記憶是一體的。記得越少，識(shí)別越快。
意識(shí)和注意的模型與用戶體驗(yàn)是相關(guān)聯(lián)的。真正進(jìn)入到意識(shí)的信息是少之又少的。因?yàn)槿说囊曈X(jué)能看到的只是可見(jiàn)光。在一個(gè)很長(zhǎng)的光譜中，視覺(jué)信息只占這么一點(diǎn)。人對(duì)視頻信息的感知還有個(gè)體偏向，人對(duì)紅黃藍(lán)的敏感程度是不一樣的，它只對(duì)部分色彩更敏感一些，更窄。
信息有一部分是無(wú)意識(shí)的，比如說(shuō)心跳的聲音，在環(huán)境特別安靜的時(shí)候，你能聽(tīng)見(jiàn)心跳的聲音，但是當(dāng)你注意力在別的地方時(shí)，你會(huì)過(guò)濾掉它，心跳聲就不進(jìn)入你的意識(shí)了，但它實(shí)際是一直在發(fā)生的。
你要建立一個(gè)概念，就是用戶能注意到的事情，是整個(gè)界面里頭很小的一部分，大部分他什么都記不住，因?yàn)樗麤](méi)空。短時(shí)記憶的容量是非常少的，比如說(shuō)讓你記電話號(hào)碼，一般大家都是以443或者344地記，會(huì)把它切割成幾個(gè)塊，這樣會(huì)更容易記一些。
下面這是《藝術(shù)與視知覺(jué)》這本書(shū)里的一個(gè)實(shí)驗(yàn)。左上角的圖案是他們用來(lái)做實(shí)驗(yàn)的圖。你會(huì)發(fā)現(xiàn)這個(gè)圖是一個(gè)特別擰巴的形狀，首先它是不閉合的，不是完整對(duì)稱的，設(shè)計(jì)師看到會(huì)非常不舒服。這個(gè)圖是怎么做實(shí)驗(yàn)的呢？就是把這個(gè)圖給你閃一下，就給你0.2秒或者0.3秒?？赐曛笞屇慊貞洠貞涍@個(gè)圖是怎么構(gòu)成的？右邊這七種是大家回憶的，它有一個(gè)共同的特征，就是把它規(guī)律化。這個(gè)不是有意進(jìn)行的，是你與生俱來(lái)的能力。把一個(gè)不規(guī)則的東西記成一個(gè)規(guī)則東西，是你本來(lái)的能力。
我們?cè)倏匆幌拢覀儼堰@個(gè)時(shí)間拉長(zhǎng)，你會(huì)發(fā)現(xiàn)很有趣，第一個(gè)是字母A的演化。這原來(lái)是頭牛，公元前1800年恐怖谷銘文里的文字，長(zhǎng)得像左上角第一個(gè)。后邊的人畫(huà)牛很費(fèi)勁，識(shí)別它、記憶它很費(fèi)勁。就把它簡(jiǎn)化，簡(jiǎn)化，最后就變成拉丁字母。每一次他都在丟失視覺(jué)信息，每次都在不停的丟失識(shí)別，使它更規(guī)整。26個(gè)字母基本都是按照這種原理出現(xiàn)的，只不過(guò)它是一個(gè)特別長(zhǎng)時(shí)間，跨度上千年，變成這種結(jié)果。
第二個(gè)是中國(guó)的魚(yú)紋，這是李澤厚的書(shū)《美的歷程》里的截圖。你可以發(fā)現(xiàn)魚(yú)紋的演化過(guò)程也這樣，開(kāi)始魚(yú)紋真的是條魚(yú)，后來(lái)這個(gè)魚(yú)變成對(duì)稱性了，上下對(duì)稱的。到最后它已經(jīng)不是魚(yú)了，花了幾百年時(shí)間變成這個(gè)樣子。
谷歌的logo也是一樣的規(guī)律。不停地進(jìn)行簡(jiǎn)化，不停地進(jìn)行識(shí)別。識(shí)別和記憶是一體的。每次記憶時(shí)一定會(huì)丟失信息，不管記什么東西一定會(huì)丟信息。記憶的東西比看的東西更少，當(dāng)再識(shí)別的時(shí)候是拿剩下的東西來(lái)識(shí)別。這也是和人的認(rèn)知相關(guān)的。
要想研究一個(gè)東西，得有一個(gè)合理的思維的過(guò)程，才能產(chǎn)生正確的思維的結(jié)果。思維能力和思維形式會(huì)決定思維產(chǎn)出。
我們看一下概念和命題，這是柏拉圖的三段論。我舉個(gè)例子，大前提是希臘人是勇敢的人。小前提是雅典人是希臘人，結(jié)論是雅典人是勇敢的人！這是一個(gè)特別標(biāo)準(zhǔn)的三段論推理，大前提小前提，不停地縮小集合的范圍，得到這個(gè)結(jié)論。
但是問(wèn)題是什么？這個(gè)語(yǔ)境里頭我沒(méi)有解釋這幾個(gè)概念：雅典人的概念是什么？如果你注意土耳其的地圖，你會(huì)發(fā)現(xiàn)愛(ài)琴海那一塊靠近土耳其大陸的很多島是希臘的，特洛伊現(xiàn)在應(yīng)該是更靠近土耳其一些。雅典人的概念就是伯羅奔尼撒半島上一個(gè)地區(qū)的人叫雅典人，但整個(gè)希臘實(shí)際是一個(gè)特別寬泛的概念，它并不是原來(lái)的半島，而是把周邊很多島嶼，甚至靠近羅馬的島都擴(kuò)到希臘地域里，所以這是一個(gè)問(wèn)題。希臘人的概念又是什么？我也沒(méi)說(shuō)。我盡管做了推理，我沒(méi)說(shuō)勇敢的人的概念是啥。有個(gè)壞人在行兇，你用聲音制止了還是用行動(dòng)，能不能作為判斷這個(gè)人是否勇敢的標(biāo)準(zhǔn)？在你說(shuō)出一個(gè)推理命題的概念的一剎那，實(shí)際上已經(jīng)把這個(gè)東西表達(dá)出來(lái)，但是在這個(gè)命題里是沒(méi)有說(shuō)的。
我說(shuō)得有點(diǎn)繞，其實(shí)我想表達(dá)的意思是：做推理的時(shí)候，推理里的概念，你是不可能在這個(gè)推理里頭說(shuō)出來(lái)的。你想把這個(gè)概念進(jìn)行規(guī)定的時(shí)候，還得通過(guò)其他語(yǔ)言和其他概念來(lái)說(shuō)這個(gè)概念。比如說(shuō)我們學(xué)的數(shù)學(xué)幾何，是基于歐幾里得的五大公理，五大公設(shè)。有了這個(gè)東西，才有推理和判斷的基礎(chǔ)，它是先于命題存在的。如果不對(duì)UI進(jìn)行定義，如果不對(duì)設(shè)計(jì)進(jìn)行定義的話，我寫(xiě)這本書(shū)就是一個(gè)很扯的一個(gè)事情，因?yàn)椴](méi)有形成自己的觀點(diǎn)和基礎(chǔ)。只有形成觀點(diǎn)和基礎(chǔ)了，才能?chē)@這個(gè)東西進(jìn)行推理，哪些是合理的哪些是不合理的。先有概念和命題，才有后邊理論和假說(shuō)。
要判斷一個(gè)理論靠不靠譜，需要符合邏輯三恰。
第一個(gè)要邏輯自洽，就是你不能自己打自己的臉，你需要自圓其說(shuō)。事實(shí)與邏輯相符，就是一個(gè)觀點(diǎn)在你的學(xué)說(shuō)里是兼容的，不能出現(xiàn)邏輯矛盾。
邏輯它恰是什么呢？你提出這個(gè)理論和其他理論不能產(chǎn)生矛盾，除非你能證明理論錯(cuò)了，或者在某些條件不適用，這個(gè)理論才是靠譜的，你不能和原來(lái)既有的公理產(chǎn)生沖突。
邏輯續(xù)洽是什么？就是新的場(chǎng)景、新的案例用這個(gè)理論還能解釋的通滿足這三條才是好理論，缺一條都不行。
這一章是從邏輯的視角去看一看，這套理論對(duì)不對(duì)。從認(rèn)知的角度考慮設(shè)計(jì)對(duì)不對(duì)。認(rèn)知角度本身對(duì)不對(duì)。
第一個(gè)叫邏輯自洽，在認(rèn)知理論內(nèi)部沒(méi)有矛盾。
我舉一個(gè)案例。這里有兩個(gè)圖，大家第一眼看上去它是怎么構(gòu)成的？我用等式表示出來(lái)。會(huì)有人第一眼看上去認(rèn)為它是最上方的方式或者是最下方的方式構(gòu)成的嗎？沒(méi)有人會(huì)說(shuō)這個(gè)圖形是用這兩個(gè)更復(fù)雜的方式構(gòu)成的。但是你想沒(méi)想過(guò)，為什么你第一眼看上去就是按中間這兩個(gè)等式的方式構(gòu)成的。因?yàn)檫@樣理解認(rèn)知成本，如果把一個(gè)你沒(méi)見(jiàn)過(guò)的東西或者一個(gè)復(fù)雜的東西展示給你看，一定是按照你的記憶，還原成你接觸過(guò)的最簡(jiǎn)單的一個(gè)構(gòu)成。它會(huì)降低你認(rèn)知的成本，如果記成奇怪的形狀，一定會(huì)使你記憶成本更高。
第二，認(rèn)知一定是要符合演化論。
人們對(duì)演化論的誤解之一，就是認(rèn)為越快越強(qiáng)越好，其實(shí)不是，而是適應(yīng)?？赡苣愀鼜?qiáng)、更聰明、更快，但是適應(yīng)不了環(huán)境。
比如說(shuō)為什么色盲基因還存在？
男性里頭大概有7%-10%，女的還少一點(diǎn)。按理來(lái)說(shuō)我們應(yīng)該認(rèn)識(shí)更多色彩，為什么色盲還存在？外界信息變成視覺(jué)信息主要是靠視錐細(xì)胞，它比較密，是在中凹附近。眼動(dòng)追蹤的時(shí)候，也主要靠中凹移動(dòng)來(lái)看東西。視感細(xì)胞對(duì)色彩并不敏感，但是對(duì)明暗敏感。色盲在夜間視力很好，比如說(shuō)晚上要偷襲獵物，或者是偷襲敵人，有色盲的部落會(huì)派出這些人，這些人夜間視力更好，會(huì)給種群帶來(lái)生存優(yōu)勢(shì)。所以色盲基因沒(méi)有消失是有意義的。非洲有一種鐮刀形紅細(xì)胞貧血病也是一個(gè)案例，擁有這個(gè)基因的人不容易得瘧疾。但是如果沒(méi)有瘧疾情況下，他容易貧血、容易患各種各樣的病。
現(xiàn)實(shí)視角的邏輯續(xù)洽，第一個(gè)就是能預(yù)測(cè)新的設(shè)計(jì)趨勢(shì)，第二是解釋新的實(shí)驗(yàn)現(xiàn)象。
第一個(gè)是扁平化是趨勢(shì)而不是潮流。這個(gè)用左上角的一個(gè)圖一下就能解釋清楚。雞尾酒的杯子一定是透明的。我們做的界面很多時(shí)候就是那雞尾酒的杯子，大家能理解扁平化是什么原因了吧？因?yàn)榫W(wǎng)速越來(lái)越快了，各種各樣酷炫的東西越來(lái)越多，信息量越來(lái)越大，就相當(dāng)于雞尾酒里有顏色的酒，顏色越來(lái)越多。如果用一個(gè)不透明的杯子，或者透明度不夠好的杯子，看不出里頭的顏色。所以扁平化是一個(gè)趨勢(shì)，不是潮流。
這是我前兩天看到的一個(gè)帖， 2019年發(fā)的一個(gè)論文，叫圖標(biāo)樣式對(duì)可用性的影響。大家可以自己去翻這個(gè)論文，很有意思。
測(cè)試結(jié)果是：最不易識(shí)別的是最右邊這組。中間是識(shí)別度比較高的，這個(gè)解釋特別簡(jiǎn)單：過(guò)度簡(jiǎn)化導(dǎo)致識(shí)別困難。意思是簡(jiǎn)化信息的時(shí)候，不是一減到底就是好。比如說(shuō)前面的例子從牛到A的過(guò)程，你不能上來(lái)就給埃及人拿了一個(gè)A，他不認(rèn)識(shí)。Instagram改版為什么受到熱議？因?yàn)樗蝗恢g扁平了，沒(méi)有漸進(jìn)過(guò)程，咣嘰就變成一個(gè)特別扁平的圖標(biāo)，它的紋理和它的圖形都發(fā)生了變化，所以識(shí)別上會(huì)特別不舒服。我舉過(guò)一個(gè)例子，比如說(shuō)你慈祥的老母親整成了張柏芝或者是高圓圓，你一定不會(huì)認(rèn)為這是一件好事，你會(huì)感覺(jué)很難接受。
第二個(gè)測(cè)試結(jié)果是這次識(shí)別度高的是右邊的，中間的識(shí)別度是低的。測(cè)試結(jié)果是多數(shù)面型icon識(shí)別比線型icon更容易識(shí)別。這個(gè)是格式塔的描述方式，有陰影的圖形只在內(nèi)部成立，外部行成不了輪廓。線性圖形則正好相反，是兩向輪廓。
比如說(shuō)我們看蘋(píng)果圖標(biāo)，你不管它是從第一版還是到最后一版，他都是面性圖標(biāo)。
因?yàn)樘O(píng)果是個(gè)球，它是個(gè)實(shí)體，這個(gè)輪廓在蘋(píng)果內(nèi)部成立，就類似于這種感覺(jué)。后邊是有陰影的，有外部的，因?yàn)槟阋劢?，后邊東西會(huì)虛化掉。它只在內(nèi)部成立。
面形圖標(biāo)普遍比線性圖標(biāo)識(shí)別要快，只有三個(gè)反例，只有三個(gè)反例需要解釋。
第一個(gè)圖，咱先不看虛擬的，你會(huì)發(fā)現(xiàn)這兩個(gè)圖標(biāo)線性識(shí)別度高，原因是因?yàn)樗砻嬗袟l紋，這兩個(gè)圖中圾桶和鑰匙都有條紋，所以用線性來(lái)表達(dá)的時(shí)候，效果更好。其他圖標(biāo)的實(shí)體都是曲面，不是條紋。沒(méi)有參差不齊的邊緣，而是曲面，是單向輪廓形成的。因此線型圖標(biāo)更容易辨認(rèn)。
感受野是人的視錐細(xì)胞和神經(jīng)節(jié)細(xì)胞的一個(gè)聯(lián)系，不管刺激中心區(qū)域、刺激整體、刺激邊緣都會(huì)有反應(yīng)。和感受野關(guān)聯(lián)的是神經(jīng)節(jié)細(xì)胞，人類眼睛有很多神經(jīng)節(jié)細(xì)胞，但這些細(xì)胞不是完全均等的點(diǎn)，而是一組點(diǎn)圍繞一個(gè)中心形成一個(gè)組合一樣的結(jié)構(gòu)，外邊一圈組合，中間有幾個(gè)組合。
下圖的這個(gè)就類似視網(wǎng)膜上的結(jié)構(gòu)，神經(jīng)節(jié)也是類似這種結(jié)構(gòu)。當(dāng)環(huán)境同時(shí)變亮的時(shí)候，刺激比較弱。同時(shí)變黑的時(shí)候，刺激也比較弱。只有在交界點(diǎn)的時(shí)候，反應(yīng)最強(qiáng)烈。想象一下，當(dāng)我們看到一個(gè)物體的輪廓的時(shí)候，細(xì)胞對(duì)它的反應(yīng)最大，就形成一條邊。這個(gè)實(shí)際上就是卷積核，人工智能卷積核就是模擬感受野形成的一個(gè)原理。
內(nèi)積就是矩陣內(nèi)的數(shù)字一個(gè)一個(gè)互相乘，乘完之后形成一個(gè)結(jié)果。卷積核模擬感受野的原理是：數(shù)字矩陣就相當(dāng)于一個(gè)卷積核從最左邊一直掃到最后一排，會(huì)形成不同的數(shù)值。比如說(shuō)這個(gè)是我們要看的圖像，比如說(shuō)黑的會(huì)計(jì)算成1，白的會(huì)計(jì)算成0。用卷積核掃一遍就相當(dāng)于在模擬人眼睛看到的東西，黑白區(qū)域之間就會(huì)形成一條邊，就是我們所看見(jiàn)的輪廓。
這就是我們眼睛看到東西的原理，比如說(shuō)我們現(xiàn)在做視覺(jué)識(shí)別，也是用這種特別簡(jiǎn)單的技術(shù)。卷積核實(shí)際是模擬人的感受野。
關(guān)鍵點(diǎn)是神經(jīng)學(xué)是怎么解釋面形圖標(biāo)和線性圖標(biāo)的不同的。當(dāng)你看到全亮的東西和全暗東西的時(shí)候是有差異的。卷積核掃一圈之后，計(jì)算機(jī)會(huì)認(rèn)為這個(gè)里頭的東西和外頭東西是一樣的。對(duì)它刺激是一樣的。所以只對(duì)邊緣有認(rèn)識(shí)。但人的神經(jīng)比較特殊，它自帶一個(gè)數(shù)值，它能識(shí)別出暗和亮。所以當(dāng)你看一個(gè)面形圖標(biāo)的時(shí)候，你對(duì)輪廓里面黑色部分的認(rèn)知和對(duì)輪廓外白色認(rèn)知是不一樣的，這叫單側(cè)型的輪廓，而不是雙側(cè)型的。當(dāng)你看到線性圖標(biāo)的時(shí)候，類似于計(jì)算機(jī)的感覺(jué)，但是你看到面形圖標(biāo)的時(shí)候，是人的感覺(jué)。
文章來(lái)源：UXren
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.b186.net