資深交互設計師是如何思考的？用3個交互案例為你揭秘！

交互設計師要通過邏輯推導來產出合理方案，無論是產品、交互還是 UI。本文通過3個交互案例細節，幫你一窺交互設計的門道。

更多交互設計案例：

一、人為推進效應

不知道大家有沒有看過這么一個案例，大概是說，有人在洗車店做了個實驗，給每個來洗車的顧客弄一張活動卡，這個卡上有八個空格子，顧客每次來洗一次車，就在空格子里蓋一個章，洗滿八次，也就是蓋滿八個章，就可以免費洗一次車。

送出去的卡分兩類，一類是上面沒蓋過一個章，八個格子都是空的；還有一類是，上面有十個格子，但是有兩個空格已經蓋了章的。所以，前面一類卡是 0/8，后面這類卡是 2/10。

經過一段時間的驗證，發現，后面這類卡的完成度要比前面這種高出 20%。

于是有人就給這個實驗結果定義了一個名字，叫「人為推進效應」。

后來有人就把這樣的概念用在了一些產品功能里，比如完善資料，簽到，游戲進程等。所以我們經常會在一些產品里完善個人資料時，明明沒填寫過任何信息，但資料填寫的進度就是 20%，原因是它把默認的頭像和昵稱 id 也算進去了，就會讓人覺得還差一些就完成了。而如果進度是 0%，用戶完善資料的動力就會下降。

甚至在一些產品里，洗車卡這個案例也被改了個方式，直接拿來用了，比如：

有些游戲任務，要殺死十只怪物，而任務的啟動條件是用戶在殺死一只怪物時，自動開啟，這時候任務的殺怪數量是 1/10，那么用戶完成任務的動力也會更強。

后來我找了些資料，來驗證這個概念的真偽性，以及支撐依據，發現這么三個理論。

第一個是「蔡格尼克記憶效應」，它是指人們對于尚未處理完的事情，比已處理完成的事情印象更加深刻。 這個現象是由蔡格尼克通過實驗得出的結論。

在讀關于蔡格尼克記憶效應的資料時，我想到一些實例，覺得確實是這樣。比如我在寫一篇文章時，腦袋里總會想著這個論題，甚至框架與內容細節都很清楚；但只要一寫完，丟進歸檔文件夾，很快就會忘記自己寫這篇文章時的一些內容。

包括玩游戲時，一旦開始執行任務，就會想著這個任務還需要玩多少次才能完成，而不會去想著，已經完成了什么。

不過想想也覺得是廢話，完成了誰還去想呢，這里對比的應該是「未開始」和「執行中」這兩種情況，哪種印象會更深刻。當然，從主觀情況來考慮，相比起來，執行中的事項一定是印象更深刻的。

這就與兩類洗車卡的實驗比較相關了。

第二個是「目標梯度效應」，意思是人類或動物具有接近目標時加快行動的效應，比如兔子快要接近食物時會跑得更快。

關于目標梯度效應的干貨：

類比上面洗車卡的例子，當卡上的蓋章數量越多，用戶洗車頻率就會越高，以為盡快完成洗車卡任務，拿到一次免費洗車的獎勵。

比如在一些產品里填寫地址，當要開始填寫時，GPS 定位會自動獲取城市定位，幫用戶完成第一步，看起來是理所應當，但其實是傳遞出一種任務已經開始了的信息，主要是為了提高用戶完成任務的動力。

有些注冊比較麻煩的產品，也會故意通過這樣的拆分方式，提高用戶完成注冊的轉化率。

同時，因為用戶在完成洗車卡任務后，任務會隨之消失，用戶也可能會流失，所以會通過發放二次洗車卡任務，而這個任務獎勵會與第一次有所區別，通過這樣的方式從而留下用戶。

比如上圖中的任務，任一模式完成一場，就可完成任務，領取獎勵，但是領取完后會在這個任務的基礎之上產生新的任務。好比王朝模式 2/2 完成后，就會變成 2/3。告訴你再玩一局，就可以領到更高的獎勵。

第三個是「任務可視化效果」，與其通過數字告訴用戶任務次數 2/10，不如把任務可視化，呈現出任務進度。

試想一下也是如此，看著卡片上如果寫得是數字，譬如洗了 3 次車，還差 5 次，肯定不如一張卡片，上面蓋了 3 次章來得更直觀。所以在一些產品上，任務進度會通過有進程的進度條來表示目前情況：

二、禁用按鈕的邏輯

最近收到的一則問題，大概是：在做設計的時候，經常會遇到一個問題，就是一個按鈕，在同一頁面的不同情況下，有時可用，有時不可用，我們到底是顯示不可用時的禁用狀態呢？還是直接隱藏這個按鈕呢？

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

尤其是這個問題，想要聊透徹，得用不少例子來舉證說明，不過也可以通過總結的方式長話短說了。

禁用按鈕的使用，可以從兩個維度來分析，分別是：「無效的禁用狀態」和「有效的禁用狀態」。

1. 無效的禁用狀態

有一種情況是，在一個頁面里，一個按鈕，可能會有幾種不同的情況存在。那人要問了，既然是一個頁面，為什么會有多種狀態同時存在的情況呢？

比如，在出行場景中，普通乘客發起訂單，司機接單后是可以發送消息的（左圖）。但是從第三方渠道來的乘客，司機是無法發送站內消息的，只能通過電話聯系乘客（右圖）。

不同渠道來的用戶，司機端的頁面會呈現不同的按鈕狀態。相同的頁面，第三方渠道來的乘客，在司機端就不需要露出消息按鈕了，這樣可以減少無效信息對司機的干擾，還可以避免司機習慣性操作帶來的無效反饋，比如點擊消息，顯示「無法發送消息」。或者顯示禁用，也會影響司機的操作判斷。

從這個案例中我們可以看出，當一個按鈕在某種情況下始終無法被觸發時，就會選擇讓它直接消失，而不是呈現禁用狀態。

很多人在這類設計里會給按鈕提供一個禁用狀態，以免按鈕消失而打亂頁面布局。但是要知道，在某種情況下，按鈕無用時，無意義的展示反而會產生干擾信息，就像上面說到的那樣。

所以這里有一個結論是：禁用按鈕需要可觸發的時機，如果沒有這個時機，禁用狀態就沒有存在的必要。如果存在，那它也是一個無效的狀態。

既然是無效的，最好就不要出現了。

2. 有效的禁用狀態

在上面的例子里，有一個前提不可忽略，那就是司機是否可以理解我們不顯示的原因。當然，司機會接受相關培訓，產品中也會有渠道標識，所以司機能夠明白頁面中存在的差異。

但在其他產品中，當狀態不同，按鈕變化無法自洽的時候，又怎么去處理呢？我們就需要通過合理的解釋來消除用戶潛在的困惑。

對于這點，比較典型的案例是在線上購物時，一件商品會有多個類型供消費者選擇，比如不同的尺寸、型號等，當其中一種類型被搶光時，這個商品依然是可見的，只是無法選擇，展示出了禁用狀態。

在這種場景中，我們不能一下子把其他無法購買的類型隱藏，因為用戶需要知道我們所有的商品類別，了解商品的全部屬性，盡管當下無法購買，但有上新的可能，用戶依然可以選擇等待，并將其加入收藏，還是會有機會促成這筆交易。而且當可選類型變多的時候，只是禁用沒有庫存的類型，可以使其他可選項保持固定的位置，有利于我們二次搜索和加購。這種場景的禁用也是暫時的，直到商品下架或者上新。

但就像我以前說過的，常常我們見多了的東西，就認為是正常的，但它并不一定好的。禁用也是這種情況。

雖然我們現在還是會在各個地方看到禁用操作，但是禁用的原由始終沒有給到用戶合理的解釋，以至于許多人見到類似的操作都是一頭霧水。所以在設計過程中，尤其要謹慎對待，盡可能的避免出現無法解釋的禁用操作。

好比淘寶的商品選擇頁面，如今也將原來的商品純禁用按鈕，替換成了「缺貨」。選擇缺貨的商品之后，按鈕會變成「提醒掌柜補貨」。

從原來的用戶單方面接收無法點擊的按鈕，到現在直觀顯示缺貨，點擊后同時提醒到商家，這樣的操作從功能角度來說是一個升級。

這就是我說的，有效與無效的禁用按鈕之間的區別。禁用不該是真的禁止使用，而是告知用戶，它如何可被使用。

3. 小結

如果一個按鈕在不同的階段有禁用和可用的狀態顯示，那么意圖是很明顯的。比如一些活動頁面，某個按鈕的禁用狀態是倒計時，就像電影的前期宣傳，為電影的上線制造話題和熱度，來鼓勵更多人的觀看一樣。

對于按鈕來說，顯示禁用則代表它在滿足一定條件后即可擁有可點擊性，讓我們明確地了解它就在這里，未來是可操作的。按鈕也有很多的設計空間來為未來的使用做好鋪墊，特別是營銷類的活動，像是「明日 8 點可搶」、「提醒商家補貨」的按鈕文案，無一不在傳達「可用性」的信息，引導用戶持續性的關注。

但是還有一類禁用狀態只是靜默地提示，多出現在表單中，當用戶沒有完成輸入的時候則無法點擊，因為看的多了，我們就以為這是正常的。但我們都知道它仍可優化，比如，在它以禁用狀態出現時，用更為友好的方式去提醒用戶應如何激活，而不是漆黑一片，且完全不知道它所存在的意圖。

我們要知道的是，禁用按鈕本身不是一個特殊的對象，只是禁用狀態在頁面中是一個特殊的存在，它是產品設計中的一種規則。為什么按鈕不可用，或者說一定場景下為什么功能不可用，當無法依靠用戶直覺理解的時候，是需要作出解釋的，也就是怎么禁的問題。

但是最開始設計時就應該去想的是，禁用狀態對用戶和產品的意義在哪里，這和我們設計方案時腦海中涌出的無數目標一樣，是一個基礎的出發點。而后，一切迎刃而解。

三、領導用控件的方式不對，但說服不了他，怎么辦？

讀者提問，他是這樣說的：

呆呆，我發現一個比較玄幻的現象。就我公司，不管是產品還是領導都會把開關控件當作是一個內容切換的控件使用，就很容易造成歧義。我有提過這個問題，但是他們就會覺得這個就應該這樣用。我該怎么說服他們呢？

這樣的事情其實有很多，我們甚至會在許多產品上看到各種錯用控件的情況。但就像我之前說過的，人們常常會把習以為常，似作理所應當。這是不對的。

但是，在工作中遇到類似的問題，僅僅只是靠說，是不夠的，畢竟領導看的是最終的業務成果，而不是從某個元素去考慮使用的合理性。

好比，在你參與之前，大家對這個問題已經經過多次討論，定下最終方案，你一句「控件」用的不對，就要改變整個頁面的展示內容，那不是打人臉了么，還是一整個團隊的臉。

反過來想一下，如果用戶給你提反饋，你的態度是怎么樣的。

做產品設計的同學肯定知道，我們平時會收到許多用戶的反饋，這些反饋來自于各個渠道，比如一些社交平臺、應用市場、用戶社群，甚至是調研搜集等。這些反饋有的是給產品功能提建議的，有的是直接吐槽功能難用的，還有的，可能是認為產品本身就有問題的。難道我們要對每個用戶提出的反饋都去思考合理性？不太可能。

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

我通過一個小案例來幫大家理解一下。

Raluca Budiu 是產品可用性方面的專家，同時也是卡內基梅隆大學的博士生導師。

她之前在上一場線上直播課的過程中遇到一個問題 —— 始終無法打開產品的麥克風。

剛開始上課的時候，Raluca 無論怎么點擊，靜音按鈕都處于「關閉」狀態，直到試了幾分鐘后，甚至重啟了軟件幾次，才反應過來，原來當前本就已經是非靜音狀態了，再點擊才是靜音。

意識到自己的行為后，顯得有些尷尬的笑了笑。于是，她開始思考類似的產品設計的問題。

可能許多人看到這種情況，都會覺得這沒什么問題，甚至覺得是理解不了的人的問題。但就像我前面說的，常常看到的東西，習以為常，不代表它就是對的。

按鈕的設計，有許多可分析的地方，比如當前按鈕的顯示，是一種狀態，還是一種指令；或者，文案標簽的顯示是對當前狀態的提示，還是對按鈕的靜態說明。

這些東西在設計過程中都是需要去仔細思考的。

譬如，開關控件的顯示邏輯，其實是一種顯示狀態，而不是指令。

你看到的開關狀態，就是它當前所處的情況，上面是關閉，下面是開啟。我們一般很少在優秀的產品里看到給開關控件加文字的，因為它已經很明顯，通過顏色反饋狀態。

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

它區別于前面開關的使用邏輯，是以指令的方式呈現的。

這就是一個按鈕，狀態與指令的差異。

那么文案作為提示與靜態說明的差異是什么意思呢？

比如上面靜音案例的圖里，按鈕下面的文案是不會因為是否開啟靜音而發生變化的，它只是告訴用戶，這個按鈕的名字叫靜音。類似于底部標簽欄里，告訴你那個圓圈的名字叫「發現」一樣，它本身不會有任何變化。

這就是靜態說明。

而提示，是動態的，也就是按鈕發生變化，那么文案也就會發生變化，它的作用是提醒用戶，可以通過操作改變當前狀態。

比如：

題外話。微信的這個鎖定界面，雖然顯示了已鎖定，但是并沒有從識別角度告知用戶如何解鎖。如果是我，我可能會這樣改：

不過這不是討論的重點了，我這里主要想告訴各位，文字的作用，分為動態提醒和靜態說明。

于是，理清了這類按鈕設計邏輯后的 Raluca 教授提出了相應的規則，并發表了文章。如今，再看開頭那個分不清是否已靜音按鈕的產品，改成了如下圖所呈現的形式。

無論是圖標狀態，還是文案處理，都做了相應的改進，看起來就清晰多了。

通過這三個小案例是想告訴各位，雖然，我們在工作中不可能去做這樣的研究，但是各位在提出自己的建議時，也要從方案本身出發，而不是僅僅從元素樣式上去做無用功。

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