交互設(shè)計(jì)師要通過(guò)邏輯推導(dǎo)來(lái)產(chǎn)出合理方案，無(wú)論是產(chǎn)品、交互還是 UI。本文通過(guò)3個(gè)交互案例細(xì)節(jié)，幫你一窺交互設(shè)計(jì)的門(mén)道。

更多交互設(shè)計(jì)案例：

一、人為推進(jìn)效應(yīng)

不知道大家有沒(méi)有看過(guò)這么一個(gè)案例，大概是說(shuō)，有人在洗車(chē)店做了個(gè)實(shí)驗(yàn)，給每個(gè)來(lái)洗車(chē)的顧客弄一張活動(dòng)卡，這個(gè)卡上有八個(gè)空格子，顧客每次來(lái)洗一次車(chē)，就在空格子里蓋一個(gè)章，洗滿(mǎn)八次，也就是蓋滿(mǎn)八個(gè)章，就可以免費(fèi)洗一次車(chē)。

送出去的卡分兩類(lèi)，一類(lèi)是上面沒(méi)蓋過(guò)一個(gè)章，八個(gè)格子都是空的；還有一類(lèi)是，上面有十個(gè)格子，但是有兩個(gè)空格已經(jīng)蓋了章的。所以，前面一類(lèi)卡是 0/8，后面這類(lèi)卡是 2/10。

經(jīng)過(guò)一段時(shí)間的驗(yàn)證，發(fā)現(xiàn)，后面這類(lèi)卡的完成度要比前面這種高出 20%。

于是有人就給這個(gè)實(shí)驗(yàn)結(jié)果定義了一個(gè)名字，叫「人為推進(jìn)效應(yīng)」。

后來(lái)有人就把這樣的概念用在了一些產(chǎn)品功能里，比如完善資料，簽到，游戲進(jìn)程等。所以我們經(jīng)常會(huì)在一些產(chǎn)品里完善個(gè)人資料時(shí)，明明沒(méi)填寫(xiě)過(guò)任何信息，但資料填寫(xiě)的進(jìn)度就是 20%，原因是它把默認(rèn)的頭像和昵稱(chēng) id 也算進(jìn)去了，就會(huì)讓人覺(jué)得還差一些就完成了。而如果進(jìn)度是 0%，用戶(hù)完善資料的動(dòng)力就會(huì)下降。

甚至在一些產(chǎn)品里，洗車(chē)卡這個(gè)案例也被改了個(gè)方式，直接拿來(lái)用了，比如：

有些游戲任務(wù)，要?dú)⑺朗还治?，而任?wù)的啟動(dòng)條件是用戶(hù)在殺死一只怪物時(shí)，自動(dòng)開(kāi)啟，這時(shí)候任務(wù)的殺怪?jǐn)?shù)量是 1/10，那么用戶(hù)完成任務(wù)的動(dòng)力也會(huì)更強(qiáng)。

后來(lái)我找了些資料，來(lái)驗(yàn)證這個(gè)概念的真?zhèn)涡?，以及支撐依?jù)，發(fā)現(xiàn)這么三個(gè)理論。

第一個(gè)是「蔡格尼克記憶效應(yīng)」，它是指人們對(duì)于尚未處理完的事情，比已處理完成的事情印象更加深刻。 這個(gè)現(xiàn)象是由蔡格尼克通過(guò)實(shí)驗(yàn)得出的結(jié)論。

在讀關(guān)于蔡格尼克記憶效應(yīng)的資料時(shí)，我想到一些實(shí)例，覺(jué)得確實(shí)是這樣。比如我在寫(xiě)一篇文章時(shí)，腦袋里總會(huì)想著這個(gè)論題，甚至框架與內(nèi)容細(xì)節(jié)都很清楚；但只要一寫(xiě)完，丟進(jìn)歸檔文件夾，很快就會(huì)忘記自己寫(xiě)這篇文章時(shí)的一些內(nèi)容。

包括玩游戲時(shí)，一旦開(kāi)始執(zhí)行任務(wù)，就會(huì)想著這個(gè)任務(wù)還需要玩多少次才能完成，而不會(huì)去想著，已經(jīng)完成了什么。

不過(guò)想想也覺(jué)得是廢話(huà)，完成了誰(shuí)還去想呢，這里對(duì)比的應(yīng)該是「未開(kāi)始」和「執(zhí)行中」這兩種情況，哪種印象會(huì)更深刻。當(dāng)然，從主觀情況來(lái)考慮，相比起來(lái)，執(zhí)行中的事項(xiàng)一定是印象更深刻的。

這就與兩類(lèi)洗車(chē)卡的實(shí)驗(yàn)比較相關(guān)了。

第二個(gè)是「目標(biāo)梯度效應(yīng)」，意思是人類(lèi)或動(dòng)物具有接近目標(biāo)時(shí)加快行動(dòng)的效應(yīng)，比如兔子快要接近食物時(shí)會(huì)跑得更快。

關(guān)于目標(biāo)梯度效應(yīng)的干貨：

類(lèi)比上面洗車(chē)卡的例子，當(dāng)卡上的蓋章數(shù)量越多，用戶(hù)洗車(chē)頻率就會(huì)越高，以為盡快完成洗車(chē)卡任務(wù)，拿到一次免費(fèi)洗車(chē)的獎(jiǎng)勵(lì)。

比如在一些產(chǎn)品里填寫(xiě)地址，當(dāng)要開(kāi)始填寫(xiě)時(shí)，GPS 定位會(huì)自動(dòng)獲取城市定位，幫用戶(hù)完成第一步，看起來(lái)是理所應(yīng)當(dāng)，但其實(shí)是傳遞出一種任務(wù)已經(jīng)開(kāi)始了的信息，主要是為了提高用戶(hù)完成任務(wù)的動(dòng)力。

有些注冊(cè)比較麻煩的產(chǎn)品，也會(huì)故意通過(guò)這樣的拆分方式，提高用戶(hù)完成注冊(cè)的轉(zhuǎn)化率。

同時(shí)，因?yàn)橛脩?hù)在完成洗車(chē)卡任務(wù)后，任務(wù)會(huì)隨之消失，用戶(hù)也可能會(huì)流失，所以會(huì)通過(guò)發(fā)放二次洗車(chē)卡任務(wù)，而這個(gè)任務(wù)獎(jiǎng)勵(lì)會(huì)與第一次有所區(qū)別，通過(guò)這樣的方式從而留下用戶(hù)。

比如上圖中的任務(wù)，任一模式完成一場(chǎng)，就可完成任務(wù)，領(lǐng)取獎(jiǎng)勵(lì)，但是領(lǐng)取完后會(huì)在這個(gè)任務(wù)的基礎(chǔ)之上產(chǎn)生新的任務(wù)。好比王朝模式 2/2 完成后，就會(huì)變成 2/3。告訴你再玩一局，就可以領(lǐng)到更高的獎(jiǎng)勵(lì)。

第三個(gè)是「任務(wù)可視化效果」，與其通過(guò)數(shù)字告訴用戶(hù)任務(wù)次數(shù) 2/10，不如把任務(wù)可視化，呈現(xiàn)出任務(wù)進(jìn)度。

試想一下也是如此，看著卡片上如果寫(xiě)得是數(shù)字，譬如洗了 3 次車(chē)，還差 5 次，肯定不如一張卡片，上面蓋了 3 次章來(lái)得更直觀。所以在一些產(chǎn)品上，任務(wù)進(jìn)度會(huì)通過(guò)有進(jìn)程的進(jìn)度條來(lái)表示目前情況：

二、禁用按鈕的邏輯

最近收到的一則問(wèn)題，大概是：在做設(shè)計(jì)的時(shí)候，經(jīng)常會(huì)遇到一個(gè)問(wèn)題，就是一個(gè)按鈕，在同一頁(yè)面的不同情況下，有時(shí)可用，有時(shí)不可用，我們到底是顯示不可用時(shí)的禁用狀態(tài)呢？還是直接隱藏這個(gè)按鈕呢？

大家還是喜歡提這種通用性問(wèn)題，希望有一個(gè)說(shuō)法，可以概括所有情況。但我多次說(shuō)過(guò)，不存在這樣的好事，一定是具體問(wèn)題具體分析的。

尤其是這個(gè)問(wèn)題，想要聊透徹，得用不少例子來(lái)舉證說(shuō)明，不過(guò)也可以通過(guò)總結(jié)的方式長(zhǎng)話(huà)短說(shuō)了。

禁用按鈕的使用，可以從兩個(gè)維度來(lái)分析，分別是：「無(wú)效的禁用狀態(tài)」和「有效的禁用狀態(tài)」。

1. 無(wú)效的禁用狀態(tài)

有一種情況是，在一個(gè)頁(yè)面里，一個(gè)按鈕，可能會(huì)有幾種不同的情況存在。那人要問(wèn)了，既然是一個(gè)頁(yè)面，為什么會(huì)有多種狀態(tài)同時(shí)存在的情況呢？

比如，在出行場(chǎng)景中，普通乘客發(fā)起訂單，司機(jī)接單后是可以發(fā)送消息的（左圖）。但是從第三方渠道來(lái)的乘客，司機(jī)是無(wú)法發(fā)送站內(nèi)消息的，只能通過(guò)電話(huà)聯(lián)系乘客（右圖）。

不同渠道來(lái)的用戶(hù)，司機(jī)端的頁(yè)面會(huì)呈現(xiàn)不同的按鈕狀態(tài)。相同的頁(yè)面，第三方渠道來(lái)的乘客，在司機(jī)端就不需要露出消息按鈕了，這樣可以減少無(wú)效信息對(duì)司機(jī)的干擾，還可以避免司機(jī)習(xí)慣性操作帶來(lái)的無(wú)效反饋，比如點(diǎn)擊消息，顯示「無(wú)法發(fā)送消息」?；蛘唢@示禁用，也會(huì)影響司機(jī)的操作判斷。

從這個(gè)案例中我們可以看出，當(dāng)一個(gè)按鈕在某種情況下始終無(wú)法被觸發(fā)時(shí)，就會(huì)選擇讓它直接消失，而不是呈現(xiàn)禁用狀態(tài)。

很多人在這類(lèi)設(shè)計(jì)里會(huì)給按鈕提供一個(gè)禁用狀態(tài)，以免按鈕消失而打亂頁(yè)面布局。但是要知道，在某種情況下，按鈕無(wú)用時(shí)，無(wú)意義的展示反而會(huì)產(chǎn)生干擾信息，就像上面說(shuō)到的那樣。

所以這里有一個(gè)結(jié)論是：禁用按鈕需要可觸發(fā)的時(shí)機(jī)，如果沒(méi)有這個(gè)時(shí)機(jī)，禁用狀態(tài)就沒(méi)有存在的必要。如果存在，那它也是一個(gè)無(wú)效的狀態(tài)。

既然是無(wú)效的，最好就不要出現(xiàn)了。

2. 有效的禁用狀態(tài)

在上面的例子里，有一個(gè)前提不可忽略，那就是司機(jī)是否可以理解我們不顯示的原因。當(dāng)然，司機(jī)會(huì)接受相關(guān)培訓(xùn)，產(chǎn)品中也會(huì)有渠道標(biāo)識(shí)，所以司機(jī)能夠明白頁(yè)面中存在的差異。

但在其他產(chǎn)品中，當(dāng)狀態(tài)不同，按鈕變化無(wú)法自洽的時(shí)候，又怎么去處理呢？我們就需要通過(guò)合理的解釋來(lái)消除用戶(hù)潛在的困惑。

對(duì)于這點(diǎn)，比較典型的案例是在線上購(gòu)物時(shí)，一件商品會(huì)有多個(gè)類(lèi)型供消費(fèi)者選擇，比如不同的尺寸、型號(hào)等，當(dāng)其中一種類(lèi)型被搶光時(shí)，這個(gè)商品依然是可見(jiàn)的，只是無(wú)法選擇，展示出了禁用狀態(tài)。

在這種場(chǎng)景中，我們不能一下子把其他無(wú)法購(gòu)買(mǎi)的類(lèi)型隱藏，因?yàn)橛脩?hù)需要知道我們所有的商品類(lèi)別，了解商品的全部屬性，盡管當(dāng)下無(wú)法購(gòu)買(mǎi)，但有上新的可能，用戶(hù)依然可以選擇等待，并將其加入收藏，還是會(huì)有機(jī)會(huì)促成這筆交易。而且當(dāng)可選類(lèi)型變多的時(shí)候，只是禁用沒(méi)有庫(kù)存的類(lèi)型，可以使其他可選項(xiàng)保持固定的位置，有利于我們二次搜索和加購(gòu)。這種場(chǎng)景的禁用也是暫時(shí)的，直到商品下架或者上新。

但就像我以前說(shuō)過(guò)的，常常我們見(jiàn)多了的東西，就認(rèn)為是正常的，但它并不一定好的。禁用也是這種情況。

雖然我們現(xiàn)在還是會(huì)在各個(gè)地方看到禁用操作，但是禁用的原由始終沒(méi)有給到用戶(hù)合理的解釋?zhuān)灾劣谠S多人見(jiàn)到類(lèi)似的操作都是一頭霧水。所以在設(shè)計(jì)過(guò)程中，尤其要謹(jǐn)慎對(duì)待，盡可能的避免出現(xiàn)無(wú)法解釋的禁用操作。

好比淘寶的商品選擇頁(yè)面，如今也將原來(lái)的商品純禁用按鈕，替換成了「缺貨」。選擇缺貨的商品之后，按鈕會(huì)變成「提醒掌柜補(bǔ)貨」。

從原來(lái)的用戶(hù)單方面接收無(wú)法點(diǎn)擊的按鈕，到現(xiàn)在直觀顯示缺貨，點(diǎn)擊后同時(shí)提醒到商家，這樣的操作從功能角度來(lái)說(shuō)是一個(gè)升級(jí)。

這就是我說(shuō)的，有效與無(wú)效的禁用按鈕之間的區(qū)別。禁用不該是真的禁止使用，而是告知用戶(hù)，它如何可被使用。

3. 小結(jié)

如果一個(gè)按鈕在不同的階段有禁用和可用的狀態(tài)顯示，那么意圖是很明顯的。比如一些活動(dòng)頁(yè)面，某個(gè)按鈕的禁用狀態(tài)是倒計(jì)時(shí)，就像電影的前期宣傳，為電影的上線制造話(huà)題和熱度，來(lái)鼓勵(lì)更多人的觀看一樣。

對(duì)于按鈕來(lái)說(shuō)，顯示禁用則代表它在滿(mǎn)足一定條件后即可擁有可點(diǎn)擊性，讓我們明確地了解它就在這里，未來(lái)是可操作的。按鈕也有很多的設(shè)計(jì)空間來(lái)為未來(lái)的使用做好鋪墊，特別是營(yíng)銷(xiāo)類(lèi)的活動(dòng)，像是「明日 8 點(diǎn)可搶」、「提醒商家補(bǔ)貨」的按鈕文案，無(wú)一不在傳達(dá)「可用性」的信息，引導(dǎo)用戶(hù)持續(xù)性的關(guān)注。

但是還有一類(lèi)禁用狀態(tài)只是靜默地提示，多出現(xiàn)在表單中，當(dāng)用戶(hù)沒(méi)有完成輸入的時(shí)候則無(wú)法點(diǎn)擊，因?yàn)榭吹亩嗔?，我們就以為這是正常的。但我們都知道它仍可優(yōu)化，比如，在它以禁用狀態(tài)出現(xiàn)時(shí)，用更為友好的方式去提醒用戶(hù)應(yīng)如何激活，而不是漆黑一片，且完全不知道它所存在的意圖。

我們要知道的是，禁用按鈕本身不是一個(gè)特殊的對(duì)象，只是禁用狀態(tài)在頁(yè)面中是一個(gè)特殊的存在，它是產(chǎn)品設(shè)計(jì)中的一種規(guī)則。為什么按鈕不可用，或者說(shuō)一定場(chǎng)景下為什么功能不可用，當(dāng)無(wú)法依靠用戶(hù)直覺(jué)理解的時(shí)候，是需要作出解釋的，也就是怎么禁的問(wèn)題。

但是最開(kāi)始設(shè)計(jì)時(shí)就應(yīng)該去想的是，禁用狀態(tài)對(duì)用戶(hù)和產(chǎn)品的意義在哪里，這和我們?cè)O(shè)計(jì)方案時(shí)腦海中涌出的無(wú)數(shù)目標(biāo)一樣，是一個(gè)基礎(chǔ)的出發(fā)點(diǎn)。而后，一切迎刃而解。

三、領(lǐng)導(dǎo)用控件的方式不對(duì)，但說(shuō)服不了他，怎么辦？

讀者提問(wèn)，他是這樣說(shuō)的：

呆呆，我發(fā)現(xiàn)一個(gè)比較玄幻的現(xiàn)象。就我公司，不管是產(chǎn)品還是領(lǐng)導(dǎo)都會(huì)把開(kāi)關(guān)控件當(dāng)作是一個(gè)內(nèi)容切換的控件使用，就很容易造成歧義。我有提過(guò)這個(gè)問(wèn)題，但是他們就會(huì)覺(jué)得這個(gè)就應(yīng)該這樣用。我該怎么說(shuō)服他們呢？

這樣的事情其實(shí)有很多，我們甚至?xí)谠S多產(chǎn)品上看到各種錯(cuò)用控件的情況。但就像我之前說(shuō)過(guò)的，人們常常會(huì)把習(xí)以為常，似作理所應(yīng)當(dāng)。這是不對(duì)的。

但是，在工作中遇到類(lèi)似的問(wèn)題，僅僅只是靠說(shuō)，是不夠的，畢竟領(lǐng)導(dǎo)看的是最終的業(yè)務(wù)成果，而不是從某個(gè)元素去考慮使用的合理性。

好比，在你參與之前，大家對(duì)這個(gè)問(wèn)題已經(jīng)經(jīng)過(guò)多次討論，定下最終方案，你一句「控件」用的不對(duì)，就要改變整個(gè)頁(yè)面的展示內(nèi)容，那不是打人臉了么，還是一整個(gè)團(tuán)隊(duì)的臉。

反過(guò)來(lái)想一下，如果用戶(hù)給你提反饋，你的態(tài)度是怎么樣的。

做產(chǎn)品設(shè)計(jì)的同學(xué)肯定知道，我們平時(shí)會(huì)收到許多用戶(hù)的反饋，這些反饋來(lái)自于各個(gè)渠道，比如一些社交平臺(tái)、應(yīng)用市場(chǎng)、用戶(hù)社群，甚至是調(diào)研搜集等。這些反饋有的是給產(chǎn)品功能提建議的，有的是直接吐槽功能難用的，還有的，可能是認(rèn)為產(chǎn)品本身就有問(wèn)題的。難道我們要對(duì)每個(gè)用戶(hù)提出的反饋都去思考合理性？不太可能。

那能怎么辦呢？如果真想改變這種情況，你就得根據(jù)這個(gè)業(yè)務(wù)出一個(gè)比之前好的方案去說(shuō)服他們，而不是只從某個(gè)控件或元素的角度去說(shuō)事情。

我通過(guò)一個(gè)小案例來(lái)幫大家理解一下。

Raluca Budiu 是產(chǎn)品可用性方面的專(zhuān)家，同時(shí)也是卡內(nèi)基梅隆大學(xué)的博士生導(dǎo)師。

她之前在上一場(chǎng)線上直播課的過(guò)程中遇到一個(gè)問(wèn)題 —— 始終無(wú)法打開(kāi)產(chǎn)品的麥克風(fēng)。

剛開(kāi)始上課的時(shí)候，Raluca 無(wú)論怎么點(diǎn)擊，靜音按鈕都處于「關(guān)閉」?fàn)顟B(tài)，直到試了幾分鐘后，甚至重啟了軟件幾次，才反應(yīng)過(guò)來(lái)，原來(lái)當(dāng)前本就已經(jīng)是非靜音狀態(tài)了，再點(diǎn)擊才是靜音。

意識(shí)到自己的行為后，顯得有些尷尬的笑了笑。于是，她開(kāi)始思考類(lèi)似的產(chǎn)品設(shè)計(jì)的問(wèn)題。

可能許多人看到這種情況，都會(huì)覺(jué)得這沒(méi)什么問(wèn)題，甚至覺(jué)得是理解不了的人的問(wèn)題。但就像我前面說(shuō)的，常常看到的東西，習(xí)以為常，不代表它就是對(duì)的。

按鈕的設(shè)計(jì)，有許多可分析的地方，比如當(dāng)前按鈕的顯示，是一種狀態(tài)，還是一種指令；或者，文案標(biāo)簽的顯示是對(duì)當(dāng)前狀態(tài)的提示，還是對(duì)按鈕的靜態(tài)說(shuō)明。

這些東西在設(shè)計(jì)過(guò)程中都是需要去仔細(xì)思考的。

譬如，開(kāi)關(guān)控件的顯示邏輯，其實(shí)是一種顯示狀態(tài)，而不是指令。

你看到的開(kāi)關(guān)狀態(tài)，就是它當(dāng)前所處的情況，上面是關(guān)閉，下面是開(kāi)啟。我們一般很少在優(yōu)秀的產(chǎn)品里看到給開(kāi)關(guān)控件加文字的，因?yàn)樗呀?jīng)很明顯，通過(guò)顏色反饋狀態(tài)。

而我們平常在看視頻的時(shí)候，畫(huà)面播放時(shí)，底部顯示的是暫停鍵，屏幕暫停時(shí)，底部顯示的是播放鍵。

它區(qū)別于前面開(kāi)關(guān)的使用邏輯，是以指令的方式呈現(xiàn)的。

這就是一個(gè)按鈕，狀態(tài)與指令的差異。

那么文案作為提示與靜態(tài)說(shuō)明的差異是什么意思呢？

比如上面靜音案例的圖里，按鈕下面的文案是不會(huì)因?yàn)槭欠耖_(kāi)啟靜音而發(fā)生變化的，它只是告訴用戶(hù)，這個(gè)按鈕的名字叫靜音。類(lèi)似于底部標(biāo)簽欄里，告訴你那個(gè)圓圈的名字叫「發(fā)現(xiàn)」一樣，它本身不會(huì)有任何變化。

這就是靜態(tài)說(shuō)明。

而提示，是動(dòng)態(tài)的，也就是按鈕發(fā)生變化，那么文案也就會(huì)發(fā)生變化，它的作用是提醒用戶(hù)，可以通過(guò)操作改變當(dāng)前狀態(tài)。

比如：

題外話(huà)。微信的這個(gè)鎖定界面，雖然顯示了已鎖定，但是并沒(méi)有從識(shí)別角度告知用戶(hù)如何解鎖。如果是我，我可能會(huì)這樣改：

不過(guò)這不是討論的重點(diǎn)了，我這里主要想告訴各位，文字的作用，分為動(dòng)態(tài)提醒和靜態(tài)說(shuō)明。

于是，理清了這類(lèi)按鈕設(shè)計(jì)邏輯后的 Raluca 教授提出了相應(yīng)的規(guī)則，并發(fā)表了文章。如今，再看開(kāi)頭那個(gè)分不清是否已靜音按鈕的產(chǎn)品，改成了如下圖所呈現(xiàn)的形式。

無(wú)論是圖標(biāo)狀態(tài)，還是文案處理，都做了相應(yīng)的改進(jìn)，看起來(lái)就清晰多了。

通過(guò)這三個(gè)小案例是想告訴各位，雖然，我們?cè)诠ぷ髦胁豢赡苋プ鲞@樣的研究，但是各位在提出自己的建議時(shí)，也要從方案本身出發(fā)，而不是僅僅從元素樣式上去做無(wú)用功。

交互設(shè)計(jì)師，一定要有自己的思想。大概是這樣：-）