在《寫給產(chǎn)品經(jīng)理和設(shè)計(jì)師的用戶體驗(yàn)知識1》中，我與大家分享了我個人對「用戶體驗(yàn)」和「設(shè)計(jì)」的理解，以及2個設(shè)計(jì)原則。在這篇文章中，我們會再討論2個設(shè)計(jì)原則，它們是“一致性”原則和“及時(shí)有效的反饋和解釋”原則。

原則3：一致性

一致性是產(chǎn)品設(shè)計(jì)過程中的一個基礎(chǔ)原則，它要求在一個（或一類）產(chǎn)品內(nèi)部，在相同或相似的功能、場景上，應(yīng)盡量使用表現(xiàn)、操作、感受等相一致的設(shè)計(jì)。一致性的目的是降低用戶的學(xué)習(xí)成本，降低認(rèn)知的門檻，降低誤操作的概率。聽起來有些云里霧里，我們還是來看看案例吧。

請看這幅圖：

如果我告訴你，這張是某公司宣傳海報(bào)的一部分，你猜，可能是哪家公司？好吧，如果猜不到，我再提示一下，是做飲料的公司… 估計(jì)你猜到了，沒錯，是可口可樂。完整版本是這樣的：

為什么最上面這張圖并沒有出現(xiàn)可口可樂的標(biāo)志、產(chǎn)品圖片、產(chǎn)品介紹等任何信息，你卻能猜到它是可口可樂呢？是因?yàn)樵诳煽诳蓸繁澈螅幸惶捉凶鯲I（視覺識別系統(tǒng)）的體系在指導(dǎo)它全部對外的形象設(shè)計(jì)。

VI的本質(zhì)就是通過視覺上高度的一致性，來引導(dǎo)用戶將某種視覺信息與某企業(yè)、產(chǎn)品強(qiáng)行關(guān)聯(lián)。圖上的白色飄帶部分其實(shí)是可口可樂VI系統(tǒng)中常用的輔助圖形，這個圖形在幾乎所有的可口可樂宣傳資料上出現(xiàn)，其顏色（包括背景的紅色）、形狀、扭曲的角度等完全一致，所以當(dāng)我們再次見到類似的圖形和配色時(shí)，我們的大腦會立即產(chǎn)生“這應(yīng)該是可口可樂”這樣的反應(yīng)，認(rèn)知成本被大幅度降低，這就是一致性的最簡單應(yīng)用。

與此相反，我們看另一個例子，想象一下電梯上的各種按鈕。每一部電梯上的按鈕其承載的功能幾乎完全相同，無疑就是選擇樓層、開關(guān)門，最多再加一個呼叫功能。但是當(dāng)你走進(jìn)一棟陌生的寫字樓，你要上7層，你肯定會在一堆按鈕面前遲疑一下；終于找到7了，按下，然后發(fā)現(xiàn)門還沒關(guān)，你繼續(xù)找關(guān)門鍵，十有八九還會遲疑一下，然后才能正確操作。

為什么我們每天都要乘電梯，但是進(jìn)入一個功能完全一樣，但是之前沒來過的電梯時(shí)依然無法熟練操作呢？理由很簡單，因?yàn)椴煌放?、不同型號的電梯的操作界面（按鈕）缺乏一致性。按鈕的排布順序、大小、樣式完全不同，所以每次遇到新的，我們都要學(xué)習(xí)后才能使用，雖然這種學(xué)習(xí)很快就能完成，但如果一定要從“用戶體驗(yàn)”的角度去糾它的問題，這其實(shí)是一種因?yàn)椤耙恢滦浴弊龅貌缓枚a(chǎn)生的不太好的體驗(yàn)。

上圖：不同電梯中的操作按鈕樣式、排布可能完全不同

一致性繼續(xù)延伸，可以突破單個的產(chǎn)品，在某一類產(chǎn)品、某行業(yè)中形成更大范圍內(nèi)的“一致”，并得到大家的承認(rèn)。這時(shí)，一致性就會變成“標(biāo)準(zhǔn)”。

想象這樣一個場景，我從錢包里掏出一張招商銀行的儲蓄卡，想取一些現(xiàn)金。但是我找來找去，發(fā)現(xiàn)附近只有建設(shè)銀行，于是我將招商銀行卡插入建設(shè)銀行的提款機(jī)，順利的提取了現(xiàn)金。這樣的場景很常見，但是這些司空見慣的場景背后，是諸多的“一致性”和“標(biāo)準(zhǔn)”組合的結(jié)果。最簡單的，銀行卡的尺寸一定是高度一致，從而形成標(biāo)準(zhǔn)的，否則我的A銀行卡不可能塞到B銀行的提款機(jī)里面去；同樣，銀行卡磁條上攜帶的信息格式、讀取磁條的設(shè)備等等，都要遵循相同的標(biāo)準(zhǔn)，才可能實(shí)現(xiàn)通信。

上圖：要想在ATM上實(shí)現(xiàn)跨行交易，銀行卡的尺寸首先要一致

當(dāng)一致性形成標(biāo)準(zhǔn)后，它可以起到更大的作用，為用戶帶來更大的便利。例如，幾乎全世界在市場上銷售的手動擋汽車，都是離合器在左腳邊，剎車和油門在右腳邊。我想一般不會有廠商為了“創(chuàng)新”調(diào)換這三者的位置，理由很簡單，有了這個標(biāo)準(zhǔn)，你只要會駕駛汽車，理論上你就可以駕駛?cè)澜缛魏我惠v汽車，而不需要重新學(xué)習(xí)適應(yīng)，比不遵循一致性用戶體驗(yàn)會好很多吧。所以哪家廠商如果輕易把這個規(guī)則打破，估計(jì)它生產(chǎn)的汽車很難賣得出去了。

上圖：左腳踩離合器，右腳踩油門或剎車，是手動擋汽車的操作標(biāo)準(zhǔn)

在互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)中，一致性也很重要。

例如，目前手機(jī)上最流行的兩種操作系統(tǒng)——Android和iOS，它們在UI層面都有各自的設(shè)計(jì)標(biāo)準(zhǔn)文檔，這些文檔規(guī)定了在相應(yīng)的系統(tǒng)下標(biāo)準(zhǔn)的控件、布局、動效，甚至顏色的使用方式。它們的存在使得同一個操作系統(tǒng)中，完成相似的功能的操作基本一致，（特別是）在智能手機(jī)問世的最初幾年，較好的降低了用戶的學(xué)習(xí)和使用門檻。

上圖：iOS的設(shè)計(jì)Guideline文檔

例如，在iOS系統(tǒng)中，對于一個對話框來說，其操作按鈕的排布順序在業(yè)界有一些爭議。但是大部分情況下，大家傾向于將代表“肯定性操作”、“有利于流程繼續(xù)的操作”的按鈕放在右側(cè)。

上圖：在iOS平臺，在不同的應(yīng)用中，彈出的對話框均采用了將“主操作按鈕”放右側(cè)的設(shè)計(jì)

但是這是在iOS平臺，或者說是手機(jī)平臺上。如果在Windows平臺，那我們就要遵循Windows上的一致性，將主操作按鈕放左側(cè)了。

上圖：在Windows平臺上，同樣是對話框，要遵循另外一套一致性原則

這種一致性其實(shí)在潛移默化的影響著用戶的行為，當(dāng)你在手機(jī)上遇到對話框時(shí)，你會傾向于不自覺的去點(diǎn)按右側(cè)的按鈕；而你在Windows中遇到對話框時(shí)，則會傾向于不自覺的去點(diǎn)擊左側(cè)按鈕。這樣的好處很明顯，效率提升，減少用戶的思考。但是，還記得我們在第一篇文章中，在討論設(shè)計(jì)原則之前提到的「設(shè)計(jì)原教旨主義」嗎？當(dāng)你使用一致性標(biāo)準(zhǔn)時(shí)，或許它就隱藏在你周圍試圖迷惑你。想象一下，如果是一個非常重要并且危險(xiǎn)的刪除操作，在彈出對話框?qū)τ脩暨M(jìn)行二次確認(rèn)時(shí)，是否應(yīng)該將“有利于流程繼續(xù)”的刪除按鈕放在主操作位置（iOS右側(cè)，Windows左側(cè)）呢？

用戶體驗(yàn)這東西的精妙之處就在于，很多時(shí)候沒有固定的答案。這個問題我并不能給出一個確定的觀點(diǎn)，只是想提示各位，在使用一致性（以及其他）原則時(shí)，永遠(yuǎn)不要忘記該原則最初的目的，永遠(yuǎn)不要忘記用戶的具體使用場景、產(chǎn)品的目標(biāo)等因素，不要成為一個「設(shè)計(jì)原教旨主義者」。好吧如果一定要出方案，最簡單的，可以按照這么3種方向去嘗試（請不要陷入到具體方案里面去，我們只為了說明原則，討論一下方向而已）：

• 將“刪除”按鈕放在主操作位置，然后同步提供“回收站”功能。（這就是Windows的方案，好處是避免誤操作帶來的損失，壞處是把整個流程搞復(fù)雜了，真想刪除的時(shí)候還要去清空回收站）
• 將“刪除”按鈕放在輔助操作位置。（好處還是避免誤操作帶來的損失，壞處是，用戶真想刪除的時(shí)候，又習(xí)慣性的點(diǎn)按了主操作位置的按鈕，結(jié)論是流程斷了，用戶也可能會覺得無奈和氣憤）
• 將“刪除”按鈕放在主操作位置，同時(shí)標(biāo)紅表示警示。然后一旦執(zhí)行了刪除操作，提供一次“恢復(fù)”功能。（這個看起來好一些。第一，它用警示色提示了用戶；第二，它符合相應(yīng)系統(tǒng)的一致性原則，照顧到了那些真想刪除的用戶；第三，它提供了一個一次性的補(bǔ)救措施，萬一刪錯了，馬上能恢復(fù)；另一方面，如果用戶沒恢復(fù)，那估計(jì)是真想刪。那這個方案有壞處嗎？當(dāng)然有，邏輯復(fù)雜了啊，開發(fā)成本增加了啊。所以作為一個產(chǎn)品經(jīng)理，你要思考的角度是多方面的。）

另一方面，如果你真的有各方面都更優(yōu)的方案，則應(yīng)該拋棄一致性，勇敢的創(chuàng)新。但是請注意，在創(chuàng)新的時(shí)候，最好不要跟已有的各種一致性相沖突。

比如說，現(xiàn)在已經(jīng)廣泛應(yīng)用的“下拉刷新”功能，最初出現(xiàn)在一款叫做Tweetie的Twitter客戶端上。

這是一個很棒的創(chuàng)新，首先，刷新其實(shí)是一個使用頻次不會很高，但是在某些場景下（例如微博類應(yīng)用，從后臺喚起，想獲取最新信息的時(shí)候）可能高頻使用的功能。這意味著如果在類似標(biāo)題欄之類的地方放一個刷新按鈕會比較冗余，如果不放又滿足不了用戶需求。

其次，在一個列表的頂端下拉這個動作，除了在iOS的一些場景中可以劃出搜索框外，還沒有其他的定義，不會與用戶的固有習(xí)慣相沖突，而下拉刷新與搜索框本身也并不沖突。所以當(dāng)大家發(fā)現(xiàn)了這個功能后，逐一效仿，用戶在用了類似功能后，在其他的應(yīng)用中想實(shí)現(xiàn)刷新功能，也會下意識的下拉一下試試，儼然，這個操作已經(jīng)在類似應(yīng)用中形成了一定程度的一致性。并且有一些應(yīng)用還再次基礎(chǔ)上做了個改進(jìn)，將其變成了廣告位。

上圖：從左到右，知乎使用了很簡潔的“下拉刷新”4個字，京東有趣一些，你能看到一個快遞員在跑，而網(wǎng)易新聞則是把這里開辟成了一個廣告位

原則4：及時(shí)有效的反饋和解釋

你是否遇到過這樣的場景：

在餐館吃飯，叫服務(wù)員，叫了5聲，依然沒人搭理你。好不容易揪到一個，跟她說：“麻煩加一套餐具?！比思依矶紱]理你，就走了，你都不知道丫聽沒聽清，更加不知道這一套餐具究竟什么時(shí)候能拿來。

打客服電話，轉(zhuǎn)人工，好不容易打通了，敘述清楚了自己遇到的問題。但是你發(fā)現(xiàn)客服除了說很多非常禮貌的廢話之外，基本上沒辦法幫你解決任何問題。

我就遇到過第二種，不信，有截圖為證：

如果你看不清圖的話，我簡單敘述一下這個故事。

大概意思是說，有一段時(shí)間我手機(jī)收不到一些驗(yàn)證碼短信，但是別人的手機(jī)能收到，并且我把手機(jī)卡換到別人手機(jī)上，依然收不到，甚至去營業(yè)廳換了sim卡也無法解決（這證明短信網(wǎng)關(guān)、手機(jī)和sim卡都沒問題，只能是運(yùn)營商服務(wù)的問題），接連幾個月都是如此。于是我找到運(yùn)營商的客服，反饋了這個問題。說了半天，對方居然讓我提供“下發(fā)內(nèi)容的具體代碼、對方下發(fā)的時(shí)間以及對方系統(tǒng)是否已提示發(fā)送成功”，話說，我都沒收到短信，如何提供這些內(nèi)容呢？

以上這些場景中，服務(wù)員或者客服都存在著同一類問題，就是給予用戶的反饋和幫助不夠及時(shí)，或者雖然及時(shí)給了反饋，但是邏輯上說不通，也即不夠有效，從而嚴(yán)重影響了用戶體驗(yàn)。

不論是人類之間面對面的交流，遠(yuǎn)程的打電話、寫信，還是人與機(jī)器之間的“交流”，本質(zhì)上都是信息的傳遞過程。信息有去有回，才能連貫，才會形成有效的交互與彼此的理解。所以及時(shí)有效的反饋和解釋尤為重要。

在幾乎所有需要人機(jī)交互的界面上，當(dāng)用戶進(jìn)行了某些操作，系統(tǒng)都需要使用變色、形狀改變、振動、發(fā)光等方式來給用戶即時(shí)的反饋，目的是告知用戶，你剛才的操作我已經(jīng)知道了。

上圖：在iPhone的撥號界面，當(dāng)按下一個號碼按鍵尚未松開時(shí)，這個區(qū)域的背景顏色會發(fā)生改變，同時(shí)這個按鍵代表的數(shù)字會在屏幕上方顯示，用以提示用戶“你已經(jīng)按到了”

不僅僅是針對于用戶的操作，有時(shí)候在產(chǎn)品中出現(xiàn)的一些概念、名詞等，也需要適當(dāng)?shù)南蛴脩糇鲆越忉?，才能夠確保用戶順利的使用。

每一個稍微復(fù)雜點(diǎn)兒的互聯(lián)網(wǎng)產(chǎn)品，都會有諸多的設(shè)置選項(xiàng)。但是有一些設(shè)置項(xiàng)卻需要用戶理解一定的背景知識才能正確的操作。這時(shí)就有必要向用戶解釋一下，例如在iPhone的設(shè)置選項(xiàng)中，有一個界面是這樣的：

在這個界面中，有一個選項(xiàng)叫做“數(shù)據(jù)漫游”。對于普通用戶來說，單看這個選項(xiàng)的字面意思，貌似無法清楚的意識到，將它打開或者關(guān)閉將會發(fā)生什么。所以在它的下方，緊接著放置了一段文字說明，用以提示用戶，這個選項(xiàng)是用來防止在異地旅行時(shí)產(chǎn)生高額漫游費(fèi)用的。并且，還列舉了最常用的幾個可能產(chǎn)生數(shù)據(jù)流量的行為，如“Web瀏覽”“電子郵件”等。這樣，即便用戶完全運(yùn)營商的“數(shù)據(jù)業(yè)務(wù)”沒概念，他也能意識到，在漫游時(shí)使用這些功能，就可能會被“大量扣費(fèi)”，從而做出適合他的設(shè)置。

除了互聯(lián)網(wǎng)和軟件產(chǎn)品之外，很多體驗(yàn)原則其實(shí)在更大范圍內(nèi)是通用的。我們來看一個日常生活中的案例吧。

有沒有這樣的經(jīng)驗(yàn)：

你來到一個陌生的公交站牌前，尋找某條到達(dá)A站的線路，找到后開始等車。過一會車來了，你上車。但是走了一段，你覺得好像不對，于是仔細(xì)查看公交車上面的站名表，發(fā)現(xiàn)坐反了…

這個場景中的問題在于，公交站牌只提供了站名列表，但是并沒有有效的提醒你行車的方向。有的城市有箭頭指示，但是一般那個箭頭都不太明顯，并且在這個方案中，需要將站名列表與箭頭相結(jié)合才能表意全面。比如這樣：

在深圳，你會發(fā)現(xiàn)這個問題被很容易的解決了，因?yàn)槟銜l(fā)現(xiàn)深圳的公交站牌上站名列表是這樣的：

每一條線路，除了列出了所有站名，還同步將這個方向已經(jīng)通過的站名標(biāo)記了灰色。在大多數(shù)人的認(rèn)知中，灰色與黑色配合，則代表著“失效”。所以這個方案雖然并沒有直接表述行車方向，但是可以較好的提醒用戶他有沒有站錯位置，理解成本也低，用戶體驗(yàn)不錯。

這個案例也引出了另外一個問題，就是，我們應(yīng)該如何向用戶解釋和反饋？答案很簡單，但是比較虛，就是“要弄清楚用戶的需求和使用場景”，這個答案幾乎是所有互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)問題的終極答案。

在上面這個案例中，很多城市都是提醒用戶行車的方向。但是了解方向其實(shí)并不是用戶的最底層需求，弄清楚方向的目的是為了讓用戶站對站臺，上對車。當(dāng)我們理解到了這一層，我們就應(yīng)該能夠想到，為什么要造出一個“方向”的概念讓用戶去思考呢？你只要告訴用戶，如果你要去的是黑色部分，就站這兒就對了；如果你要去灰色部分，那你要去路對面看看。簡潔、明確，這才是用戶真正想要的。

再看一個同樣是跟公交車有關(guān)的案例。在一個和城市的繁忙路段，經(jīng)常會有大量的公交車經(jīng)過。在某一站停車時(shí)，如果恰好趕上了多輛車同時(shí)?？浚ㄟ@種概率是很大的），就會使車站附近的道路擁擠不堪。這種情況下，一般的方法是將同一個站名的車站分開設(shè)置2個或更多的站臺。這樣雖然緩解了擁堵的問題，卻產(chǎn)生了另外一個問題，如圖：

騰訊公司附近的公交車站叫做“深大北門”。這是一個繁忙的路段，最多時(shí)會有近50條線路的公交車經(jīng)過。于是該站的站臺被一分為二建設(shè)。同樣叫做“深大北門”的2個站臺，相距300米左右。

設(shè)想一下這樣的用戶場景：

我要去拜訪一個朋友，他打電話告訴我說：“你從公司出發(fā)是吧？那你到深大北門坐B線路公交車，到xx站下車就行?！焙玫模鞖夂軣?，我從騰訊大廈出發(fā)，向東走，找到了公交站。我極力尋找打算搭乘的B線路公交車，找了很久，發(fā)現(xiàn)，沒找到… 我已經(jīng)汗流浹背。這時(shí)，我并不知道其實(shí)附近還有另外一個站臺?；蛘呒幢阄抑?，我也搞不清楚另一個站臺在哪個方向，我該往東走，還是往西走。

很差的用戶體驗(yàn)，不是嗎？但是解決的方案其實(shí)很簡單，看圖：

首先，我們發(fā)現(xiàn)站名后面跟著一個編號。例如，圖上所示，是“深大北門②”。這時(shí)，我就會意識到，附近應(yīng)該還存在著一個“深大北門①”的站臺。緊接著，下方放置了“溫馨提示”。告訴我另一個站臺的具體方位，以及列出了在另一個站臺?？康木€路列表。至此，問題解決了。

在這個原則的最后，給大家講個段子吧，這段子有點(diǎn)兒冷，同樣是跟公交車有關(guān)的，各位也可以順便想想，這種問題該如何解決。段子如下：

在北京，繁華的東三環(huán)上，國貿(mào)地鐵站C出口，一個年輕人向一個當(dāng)?shù)厝藛柭贰?/p>

年輕人：“您好，請問我想去燕郊潮白人家小區(qū)，該坐哪個公交車??？”

當(dāng)?shù)厝撕軣崆椋檬謾C(jī)查了半天，告知：“您往南走，用不上幾分鐘，找到大北窯南站，坐814，一站就到”

年輕人謝過，繞了半天，終于找到了大北窯南公交站，誰知剛看到車站，就發(fā)現(xiàn)一輛814路公交車起步離開了。年輕人只好在車站繼續(xù)等，但是等了好久，也不見下一趟車過來。于是年輕人想，只有一站地，要不我順著剛才車離開的方向往前走走看吧，估計(jì)用不了幾分鐘就到了。

結(jié)果…（對北京地理位置有概念的同學(xué)，此處應(yīng)有笑聲）

對北京沒概念的同學(xué)，請看圖：

（待續(xù)）

第一部分：先糾結(jié)兩個概念「用戶體驗(yàn)」和「設(shè)計(jì)」

第二部分：設(shè)計(jì)原則概覽

• 原則1：符合用戶使用需求
• 原則2：基于用戶的心理模型設(shè)計(jì)
• 原則3：一致性
• 原則4：及時(shí)有效的反饋和解釋
• 原則5：形式追隨功能
• 原則6：單一任務(wù)、漸次呈現(xiàn)
• 可能還有原則7到n

第三部分：設(shè)計(jì)工具和方法

• 用戶場景
• 產(chǎn)品經(jīng)理的溝通技巧

第四部分：用戶體驗(yàn)之外

• 用戶體驗(yàn)的局限性
• 用戶體驗(yàn)與其他因素的權(quán)衡

作者：xidea（微信公眾號：uxcafe）

來源：xidea的咖啡館