引子問(wèn)題：

從眼睛進(jìn)入的視覺信息，占大腦皮層中形成視覺的視覺信息的百分之多少？

這個(gè)是視覺通路的說(shuō)明圖，是認(rèn)知心理學(xué)的一個(gè)知識(shí)。外界信息從眼睛到LGN之后，會(huì)往兩個(gè)方向走，一個(gè)形成腹側(cè)通路另一個(gè)形成背側(cè)通路。也就是一個(gè)形成“你看到是什么”，另一個(gè)形成“這個(gè)東西離你有多遠(yuǎn)”。

這是的研究，就是主視覺皮層那塊區(qū)域并不像我們想象的一樣，是一個(gè)簡(jiǎn)單的、從下往上的一個(gè)回饋。它真正來(lái)自LGN的信息輸入只占到10%，LGN從眼睛獲得信息也不超過(guò)10%。你可以想一下眼睛到LGN，到大腦皮層形成視覺的過(guò)程。大腦皮層中的視覺信息90%是它自己產(chǎn)生的，只有10%是來(lái)自LGN。LGN當(dāng)中視覺信息的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ī)律。

1. 《UI設(shè)計(jì)與認(rèn)知心理學(xué)》一書的主要內(nèi)容和結(jié)構(gòu)

本書的結(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è)叫模因論，模因論就是把模因類比成基因。

第十三章和第十六章寫的就更抽象一些，第十三章主要是講人工智能的基礎(chǔ)，第十四章是講應(yīng)用，第十五章就是和今天話題有相關(guān)的地方，就是VR、5G這些，第十六章是我研究生畢業(yè)論文，我個(gè)人認(rèn)為沒(méi)寫完，又寫了一遍，是從心理學(xué)角度去闡述，為什么我們?cè)O(shè)計(jì)和國(guó)外的設(shè)計(jì)是不一樣的。

2. 舉例認(rèn)知與UI設(shè)計(jì)

我們先有一個(gè)感性認(rèn)識(shí)，認(rèn)知與UI設(shè)計(jì)有什么關(guān)系？這其中有兩點(diǎn)。

第一個(gè)就是古騰堡定律與內(nèi)隱記憶。古騰堡定律，大家都聽過(guò)吧，（注：該法則描述了一個(gè)理論：人的眼球移動(dòng)規(guī)律趨向于從上到下，從左到右，在視覺區(qū)域中，左上角通常為視覺起始點(diǎn)，右下角為視覺終點(diǎn)，而右上和左下是視覺落盲點(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)的。讀書寫字都是從左開始的，所以熱力圖表現(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)榘⒗氖菑挠蚁蜃髸鴮懙?。通過(guò)以上，我們可以認(rèn)識(shí)到古騰堡定律其實(shí)還是起作用的，它是根據(jù)你的書寫的方向形成的。

有關(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è)例子，騎自行車大家都會(huì)吧。如果我跟你說(shuō)有本書教騎自行車，你看完了就能學(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é)果就是你每一次想要打開A應(yīng)用時(shí)候很容易點(diǎn)錯(cuò)。這也是內(nèi)隱記憶在起作用。

這是內(nèi)隱記憶的分類，有四種。騎自行車與古騰堡定律和第一種程序性記憶比較相關(guān)。第二種是知覺表征系統(tǒng)，大家聽說(shuō)過(guò)無(wú)意識(shí)設(shè)計(jì)吧，這就和知覺啟動(dòng)是相關(guān)的。條件反射就不用說(shuō)了，巴甫洛夫的狗玩搖鈴它就流口水。非聯(lián)想學(xué)習(xí)中的習(xí)慣化和敏感化是什么意思呢？就是比如說(shuō)你家里有一個(gè)空氣凈化器，打開的時(shí)候你會(huì)感覺它發(fā)出的噪音很明顯，但是過(guò)一段時(shí)間你又不太注意它的噪音了，就是習(xí)慣化。

敏感化是什么呢？煙塵和污染的空氣非常刺激呼吸道，所以一旦霧霾 ，呼吸道不好的人就會(huì)非常敏感，非常難受。比如說(shuō)北京的霧霾，一開始可能不太注意到它，但是在北京待十年的結(jié)果是只要看天，我就能估算出這個(gè)pm2.5是多少值，正負(fù)不超過(guò)50，非常精準(zhǔn)。比如一看今天這個(gè)天氣情況，我猜污染指數(shù)有150，一查手機(jī)大概130左右。這就是敏感化，你對(duì)這個(gè)刺激的信息處理會(huì)變得更快。

畫表情的秘訣，這個(gè)是其中一個(gè)例子，它涉及到一塊腦區(qū)叫梭狀回面孔區(qū)。大家可以看一下，這些表情有一個(gè)什么樣的共同點(diǎn)。

大多數(shù)的表情是沒(méi)鼻子的，或者鼻子特別小。再看一下這兩張圖片，有什么明顯差異么？

這兩個(gè)照片差異非常明顯，這個(gè)叫撒切爾效應(yīng)。這時(shí)候你感覺還行，兩個(gè)人可能眼睛不太一樣，但是當(dāng)把照片導(dǎo)過(guò)來(lái)的時(shí)候，反差就特別大，你就感覺右邊那不是個(gè)人，對(duì)吧？

這叫面孔倒立效應(yīng)，只有正立的時(shí)候，才能有效識(shí)別面孔。就是必須得形成倒三角你才能有效識(shí)別一張面孔。鼻子并不參與三角區(qū)的方向判定。

你會(huì)發(fā)現(xiàn)插座也會(huì)被當(dāng)成表情，面孔倒立效應(yīng)的基礎(chǔ)是部分神經(jīng)的特異化，部分神經(jīng)元是專門用來(lái)處理面部信息的，識(shí)別人的情緒對(duì)人的認(rèn)知是很有作用的?？焖俚嘏袛嘁粋€(gè)人的情緒，對(duì)社會(huì)化動(dòng)物來(lái)說(shuō)非常關(guān)鍵。有一塊腦區(qū)專門處理人臉識(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í)，書中盡量去證明這個(gè)觀點(diǎn)。

3. 認(rèn)知科學(xué)對(duì)UI設(shè)計(jì)的指導(dǎo)性

第一，廣義的設(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è)汽車、設(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ù)姆绞?，是設(shè)計(jì)出來(lái)的。這都是各種各樣能解決你累了的一個(gè)手段，但是你一定要找到那個(gè)最合適的。

這個(gè)之后我們還要定義一下UI的概念，這也是我個(gè)人的觀點(diǎn)和定義。就是解決虛擬界面信息傳輸問(wèn)題的目的與恰當(dāng)方式的綜合。

我是交互設(shè)計(jì)師，我沒(méi)有用比如說(shuō)交互或者視覺這個(gè)概念，因?yàn)槲艺J(rèn)為這個(gè)概念有些窄，并不是說(shuō)我區(qū)分不了視覺設(shè)計(jì)師和交互設(shè)計(jì)師。別人問(wèn)你如何區(qū)分交互設(shè)計(jì)師和UI設(shè)計(jì)的時(shí)候，你就用一句話就能區(qū)分：你和界面之間有沒(méi)有一次以上的信息互動(dòng)？如果有，那就是交互要介入，如果沒(méi)有一次就夠了，基本就是視覺的活。

傳統(tǒng)設(shè)計(jì)的目的、主題和體驗(yàn)公式。首先傳統(tǒng)設(shè)計(jì)處在兩個(gè)過(guò)程的中間，第一個(gè)是“人-自然“中間，也就是人造物，就是你要通過(guò)你設(shè)計(jì)的工具去改造自然。種個(gè)地、開個(gè)礦等，你設(shè)計(jì)這個(gè)東西是在告訴別人怎么用。比如說(shuō)不能把門把手放到轉(zhuǎn)軸的內(nèi)側(cè)，他一定放到轉(zhuǎn)軸的外側(cè)，這個(gè)門把手就是在提示我們?cè)趺慈ゲ僮鬟@門，怎么推這個(gè)門。這是基于材料及其加工工藝的造型理論。

另一個(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ì)包含這些信息，你住什么地方，穿什么衣服，看什么書，都會(huì)有這兩個(gè)作用。

這是史上特別著名的穿絲襪的潮男叫路易十四。你會(huì)發(fā)現(xiàn)這個(gè)東西就是在兩方面表達(dá)出傳統(tǒng)設(shè)計(jì)的作用，第一個(gè)就是示能性。高跟鞋的形狀一定是后邊開口前面是收口的，因?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)在坐的車，你會(huì)發(fā)現(xiàn)曲面的車越來(lái)越多，車越來(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ì)非?？粗兀降妆憩F(xiàn)出什么東西，好不好用，會(huì)特別關(guān)鍵。

我再說(shuō)一下UI設(shè)計(jì)的目的、主題和體驗(yàn)公式，UI設(shè)計(jì)的目的和傳統(tǒng)設(shè)計(jì)不一樣的地方是，它示能性更主要，自我定位更次要。我舉一個(gè)例子，馬云想用支付寶，不好意思，他也得跟我們用的一樣。不管多有錢的人都好，還是只能用Facebook不太可能為這個(gè)人單獨(dú)設(shè)計(jì)出一款來(lái)。也就是說(shuō)UI設(shè)計(jì)是絕對(duì)平等的，只能說(shuō)買個(gè)皮膚，你可以花錢，但大多數(shù)情況下，它的主體功能是不區(qū)分消費(fèi)能力的，所有人用的支付寶都是一樣。不管這個(gè)人多窮、多有錢。

所以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é)的書，來(lái)看看他們每個(gè)人是怎么定義認(rèn)知心理學(xué)的。

斯騰伯格所著的是一本賣得比較好的書，大家可以看一下，認(rèn)知心理學(xué)規(guī)定了研究范疇是什么，這是斯滕伯格寫的，他認(rèn)為認(rèn)知心理學(xué)就是研究人如何覺知，學(xué)習(xí)、記憶和思考問(wèn)題的。

下面這本書是三個(gè)人合著的，他們壓根沒(méi)有給認(rèn)知心理學(xué)一個(gè)明確的定義，只是提到這是有關(guān)于思考者的心智的科學(xué)。但是他說(shuō)的不是很具體，而是寫了一堆研究對(duì)象，你把它抽象一下，會(huì)發(fā)現(xiàn)關(guān)鍵詞實(shí)際和斯坦伯格的是一樣，覺知、學(xué)習(xí)、思考、語(yǔ)言。

再來(lái)看第三個(gè)，艾森克和基恩干脆就沒(méi)定義認(rèn)知心理學(xué)是什么東西，他說(shuō)現(xiàn)在這個(gè)東西是一個(gè)特別廣泛的研究領(lǐng)域。

這三本書里頭有兩本書的第二章叫認(rèn)知神經(jīng)學(xué)，有一本是在第一章的第三部分叫認(rèn)知神經(jīng)學(xué)。我原本為我的書取名叫《認(rèn)知與UI設(shè)計(jì)》，就是這個(gè)原因。很難把認(rèn)知心理學(xué)和認(rèn)知神經(jīng)學(xué)切得特別開，它們的聯(lián)系實(shí)際是很廣泛的。

UI設(shè)計(jì)圍繞覺知、注意、記憶與識(shí)別會(huì)有一些簡(jiǎn)單的例子。

視覺組織原則，這個(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ò)覺認(rèn)為它是原來(lái)的完整的狀態(tài)。識(shí)別和記憶是一體的。記得越少，識(shí)別越快。

意識(shí)和注意的模型與用戶體驗(yàn)是相關(guān)聯(lián)的。真正進(jìn)入到意識(shí)的信息是少之又少的。因?yàn)槿说囊曈X能看到的只是可見光。在一個(gè)很長(zhǎng)的光譜中，視覺信息只占這么一點(diǎn)。人對(duì)視頻信息的感知還有個(gè)體偏向，人對(duì)紅黃藍(lán)的敏感程度是不一樣的，它只對(duì)部分色彩更敏感一些，更窄。

信息有一部分是無(wú)意識(shí)的，比如說(shuō)心跳的聲音，在環(huán)境特別安靜的時(shí)候，你能聽見心跳的聲音，但是當(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ù)與視知覺》這本書里的一個(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è)。后邊的人畫牛很費(fèi)勁，識(shí)別它、記憶它很費(fèi)勁。就把它簡(jiǎn)化，簡(jiǎn)化，最后就變成拉丁字母。每一次他都在丟失視覺信息，每次都在不停的丟失識(shí)別，使它更規(guī)整。26個(gè)字母基本都是按照這種原理出現(xiàn)的，只不過(guò)它是一個(gè)特別長(zhǎng)時(shí)間，跨度上千年，變成這種結(jié)果。

第二個(gè)是中國(guó)的魚紋，這是李澤厚的書《美的歷程》里的截圖。你可以發(fā)現(xiàn)魚紋的演化過(guò)程也這樣，開始魚紋真的是條魚，后來(lái)這個(gè)魚變成對(duì)稱性了，上下對(duì)稱的。到最后它已經(jīng)不是魚了，花了幾百年時(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)的。

4. 科學(xué)研究的范式。

要想研究一個(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)愛琴海那一塊靠近土耳其大陸的很多島是希臘的，特洛伊現(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)行定義的話，我寫這本書就是一個(gè)很扯的一個(gè)事情，因?yàn)椴](méi)有形成自己的觀點(diǎn)和基礎(chǔ)。只有形成觀點(diǎn)和基礎(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è)理論還能解釋的通滿足這三條才是好理論，缺一條都不行。

5. 視角

這一章是從邏輯的視角去看一看，這套理論對(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)見過(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í)更多色彩，為什么色盲還存在？外界信息變成視覺信息主要是靠視錐細(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ì)感覺很難接受。

第二個(gè)測(cè)試結(jié)果是這次識(shí)別度高的是右邊的，中間的識(shí)別度是低的。測(cè)試結(jié)果是多數(shù)面型icon識(shí)別比線型icon更容易識(shí)別。這個(gè)是格式塔的描述方式，有陰影的圖形只在內(nèi)部成立，外部行成不了輪廓。線性圖形則正好相反，是兩向輪廓。

比如說(shuō)我們看蘋果圖標(biāo)，你不管它是從第一版還是到最后一版，他都是面性圖標(biāo)。

因?yàn)樘O果是個(gè)球，它是個(gè)實(shí)體，這個(gè)輪廓在蘋果內(nèi)部成立，就類似于這種感覺。后邊是有陰影的，有外部的，因?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ì)形成一條邊，就是我們所看見的輪廓。

這就是我們眼睛看到東西的原理，比如說(shuō)我們現(xiàn)在做視覺識(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ī)的感覺，但是你看到面形圖標(biāo)的時(shí)候，是人的感覺。

文章來(lái)源：UXren

流利說(shuō)®少兒英語(yǔ)是流利說(shuō)®為 3-8 歲兒童定制的一款英語(yǔ)啟蒙類產(chǎn)品，本次邀請(qǐng)到 UI 設(shè)計(jì)師 kelly，從視覺設(shè)計(jì)與輸出的角度，詳細(xì)地介紹該產(chǎn)品游戲題型的設(shè)計(jì)過(guò)程。

流利說(shuō)®少兒英語(yǔ)，目標(biāo)是幫助該年齡段的用戶建立發(fā)音自信，并且能對(duì)英語(yǔ)學(xué)習(xí)產(chǎn)生持續(xù)的興趣?；趦和澩娴奶煨?，自然而然我們會(huì)想到使用游戲化的設(shè)計(jì)，將枯燥的英語(yǔ)學(xué)習(xí)過(guò)程變得更有趣。

△ 收集糖果

△ 警察抓小偷

△ 切水果

△ 消滅細(xì)菌

視覺設(shè)計(jì)

游戲?yàn)檩o，教育為主。

對(duì)于視覺設(shè)計(jì)而言，游戲題型設(shè)計(jì)的主要有以下 2 個(gè)難點(diǎn)：

• 把握題型趣味性與教學(xué)目標(biāo)之間的平衡；
• 為教學(xué)內(nèi)容找到最適合的游戲展示形式。

接下來(lái)我將從視覺表達(dá)、視覺層級(jí)、反饋這三點(diǎn)分享我的一些思考和經(jīng)驗(yàn)。

1. 明確的視覺表達(dá)

在開始設(shè)計(jì)前，我們對(duì) 3-8 歲兒童進(jìn)行了調(diào)研，發(fā)現(xiàn)處于該年齡段的用戶，大多有以下特性：

• 不識(shí)字，且不能進(jìn)行復(fù)雜邏輯操作；
• 易被色彩鮮艷且有動(dòng)效的對(duì)象吸引，并且會(huì)主動(dòng)點(diǎn)擊；
• 僅能理解自己生活中接觸過(guò)的事物（比如玩具，食物，游樂(lè)園等等）；
• 趣味性是調(diào)動(dòng)他們持續(xù)學(xué)習(xí)的重要?jiǎng)恿Α?

基于以上幾點(diǎn)，我們便總結(jié)出以下幾點(diǎn)設(shè)計(jì)方法。

視覺形式即題型玩法

以拼圖題為例，此題的目標(biāo)是檢測(cè)孩子拼寫單詞的能力。如果僅將單詞挖空再讓用戶選擇，那么孩子會(huì)覺得這道題既不會(huì)玩，也不好玩。但如果在視覺表現(xiàn)上采用孩子比較熟悉的拼圖，就可以方便孩子更好的理解題目的意思，進(jìn)而引導(dǎo)孩子的操作。

場(chǎng)景故事要有視覺連貫性

「游戲」（此處的「游戲」代指游戲題型）結(jié)束后有一個(gè)和故事設(shè)定相關(guān)的結(jié)束畫面，承接前面的操作，讓整個(gè)「游戲」過(guò)程能呈現(xiàn)出相對(duì)比較完整的體驗(yàn)，以增強(qiáng)小朋友在「游戲」過(guò)程中的沉浸感。

△ 游戲操作：切水果

△ 游戲結(jié)尾：切水果榨果汁

2. 清晰的視覺層級(jí)

由于兒童缺乏成年人所具備的視覺篩選能力，他們往往很難分辨出界面中的重要元素和次要元素。尤其是 3-5 歲的孩子，他們會(huì)習(xí)慣性地去點(diǎn)擊界面上所有吸引他們的東西。因此我們需要為不同層級(jí)的元素設(shè)置強(qiáng)烈的視覺區(qū)分，明確告訴他們哪些元素是可以點(diǎn)擊的，需要被關(guān)注的，哪些元素是不可互動(dòng)的。

提高教學(xué)內(nèi)容易識(shí)別性

游戲題型的設(shè)計(jì)方法通常是使用游戲的形式去包裝常規(guī)的教學(xué)題型，讓小朋友感覺是在玩游戲，而不是在做題。因此我們需要設(shè)計(jì)恰到好處的游戲容器去承載教學(xué)內(nèi)容，使其兼具教學(xué)內(nèi)容的識(shí)別性又不會(huì)影響「游戲」體驗(yàn)。此處我們嘗試去拉開游戲元素和教學(xué)內(nèi)容的視覺差距──在畫面中的視覺焦點(diǎn)處擺放教學(xué)內(nèi)容，而游戲元素僅作為背景或者容器，用于襯托教學(xué)內(nèi)容，并且盡量選取不易和教學(xué)內(nèi)容發(fā)生沖突的形式。此外，為兼顧游戲畫面的豐富性和多樣性，容器的設(shè)計(jì)需要有一定的適配性。

△ 適配文字

△ 適配圖片

△ 適配文字和圖片

對(duì)于看文本讀單詞的題型，游戲容器則以烘托文字為主要目標(biāo)。在該場(chǎng)景下，游戲容器的視覺設(shè)計(jì)重點(diǎn)在于外形的刻畫，簡(jiǎn)化內(nèi)部細(xì)節(jié)，以此將孩子的視覺重點(diǎn)聚焦在文本，而非容器本身。此外，為平衡字符段不同所帶來(lái)的顯示差異，我們對(duì)文字的大小也進(jìn)行了適配。

△ 1-12 個(gè)字符──文字大小 88

△ 13-25 個(gè)字符──文字大小 76

△ 26-45 個(gè)字符──文字大小 62

背景畫面的層級(jí)感

在游戲題型中，有不少故事性強(qiáng)，空間延續(xù)性高的設(shè)定。為加強(qiáng)畫面的運(yùn)動(dòng)感和空間感，視覺輸出時(shí)，我們額外增加了前景層，利用前景圖片打造視差效果，以增強(qiáng)整個(gè)背景的層次感。

前景圖片的設(shè)置，同時(shí)也能解決適配不同屏幕尺寸時(shí)，背景區(qū)域顯示差異所帶來(lái)的視覺問(wèn)題。

縱向運(yùn)動(dòng)的情況下，兩側(cè)的圖形如果設(shè)置在背景里，當(dāng)適配到短屏幕的時(shí)候就無(wú)法呈現(xiàn)出來(lái)。

而單獨(dú)設(shè)置成前景圖，則可以靈活地適配不同屏幕比例的機(jī)型。

克制地使用過(guò)于明亮的色彩

用研時(shí)，我們發(fā)現(xiàn)孩子們?nèi)菀妆活伾涯康臇|西所吸引，但如果一個(gè)頁(yè)面上過(guò)度使用明亮的色彩，則會(huì)大大分散孩子們的注意力，顏色過(guò)載所導(dǎo)致的視覺信息復(fù)雜性會(huì)增加孩子們的使用難度。

3. 合理的反饋

合理的反饋包括符合交互邏輯的及時(shí)反饋和適當(dāng)?shù)恼?fù)反饋。在游戲設(shè)計(jì)中，設(shè)計(jì)師大多會(huì)通過(guò)酷炫的動(dòng)效來(lái)做重要操作的點(diǎn)擊反饋，以增加游戲爽感。這套法則，在兒童世界也同樣適用。

及時(shí)反饋制造小驚喜

我們?cè)诋a(chǎn)品的反饋設(shè)計(jì)中適時(shí)地增加一些有趣的微動(dòng)畫，給孩子們制造一些小彩蛋。這些小驚喜，不僅能及時(shí)地拉回小朋友的注意力，給他們帶來(lái)趣味性的同時(shí)，對(duì)他們而言也是一種鼓勵(lì)。

例如：當(dāng)用戶點(diǎn)擊拼圖題選項(xiàng)時(shí)，會(huì)出現(xiàn) IP 相關(guān)的卡通元素，這些元素既能加強(qiáng)趣味性，又能加強(qiáng)用戶對(duì)品牌的認(rèn)知。

適當(dāng)?shù)恼?fù)反饋

大約從 4 歲開始，孩子們就會(huì)有輸贏的概念，會(huì)因?yàn)橼A而喜悅，因?yàn)檩敹械浇箲]。──《數(shù)字時(shí)代兒童設(shè)計(jì)》

對(duì)孩子的正向反饋宜歡呼、表?yè)P(yáng)性的動(dòng)畫為主，整個(gè)畫面氛圍可處理得熱鬧一點(diǎn)，這對(duì)孩子來(lái)說(shuō)是一個(gè)很好的刺激點(diǎn)，能讓孩子有繼續(xù)玩下去的欲望。

△ 正向反饋1：IP 形象高興地跳出

△ 正向反饋2：IP 形象高興地跳出 + 打分星星

△ 正向反饋3：IP 形象鼓掌

考慮到孩子們會(huì)因?yàn)檩敹械浇箲]，因而在處理負(fù)面反饋的時(shí)候，需要考慮他們此刻的心態(tài)，動(dòng)效設(shè)計(jì)應(yīng)拉開與正向反饋的差別且不能過(guò)于消極，消極的反饋容易打擊孩子的積極性，產(chǎn)生挫敗感，鼓勵(lì)性的反饋為宜。

△ 負(fù)面反饋：IP 形象配合鼓勵(lì)性語(yǔ)音做加油的姿勢(shì)

反饋動(dòng)畫的設(shè)置也需要考慮用戶的可接受程度，慎用具有攻擊性動(dòng)效。如下圖，錯(cuò)誤反饋時(shí) IP 形象會(huì)受到攻擊而感冒，上線后發(fā)現(xiàn)孩子們對(duì)這種反饋表現(xiàn)出了害怕的心理。

以上 IP 動(dòng)畫由流利說(shuō)®少兒英語(yǔ)設(shè)計(jì)團(tuán)隊(duì)傾情制作。

視覺輸出

不會(huì)寫代碼的設(shè)計(jì)也是好開發(fā)。

視覺稿如果不能被很好的實(shí)現(xiàn)落地，那再好的設(shè)計(jì)稿也只能是概念，而不是一份有效的方案。在如何更好的把控視覺實(shí)現(xiàn)程度這一問(wèn)題上，我們也走過(guò)不少?gòu)澛?，和開發(fā)經(jīng)過(guò)幾輪的探索，最終形成了一份適合我們團(tuán)隊(duì)的輸出模式。

在整個(gè)開發(fā)環(huán)節(jié)，設(shè)計(jì)師主要承擔(dān)一部分的動(dòng)畫開發(fā)工作。在和開發(fā)對(duì)接的過(guò)程中，我們主要使用的軟件是：

• CocosCreator：游戲開發(fā)軟件，內(nèi)含動(dòng)畫編輯器。
• SourceTree：向開發(fā)提交動(dòng)畫代碼。

△ CocosCreator

△ SourceTree

開發(fā)搭建完框架后，設(shè)計(jì)在 CocosCreator上，完成部分元素的動(dòng)畫，再用 SourceTree 向開發(fā)提交動(dòng)畫代碼。開發(fā)最后通過(guò)代碼將每個(gè)動(dòng)畫串聯(lián)起來(lái)形成一個(gè)完整的動(dòng)畫。

△ CocosCreator 動(dòng)畫編輯器界面截圖

題型動(dòng)畫連貫且細(xì)節(jié)多，單靠視頻 demo 是無(wú)法協(xié)助開發(fā)精準(zhǔn)實(shí)現(xiàn)設(shè)計(jì)效果的。為了解決這個(gè)問(wèn)題，我們建立了對(duì)設(shè)計(jì)落地具有指導(dǎo)性意義的文檔──適配標(biāo)注文檔和動(dòng)畫標(biāo)注文檔。

1. 適配標(biāo)注文檔

用戶機(jī)型調(diào)查結(jié)果顯示，使用 0.462、16:9、4:3 這三類屏幕比例的用戶占比最大。為保證不同屏幕比例上的展示效果，我們根據(jù)上述三種主流尺寸，分別輸出大小為 780×360，640×360，480×360 的設(shè)計(jì)稿，并規(guī)定以 780×360 為設(shè)計(jì)基準(zhǔn)，對(duì)另外兩個(gè)尺寸進(jìn)行適配。

標(biāo)注內(nèi)容為三個(gè)主屏幕尺寸下的縮放比例、大小位置、特定動(dòng)畫的起始點(diǎn)或終止點(diǎn)位置等細(xì)節(jié)調(diào)整標(biāo)注，方便開發(fā)在做適配的時(shí)候能準(zhǔn)確還原設(shè)計(jì)稿的布局。

2. 動(dòng)畫標(biāo)注文檔

該文檔主要是對(duì)動(dòng)畫和音效的詳細(xì)說(shuō)明。每個(gè)題型的動(dòng)畫會(huì)被拆分，以最小可拆分動(dòng)畫為一個(gè)標(biāo)注對(duì)象，對(duì)其標(biāo)注時(shí)長(zhǎng)、具體的動(dòng)畫效果以及運(yùn)動(dòng)曲線數(shù)值等，方便開發(fā)地還原 demo 的設(shè)計(jì)效果。詳細(xì)的標(biāo)注文檔不僅方便了開發(fā)，更為后續(xù)測(cè)試和視覺走查降低了不少溝通成本。

總結(jié)

游戲化題型的設(shè)計(jì)，需要更多的從用戶的角度出發(fā)去思考和權(quán)衡游戲與教學(xué)的平衡性。對(duì)于兒童產(chǎn)品而言，設(shè)計(jì)服務(wù)于教育，愉悅和多變的體驗(yàn)是設(shè)計(jì)的方向，教學(xué)才是最根本的設(shè)計(jì)目標(biāo)。

文章來(lái)源：優(yōu)設(shè)

導(dǎo)航模式是提高可用性的捷徑。當(dāng)你查看近年來(lái)最成功的交互導(dǎo)航設(shè)計(jì)時(shí)，顯而易見的贏家是那些完美執(zhí)行基本原則的人。雖然跳出條條框框思考是一個(gè)非常好思維方式，但有些規(guī)則是你不能打破的。以下是創(chuàng)建出色的移動(dòng)導(dǎo)航的四個(gè)重要原則：

簡(jiǎn)單

首先，最重要的是，導(dǎo)航系統(tǒng)必須簡(jiǎn)單。良好的導(dǎo)航應(yīng)該感覺像一只無(wú)形的手，引導(dǎo)用戶。一種方法是根據(jù)移動(dòng)用戶最有可能執(zhí)行的任務(wù)來(lái)確定移動(dòng)應(yīng)用程序的內(nèi)容和導(dǎo)航的優(yōu)先級(jí)。

可見

正如雅各布·尼爾森（ Jakob Nielsen）所說(shuō)，識(shí)別物體比記憶更容易。這意味著你應(yīng)該通過(guò)使操作和選項(xiàng)可見來(lái)最小化用戶的記憶負(fù)擔(dān)。導(dǎo)航應(yīng)該始終可用，而不僅僅是在我們預(yù)期用戶需要導(dǎo)航的時(shí)候。

明確

導(dǎo)航功能必須是不言而喻的。你需要以簡(jiǎn)潔明了的方式傳遞信息。在沒(méi)有任何外部指導(dǎo)的情況下用戶應(yīng)該一目了然的知道如何從A點(diǎn)轉(zhuǎn)到B點(diǎn)。試想一下購(gòu)物車圖標(biāo)，它作為一個(gè)標(biāo)簽或查看項(xiàng)目的標(biāo)識(shí)符。用戶無(wú)需考慮如何導(dǎo)航才能進(jìn)行購(gòu)買；此元素將指導(dǎo)他們執(zhí)行適當(dāng)?shù)牟僮鳌?

一致性

所有視圖的導(dǎo)航系統(tǒng)應(yīng)相同。不要將導(dǎo)航控件放在不同頁(yè)面上的新位置。不要欺騙你的用戶，要始終保持言行一致。你的導(dǎo)航應(yīng)該使用“最不意外的原則”。導(dǎo)航應(yīng)該激勵(lì)用戶參與并與你所提供的內(nèi)容互動(dòng)。

大拇指設(shè)計(jì)法則

史蒂文·霍伯在對(duì)移動(dòng)設(shè)備使用情況的研究中發(fā)現(xiàn)，49%的人依靠一個(gè)拇指在手機(jī)上完成任務(wù)。在下面的圖中，手機(jī)屏幕上的圖表是近似可達(dá)圖，其中顏色表示用戶可以觸及的屏幕區(qū)域，并與拇指交互。綠色表示用戶可以輕松到達(dá)的區(qū)域；黃色表示需要伸展的區(qū)域；紅色表示需要用戶改變握住設(shè)備的方式的區(qū)域。

在設(shè)計(jì)時(shí)，要考慮到你的應(yīng)用程序?qū)⒃诙喾N環(huán)境中使用；即使是喜歡使用雙手握手機(jī)的人也不一定總是使用多個(gè)手指，更不用說(shuō)雙手與你的用戶界面交互了。將最高層級(jí)且常用的操作放在屏幕底部非常重要。這樣，通過(guò)單手和拇指的交互即可輕松達(dá)到目標(biāo)。

另一個(gè)重點(diǎn)是底部導(dǎo)航應(yīng)該用于具有相同重要性的最高層級(jí)目標(biāo)。是需要從應(yīng)用程序中的任何位置都可以直接訪問(wèn)的。

最后，也是很重要的一點(diǎn)，要注意點(diǎn)擊目標(biāo)區(qū)域的大小。Microsoft 建議 你將觸摸目標(biāo)區(qū)域大小設(shè)置為9平方毫米或更大（135 ppi顯示器上的48×48像素，縮放比例為1.0倍）。避免使用小于7平方毫米的觸摸目標(biāo)區(qū)域。

觸摸目標(biāo)區(qū)域不應(yīng)小于44像素到48像素（或11毫米到13毫米），包括填充。

標(biāo)簽欄

許多應(yīng)用程序使用標(biāo)簽欄來(lái)顯示應(yīng)用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分，允許在功能之間快速切換。

底部導(dǎo)航設(shè)計(jì)的三個(gè)關(guān)鍵因素

導(dǎo)航通常是將用戶帶到他們想要去的地方的工具。對(duì)于具有相似重要性的指定目的地，這些目的地需要從應(yīng)用程序中的任何位置直接訪問(wèn)。好的底部導(dǎo)航設(shè)計(jì)應(yīng)該遵循以下三個(gè)原則。

1.僅顯示最重要的目的地

避免在底部導(dǎo)航中使用五個(gè)以上的訪問(wèn)標(biāo)簽，因?yàn)門AP目標(biāo)之間的距離太近。在標(biāo)簽欄中放太多標(biāo)簽會(huì)使人們很難點(diǎn)擊他們想要的標(biāo)簽。而且，隨著每個(gè)額外的選項(xiàng)卡顯示，就會(huì)增加了應(yīng)用程序的復(fù)雜性。

避免使用五個(gè)以上的目的地。

避免滾動(dòng)內(nèi)容

對(duì)于小屏幕來(lái)說(shuō)，部分隱藏的導(dǎo)航似乎是一個(gè)非常好的解決方案，因?yàn)槟悴槐負(fù)?dān)心有限的屏幕空間，只需將導(dǎo)航選項(xiàng)放入一個(gè)可滾動(dòng)的選項(xiàng)卡即可。但是，可滾動(dòng)的內(nèi)容效率較低，因?yàn)橛脩舯仨毾葷L動(dòng)才能看到所需的選項(xiàng)，因此最好盡可能避免。

該避免在選項(xiàng)卡欄中放置太多項(xiàng)目，以防止用戶滾動(dòng)，然后才能單擊所需的選項(xiàng)。

2.明確當(dāng)前位置

應(yīng)用程序菜單上最常見的一個(gè)錯(cuò)誤是沒(méi)有明確用戶的當(dāng)前位置?！拔以谀睦?？“是用戶遇到的基本問(wèn)題之一。用戶應(yīng)該第一眼就知道如何從A點(diǎn)轉(zhuǎn)到B點(diǎn)，而不需要任何外部引導(dǎo)。你應(yīng)該適當(dāng)?shù)氖褂靡曈X提示（圖標(biāo)、標(biāo)簽和顏色），這樣導(dǎo)航就不需要任何解釋。

圖標(biāo)

底部導(dǎo)航應(yīng)該與圖標(biāo)的內(nèi)容進(jìn)行適當(dāng)?shù)慕Y(jié)合。盡管有一些用戶熟悉的通用圖標(biāo)，但大多數(shù)圖標(biāo)代表的功能包括搜索，電子郵件，打印等。

在適用于Android的先前版本的Bloom.fm應(yīng)用程序中，很難理解用戶的當(dāng)前位置。

顏色

避免在底部選項(xiàng)卡欄中使用不同顏色的圖標(biāo)和文本標(biāo)簽。相反，遵循這個(gè)簡(jiǎn)單的規(guī)則，用應(yīng)用程序的主顏色為當(dāng)前的底部導(dǎo)航（包括圖標(biāo)和任何顯示的文本標(biāo)簽）著色。

左：不同顏色的圖標(biāo)使你的應(yīng)用看起來(lái)像一棵圣誕樹。右：只使用一種原色。

這是iOS的Twitter應(yīng)用程序中的底部欄菜單。消息視圖處于選中狀態(tài)。

如果底部導(dǎo)航欄是彩色的，請(qǐng)確保對(duì)當(dāng)前位置的圖標(biāo)和文本標(biāo)簽使用黑色或白色。

左：避免將彩色圖標(biāo)與彩色底部導(dǎo)航欄配對(duì)。右：使用黑色或白色圖標(biāo)。

文本標(biāo)簽

文本標(biāo)簽應(yīng)為導(dǎo)航圖標(biāo)提供簡(jiǎn)短且有意義的定義。避免使用長(zhǎng)文本標(biāo)簽，因?yàn)樗鼈儾粫?huì)截?cái)嗷蜃詣?dòng)換行。

避免換行，截?cái)嗪涂s小文本標(biāo)簽。

菜單元素應(yīng)易于理解。用戶應(yīng)該能夠理解點(diǎn)擊元素時(shí)會(huì)發(fā)生什么。

目標(biāo)尺寸

使目標(biāo)區(qū)域足夠大，以使其易于點(diǎn)擊或單擊。要計(jì)算每個(gè)底部導(dǎo)航動(dòng)作的寬度，請(qǐng)將視圖的寬度除以動(dòng)作數(shù)量?；蛘撸瑢⑺械撞繉?dǎo)航動(dòng)作設(shè)置為最大動(dòng)作的寬度。Android建議移動(dòng)設(shè)備底部導(dǎo)航欄的尺寸如下。

顯示了移動(dòng)設(shè)備上的固定底部導(dǎo)航欄，單位為密度獨(dú)立像素（dp）

標(biāo)簽上的微標(biāo)

你可以在標(biāo)簽欄圖標(biāo)上顯示微標(biāo)，以表明存在與該視圖或模式相關(guān)的新信息。

考慮對(duì)標(biāo)簽欄圖標(biāo)加微標(biāo)以保持通俗易懂。

3.使導(dǎo)航不言而喻

良好的導(dǎo)航感覺就像是一只看不見的手，可以引導(dǎo)用戶前進(jìn)。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內(nèi)容也沒(méi)有用。

行為

每個(gè)底部導(dǎo)航圖標(biāo)必須指向目標(biāo)目的地，并且不應(yīng)打開菜單或其他彈出窗口。點(diǎn)擊底部的導(dǎo)航圖標(biāo)可以引導(dǎo)用戶直接進(jìn)入相關(guān)的視圖，或者刷新當(dāng)前活動(dòng)的視圖。不要使用標(biāo)簽欄為用戶提供對(duì)當(dāng)前屏幕或應(yīng)用程序模式下的元素起作用的控件。如果需要提供控件，請(qǐng)改用工具欄。

每個(gè)底部導(dǎo)航圖標(biāo)必須通向目標(biāo)目的地。

上面的控件是工具欄而不是底部導(dǎo)航。

保持一致性

盡可能在各個(gè)頁(yè)面上顯示相同的選項(xiàng)卡。最好是你能給用戶一種視覺穩(wěn)定性的感覺。

當(dāng)選項(xiàng)卡的功能不可用時(shí)，不要?jiǎng)h除它。如果在某些情況下刪除了某個(gè)選項(xiàng)卡，但在其他情況下沒(méi)有，替換使應(yīng)用程序的UI無(wú)法預(yù)測(cè)。最好的解決方案是確保所有選項(xiàng)卡都已啟用，但要說(shuō)明為什么選項(xiàng)卡的內(nèi)容不可用。例如，如果用戶沒(méi)有本地文件，則Dropbox應(yīng)用中的“本地”選項(xiàng)卡將顯示一個(gè)頁(yè)面，說(shuō)明如何獲取文件。

Dropbox應(yīng)用的空狀態(tài)頁(yè)面

滾動(dòng)時(shí)隱藏標(biāo)簽欄

如果屏幕是滾動(dòng)的，則當(dāng)人們滾動(dòng)查找新內(nèi)容時(shí)，標(biāo)簽欄可以隱藏，而當(dāng)他們開始回到頂部時(shí)，標(biāo)簽欄可以顯示。

標(biāo)簽導(dǎo)航可以在滾動(dòng)時(shí)動(dòng)態(tài)消失。

視覺愉悅

避免使用橫向運(yùn)動(dòng)在視圖之間轉(zhuǎn)換?；顒?dòng)視圖和非活動(dòng)視圖之間的過(guò)渡應(yīng)使用淡入淡出動(dòng)畫。

圖形圖標(biāo)：創(chuàng)意導(dǎo)航

屏幕尺寸是將你的觀點(diǎn)傳達(dá)給用戶的主要挑戰(zhàn)。使用圖形圖標(biāo)作為菜單元素是解決移動(dòng)端屏幕空間有限問(wèn)題的最有效的方法之一。圖標(biāo)的圖形說(shuō)明了點(diǎn)擊它后將會(huì)進(jìn)入什么頁(yè)面，這種導(dǎo)航模式更加節(jié)省屏幕空間。

Google Material Design，浮動(dòng)操作按鈕

Google Material Design 對(duì)這種類型的導(dǎo)航使用術(shù)語(yǔ)“浮動(dòng)擦操作按鈕”。它們的區(qū)別在于浮動(dòng)在UI上方的帶有圓圈的圖標(biāo)，并具有運(yùn)動(dòng)行為。

像Evernote這樣的應(yīng)用程序通過(guò)對(duì)最重要的用戶操作使用浮動(dòng)操作按鈕簡(jiǎn)化了操作流程。

Tumblr具有漂亮的圖形圖標(biāo)以及適當(dāng)?shù)臉?biāo)簽。當(dāng)你在應(yīng)用程序中滑動(dòng)屏幕時(shí)，這些圖標(biāo)也很方便地消失。

然而，這種模式有一個(gè)明顯的缺點(diǎn)-浮動(dòng)操作按鈕隱藏內(nèi)容。從用戶體驗(yàn)的角度來(lái)看，不便于用戶頻繁點(diǎn)擊操作

而且，許多研究人員表明，圖標(biāo)難以記憶，而且效率極低。只有普遍理解的圖標(biāo)才能被很好的記憶（例如，打印，關(guān)閉，播放/暫停，回復(fù)等）。這就是為什么使圖標(biāo)清晰直觀*，并在圖標(biāo)旁邊引入文本標(biāo)簽的*重要原因。

結(jié)論

導(dǎo)航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應(yīng)用程序時(shí)，要始終考慮用戶角色以及他們的目標(biāo)。然后，定制導(dǎo)航以幫助他們實(shí)現(xiàn)這些目標(biāo)。為用戶設(shè)計(jì)。一個(gè)產(chǎn)品對(duì)他們來(lái)說(shuō)越容易使用，他們使用它的可能性就越大。

wen'z

不知各位產(chǎn)品經(jīng)理、UE/UI設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)，除了考慮交互說(shuō)明、功能狀態(tài)、頁(yè)面邏輯等之外，是否會(huì)關(guān)注 頁(yè)面跳轉(zhuǎn)間的“轉(zhuǎn)場(chǎng)效果”？？？

可能有人會(huì)覺得：“不就普通的界面左移和右移，需要講這個(gè)嗎？”  但是如果我問(wèn)：“為什么要有頁(yè)面轉(zhuǎn)場(chǎng)？有哪些轉(zhuǎn)場(chǎng)類型？要注意哪些細(xì)節(jié)？” 你能一五一十地回答出來(lái)么？

畢竟頁(yè)面間的轉(zhuǎn)場(chǎng)過(guò)渡，是用戶體驗(yàn)我們產(chǎn)品最直接的感知形式，也是人機(jī)交互中最重要的傳達(dá)要素。另外市面上還沒(méi)有系統(tǒng)性介紹'頁(yè)面轉(zhuǎn)場(chǎng)'的文章，所以今天就寫下這方面的干貨，希望能給你帶來(lái)一些收獲。

Part1：頁(yè)面轉(zhuǎn)場(chǎng)的作用

頁(yè)面轉(zhuǎn)場(chǎng)最基礎(chǔ)的作用，無(wú)疑是拉通頁(yè)面與頁(yè)面間的使用流程，使產(chǎn)品的信息內(nèi)容、功能交互等有一個(gè)承接點(diǎn)。但除了這個(gè)打底作用外，頁(yè)面轉(zhuǎn)場(chǎng)還可以體現(xiàn)出多個(gè)方面的作用：

加深用戶印象

一些新奇獨(dú)特、區(qū)別于競(jìng)品的轉(zhuǎn)場(chǎng)效果，完全可以加深用戶對(duì)自己產(chǎn)品的印象，留下特定的產(chǎn)品記憶點(diǎn)。如《紅板報(bào)》的‘折頁(yè)’效果就很讓人記憶尤新，進(jìn)一步提升了產(chǎn)品的競(jìng)爭(zhēng)力。

更有儀式感、增加代入感

就如《每日故宮》在查看文物時(shí)，會(huì)緩慢放大封面、退出局部元素。營(yíng)造一種‘神秘感、即將探索’的氛圍，很符合該產(chǎn)品獨(dú)有的特色。另外一些日志產(chǎn)品，會(huì)利用“翻書”的轉(zhuǎn)場(chǎng)效果來(lái)加強(qiáng)用戶的代入感、趣味性。

突出重點(diǎn)用戶

產(chǎn)品里的重點(diǎn)用戶（如vip用戶、平臺(tái)作家）都是需要特別照顧的對(duì)象。界面設(shè)計(jì)時(shí)除了在背景色、視覺元素不同于普通用戶外，特殊的頁(yè)面轉(zhuǎn)場(chǎng)也能給帶來(lái)一種‘專門定制’的感知。

像《人人都是產(chǎn)品經(jīng)理》APP，在打開普通頁(yè)面和專欄作家的文章時(shí)，前者是普通的‘左移’，后者則‘上下開啟’，給讀者一種‘開啟知識(shí)寶庫(kù)’的進(jìn)場(chǎng)感受。

Part2：頁(yè)面轉(zhuǎn)場(chǎng)類型

說(shuō)完頁(yè)面轉(zhuǎn)場(chǎng)的作用后，下面就是你可能感興趣的內(nèi)容：頁(yè)面轉(zhuǎn)場(chǎng)到底有哪些類型？（以移動(dòng)端頁(yè)面轉(zhuǎn)場(chǎng)為例，PC端亦可復(fù)用該類型）

翻書/頁(yè)、折疊

翻書/頁(yè)：指模仿現(xiàn)實(shí)生活中書本和紙張的切換效果，是一種擬物化的轉(zhuǎn)場(chǎng)方式。常用于雜志、小說(shuō)、日記等產(chǎn)品中。

折疊：根據(jù)水平或者垂直線為中心點(diǎn)，將頁(yè)面的另一部分進(jìn)行翻折。適合各種帶有“日歷”功能的轉(zhuǎn)場(chǎng)。

3D翻轉(zhuǎn)、立體旋轉(zhuǎn)

3D翻轉(zhuǎn)：將二維的頁(yè)面以3D形式（類似魔方）進(jìn)行切換。適合體現(xiàn)產(chǎn)品功能的“空間感”。

立體旋轉(zhuǎn)：根據(jù)水平或者垂直線為中心點(diǎn)，將整個(gè)頁(yè)面進(jìn)行立體旋轉(zhuǎn)。適合體現(xiàn)另一個(gè)“頁(yè)面空間”的效果，用于容納更多的信息內(nèi)容。

拉伸、上下合并

拉伸：根據(jù)水平或者垂直線為中心點(diǎn)，將頁(yè)面進(jìn)行拉長(zhǎng)消失處理，可分為’內(nèi)拉‘與’外拉‘兩種方式。

上下合并：將即將進(jìn)場(chǎng)的頁(yè)面分為上下兩部分進(jìn)場(chǎng)，使頁(yè)面更有層次感。適合給用戶營(yíng)造一種“打開新世界/新天地”的交互認(rèn)知。

扭曲、頁(yè)面融合

扭曲：根據(jù)水平或者垂直線為中心點(diǎn)，將整個(gè)頁(yè)面進(jìn)行旋轉(zhuǎn)、壓縮等處理，適合給用戶傳達(dá)一種’異次元、空間傳送‘的效果。

頁(yè)面融合：根據(jù)頁(yè)面的某個(gè)視覺元素，通過(guò)變形、變色、縮放、位移等方式過(guò)渡到另外一個(gè)頁(yè)面中去。這種轉(zhuǎn)場(chǎng)是最能體現(xiàn)兩個(gè)頁(yè)面之間的‘關(guān)聯(lián)性’，也是過(guò)渡效果最和諧的方式之一。

彈出、縮放

彈出：根據(jù)頁(yè)面的某個(gè)視覺元素，將其彈入到下一個(gè)頁(yè)面中去。適合突出某視覺元素，將其重點(diǎn)彈出展示。

縮放：將整個(gè)頁(yè)面自大而小或者自小而大進(jìn)行縮放過(guò)渡，很適合大封面的轉(zhuǎn)場(chǎng)。

移入、淡化

這是我們最常見、最普通的轉(zhuǎn)場(chǎng)方式了，大部分的產(chǎn)品使用這兩種轉(zhuǎn)場(chǎng)方式。移入有’上下左右‘4個(gè)進(jìn)入方向，而一直使用’左移進(jìn)入、右移退出‘的轉(zhuǎn)場(chǎng)，最能體現(xiàn)產(chǎn)品功能的使用流程。

Part3：轉(zhuǎn)場(chǎng)時(shí)應(yīng)該考慮的細(xì)節(jié)

各種效果只是提供一種選擇而已，根據(jù)自己的產(chǎn)品特性、想要傳達(dá)的交互理念等選擇合適的方式即可。而在一些轉(zhuǎn)場(chǎng)過(guò)程中的細(xì)節(jié)點(diǎn)，是交互設(shè)計(jì)師不能忽略的事項(xiàng)。

頁(yè)面間的關(guān)聯(lián)性

頁(yè)面之間都是通過(guò)’入口信息‘和’頁(yè)面標(biāo)題‘建立關(guān)聯(lián)的，為了增加用戶轉(zhuǎn)場(chǎng)后的代入感、避免產(chǎn)生認(rèn)知錯(cuò)誤（覺得進(jìn)錯(cuò)頁(yè)面），可以考慮用相同的背景色、視覺元素等加強(qiáng)頁(yè)面間的關(guān)聯(lián)。

比如之前QQ游戲中心，將前頁(yè)的背景圖沿用到后頁(yè)中，讓后頁(yè)的游戲描述更有代入感，用戶第一時(shí)間就覺得'來(lái)對(duì)地方了～'

進(jìn)退方向

頁(yè)面的進(jìn)入和退出盡量是成反方向的，即頁(yè)面從右加載邊移入，退出時(shí)則從左邊移出。否則混亂無(wú)序地進(jìn)退方向，會(huì)使用戶的操作流和視覺流感到不適。

返回邏輯的不同

用戶習(xí)以為常的頁(yè)面返回習(xí)慣，一是點(diǎn)擊左上角‘返回/關(guān)閉’圖標(biāo)、二是屏幕扣邊（叫法不同，即按住屏幕最左邊位置向右滑到，iOS與Android均可實(shí)現(xiàn)該方式）。因“返回/關(guān)閉”圖標(biāo)在視覺上帶有明確的指向性，用戶知道點(diǎn)擊后到底是“返回”還是“關(guān)閉”。

但不同頁(yè)面類型的屏幕摳邊，對(duì)應(yīng)的含義和邏輯卻是各不相同的：

原生頁(yè)面：屏幕摳邊是返回上一級(jí)頁(yè)面

就如朋友朋友圈一樣，原生頁(yè)面在屏幕摳邊后是可以回到退出前的頁(yè)面位置、狀態(tài)，亦可以重新加載頁(yè)面。

H5頁(yè)面：屏幕摳邊是關(guān)閉整個(gè)鏈接

無(wú)論在H5里操作了多少內(nèi)容/頁(yè)面，屏幕摳邊都會(huì)關(guān)閉整個(gè)H5鏈接，再次進(jìn)入時(shí)只能重新加載頁(yè)面，操作記錄都會(huì)被清空。

更的返回方式

除了點(diǎn)擊“返回/關(guān)閉”圖標(biāo)、屏幕摳邊外，可以根據(jù)自己產(chǎn)品的頁(yè)面形態(tài)，考慮是否有更的退出形式。比如《下廚房》的食物詳情頁(yè)里，采取“下滑“的形式返回上級(jí)頁(yè)面。

原因在于：該詳情頁(yè)是以大圖+文字的結(jié)構(gòu)描述食物，而大圖的展示區(qū)域很接近于手指的“黃金操作區(qū)”。相對(duì)于將手指移動(dòng)到屏幕左上角點(diǎn)擊返回、或者移到最左邊摳邊返回，“下滑”可以在最短距離內(nèi)、最快速地讓用戶返回首頁(yè)瀏覽其他內(nèi)容。

是否保存/清除用戶操作

頁(yè)面間的跳轉(zhuǎn)和退出，勢(shì)必會(huì)對(duì)當(dāng)前頁(yè)面內(nèi)容和狀態(tài)產(chǎn)生影響。當(dāng)用戶想要離開時(shí)，不同的產(chǎn)品都會(huì)選擇不同的退出策略。舉個(gè)特別典型的例子：微信朋友圈。

當(dāng)退出朋友圈再重新進(jìn)入時(shí)，是會(huì)停留在退出前的頁(yè)面位置，方便繼續(xù)瀏覽好友內(nèi)容。

而退出朋友圈后，入口處提示有好友新動(dòng)態(tài)時(shí)，再次進(jìn)入朋友圈則回到頂部初始位置，以保證可以第一時(shí)間獲取好友動(dòng)態(tài)，滿足用戶日常的社交需求。

每日故宮在這一方面的處理也很用心：無(wú)論用戶在詳情頁(yè)里進(jìn)行了什么操作（屏幕伸縮或滑動(dòng)位置），退出頁(yè)面時(shí)都會(huì)清除用戶的操作痕跡，還原到文物的初始狀態(tài)，給人帶來(lái)一種“保護(hù)文物、細(xì)心嚴(yán)謹(jǐn)”的心理感受。

- 結(jié)尾 -

好了，關(guān)于’頁(yè)面轉(zhuǎn)場(chǎng)‘的話題就先寫到這，各位根據(jù)自己的產(chǎn)品特性、想要傳達(dá)的交互理念等選擇合適的方式即可。下面是總結(jié)筆記：

文章來(lái)源：UI中國(guó)

在年復(fù)一年的電商促銷節(jié)的渲染下，如今618、雙11儼然成為全國(guó)最大的線上狂歡節(jié)。而在狂歡節(jié)中擔(dān)任著重要角色的主會(huì)場(chǎng)，承擔(dān)著為各分會(huì)場(chǎng)分發(fā)流量的重要使命。與此同時(shí)，大促的頁(yè)面設(shè)計(jì)也越來(lái)越趨向于同質(zhì)化，大多基于以往的經(jīng)驗(yàn)沉淀，少有突破。在這樣的背景下，設(shè)計(jì)師不僅需要考慮如何滿足商業(yè)需求，更要兼顧用戶的體驗(yàn)感受。本文將通過(guò)多次主會(huì)場(chǎng)設(shè)計(jì)實(shí)戰(zhàn)中沉淀下的經(jīng)驗(yàn)與教訓(xùn)，以京東微信手Q購(gòu)物入口的年貨主會(huì)場(chǎng)為例，深入探討如何在成熟產(chǎn)品中做突破設(shè)計(jì)。

洞察：發(fā)現(xiàn)問(wèn)題（面臨挑戰(zhàn)）

1. 頁(yè)面結(jié)構(gòu)與動(dòng)線逐漸趨于穩(wěn)定

主會(huì)場(chǎng)設(shè)計(jì)不斷進(jìn)化和演變，從以往簡(jiǎn)單的會(huì)場(chǎng)入口展示，到會(huì)場(chǎng)+品牌+單品+關(guān)鍵詞的綜合內(nèi)容展示。雖然視覺風(fēng)格不同，但無(wú)論從結(jié)構(gòu)上還是體驗(yàn)上來(lái)看，本質(zhì)都相差不大。

2. 需要更豐富的詮釋品牌價(jià)值與用戶感知

在消費(fèi)升級(jí)的大環(huán)境下，消費(fèi)者的消費(fèi)能力/品牌/品質(zhì)在全面升級(jí)，此時(shí)需要更加注重品牌價(jià)值與內(nèi)涵的塑造，精準(zhǔn)化傳遞用戶感知。而主會(huì)場(chǎng)現(xiàn)有模式以大促營(yíng)銷為主，重點(diǎn)突出促銷賣貨氛圍和類目分流，品牌價(jià)值與用戶感知的傳遞較為薄弱。

3. 既要效率分流，也要逛起來(lái)（成交）

分流坑位與效率的提升，在一定程度上會(huì)降低會(huì)場(chǎng)的成交轉(zhuǎn)化，如何平衡二者之間的關(guān)系，在設(shè)計(jì)上需要平衡把握。

聚焦：設(shè)計(jì)目標(biāo)

在電商設(shè)計(jì)中，我們需要把握很重要的一點(diǎn)就是：平衡商業(yè)目標(biāo)與用戶體驗(yàn)之間的關(guān)系。設(shè)計(jì)目標(biāo)的制定，需要我們對(duì)主會(huì)場(chǎng)的商業(yè)訴求與用戶訴求進(jìn)行深入了解，才能制定有理有據(jù)的設(shè)計(jì)目標(biāo)。

1. 商業(yè)訴求

因電商環(huán)境的特點(diǎn)，主會(huì)場(chǎng)設(shè)計(jì)需要以商業(yè)訴求為思考起點(diǎn)，為商業(yè)價(jià)值賦能，輔助其商業(yè)目標(biāo)的達(dá)成。因此，在策劃階段，設(shè)計(jì)師應(yīng)該提前加入討論，和業(yè)務(wù)方一起梳理并明確業(yè)務(wù)訴求。因京東大促節(jié)奏時(shí)間長(zhǎng)的特點(diǎn)，節(jié)奏規(guī)劃上會(huì)分為預(yù)熱、品類、高潮三個(gè)時(shí)間，而針對(duì)不同的時(shí)期，主會(huì)場(chǎng)的業(yè)務(wù)訴求也會(huì)略有變化，但整體差別不大。

會(huì)場(chǎng)分流

大促期間，主會(huì)場(chǎng)作為流量矩陣中心，若只通過(guò)主會(huì)場(chǎng)一個(gè)頁(yè)面來(lái)滿足用戶需求是不太可能的，因此的會(huì)場(chǎng)分流是核心的商業(yè)訴求目標(biāo)。

提升成交轉(zhuǎn)化

雖然主會(huì)場(chǎng)的核心目標(biāo)是分流，但隨著大促策劃的逐漸深化，提升流量成交轉(zhuǎn)化率，賦能主會(huì)場(chǎng)價(jià)值最大化也是需要考慮的重要因素。

會(huì)場(chǎng)預(yù)約

京東大促節(jié)奏具有時(shí)間長(zhǎng)的特點(diǎn)，節(jié)奏規(guī)劃上會(huì)分為預(yù)熱、品類、高潮三個(gè)時(shí)期。如何保障品類日-品類會(huì)場(chǎng)的流量曝光，為會(huì)場(chǎng)預(yù)約也是主會(huì)場(chǎng)設(shè)計(jì)需要考慮的重要因素。

2. 用戶訴求

主會(huì)場(chǎng)最終面對(duì)的還是用戶，服務(wù)好用戶才能使其產(chǎn)生價(jià)值，并最終實(shí)現(xiàn)商業(yè)目標(biāo)。根據(jù)對(duì)以往大促設(shè)計(jì)的用戶及數(shù)據(jù)反饋進(jìn)行深入剖析，可大致分為新用戶及老用戶兩種類型，并進(jìn)一步對(duì)用戶特征/訴求等方面進(jìn)分析整理出用戶角色卡。

通過(guò)以上分析，總結(jié)出以下三大核心用戶訴求。

撿便宜薅羊毛

大促期間，用戶一般通過(guò)購(gòu)物首頁(yè)、社交分享、外部投放等入口進(jìn)入主會(huì)場(chǎng)，無(wú)目的或半目的型用戶居多。不管新用戶還是老用戶，都是以「閑逛」來(lái)尋找折扣，撿便宜薅羊毛心理加重，但也相對(duì)理性。

快速篩選

面對(duì)越來(lái)越復(fù)雜的電商大促內(nèi)容與玩法，用戶需要一個(gè)更簡(jiǎn)單、更的會(huì)場(chǎng)為他們傳達(dá)促銷氛圍與優(yōu)惠。

個(gè)性化推薦

個(gè)性化算法基礎(chǔ)上，用戶對(duì)自己強(qiáng)相關(guān)的內(nèi)容更加感興趣。

3. 核心設(shè)計(jì)目標(biāo)

通過(guò)對(duì)商業(yè)訴求與用戶目標(biāo)的充分解讀，在主會(huì)場(chǎng)設(shè)計(jì)中我們需要在兩者之間找到平衡點(diǎn)，來(lái)更好的兼顧商業(yè)與體驗(yàn)。最終將今年京東微信手Q購(gòu)物入口的年貨主會(huì)場(chǎng)的核心設(shè)計(jì)目標(biāo)設(shè)定為：打造極簡(jiǎn)用戶體驗(yàn)，提升用戶專屬感知。

4. 設(shè)計(jì)策略

設(shè)計(jì)策略的制定能夠有效幫助我們始終貫徹核心設(shè)計(jì)目標(biāo)來(lái)探尋解決方案，根據(jù)前面的設(shè)計(jì)分析，定義出本次年貨節(jié)主會(huì)場(chǎng)的五大設(shè)計(jì)策略：用戶專屬感知、化繁為簡(jiǎn)，整合、多場(chǎng)景可復(fù)用、年味春節(jié)、多緯度多場(chǎng)景。

效率 · 化繁為簡(jiǎn)，整合

1. 頁(yè)面動(dòng)線設(shè)計(jì)

主會(huì)場(chǎng)作為大促版圖中的流量矩陣中心，堪稱絕對(duì) C 位。在向用戶傳遞大促氛圍及專屬感知的同時(shí)，又要滿足效率分流及成交等目標(biāo)，同時(shí)還要引導(dǎo)用戶參與各種互動(dòng)，這需要構(gòu)建合理的頁(yè)面動(dòng)線。本次主會(huì)場(chǎng)頁(yè)面動(dòng)線設(shè)計(jì)劃分為三大板塊：頭頸部、中間和尾部，采用總分總的節(jié)奏引導(dǎo)用戶瀏覽。

• 頭頸部：氛圍與利益點(diǎn)傳達(dá)、高質(zhì)量個(gè)性化推薦傳遞用戶專屬感知；
• 中間：樓層錨點(diǎn)設(shè)計(jì)，便捷篩選，內(nèi)容分流；
• 尾部：長(zhǎng)尾 BI 商品推薦，深化用戶專屬感知。

2. 首屏-頭部設(shè)計(jì)

主會(huì)場(chǎng)頭部作為門面擔(dān)當(dāng)，承載著向用戶傳遞主題訴說(shuō)與促銷氛圍的功能。隨著運(yùn)營(yíng)需求的不斷增加，以及頭部資源利用率等問(wèn)題，頭部設(shè)計(jì)不在單一的追求氛圍打造，而將更多的承載功能型需求，如：會(huì)場(chǎng)推薦、活動(dòng)推薦、預(yù)約時(shí)間軸、互動(dòng)入口、優(yōu)惠券等。在有限的空間里如何進(jìn)行內(nèi)容展現(xiàn)和傳達(dá)，本次年貨節(jié)將通過(guò)內(nèi)容重組和層級(jí)劃分來(lái)進(jìn)行實(shí)現(xiàn)。

體驗(yàn) · 打造專屬感知

1. 首屏-頭部設(shè)計(jì)

精準(zhǔn)化營(yíng)銷下的千人千面，用戶對(duì)自己強(qiáng)相關(guān)的內(nèi)容更加感興趣。大促環(huán)境下，他們更期望了解自己感興趣的單品、品牌、品類的促銷折扣信息。在首屏如何向用戶傳遞專屬感知的體驗(yàn)？我們根據(jù)用戶屬性進(jìn)行新老用戶切分，結(jié)合日?；顒?dòng)數(shù)據(jù)驗(yàn)證整理出：猜你喜歡商品、購(gòu)物車降價(jià)商品、BI 拼購(gòu)商品、BI 會(huì)場(chǎng)等四類內(nèi)容，打造用戶專屬年貨節(jié)模塊。

2. 中間-樓層設(shè)計(jì)

類型繁雜、內(nèi)容眾多的中部樓層設(shè)計(jì)，承擔(dān)著 50+ 分會(huì)場(chǎng)曝光分流的重要使命。我們把 50+ 分會(huì)場(chǎng)劃分為 9 大品類，每個(gè)品類一個(gè)樓層進(jìn)行內(nèi)容組合設(shè)計(jì)，包括：優(yōu)惠券、品類主會(huì)場(chǎng)、分會(huì)場(chǎng)入口、品牌曝光、單品曝光、熱搜詞等內(nèi)容。樓層順序根據(jù) BI 進(jìn)行展示，讓用戶即使在內(nèi)容繁雜的情況下也能快速定位自己感興趣的內(nèi)容。

3. 尾部-猜你喜歡設(shè)計(jì)

長(zhǎng)尾理論是網(wǎng)絡(luò)時(shí)代興起的一種新理論，當(dāng)商品的銷售成本急劇降低時(shí)，幾乎任何以前看似需求極低的產(chǎn)品，只要有賣，都會(huì)有人買。這些需求和銷量不高的產(chǎn)品所占據(jù)的共同市場(chǎng)份額，可以和主流產(chǎn)品的市場(chǎng)份額相比，甚至更大。簡(jiǎn)單了解長(zhǎng)尾的含義后，可以清晰的知道主會(huì)場(chǎng)頁(yè)面中加入長(zhǎng)尾設(shè)計(jì)的原因：利用互聯(lián)網(wǎng)移動(dòng)端頁(yè)面無(wú)限延長(zhǎng)的框架，進(jìn)行更多貨品的曝光，來(lái)留住剩余未跳轉(zhuǎn)流量，進(jìn)行商品售賣來(lái)實(shí)現(xiàn)價(jià)值最大化。在長(zhǎng)尾內(nèi)容上加入 BI 推薦，深化用戶專屬感知，提升用戶消費(fèi)轉(zhuǎn)化。

規(guī)范 · 多場(chǎng)景可復(fù)用

1. 今日必買模塊設(shè)計(jì)

因京東大促品類日節(jié)奏性曝光的特點(diǎn)，主會(huì)場(chǎng)的今日必買模塊作為這一特性的承接模塊，需要滿足不同品類日之間的差異化需求。如何在滿足個(gè)體差異化需求的情況下，又能降低設(shè)計(jì)、開發(fā)成本？本次年貨節(jié)主會(huì)場(chǎng)對(duì)今日必買模塊進(jìn)行了組件化設(shè)計(jì)。

除了今日必買模塊，品類樓層的設(shè)計(jì)也遵循了這一設(shè)計(jì)原則。

互動(dòng) · 多維度多場(chǎng)景

1. 輕互動(dòng)設(shè)計(jì)

如何讓用戶深度參與會(huì)場(chǎng)并形成記憶點(diǎn)？會(huì)場(chǎng)的互動(dòng)設(shè)計(jì)是很好的方法。通過(guò)輕量的互動(dòng)方式，引導(dǎo)用戶參與并拿到獎(jiǎng)勵(lì)的同時(shí)，滿足商業(yè)價(jià)值的需要。本次年貨節(jié)主會(huì)場(chǎng)從用戶角度出發(fā)，通過(guò)：做任務(wù)贏大獎(jiǎng)、分享贏京豆、新年紅包、明星拜年等四個(gè)互動(dòng)玩法，有節(jié)奏的投放在年貨節(jié)的不同時(shí)期，形成用戶記憶點(diǎn)。

效果反饋

有些地方雖略有遺憾，但整體反饋不錯(cuò)。成交、UV 跳轉(zhuǎn)率、UV 價(jià)值等指標(biāo)顯著提升，其中 UV 跳轉(zhuǎn)率、UV 價(jià)值均為近兩年大促主會(huì)場(chǎng)最高值。因涉及敏感數(shù)據(jù)，這里就不再一一詳述。

總結(jié)

通過(guò)對(duì) 19 年年貨主會(huì)場(chǎng)設(shè)計(jì)的詳細(xì)解讀，相信堅(jiān)持閱讀到這里的小伙伴們對(duì)「如何在成熟產(chǎn)品中做突破設(shè)計(jì)」已經(jīng)有了深入的了解，希望我的這些思考能夠給你在工作中帶來(lái)一些幫助。

本文列舉了交易型電商與內(nèi)容型電商的對(duì)比，以及他們的消費(fèi)者交易行為的四大區(qū)別。

No1  ：?jiǎn)为?dú)評(píng)估vs聯(lián)合評(píng)估

消費(fèi)者看到一個(gè)產(chǎn)品的時(shí)候，有兩種典型場(chǎng)景：?

在內(nèi)容電商（比如看到新媒體文章推薦）時(shí)，用戶一般處于單獨(dú)評(píng)估狀態(tài)。

比如顧爺發(fā)過(guò)一個(gè)軟文賣“電表箱掛畫”——家里電表箱很丑、不美觀，用一副畫把它遮住，顯得家里美觀又有逼格。

當(dāng)看到這個(gè)商品推薦廣告的時(shí)候，你就進(jìn)入了“單獨(dú)評(píng)估”狀態(tài)，只比較眼前的畫以及你的現(xiàn)狀（沒(méi)有電表畫）。

這個(gè)時(shí)候你在意的是產(chǎn)品本身好不好，帶給你的感覺怎么樣，以及價(jià)格能不能接受。

很可能的結(jié)果是，你看到這幅畫200多塊錢，也不太貴，所以就買了。

而如果你不是在閱讀顧爺公眾號(hào)的時(shí)候看到商品，而是進(jìn)入淘寶、京東這種交易型電商，心理就不一樣了。

在交易型電商中，用戶一般處于“聯(lián)合評(píng)估”狀態(tài)。

比如淘寶搜“電表箱掛畫”，你看到的頁(yè)面是這樣的：

這個(gè)時(shí)候，你進(jìn)入了“聯(lián)合評(píng)估”狀態(tài)，你主要的比較點(diǎn)不再是“電表箱掛畫”和你的現(xiàn)狀（沒(méi)有電表畫），而是眾多的電表箱掛畫中哪個(gè)最好。

如果你仔細(xì)盯著上面的淘寶圖看，我想你此時(shí)的消費(fèi)者心理已經(jīng)發(fā)生了這些變化：想要看看不同價(jià)位的畫之間到底有什么區(qū)別。

材質(zhì)？大??？印染工藝？誰(shuí)畫的？急于尋找一些讓自己感覺到熟悉的信息。

比如掃一眼看看哪個(gè)品牌是你聽過(guò)的（即使是華為牌的畫，此時(shí)都更能抓你的眼球）。

趕緊比較哪個(gè)店銷量大、好評(píng)多（咦？剛剛看到顧爺?shù)?，怎么不這么關(guān)心銷量信息？）

開始在意價(jià)格，并且重新思考買這個(gè)畫到底值不值。

然后，你可能不會(huì)買電表箱掛畫了，甚至?xí)X得買一幅這樣的畫很多余，還不如買一箱牛奶補(bǔ)補(bǔ)身體。

表面上看，一樣的產(chǎn)品，你僅僅切換了評(píng)估方式（單獨(dú)評(píng)估VS聯(lián)合評(píng)估），你選擇產(chǎn)品的標(biāo)準(zhǔn)卻產(chǎn)生了巨大的變化。

而就像我們前面說(shuō)的，為了“在競(jìng)爭(zhēng)中存活”，你不得不了解，“決定用戶選擇”的因素，到底產(chǎn)生了什么改變：

NO2：感性線索vs理性線索

聯(lián)合評(píng)估環(huán)境下，消費(fèi)者更加注重容易對(duì)比的理性線索，比如材質(zhì)、大小、印染工藝等，這是因?yàn)槁?lián)合評(píng)估的時(shí)候，我們看的是選擇項(xiàng)之間的不同，而不是選擇項(xiàng)和現(xiàn)狀之間的不同。

而在單獨(dú)評(píng)估的時(shí)候，消費(fèi)者會(huì)更加容易受到感性線索的影響，大腦進(jìn)入的不是“計(jì)算模式”而是“感覺模式”，會(huì)更容易感覺到增加一個(gè)畫帶來(lái)的生活改變、這幅畫整體的設(shè)計(jì)感、流露出的藝術(shù)氣息等。

所以，如果你是在參數(shù)上占優(yōu)的產(chǎn)品，比如小米或樂(lè)視的手機(jī)，進(jìn)入聯(lián)合評(píng)估會(huì)非常有利，因?yàn)橛脩舴浅Ｔ谝馀芊帧?

如果你是在參數(shù)以外的體驗(yàn)上占優(yōu)的產(chǎn)品，比如設(shè)計(jì)精美和有情懷的手機(jī)，進(jìn)入單獨(dú)評(píng)估會(huì)比較有利，因?yàn)槟愕膬?yōu)勢(shì)無(wú)法被直接計(jì)算，難以在聯(lián)合評(píng)估中占優(yōu)。

有研究發(fā)現(xiàn)，假設(shè)有兩款同等價(jià)格的冰激凌，一款是滿滿地裝在小杯子里，總共50毫升；另一款是在200毫升的杯子里裝了半滿，相當(dāng)于100毫升。

看到兩款冰激凌，消費(fèi)者卻又會(huì)選擇半滿但是量多的冰激凌——廢話，大家又不傻，看數(shù)據(jù)明顯這個(gè)給的多。

再比如，找工作的時(shí)候，如果只看到一個(gè)職業(yè)選擇，大部分人會(huì)對(duì)那種工作內(nèi)容激動(dòng)人心、公司名讓人仰慕、發(fā)展前景好的工作更滿意（而不是單純的薪水）。

而在聯(lián)合評(píng)估的時(shí)候（同時(shí)拿到很多offer），大家比較來(lái)比較去，最終更容易選擇薪酬更高但自己實(shí)際上并不喜歡的工作。

因?yàn)槁?lián)合評(píng)估的時(shí)候，我們更容易忽略主觀感受，選擇那些“數(shù)據(jù)”和“參數(shù)”上更牛的選項(xiàng)。

所以在淘寶上，你可以直接根據(jù)材質(zhì)、大小等性價(jià)比選擇一個(gè)畫，即使這個(gè)畫買回去后你并沒(méi)有像買顧爺?shù)漠嬆菢芋@喜。

這也意味著，在交易型電商環(huán)境下，拼參數(shù)、拼數(shù)據(jù)的產(chǎn)品容易獲勝，而在設(shè)計(jì)感、原創(chuàng)性上占優(yōu)的產(chǎn)品，難以贏得顧客選擇。

而在內(nèi)容型電商中，我們是單獨(dú)評(píng)估，這時(shí)候設(shè)計(jì)師原創(chuàng)設(shè)計(jì)帶來(lái)的沖擊感，可能直接讓我們選擇去購(gòu)買。

這同樣意味著，在交易型電商中，我們更容易受到銷量領(lǐng)先、知名品牌等信息的影響，因?yàn)檫@也容易比較。

而在內(nèi)容型電商中，我們則直接感覺對(duì)這個(gè)產(chǎn)品喜歡不喜歡。

NO3：高端vs低端

• 聯(lián)合評(píng)估狀態(tài)下，我們會(huì)進(jìn)入“計(jì)算模式”，更加注重價(jià)格信息（因?yàn)槿菀妆容^），所以低價(jià)品的銷售會(huì)非常好。
• 單獨(dú)評(píng)估狀態(tài)下，我們會(huì)更加注重主觀感受，更有可能忽略成本，放縱一下買個(gè)自己喜歡的，所以高價(jià)品、享樂(lè)品的銷售會(huì)非常好。

之前我遇到一個(gè)自媒體賣產(chǎn)品的客戶，同樣的產(chǎn)品（高端有設(shè)計(jì)感的杯子）推送給同樣的粉絲，一個(gè)用淘寶平臺(tái)，一個(gè)直接用微信嵌入的電商平臺(tái)，結(jié)果后者轉(zhuǎn)化率高了十幾倍。

其實(shí)一個(gè)很重要的原因就是：淘寶本質(zhì)上屬于交易型電商，會(huì)強(qiáng)迫所有消費(fèi)者自動(dòng)進(jìn)入聯(lián)合評(píng)估的狀態(tài)。

在這種狀態(tài)下，用戶會(huì)更加在意成本信息，價(jià)格敏感性增強(qiáng)，從而導(dǎo)致更少人選擇高端產(chǎn)品、享樂(lè)產(chǎn)品。

所以高端品牌（比如LV）在線下一定是用專賣店，而不會(huì)進(jìn)入賣場(chǎng)，因?yàn)楹笳呤锹?lián)合評(píng)估。

總結(jié)

在內(nèi)容電商環(huán)境下，更多人會(huì)在單獨(dú)評(píng)估狀態(tài)下購(gòu)物，出現(xiàn)這些變化：

• 性價(jià)比的作用性降低，而感性因素的影響會(huì)升高（比如設(shè)計(jì)感、悠久歷史、情懷、故事等）。
• 低端產(chǎn)品的銷售會(huì)降低，原來(lái)很難賣出去的高端產(chǎn)品、享樂(lè)型產(chǎn)品會(huì)更容易賣。

NO4： 主動(dòng)搜索vs被動(dòng)搜索

如果在淘寶、京東購(gòu)物，此時(shí)你的心理狀態(tài)經(jīng)常是：我要買東西。

你處于“購(gòu)物”（shopping）心態(tài)中，大腦中經(jīng)常裝著某個(gè)潛在的任務(wù)——比如要看看有沒(méi)有好看的衣服或者想買一箱牛奶存放到冰箱。

這個(gè)時(shí)候，我們就說(shuō)你處于“主動(dòng)搜尋”的心理，你會(huì)對(duì)將來(lái)可能會(huì)購(gòu)買的產(chǎn)品信息更加敏感，而對(duì)無(wú)關(guān)信息不那么敏感。

而在內(nèi)容電商環(huán)境中，你本身正在專心看網(wǎng)紅的直播或者某個(gè)自媒體的內(nèi)容，這個(gè)時(shí)候突然看到有個(gè)產(chǎn)品信息（比如講健康的播主，推薦了新型智能牙刷），此時(shí)，我們說(shuō)你處于“被動(dòng)接受”的心理。

這有什么區(qū)別呢？

研究發(fā)現(xiàn)，在主動(dòng)搜尋的心理中，我們會(huì)更加關(guān)心直接與任務(wù)相關(guān)的信息，而對(duì)與任務(wù)無(wú)關(guān)的信息減少關(guān)心。

比如你想挑一款面霜，會(huì)在大量的面霜相關(guān)的商品中進(jìn)行比較，對(duì)面霜相關(guān)的信息非常敏感。

而如果此時(shí)偶爾看到有個(gè)叫做“面部噴劑”的新型產(chǎn)品，你可能壓根不會(huì)關(guān)心（因?yàn)槟阏谡颐嫠?，即使它也可以幫助你改善和保養(yǎng)皮膚。

（ps：這個(gè)產(chǎn)品是我編的，用來(lái)制造未知感，實(shí)際上不存在這個(gè)產(chǎn)品）

所以在交易型電商中，各種新奇、未知的產(chǎn)品，其實(shí)并不好賣。

有個(gè)知名的“看不見的大猩猩”心理實(shí)驗(yàn)證明了這一點(diǎn)。

心理學(xué)家召集一些志愿者，給他們布置任務(wù)：數(shù)一下在接下來(lái)的視頻中，球員一共傳了多少次球。

然后在視頻一半的時(shí)候，有個(gè)人穿著大猩猩的衣服進(jìn)場(chǎng)并且做了歡呼的動(dòng)作。

實(shí)驗(yàn)結(jié)束，心理學(xué)家問(wèn)志愿者：球員一共傳了多少次球？大部分人答案都對(duì)了。

但是接著問(wèn)：你們有看到一個(gè)大猩猩嗎？結(jié)果超過(guò)半數(shù)的人聲稱沒(méi)有看到大猩猩。

這是因?yàn)榭匆曨l的時(shí)候，大部分人聚焦于“數(shù)傳球”這個(gè)任務(wù)中，從而自動(dòng)忽略了與任務(wù)無(wú)關(guān)的信息（大猩猩）。

這也導(dǎo)致了用戶在京東選購(gòu)面霜的時(shí)候，可能更容易關(guān)注面霜本身，而不是主動(dòng)好奇地去尋找除了面霜還有什么新型產(chǎn)品可以替代。

而如果是在內(nèi)容型電商，用戶事先沒(méi)有覺得要買面霜，而是在看一檔教你如何保養(yǎng)面部的節(jié)目，就更容易接受一種新型的護(hù)理面部的方式（比如XX面部噴劑）。

總結(jié)

內(nèi)容型電商，比交易型電商更適合銷售新奇產(chǎn)品。

文章來(lái)源：人人都是產(chǎn)品經(jīng)理

競(jìng)品分析是UX設(shè)計(jì)師的標(biāo)準(zhǔn)工具之一， 且用戶體驗(yàn)設(shè)計(jì)師的主要交付品之一就是競(jìng)品分析報(bào)告。在設(shè)計(jì)一個(gè)新的方案之前，我們往往會(huì)查看其他類似的產(chǎn)品，了解其他人做的相關(guān)工作，希望從中找到任何弱點(diǎn)或者優(yōu)點(diǎn)，并期望在此基礎(chǔ)上進(jìn)行改進(jìn)，這將利于你的設(shè)計(jì)。事實(shí)上，競(jìng)品分析已經(jīng)不再局限于一種工具方法，更是一種思維模式，如何對(duì)比分析，如何批判性的進(jìn)行比較以及從差異中獲取價(jià)值。

UX設(shè)計(jì)項(xiàng)目會(huì)遇到哪些類型的競(jìng)爭(zhēng)對(duì)手？

這個(gè)問(wèn)題可以理解為，我們要分析哪些競(jìng)爭(zhēng)對(duì)手？一般來(lái)講，所有UX項(xiàng)目都面臨兩種競(jìng)爭(zhēng)，一種是直接競(jìng)爭(zhēng)對(duì)手，即業(yè)務(wù)有直接沖突，涉及到具體的利益沖突，商業(yè)沖突。例如滴滴和uber，淘寶和京東。另一種則是“間接競(jìng)爭(zhēng)對(duì)手”，往往針對(duì)某些相似的產(chǎn)品模塊，這里的競(jìng)爭(zhēng)并沒(méi)有準(zhǔn)確的定義，只是為了比較而給與的一個(gè)名稱。 例如你在進(jìn)行自家產(chǎn)品登錄注冊(cè)模塊的設(shè)計(jì)，此時(shí)你不僅僅可以研究一些直接競(jìng)品，也可以研究其他擁有此功能模塊的產(chǎn)品。而該產(chǎn)品與你的產(chǎn)品并沒(méi)有構(gòu)成競(jìng)爭(zhēng)的關(guān)系，只是提供了一個(gè)參考方向。

為什么要進(jìn)行比較？

關(guān)于這個(gè)問(wèn)題有兩個(gè)答案，首先，調(diào)研競(jìng)品發(fā)掘哪些功能或服務(wù)是他們不能做或者沒(méi)有實(shí)現(xiàn)的，這就是我們的產(chǎn)品可以利用的機(jī)會(huì)點(diǎn)，以提供新穎的或者說(shuō)更強(qiáng)大的功能，從而提高產(chǎn)品競(jìng)爭(zhēng)力。例如順豐快遞首先開創(chuàng)了機(jī)器填寫快遞信息的功能，從而大大提高用戶填寫訂單的效率、準(zhǔn)確度和滿意度，進(jìn)一步提高品牌競(jìng)爭(zhēng)力和服務(wù)水平。

其次，檢查其他設(shè)計(jì)師對(duì)相同需求的解決方案必然會(huì)對(duì)你有所啟發(fā)，有利于你從中獲取靈感來(lái)優(yōu)化自家產(chǎn)品。例如信息架構(gòu)的優(yōu)化、或者簡(jiǎn)單地操作流程的優(yōu)化。參考競(jìng)品意味著你可以不斷從中學(xué)習(xí)，把競(jìng)品的每個(gè)模塊、步驟拆解開來(lái)，分析其背后的設(shè)計(jì)原因及它們?nèi)绾伟l(fā)揮作用，這將有利于你的產(chǎn)品設(shè)計(jì)。

參考競(jìng)品首先意味著你能夠達(dá)到和競(jìng)品同一水平的用戶體驗(yàn)，因?yàn)橛辛藚⒄諛?biāo)準(zhǔn)相當(dāng)于指路明燈，競(jìng)品的優(yōu)秀體驗(yàn)也會(huì)督促你不斷優(yōu)化自己的產(chǎn)品。但競(jìng)品雖然為你創(chuàng)造了一個(gè)標(biāo)準(zhǔn)，同時(shí)也會(huì)限制你的思路和想法，使你可能錯(cuò)過(guò)一些更優(yōu)秀的解決方案，參考競(jìng)品能讓你追趕別人，但無(wú)法讓你完全超越他人。因此僅僅復(fù)制是不夠的，必須融入自己的見解且時(shí)刻保持創(chuàng)新意識(shí)。

對(duì)直接競(jìng)爭(zhēng)對(duì)手進(jìn)行分析

通常，競(jìng)品分析發(fā)生在項(xiàng)目的早期，你或許會(huì)尋找市面上是否會(huì)有競(jìng)爭(zhēng)對(duì)手，然后嘗試著從競(jìng)品中尋找優(yōu)點(diǎn)和弱點(diǎn)，以推動(dòng)自己的產(chǎn)品。如果沒(méi)有競(jìng)爭(zhēng)對(duì)手時(shí)，往往可以從目標(biāo)用戶入手，因?yàn)橛脩魧?shí)際上擁有自己的解決方案或者說(shuō)策略，例如在滴滴流行起來(lái)之前，對(duì)應(yīng)的用戶群往往使用出租車來(lái)代替出行方式。目標(biāo)用戶在這之前是如何解決他們的需求的？你應(yīng)該可以獲得一些間接可比的方案，收集用戶的相關(guān)想法有利于推動(dòng)你的產(chǎn)品設(shè)計(jì)。

在產(chǎn)品上線后的運(yùn)行階段，仍然需要做競(jìng)品分析，此時(shí)或許存在一些新興的的競(jìng)品，雖然是后來(lái)者，但往往會(huì)在交互、體驗(yàn)或者運(yùn)營(yíng)策略等方面碰撞出一些新的創(chuàng)意。根據(jù)競(jìng)品的功能策略，你需要進(jìn)行一定的調(diào)整，不斷對(duì)產(chǎn)品迭代優(yōu)化。除此之外，產(chǎn)品有時(shí)需要做一些追隨趨勢(shì)的更新，例如視覺風(fēng)格、新的交互設(shè)計(jì)語(yǔ)言等。

如何從間接競(jìng)爭(zhēng)對(duì)手那里獲得靈感

間接競(jìng)爭(zhēng)對(duì)手也會(huì)給你一定的啟發(fā)，作為一個(gè)用戶體驗(yàn)各種產(chǎn)品時(shí)，留心那些優(yōu)秀的設(shè)計(jì)，可能是視覺方面也可能是交互方面，總之這些優(yōu)雅的設(shè)計(jì)將會(huì)成為你的靈感之源。然而所有的設(shè)計(jì)都有其適用場(chǎng)景及背后的設(shè)計(jì)原理支撐，在海外設(shè)計(jì)經(jīng)驗(yàn)中一再?gòu)?qiáng)調(diào)的 context（上下文）就是這個(gè)意思。

優(yōu)秀的設(shè)計(jì)都是最適合自己的產(chǎn)品和策略的設(shè)計(jì)，而不是最美觀或最的。因?yàn)樵O(shè)計(jì)不僅僅包涵體驗(yàn)更是要兼顧業(yè)務(wù)。同一個(gè)設(shè)計(jì)在一個(gè)地方發(fā)揮作用并不意味著移植到其他地方仍然有效。

例如一個(gè)簡(jiǎn)單的登錄模塊的設(shè)計(jì)，按照常規(guī)經(jīng)驗(yàn)，以目前微信的受眾數(shù)量做參考，可以無(wú)腦選擇微信快捷登錄，這無(wú)疑是最便捷的方案，但為什么很多產(chǎn)品仍然采用手機(jī)登錄？因?yàn)橐粋€(gè)注冊(cè)的手機(jī)號(hào)碼能為公司的未來(lái)帶來(lái)極大的增值，每個(gè)號(hào)碼背后都是一個(gè)用戶，且通過(guò)手機(jī)號(hào)可以對(duì)這個(gè)用戶進(jìn)行持續(xù)的推廣營(yíng)銷，如拼多多的短信推廣，移動(dòng)聯(lián)通的電話推廣。

所以，一切的設(shè)計(jì)都應(yīng)以設(shè)計(jì)背景，業(yè)務(wù)訴求為基本原則來(lái)進(jìn)行，盲目的追尋極限的視覺和效率，盲目的信奉設(shè)計(jì)潮流趨勢(shì)都是不可取的。好的設(shè)計(jì)和時(shí)尚的設(shè)計(jì)不同，好的設(shè)計(jì)有持久的價(jià)值，是美學(xué)和體驗(yàn)的結(jié)合，并以基于心理學(xué)社會(huì)學(xué)的用戶研究為后盾。這樣的設(shè)計(jì)符合用戶的需求同時(shí)能為企業(yè)帶來(lái)收益。而時(shí)尚的設(shè)計(jì)則會(huì)隨著時(shí)間流逝而銷聲匿跡。

一味追尋潮流的應(yīng)用程序設(shè)計(jì)，公然違背基本的可用性慣例，違背交互設(shè)計(jì)的基本原理，很有可能在市場(chǎng)中失敗。——Prototyper.io UX首席負(fù)責(zé)人Miklos Philips

競(jìng)品分析時(shí)謹(jǐn)記五個(gè)原則

為了保證你所進(jìn)行的競(jìng)品分析的有效性，需要謹(jǐn)記以下五個(gè)原則。 

1.理解背后的需求

分析任何設(shè)計(jì)之前都需要理解設(shè)計(jì)背后的核心需求，這并不是簡(jiǎn)單的查看表面內(nèi)容，除了交互體驗(yàn)上的思考，更要深入產(chǎn)品本身，去更多的理解業(yè)務(wù)層商業(yè)策略等方面的內(nèi)因。每個(gè)設(shè)計(jì)都有對(duì)應(yīng)的場(chǎng)景、上下文甚至各種限制條件。只有理解這些你才清楚這個(gè)設(shè)計(jì)是否適合你的產(chǎn)品，或者是否有一定的參考意義。

比如觀察淘寶的搜索功能你會(huì)發(fā)現(xiàn)首頁(yè)的搜索和店鋪的搜索有很大差異，即首頁(yè)的搜索比重要遠(yuǎn)遠(yuǎn)大于店鋪的搜索。店鋪中的搜索按鈕僅僅展示一個(gè)雙指面積的btn，而首頁(yè)則是展示一個(gè)接近通欄的搜索條。那么分析下來(lái)，店鋪的搜索btn小巧精致，簡(jiǎn)易美觀是否應(yīng)該借鑒，答案是看情況。淘寶首頁(yè)入口提供的是一級(jí)搜索，涵蓋了淘寶百億級(jí)別的商品，因此搜索功能的優(yōu)先級(jí)極高。而店鋪商品有限，用戶瀏覽商品往往按照分類，很少使用搜索功能，這種情況下搜索的優(yōu)先級(jí)很低。 

因此，理解設(shè)計(jì)背后的理念，解決的問(wèn)題、如此設(shè)計(jì)的原因才是競(jìng)品分析重點(diǎn)關(guān)注的方向。切記浮于表面。

2.確定真正的競(jìng)爭(zhēng)者

認(rèn)清自己的競(jìng)爭(zhēng)者，他們往往并不僅僅是表面的直接對(duì)手。事實(shí)上應(yīng)用程序只是一種幫助用戶達(dá)成目標(biāo)的技術(shù)手段從用戶角度，有很多可選方向，而你的產(chǎn)品想要獲得成功，你就要做那個(gè)體驗(yàn)最好，滿意度最高的選項(xiàng)?；叵胍幌?，便利貼的功能應(yīng)用程序是否能實(shí)現(xiàn)？答案是肯定的，但現(xiàn)在為止并沒(méi)有任何應(yīng)用程序能夠撼動(dòng)便利貼的霸主地位。因此，滴滴的競(jìng)品真的只是其他網(wǎng)約車公司嗎，事實(shí)上滴滴最大的競(jìng)品是出租車。通常，你最強(qiáng)大的對(duì)手并一定不是和你一樣的科技產(chǎn)品。

3.通過(guò)標(biāo)準(zhǔn)來(lái)判斷，而不是個(gè)人臆測(cè)

每次進(jìn)行比較都意味著根據(jù)某個(gè)標(biāo)準(zhǔn)來(lái)進(jìn)行判斷，如何決定兩者的功能孰優(yōu)孰劣，最好的方法是引入標(biāo)準(zhǔn)或者用數(shù)據(jù)說(shuō)話。例如競(jìng)品某個(gè)模塊轉(zhuǎn)化率高，那必然有其內(nèi)因。另外，我們可以根據(jù)業(yè)界的標(biāo)準(zhǔn)來(lái)評(píng)判產(chǎn)品的可用性體驗(yàn)，如尼爾森的啟發(fā)式評(píng)估原則（后面會(huì)詳細(xì)講到）。

4.盲目模仿是導(dǎo)致失敗的罪魁禍?zhǔn)?/strong>