起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識在按鈕置灰時，該如何提供給用戶反饋？
給予用戶即時反饋是交互設計中十分重要的一個原則，那么在按鈕置灰時，該如何給用戶提供反饋呢？通過本文一起來看看。
給予用戶即時反饋是交互設計中十分重要的一個原則。它是關于系統如何即時有效地應對用戶進行的操作的設計。當用戶進行操作時，給予即時、恰當的反饋非常重要。
一個簡單的例子就可以說明這一點：當你的電腦死機的時候，不論你點什么，電腦都不會有任何反應。系統沒有了反饋，用戶的內心就會很崩潰。今天我們要討論的，是反饋中很特殊的一種：在按鈕置灰的時候，應該如何提供給用戶反饋？
先來看一個案例。這是一個投票的浮層，每個選手的下方有個投票按鈕，每個用戶每天只能投給一個選手一票。
乍看這個方案沒什么問題。但如果加上投票之后的頁面，問題就暴露了出來：
圖2為了表達出“不能再投票了”，將所有按鈕置灰，于是我們得到了一屏幕置灰的按鈕。雖然按鈕是灰色的，但按鈕卻依然長得是按鈕的形狀，還是有忍不住想點一下的欲望。
那么問題來了，此時點擊這個灰色的按鈕，應該彈出toast提示：“每天只能投一票哦~~~”嗎？帶著這個疑問，我們來研究一下置灰按鈕。
置灰按鈕
置灰按鈕在登錄注冊中被廣泛應用，比如微信：
左圖是默認的登錄頁面，登錄按鈕置灰；當用戶輸入了密碼（即時只有一位），則登錄按鈕亮起。
乍看之下只輸入了一位密碼就亮起，有些不合理，畢竟用戶的密碼位數幾乎不可能是一位數，此時亮起用戶也不太可能登錄，反而有干擾之嫌。
但如果再細想一下，假設用戶的密碼是6位，而微信正好在6位的時候亮起了按鈕，那么其實也是變相透露了用戶密碼的位數。如果設定一個最小的按鈕亮起的位數呢？比如從用戶輸入了6位后開始亮起，這樣也不失為一個選擇，只不過比現在的方案要略復雜，沒有現在這個更簡單直接。
下面這個例子，應該是登錄注冊中，置灰按鈕應用的頂配了：
在這個例子中，只有當用戶輸入了11位數字（手機號碼都是11位）后，“獲取驗證碼”的按鈕才會亮起。這個方案就是無可挑剔，沒毛病。
在登錄中將按鈕置灰，主要是提示用戶現在按鈕還不可以點擊，要輸入密碼/手機號等信息后，才可以點擊。這在一定程度上，預防了用戶在沒有輸入的時候就點擊而導致的操作失敗。由于將按鈕置灰，本身就是將按鈕置為不可用的狀態，因此置灰的按鈕點擊之后是不應該給出反饋信息的。
這里我們可以看到一個權衡：雖然“即時反饋”這條原則很重要，但可供性（affordance），也就是指示一個物體如何被操作，也不能違反。具體來說，一個置灰的按鈕，它已經被設置為置灰的狀態，就清晰地指示出按鈕不能被點擊；此時如果點擊按鈕后彈出toast，則與此時按鈕的可供性不符合，因此是不可取的做法。
投票案例
分析到這里，文章開始的那個例子就明晰了：點擊第2張圖的投票按鈕，不應該彈出toast。但頁面中還是有很多被置灰的按鈕，這個頁面看起來不是很友好，筆者表示對這個頁面不太滿意。
順便分享一個經驗：對頁面的不滿意，很多時候是我做出好方案的法寶。因為不滿意，所以會一直想辦法優化。保持對自己不滿意的頁面的不妥協態度，這非常重要。
分析一下這個投票頁面，在投完票之后，用戶已經選擇了一位選手，此時最關心的是“我是否已經投上票”了。如果對這個活動比較感興趣，用戶還可能會想要了解一下投票的排名，已經瀏覽一下都有哪些選手參與了投票。因此，這個頁面可以改成如下這樣：
更改后的方案，在用戶點擊投票之后，首先指明了用戶投的是誰、現在多少票、排名是多少；后續的頁面展示了票數的排名，從而避免了滿屏都是置灰按鈕的情況。
以上通過一個案例，分析了置灰按鈕的使用規則。討論讓我們認識更深刻，歡迎留言討論。
#專欄作家#
新設計青年，人人都是產品經理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝高級交互設計師。留德海龜，曾任職騰訊微生活、網易、宜信。5年交互設計經驗，專注設計領域。微信公眾號：新設計青年。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基于CC0協議
任何不談目標用戶的案例都是耍留忙，給移動設備界面交互教育程度比較低的用戶用一個試試，你看看他能不能明白置灰和亮起的區別，尤其是用在這種登陸注冊門面頁面里，有時候“婆婆媽媽”不一定是壞事，而且肯定是業務結果最重要，雖然我也不喜歡這種現象，但設計本質就是做生意
同意“設計本質就是做生意”，但有些原則也還是需要遵守，否則所有人都可以做設計了。對于“交互教育程度比較低的用戶”，隨手試了一下各種用戶都有的淘寶，它的登錄按鈕是一直亮著的，沒填內容的時候點擊就會有提示，可供參考。
嗯嗯，統一亮起也是個方法。不過私以為原則也是人定的，只是說符不符合人性而已，至于一些原則到底要不要嚴格遵守，還是需要根據很多因素去考慮
挺喜歡你的一些文章的，受益匪淺，Respect
謝謝支持~~原則確實沒必要死守，不過原則也是比較普適的規律，大多數情況會比較適用。
這個網站的文章更新沒有公眾號頻繁，可以關注我的公眾號：“沐風與體驗設計”。
關注了??
嗯嗯，原則有普適性，我在面對一些特殊用戶群體的時候會感覺有的原則有時候沒那么好用，比如在面對一些下沉用戶，有時候他們的行為真的難以預測
必要時可以在置灰按鈕位置加鼠標懸停出現提示語。
在實際項目中遇到這個情況。雖然大部分場景置灰不用反饋提示了，但是置灰后點擊還是有使用的場景的
點擊置灰給反饋有三點意義：
1.給用戶提供不同層次的信息傳達，置灰是一層；置灰了不能排除有些用戶不去點，反饋這是第二層
2.對于習慣于置灰就不能點擊的用戶，他就不會去點，不會對他們產生干擾；對于置灰了還要去點的用戶，給他提供反饋，對其友好
3.點擊置灰按鈕給反饋的另一作用，就是告訴他為什么置灰，降低困惑
贊同你的觀點，分析的很到位
置灰就是不能點擊啊，深以為老去彈toast是對自己產品的不自信，破壞自己產品的連貫性。用戶使用你的產品自然、流暢的時候壓根就不要彈toast。
同意。toast其實挺打擾的。
問題在于 你自信地認為用戶不會點擊你的置灰按鈕，又何來破壞連貫性一談？
置灰了用戶還是可能點擊。但置灰的按鈕對于點擊行為不該有反饋，這是所謂的一致性，所以我很自信
哪位大佬告訴我一下，344的填寫模式是什么意思 ?
就是把手機號自動斷開，比如138-1234-5678
原來如此，謝謝大佬 ??
是啊，沒毛病，微信的登錄不也一樣嗎，置灰的意思不就是不能點嗎，不存在的東西為什么要反饋 ??
dei！
個人還是比較贊同樓主說的按鈕置灰時，不給提示，此時按鈕不可點擊狀態，再給反饋有點多余
如果一定要反饋，就不要把按鈕置灰
??
這個點子棒棒，學習了~
歡迎常來
個人認為設置按鈕置灰,還有提示更合理。用戶點擊按鈕時，為用戶認為已經填寫完成了，可以點擊按鈕提交了。說明用戶沒有發現自己填寫的表單內容有什么問題。這時候需要一個提示輔助用戶，沒什么問題。這時候讓用戶用肉眼去檢查反而不合理。
理解你的意思，給用戶提示固然好，但是置灰的按鈕點擊了就是不應該給提示。就好像電腦如果關機了，再打字，屏幕上還應該出現提示說“您已關機”嗎？如果需要提示，可以把按鈕設計成始終亮起就可以了，就不要置灰了。這是兩種思路，但不能混用。
產品設計出來 終究是給用戶使用的。 不是所有的用戶都會想，這個產品設計的按鈕常量思路，還是置灰思路。在置灰的時候，用戶還會去點擊按鈕，他或者并沒有沿著產品設置的規則操作，或者是他的內心帶著疑惑點擊按鈕的。當考慮的實際場景的時候，為了解決用戶的疑惑，應該有提示。
抱歉，不敢茍同。好的方案是可以自洽的，不能憑感覺
嗯的
666學習了
??
學到了
??
文中手機號注冊那個例子，如果用戶錯誤的少輸入了一位自己卻不知道，這是用戶發現不能點才去檢查錯誤，我覺得不是很友好。如果采取按鈕置灰的策略建議輸入框設計為344的填寫模式，便于一眼看清格式錯誤。不過，我覺得按鈕常亮給錯誤提示的策略好一些。
感謝留言。344的模式的確更好，但按鈕置灰的策略我認為這手機號的時候更好，因為按鈕置灰相當于把錯誤提前了，不需要點擊按鈕就知道當前是有錯誤的，而手機號是很容易發現錯誤的，因此我認為置灰是更合適的。
還是要分情況的吧，個人感覺按鈕置灰時，點擊給出反饋會更加人性化點
這個不能靠感覺。按鈕既然已經置灰，就是“不能點擊的狀態”了，所以不應該給出反饋
置灰按鈕點擊給反饋更合理，可以告知用戶為什么不能點擊
那么把按鈕置灰還有什么意義呢？直接亮起就行了。
我認為你還是存在邏輯上的問題，就拿上面的例子來說，按鈕置灰時，按鈕內文字顯示是“已投票”，既然是已經告知用戶他做了什么，同時告訴用戶此時只能投一次，這已經達到了反饋的目的和用戶的認知程度，所以置灰按鈕點擊再反饋不合理，甚是多余了，破壞了操作的連貫性，不能婆婆式的做產品，用戶不是小孩 ??