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

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

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

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

2. 適時的反饋

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

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

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

3. 生活中的反饋場景

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

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

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

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

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

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

1. 用戶熟悉的語言

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

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

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

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

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

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

3. 文化觀念隱喻

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

原則三：用戶操作可控性

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

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

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

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

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

原則四：一致性

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

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

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

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

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

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

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

2. 外部一致性

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

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

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

3. 求同存異

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

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

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

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

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

1. 習(xí)慣性錯誤

官方將這種錯誤稱為“滑倒”，為了更好理解我把它歸位習(xí)慣性錯誤，其實就是指當(dāng)用戶非常熟悉自己想要實現(xiàn)的目標(biāo)以及實現(xiàn)該目標(biāo)的過程時候，偶然性的發(fā)生錯誤。一般來說我們在操作熟悉的產(chǎn)品流程時候，并不會那么集中注意力。

一般來說以輕柔的引導(dǎo)方式或者提供所需的精確來協(xié)助是最合適的。在IOS中設(shè)定就寢時間的時候，滑動表盤經(jīng)過每一小格的時候都會有輕微的震動反饋，且每一格單位為5分鐘，通過觸感反饋最大程度的協(xié)助用戶操作。

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

2. 有效的約束

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

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

3. 提供建議

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

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

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

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

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

5. 使用格式化信息

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

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

寫在最后

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

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