用超多案例，幫你掌握尼爾森十大設(shè)計(jì)原則（上）

用戶界面設(shè)計(jì)的基本準(zhǔn)則，每當(dāng)用戶進(jìn)行交互后，它們都需要知道交互是否成功。通過適當(dāng)?shù)姆答伩梢宰層脩羟逦母兄疆?dāng)前的狀態(tài)，以便于他們進(jìn)行下一步?jīng)Q策。

這個(gè)很好理解，比如最常見的按鈕點(diǎn)擊后的水波紋反饋，在Material Design的官方規(guī)范中，就明確了一個(gè)按鈕在不同情況下需要通過不同的視覺反饋形式告知用戶當(dāng)前狀態(tài)。

我們?cè)谔詫氝x擇將某件商品加入購(gòu)物車后，系統(tǒng)會(huì)通過短暫性的彈窗告知用戶添加成功，而當(dāng)我們需要在微信中向別人轉(zhuǎn)賬的時(shí)候，系統(tǒng)會(huì)用彈窗讓你進(jìn)行二次確認(rèn)。微信中如果有未讀消息或者新的朋友圈一般會(huì)通過紅點(diǎn)的信息給予用戶反饋。

添加購(gòu)物車作為不會(huì)對(duì)用戶造成損害的操作，一般來(lái)說(shuō)盡量不要打斷用戶的操作，只需要進(jìn)行短暫的反饋，而轉(zhuǎn)賬等牽扯到用戶利益的操作就需要打斷用戶的當(dāng)前操作，進(jìn)行再次確認(rèn)。這就是在不同的場(chǎng)景中我們需要考慮使用「適當(dāng)?shù)姆答仭埂?/p>

2. 適時(shí)的反饋

除了適當(dāng)?shù)姆答佇问酵猓煌姆答佇枰钆洳煌臅r(shí)間場(chǎng)景來(lái)進(jìn)行，并且需要保證反饋的及時(shí)性，否則容易造成用戶的混亂與不安。

常見的下拉刷新以及進(jìn)行加載時(shí)的loading動(dòng)畫，都是在用戶進(jìn)行相應(yīng)的加載操作后才會(huì)出現(xiàn)，如果一個(gè)產(chǎn)品動(dòng)不動(dòng)就自動(dòng)跳出loading，不僅會(huì)阻礙用戶操作，還會(huì)讓用戶迷惑是不是自己的網(wǎng)絡(luò)狀態(tài)較差。

值得一提的是iOS系統(tǒng)中的勿擾模式，用戶可以通過自己來(lái)開啟與關(guān)閉是否接收反饋，如果我們無(wú)法判斷用戶合適需要反饋，那就讓用戶自己決定吧，顯然這樣會(huì)極大滿足用戶的掌控感。

3. 生活中的反饋場(chǎng)景

前面我們提到狀態(tài)可見性不僅只是運(yùn)用在界面交互中，在很多生活場(chǎng)景中我們也能看到。

例如我們經(jīng)常乘坐的地鐵，當(dāng)?shù)罔F即將進(jìn)站以及離開的時(shí)候，隔離門以及指示燈會(huì)不停的閃爍燈光，并且發(fā)出“滴滴滴”的聲音，通過視覺以及聽覺給予用戶反饋，提示用戶準(zhǔn)備上車或下車。而且由于地鐵停靠時(shí)間較短，聲音與燈光通常是短而急促的。

另一個(gè)生活中的常見場(chǎng)景就是公交車的掃碼乘車，當(dāng)掃碼成功后機(jī)器會(huì)發(fā)出音效給予用戶反饋，根據(jù)不同的場(chǎng)景音效也會(huì)有所不同，比如一些車全程都是同樣的價(jià)格，掃碼后只會(huì)“滴”，有些車輛按距離收費(fèi)，所以下車刷的時(shí)候會(huì)報(bào)出具體的價(jià)格，最近我所在在的城市周末免費(fèi)乘車，所以刷了以后會(huì)語(yǔ)音播報(bào)“免費(fèi)乘車”。

原則二：系統(tǒng)與現(xiàn)實(shí)世界之間的匹配

“系統(tǒng)應(yīng)使用用戶熟悉的語(yǔ)言和概念，而不是技術(shù)性很強(qiáng)的術(shù)語(yǔ)。產(chǎn)品應(yīng)遵循現(xiàn)實(shí)世界慣例來(lái)呈現(xiàn)信息。”

設(shè)計(jì)師或開發(fā)人員≠用戶，所以千萬(wàn)不要將我們對(duì)產(chǎn)品的理解以及專業(yè)術(shù)語(yǔ)代入到用戶的使用場(chǎng)景中。用戶的認(rèn)知一般來(lái)源于對(duì)周圍環(huán)境的感知以及個(gè)人因素，我們應(yīng)該多觀察生活場(chǎng)景，尋找最貼切用戶的表述方式。

1. 用戶熟悉的語(yǔ)言

官方的文獻(xiàn)中語(yǔ)言主要是針對(duì)“網(wǎng)站上使用的術(shù)語(yǔ)”，但是隨著設(shè)計(jì)的發(fā)展，這個(gè)語(yǔ)言也可以看作平時(shí)我們所說(shuō)的設(shè)計(jì)語(yǔ)言，比如配色，整體風(fēng)格等等。應(yīng)該讓用戶能夠清晰的理解這種「語(yǔ)言」。

熟悉的語(yǔ)言前提是針對(duì)不同的用戶群體，比如上面這三個(gè)產(chǎn)品的目標(biāo)用戶群體就大不相同，B站更加傾向二次元群體，頂部導(dǎo)航欄中的「追番」就是二次元用戶熟悉的語(yǔ)言。再比如金融類產(chǎn)品中的「自選」tab選項(xiàng)，以及面向工程師的產(chǎn)品分類。

2. 充分模擬現(xiàn)實(shí)世界中的概念

用戶現(xiàn)實(shí)中的體驗(yàn)會(huì)在不經(jīng)意間帶入到數(shù)字世界中，所以使用模擬物理世界中的交互，利用人們的現(xiàn)有知識(shí)，可以幫助用戶輕松掌握界面的使用方式，最大程度的降低用戶的學(xué)習(xí)成本。

早期數(shù)字產(chǎn)品界面使用的「擬物化」圖標(biāo)就是通過描繪現(xiàn)實(shí)時(shí)間的產(chǎn)品，方便用戶對(duì)功能進(jìn)行感知，不過隨著用戶被互聯(lián)網(wǎng)教育的越來(lái)越成熟，后面漸漸開始使用扁平化風(fēng)格代替。雖然逐漸扁平化成為主流，但一些成品中依然保留了擬物但特征，比如IOS中的指南針表盤。

網(wǎng)易云音樂中最顯著的黑膠唱片特征，不僅通過模仿現(xiàn)實(shí)世界的使用映射降低了學(xué)習(xí)成本，而且融入了情感，拉開了跟其他同類音樂唱品的差異性。

3. 文化觀念隱喻

利用用戶對(duì)現(xiàn)實(shí)世界對(duì)感知，不僅視覺上帶有擬物化對(duì)相似性，不同對(duì)文化之間也有廣泛對(duì)隱喻，比如符號(hào)中的「+」代表增加，「-」代表減少，以及常用紅色代表禁止?fàn)顟B(tài)，綠色標(biāo)示成功，黃色標(biāo)示警告。（不同的地區(qū)，宗教，教育等文化差異性會(huì)有所不同）。

原則三：用戶操作可控性

“用戶經(jīng)常在使用時(shí)選擇了錯(cuò)誤的操作，所以產(chǎn)品需要有一個(gè)非常明確的「緊急出口」，用于幫助用戶撤銷或重做。”

原則上來(lái)說(shuō)，在用戶發(fā)生錯(cuò)誤之前我們就應(yīng)該給予阻止或者警示，但很多時(shí)候用戶發(fā)生主觀操作上的失誤不可避免，當(dāng)用戶發(fā)生錯(cuò)誤的操作后，不要責(zé)備用戶做錯(cuò)了什么，這時(shí)候需要幫助用戶盡可能的挽回，及時(shí)給予撤銷或者重做的功能。

Web端中的「面包屑」導(dǎo)航形式是常見的保證用戶可控性的體現(xiàn)，他很直觀的告訴了用戶，我在哪，可以去哪以及可以回到哪里去。

另外一個(gè)典型場(chǎng)景是web瀏覽器中的「返回」「前進(jìn)」按鈕，點(diǎn)擊后我們可以回退或者前進(jìn)頁(yè)面，為了增加用戶的可操控性，長(zhǎng)按后會(huì)列表展示出前面所有歷經(jīng)過的歷史記錄，方便用戶快速回退或前進(jìn)到指定的頁(yè)面。

微信中如果我們發(fā)送了覺得不合適的消息，可以及時(shí)通過長(zhǎng)按撤回，且撤回后會(huì)用文案進(jìn)行提示，可以再一次編輯發(fā)送。在iOS系統(tǒng)中如果你需要?jiǎng)h除男朋友照片時(shí)候系統(tǒng)并不會(huì)做過多的阻攔，讓你刪的痛快，當(dāng)你過幾天氣消后，到「最近刪除」中就能選擇恢復(fù)了～（不用擔(dān)心，最近刪除給了用戶幾十天時(shí)間冷靜）。

原則四：一致性

“用戶不必疑惑是否使用了不同的設(shè)計(jì)語(yǔ)言、情況或不同的操作產(chǎn)生的結(jié)果實(shí)際上是同一件事。”

通俗的來(lái)說(shuō)就是保持設(shè)計(jì)中相同場(chǎng)景的一致性（視覺語(yǔ)言/交互形式），讓用戶感到自己是在進(jìn)行同一步驟或產(chǎn)品上進(jìn)行操作。保持一致性并遵守標(biāo)準(zhǔn)對(duì)于確保用戶界面可預(yù)測(cè)和可學(xué)習(xí)至關(guān)重要。

1. 內(nèi)部一致性

內(nèi)部一致性就是指保持同個(gè)產(chǎn)品或產(chǎn)品系列中的一致性，讓用戶感知到自己是在同一個(gè)產(chǎn)品中進(jìn)行操作。內(nèi)部一致性有助于傳達(dá)自身的品牌特征。

百度網(wǎng)盤中主要的圖標(biāo)都使用了切割的表現(xiàn)形式，且色系都比較統(tǒng)一，以此來(lái)保持產(chǎn)品的一致性以及傳達(dá)品牌特征。

電商類產(chǎn)品是比較極端情況下的一致性運(yùn)用場(chǎng)景之一，由于業(yè)務(wù)以及產(chǎn)品類型繁雜，很難約束產(chǎn)品展示內(nèi)容，這種時(shí)候只能通過大的視覺風(fēng)格和交互形式來(lái)確保產(chǎn)品的一致性。

在淘寶中使用同樣的底色以及卡片區(qū)分的形式來(lái)表現(xiàn)界面，邊距保持一致，且大卡片均使用了同樣大小的圓角，消息和購(gòu)物車頁(yè)面都使用了大標(biāo)題的展現(xiàn)形式。一些重要操作按鈕以及底部tab選中樣式都使用了品牌色。最大程度上保證了視覺上的統(tǒng)一。

2. 外部一致性

外部一致性指整個(gè)行業(yè)類一些約定成熟的習(xí)慣，比如底部tab標(biāo)簽欄是對(duì)頁(yè)面模塊大切換，點(diǎn)擊輸入框可以進(jìn)行文字輸入等等，愛心圖表是指點(diǎn)贊或喜歡，這些用戶已經(jīng)習(xí)以為常的操作可以保證用戶以最低的學(xué)習(xí)成本上手產(chǎn)品。

雖然上面是三種不同類型的產(chǎn)品，但是通過產(chǎn)品經(jīng)驗(yàn)用戶能夠很快速的感知到哪個(gè)是「掃碼」功能的入口。

圖中為三種視頻播放類產(chǎn)品界面，雖然三者為不同品牌的產(chǎn)品，但是在視頻播放窗口都能通過手指雙擊的交互形式進(jìn)行視頻播放或暫停。遵循了外部一致性，滿足了用戶的的操作習(xí)慣。

3. 求同存異

在遵循一致性的原則上，不少產(chǎn)品通過小一些小心思來(lái)體現(xiàn)與其他產(chǎn)品的差異性，突出自己的品牌特征。注意：必須是在遵循整體一致性的原則之上。

在移動(dòng)端產(chǎn)品中下拉刷新是最常見的交互形式，用戶早已習(xí)以為常。上圖三個(gè)產(chǎn)品都是通過下拉進(jìn)行刷新交互，但是通過不同的loading形象來(lái)突出自己的品牌特征以及與其他產(chǎn)品的差異性。

原則五：預(yù)防錯(cuò)誤

“用戶通常會(huì)分心于手頭上的任務(wù)，因此可以通過提供建議、利用約束和保持靈活性來(lái)防止無(wú)意識(shí)的錯(cuò)誤。通過精心的設(shè)計(jì)防止用戶發(fā)生問題，比出現(xiàn)錯(cuò)誤信息提示更好。”

解決用戶錯(cuò)誤的方法不是責(zé)問用戶，而是應(yīng)該重視自身產(chǎn)品的設(shè)計(jì)，盡量減少錯(cuò)誤的發(fā)生。回憶一下以前用win電腦時(shí)候，程序用的好好的突然“登”的一聲崩潰了，然后給我一個(gè)彈窗反饋，問題是彈窗上動(dòng)不動(dòng)就講什么數(shù)據(jù)庫(kù)損壞的，咱也不懂阿。

1. 習(xí)慣性錯(cuò)誤

官方將這種錯(cuò)誤稱為“滑倒”，為了更好理解我把它歸位習(xí)慣性錯(cuò)誤，其實(shí)就是指當(dāng)用戶非常熟悉自己想要實(shí)現(xiàn)的目標(biāo)以及實(shí)現(xiàn)該目標(biāo)的過程時(shí)候，偶然性的發(fā)生錯(cuò)誤。一般來(lái)說(shuō)我們?cè)诓僮魇煜さ漠a(chǎn)品流程時(shí)候，并不會(huì)那么集中注意力。

一般來(lái)說(shuō)以輕柔的引導(dǎo)方式或者提供所需的精確來(lái)協(xié)助是最合適的。在IOS中設(shè)定就寢時(shí)間的時(shí)候，滑動(dòng)表盤經(jīng)過每一小格的時(shí)候都會(huì)有輕微的震動(dòng)反饋，且每一格單位為5分鐘，通過觸感反饋?zhàn)畲蟪潭鹊膮f(xié)助用戶操作。

另一個(gè)場(chǎng)景就是我們經(jīng)常在一邊刷劇或者綜藝時(shí)候一邊回復(fù)消息，現(xiàn)在很多輸入法都可以自動(dòng)將一些稍錯(cuò)的拼寫進(jìn)行自動(dòng)的調(diào)整，比如上面我輸入“wan sh hui jia chi f”，最終也能回復(fù)“晚上回家吃飯”。

2. 有效的約束

雖然限制用戶并不是一個(gè)很好的體驗(yàn)，但是如果在有明確的規(guī)則定義之下，通過限制條件來(lái)阻止用戶犯錯(cuò)是個(gè)很好的選擇。

最常見的場(chǎng)景就是類似airbnb這種選擇房屋居住日期的時(shí)候，通過限制可以控制用戶只能選擇能夠入住的時(shí)間。另一個(gè)常用的約束就是電商類產(chǎn)品，通過置灰限制沒有存活不可購(gòu)買的物品，不過現(xiàn)在除了置灰也會(huì)使用一些更加委婉的表達(dá)方式，比如“到貨通知”。

3. 提供建議

在用戶發(fā)生操作之前提供合理的建議，是一種防錯(cuò)的常用方式。

在搜索引擎中，當(dāng)你輸入搜索內(nèi)容的時(shí)候系統(tǒng)會(huì)聯(lián)系上下文來(lái)提供建議，如果有自己相匹配的搜索記錄也會(huì)前置出現(xiàn)。而且即使輸錯(cuò)了單詞或詞語(yǔ)，也會(huì)輔助進(jìn)行正確的匹配。

4. 設(shè)置默認(rèn)值

當(dāng)用戶需要執(zhí)行重復(fù)操作，或者對(duì)操作精度有特殊需求的場(chǎng)景下，可以結(jié)合實(shí)際場(chǎng)景首先提供可能符合其目標(biāo)的合理默認(rèn)值。

比如滴滴打車，一般會(huì)通過定位給一個(gè)默認(rèn)的起點(diǎn)位置，而且如果周圍正好有常用的打車點(diǎn)，會(huì)默認(rèn)定位到常用的地點(diǎn)，有效的防止了用戶地理定位上發(fā)生的錯(cuò)誤。還有銀行類產(chǎn)品如果是近期經(jīng)常轉(zhuǎn)賬的對(duì)象，會(huì)有小氣泡進(jìn)行提示，可以進(jìn)行快速點(diǎn)擊填充信息。而且在進(jìn)行轉(zhuǎn)賬的時(shí)候，輸入卡號(hào)后會(huì)自動(dòng)識(shí)別對(duì)方所屬銀行。

5. 使用格式化信息

有些時(shí)候需要用戶輸入一些非常特定格式信息的時(shí)候，可以利用格式優(yōu)化幫助用戶輸入并且協(xié)助檢查。

在一些數(shù)字類信息的輸入場(chǎng)景中比較常見，比如輸入銀行卡號(hào)或手機(jī)號(hào)會(huì)根據(jù)位數(shù)進(jìn)行分割，滴滴輸入驗(yàn)證碼時(shí)候會(huì)使用格子劃分位數(shù)協(xié)助輸入，電商類的產(chǎn)品新增地址通常也會(huì)明確劃分出城市，區(qū)域，街道等因素來(lái)幫助用戶快速輸入以及檢查是否出錯(cuò)。

寫在最后

很多情況下原則以及融入了我們的設(shè)計(jì)直覺之中，即使說(shuō)不出來(lái)但是做的時(shí)候也會(huì)遵循。但是了解原則的原理對(duì)于向別人闡述自己的設(shè)計(jì)會(huì)有很大的幫助。

原則的使用因人而異，正如開頭所說(shuō)的原則可以輔助我們?cè)O(shè)計(jì)，保證設(shè)計(jì)不犯一些顯然易見的錯(cuò)誤。很多場(chǎng)景下也會(huì)出現(xiàn)多原則交叉使用的情況。