在谷歌于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í)慣，無(wú)論是是界面還是家具，當(dāng)我們面對(duì)它們時(shí)，我們的大腦都會(huì)做出反應(yīng)，看它和自己的“預(yù)期”像不像，也就是說，在我們的大腦中，存在著一個(gè)模板庫(kù)，不同類別的事物都有不同的模板，在我們看到相應(yīng)事物時(shí)，我們都會(huì)和大腦中的模板對(duì)比，從而判斷相應(yīng)事物的外觀和使用感受。
以網(wǎng)頁(yè)設(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)頁(yè)設(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)頁(yè)重設(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)快速購(gòu)買。
[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)約為美的原因，在于大腦和眼睛無(wú)需耗費(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è)元素都很重要，無(wú)論是字體，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ù)期
