在谷歌于2012的一項(xiàng)研究中表明，用戶只需1/50或者1/20秒就能判斷一款界面，用戶本能上期望界面是有序、簡(jiǎn)介、毫不費(fèi)腦的，這就是為什么扁平化設(shè)計(jì)提倡簡(jiǎn)約，為什么復(fù)雜的視覺設(shè)計(jì)越來越不吃香的原因。

　　進(jìn)一步說，“有原型依據(jù)”的界面，結(jié)合簡(jiǎn)約的設(shè)計(jì)理念，往往能夠更容易獲得用戶的青睞。

[Page: ]

　　越簡(jiǎn)約，越好！

　　但是為什么呢？

　　本文，我們來探索一下“認(rèn)知學(xué)理論”和“視覺信息處理理論”，希望以此為指導(dǎo)，能幫助你更好的進(jìn)行界面簡(jiǎn)化，提升你的設(shè)計(jì)觀念。

　　本文參考了一些界面（尤其是網(wǎng)站）的簡(jiǎn)化對(duì)比，并給出了充分的數(shù)據(jù)證明，事實(shí)證明，簡(jiǎn)化能夠大幅提高轉(zhuǎn)化率。

有原型依據(jù)的界面設(shè)計(jì)

　　如果我說“家具”這個(gè)名字，95%的人腦海中首先想到的一般都是“椅子。當(dāng)我問“代表男孩的顏色”，一般人也都會(huì)想到“藍(lán)色”，“粉色”代表“女孩”，問到“汽車”，一般會(huì)想到“小轎車”

　　某物的原型指：當(dāng)你與某物交互時(shí)，首先映入你腦海的精神形象。我們?nèi)祟愄焐羞@種“對(duì)號(hào)入座”的習(xí)慣，無論是是界面還是家具，當(dāng)我們面對(duì)它們時(shí)，我們的大腦都會(huì)做出反應(yīng)，看它和自己的“預(yù)期”像不像，也就是說，在我們的大腦中，存在著一個(gè)模板庫，不同類別的事物都有不同的模板，在我們看到相應(yīng)事物時(shí)，我們都會(huì)和大腦中的模板對(duì)比，從而判斷相應(yīng)事物的外觀和使用感受。

　　以網(wǎng)頁設(shè)計(jì)為例，原型依據(jù)的種類很多。對(duì)于電商網(wǎng)站，用戶有一種模板，對(duì)于社交網(wǎng)絡(luò)，又是另外一種，博客，又是一種。如果你看到的網(wǎng)站和你的預(yù)期不符，那么在心理上，你便會(huì)抗拒這個(gè)網(wǎng)站。

　　如果要設(shè)計(jì)一款“為年輕人提供服務(wù)的在線服飾商城” ，你心中的預(yù)期應(yīng)該是這樣：

image credit（圖像來源）

　　下圖可以算是“在線服飾商店”的網(wǎng)站原型匯總，而上圖比較符合下圖的標(biāo)準(zhǔn)。但是上圖的網(wǎng)頁設(shè)計(jì)，在參考下圖的基礎(chǔ)上，還添加了一些自己的東西。

image credit（圖像來源）

　　事實(shí)上，導(dǎo)航高效的電商網(wǎng)站，幾乎模子都差不多。這不能說是竊取，因?yàn)橛脩魧?duì)電商網(wǎng)站的預(yù)期就是這樣，如果你過度表達(dá)創(chuàng)意，用戶不一定買單。

什么叫認(rèn)知流暢的界面設(shè)計(jì)？

　　大腦看到事物后，會(huì)有一個(gè)預(yù)判，會(huì)判定這個(gè)東西是否容易理解，這就是“認(rèn)知流暢”背后的基本理念。

　　“讓用戶掌握全局”，這句話在不少設(shè)計(jì)師口中反復(fù)出現(xiàn)，但到底什么是掌握全局呢？我來告訴你，掌握全局的意思就是：界面簡(jiǎn)單，用戶掃一眼，就能知道功能是什么，界面中都有什么，我要找的東西在哪里。這就是掌握全局的含義。

[Page: ]

“界面的流暢性等同于界面的有效性，信息也有重量?！?#8202;— Uxmatters.com

　　認(rèn)知流暢和“曝光效應(yīng)”（我們會(huì)偏好自己熟悉的事物）有所聯(lián)系，你越熟悉某類事物，你越能接受某類事物。

image source（圖像來源）

　　對(duì)于界面設(shè)計(jì)來說，同理。

　　用戶“很熟悉”博客網(wǎng)站中博文底部的評(píng)論輸入框。用戶“很熟悉”電商網(wǎng)站中高分辨率的大圖和精美的Banner。

　　如果你的界面設(shè)計(jì)和用戶心理預(yù)期不符，那么你的設(shè)計(jì)往往會(huì)被用戶否定。

　　看看下面這些電商網(wǎng)站，看你是否能找到一些相似性？

　　注意: 都說“不要盲從潮流”，可潮流是因?yàn)橛脩粽J(rèn)可才形成的，一定要尊重用戶，這樣你才能獲益。

　　因此你的設(shè)計(jì)一定要遵循用戶的預(yù)期，一定要有原型依據(jù)。

　　很多設(shè)計(jì)師不做研究，想當(dāng)然的設(shè)計(jì)。很多電商網(wǎng)站使用自動(dòng)滾動(dòng)欄來展示圖像，但實(shí)際上，自動(dòng)滾動(dòng)欄降低轉(zhuǎn)化率。

[Page: ]

當(dāng)設(shè)計(jì)遭遇用戶預(yù)期——案例研究

　　上圖的三幅圖像中，均展示了用戶想在電商網(wǎng)站中看到的元素。即便你從未上過此類網(wǎng)站，也能夠快速認(rèn)同這種設(shè)計(jì)。

　　我們常說一句話"了解-掌握-深入"，這種符合用戶預(yù)期的設(shè)計(jì)，完全可以跳過了解/用戶指引/用戶教學(xué)流程，讓用戶快速上手，用戶上來就處于“掌握”階段。他們能大致了解功能、理解界面劃分，這便是高認(rèn)知流暢的界面設(shè)計(jì)。

　　我們來看看下面這個(gè)案例 Skinnyties.com的網(wǎng)頁重設(shè)計(jì)。（這也是一個(gè)電商網(wǎng)站）

之前:

之后:

改版后的幾個(gè)關(guān)鍵點(diǎn)：

• 遵循了上面提到的電商類網(wǎng)站用戶預(yù)期原型圖。

• 大量留白，凸顯出更多的可點(diǎn)擊區(qū)域。

• “精”而“美”，分辨率高，單一產(chǎn)品的簡(jiǎn)約性得到凸顯，采用了對(duì)照色來作為視覺強(qiáng)調(diào)。
  
  重設(shè)計(jì)后，新網(wǎng)站上線3周后的數(shù)據(jù)統(tǒng)計(jì)：

　　轉(zhuǎn)化率提高l了13.6%，跳出率降低了23.2%，各設(shè)備用戶增長(zhǎng)率42.4%。

　　這款重設(shè)計(jì)本身，談不上多出彩。僅僅簡(jiǎn)單的滿足了用戶預(yù)期，對(duì)應(yīng)上了用戶對(duì)于電商網(wǎng)站的“模板”而已。新的設(shè)計(jì)“更開放”、響應(yīng)式，設(shè)計(jì)元素一致。

　　和老版相比，重設(shè)計(jì)非常明智，減少元素，減少用戶的判斷和選擇，讓用戶實(shí)現(xiàn)快速購買。

[Page: ]

視覺信息處理理論與界面簡(jiǎn)繁

　　哈佛大學(xué)、科羅拉多大學(xué)、馬里蘭大學(xué)以人口統(tǒng)計(jì)的形式制作了一張關(guān)于“美學(xué)愉悅感”的圖表。

　　紅線代表簡(jiǎn)約，藍(lán)線代表復(fù)雜，簡(jiǎn)而言之，界面設(shè)計(jì)越復(fù)雜，視覺吸引力越差。

　　為什么在科學(xué)上，人的大腦更容易處理簡(jiǎn)約的信息？

　　簡(jiǎn)約為美的原因，在于大腦和眼睛無需耗費(fèi)心力去處理、解碼、貯存信息。

　　你的視網(wǎng)膜會(huì)將真實(shí)世界的圖像信息轉(zhuǎn)化為電脈沖。這些脈沖與相應(yīng)的感受態(tài)細(xì)胞發(fā)生關(guān)聯(lián)。從而傳遞了色彩、圖形信息給大腦。

　　顏色和元素越多，眼睛需要做的工作就越多。

看似相同，實(shí)則不同，每個(gè)元素都能傳達(dá)微妙的信息

image source（圖像來源）

　　牽一發(fā)而動(dòng)全身的蝴蝶效應(yīng)是真的。因此在界面設(shè)計(jì)中，每個(gè)元素都很重要，無論是字體，Logo，色彩選擇，留白（上圖）都很重要，都會(huì)影響到用戶對(duì)界面的感受。

　　一些界面復(fù)雜的原因，是設(shè)計(jì)師的問題，設(shè)計(jì)師沒有充分利用每個(gè)元素的功能性，因此有些功能就需要視覺元素的“重復(fù)疊加”來實(shí)現(xiàn)，因此反復(fù)，美學(xué)上也不被用戶接受。

　　視覺信息處理理論不容小視，針對(duì)此進(jìn)行設(shè)計(jì)優(yōu)化，可以減少用戶信息搜索耗時(shí)，減少用戶認(rèn)知負(fù)載——只要你能夠充分利用手頭的元素就好。

　　MailChimp Logo的重設(shè)計(jì)，看似很小的改動(dòng)，感覺上，完全不同，第一版由于字體過于纏繞、潦草，雖然幾個(gè)字母，但是看起來很費(fèi)力。而第二版的優(yōu)化真可謂下了功夫（如下）:

　　增加筆劃間的距離，留白讓Logo看起來更“流暢”：

　　更流暢的節(jié)奏感：

　　在筆劃相遇點(diǎn)，采用更纖細(xì)的線條，提高字母主體的可讀性。

　　更流暢的弧度感。

　　MailChimp，這9個(gè)字母，很簡(jiǎn)單了，是吧？但是看了上面的比較，你發(fā)現(xiàn)“簡(jiǎn)單”也有“相對(duì)簡(jiǎn)單”和“更簡(jiǎn)單”的區(qū)別。新的Logo設(shè)計(jì)，讓用戶看起來更舒心，也能更好的傳達(dá)“流暢發(fā)送郵件”的產(chǎn)品理念。

　　數(shù)據(jù)統(tǒng)計(jì)，Logo改版之后，六月份新增了100W用戶。

[Page: ]

“工作內(nèi)存”和轉(zhuǎn)化率圣杯

　　簡(jiǎn)約為美、簡(jiǎn)約有效、簡(jiǎn)約致勝的原因可以在我們?nèi)祟惖拇竽X中找到答案。

　　普林斯頓的心理學(xué)家 George A Miller曾做了一份著名的報(bào)告，其中指出，人腦有5-9塊儲(chǔ)存短期信息的區(qū)域，叫做“工作內(nèi)存”（各位聯(lián)想一下PC內(nèi)存與硬盤的區(qū)別，一個(gè)短期，一個(gè)長(zhǎng)期。）

　　工作內(nèi)存是大腦的一部分，能夠讓我們?cè)趲酌雰?nèi)貯存、處理信息。幫助你凝聚注意力，保持不分心，更重要的是，幫你做決定。

image source（圖像來源）

[Page: ]

　　簡(jiǎn)約能夠減少工作內(nèi)存中的“噪音干擾”

　　在“簡(jiǎn)約，有原型依據(jù)的界面設(shè)計(jì)中”，5-9塊工作內(nèi)存可以高效運(yùn)轉(zhuǎn)，讓我們可以迅速掌握信息，從而解決問題。

偏差導(dǎo)致用戶離去
　
　　當(dāng)你的設(shè)計(jì)不符合用戶預(yù)期時(shí)，就產(chǎn)生了偏差，用戶就會(huì)離去——我口袋只有200塊，我絕對(duì)不會(huì)買400塊的東西。

　　配色、對(duì)稱美、加載速度、圖像清晰度、這些用戶都有著相應(yīng)的預(yù)期。那么面對(duì)一些不流暢的設(shè)計(jì)時(shí)，工作內(nèi)存是怎樣處理的呢？

　　當(dāng)遇到熟悉的事物時(shí)，工作內(nèi)存會(huì)調(diào)用長(zhǎng)期記憶來完成任務(wù)。當(dāng)長(zhǎng)期記憶中不存在此類記憶時(shí)，整個(gè)節(jié)奏就被破壞了。

　　這就是為什么一些文章反復(fù)提及用戶習(xí)慣，用戶習(xí)慣就是這么重要，不要隨便破壞。

　　用戶日常瀏覽的網(wǎng)站、用戶的年齡、性別、所處的國(guó)家，都會(huì)影響到他們的認(rèn)知。

[Page: ]

結(jié)論

　　如果用戶在你的設(shè)計(jì)中找不到參考原型，那么他們便會(huì)否認(rèn)你的網(wǎng)站?！皯?yīng)該會(huì)這樣”他們往往會(huì)有一個(gè)預(yù)期。想讓用戶買單，必須先滿足用戶的心理認(rèn)知習(xí)慣。

　　附贈(zèng)：簡(jiǎn)約UI設(shè)計(jì)的7條建議

1. 研究用戶最常使用的應(yīng)用和網(wǎng)站，多做案例研究，找出在關(guān)鍵位置設(shè)計(jì)的妙法。

2. 取其精華，去其糟粕，博百家之眾長(zhǎng)，汲取成功設(shè)計(jì)的優(yōu)點(diǎn)，混入你的設(shè)計(jì)中。

3. 設(shè)計(jì)布局時(shí)，要考慮認(rèn)知學(xué)原理，最重要的東西放在用戶最習(xí)慣的地方。

4. 根據(jù)自己的色彩、Logo和字體，簡(jiǎn)潔的進(jìn)行視覺傳達(dá)。元素不宜過多

5. 保持簡(jiǎn)單，巧妙使用留白。

6. 再三檢查加載速度、美學(xué)等因素。

7. 原型依據(jù)不是純粹的視覺抄襲，而是心理上的某種預(yù)期