給予用戶即時反饋是交互設計中十分重要的一個原則。它是關于系統如何即時有效地應對用戶進行的操作的設計。當用戶進行操作時，給予即時、恰當的反饋非常重要。
一個簡單的例子就可以說明這一點，當你的電腦死機的時候，不論你點什么，電腦都不會有任何反應。系統沒有了反饋，用戶的內心就會很崩潰。今天我們要討論的，是反饋中很特殊的一種，在按鈕置灰的時候，應該如何提供給用戶反饋？
先來看一個案例。這是一個投票的浮層，每個選手的下方有個投票按鈕，每個用戶每天只能投給一個選手一票。
乍看這個方案沒什么問題。但如果加上投票之后的頁面，問題就暴露了出來。
上圖為了表達出「不能再投票了」，將所有按鈕置灰，于是我們得到了一屏幕置灰的按鈕。雖然按鈕是灰色的，但按鈕卻依然長得是按鈕的形狀，還是有忍不住想點一下的欲望。
那么問題來了，此時點擊這個灰色的按鈕，應該彈出toast提示，「每天只能投一票哦~~~」嗎？帶著這個疑問，我們來研究一下置灰按鈕。
置灰按鈕
置灰按鈕在登錄注冊中被廣泛應用，比如微信：
左圖是默認的登錄頁面，登錄按鈕置灰。當用戶輸入了密碼（即使只有一位數），則登錄按鈕亮起。
乍看之下只輸入了一位密碼就亮起，有些不合理，畢竟用戶的密碼位數幾乎不可能是一位數，此時亮起用戶也不太可能登錄，反而有干擾之嫌。
但如果再細想一下，假設用戶的密碼是6位，而微信正好在6位的時候亮起了按鈕，那么其實也是變相透露了用戶密碼的位數。如果設定一個最小的按鈕亮起的位數呢？比如從用戶輸入了6位后開始亮起，這樣也不失為一個選擇，只不過比現在的方案要略復雜，沒有現在這個更簡單直接。
下面這個例子，應該是登錄注冊中，置灰按鈕應用的頂配了。
在這個例子中，只有當用戶輸入了11位數字（手機號碼都是11位）后，「獲取驗證碼」的按鈕才會亮起。這個方案就是無可挑剔，沒毛病。
在登錄中將按鈕置灰，主要是提示用戶現在按鈕還不可以點擊，要輸入密碼/手機號等信息后，才可以點擊。這在一定程度上，預防了用戶在沒有輸入的時候就點擊而導致的操作失敗。由于將按鈕置灰，本身就是將按鈕置為不可用的狀態，因此置灰的按鈕點擊之后是不應該給出反饋信息的。
這里我們可以看到一個權衡，雖然「即時反饋」這條原則很重要，但可供性（affordance），也就是指示一個物體如何被操作，也不能違反。具體來說，一個置灰的按鈕，它已經被設置為置灰的狀態，就清晰的指示出按鈕不能被點擊。此時如果點擊按鈕后彈出toast，則與此時按鈕的可供性不符合，因此是不可取的做法。
投票案例
分析到這里，文章開始的那個例子就明晰了，點擊第2張圖的投票按鈕，不應該彈出toast。但頁面中還是有很多被置灰的按鈕，這個頁面看起來不是很友好，筆者表示對這個頁面不太滿意。
順便分享一個經驗，對頁面的不滿意，很多時候是我做出好方案的法寶。因為不滿意，所以會一直想辦法優化。保持對自己不滿意的頁面的不妥協態度，這非常重要。
分析一下這個投票頁面，在投完票之后，用戶已經選擇了一位選手，此時最關心的是「我是否已經投上票」了。如果對這個活動比較感興趣，用戶還可能會想要了解一下投票的排名，以及瀏覽一下都有哪些選手參與了投票。因此，這個頁面可以改成如下這樣：
更改后的方案，在用戶點擊投票之后，首先指明了用戶投的是誰、現在多少票、排名是多少。后續的頁面展示了票數的排名，從而避免了滿屏都是置灰按鈕的情況。
以上通過一個案例，分析了置灰按鈕的使用規則。討論讓我們認識更深刻，歡迎留言討論。
歡迎關注作者的微信公眾號：「新設計青年」
================明星欄目推薦================
優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓