給予用戶即時(shí)反饋是交互設(shè)計(jì)中十分重要的一個(gè)原則。它是關(guān)于系統(tǒng)如何即時(shí)有效地應(yīng)對(duì)用戶進(jìn)行的操作的設(shè)計(jì)。當(dāng)用戶進(jìn)行操作時(shí)，給予即時(shí)、恰當(dāng)?shù)姆答伔浅Ｖ匾?/p>

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),宣威企業(yè)網(wǎng)站建設(shè),宣威品牌網(wǎng)站建設(shè),網(wǎng)站定制,宣威網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,宣威網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

一個(gè)簡(jiǎn)單的例子就可以說(shuō)明這一點(diǎn)：當(dāng)你的電腦死機(jī)的時(shí)候，不論你點(diǎn)什么，電腦都不會(huì)有任何反應(yīng)。系統(tǒng)沒有了反饋，用戶的內(nèi)心就會(huì)很崩潰。今天我們要討論的，是反饋中很特殊的一種：在按鈕置灰的時(shí)候，應(yīng)該如何提供給用戶反饋？

先來(lái)看一個(gè)案例。這是一個(gè)投票的浮層，每個(gè)選手的下方有個(gè)投票按鈕，每個(gè)用戶每天只能投給一個(gè)選手一票。

乍看這個(gè)方案沒什么問(wèn)題。但如果加上投票之后的頁(yè)面，問(wèn)題就暴露了出來(lái)：

圖 2 為了表達(dá)出“不能再投票了”，將所有按鈕置灰，于是我們得到了一屏幕置灰的按鈕。雖然按鈕是灰色的，但按鈕卻依然長(zhǎng)得是按鈕的形狀，還是有忍不住想點(diǎn)一下的欲望。

那么問(wèn)題來(lái)了，此時(shí)點(diǎn)擊這個(gè)灰色的按鈕，應(yīng)該彈出toast提示：“每天只能投一票哦~~~”嗎？帶著這個(gè)疑問(wèn)，我們來(lái)研究一下置灰按鈕。

置灰按鈕

置灰按鈕在登錄注冊(cè)中被廣泛應(yīng)用，比如微信：

左圖是默認(rèn)的登錄頁(yè)面，登錄按鈕置灰；當(dāng)用戶輸入了密碼（即時(shí)只有一位），則登錄按鈕亮起。

乍看之下只輸入了一位密碼就亮起，有些不合理，畢竟用戶的密碼位數(shù)幾乎不可能是一位數(shù)，此時(shí)亮起用戶也不太可能登錄，反而有干擾之嫌。

但如果再細(xì)想一下，假設(shè)用戶的密碼是 6 位，而微信正好在 6 位的時(shí)候亮起了按鈕，那么其實(shí)也是變相透露了用戶密碼的位數(shù)。如果設(shè)定一個(gè)最小的按鈕亮起的位數(shù)呢？比如從用戶輸入了 6 位后開始亮起，這樣也不失為一個(gè)選擇，只不過(guò)比現(xiàn)在的方案要略復(fù)雜，沒有現(xiàn)在這個(gè)更簡(jiǎn)單直接。

下面這個(gè)例子，應(yīng)該是登錄注冊(cè)中，置灰按鈕應(yīng)用的頂配了：

在這個(gè)例子中，只有當(dāng)用戶輸入了 11 位數(shù)字（手機(jī)號(hào)碼都是 11 位）后，“獲取驗(yàn)證碼”的按鈕才會(huì)亮起。這個(gè)方案就是無(wú)可挑剔，沒毛病。

在登錄中將按鈕置灰，主要是提示用戶現(xiàn)在按鈕還不可以點(diǎn)擊，要輸入密碼/手機(jī)號(hào)等信息后，才可以點(diǎn)擊。這在一定程度上，預(yù)防了用戶在沒有輸入的時(shí)候就點(diǎn)擊而導(dǎo)致的操作失敗。由于將按鈕置灰，本身就是將按鈕置為不可用的狀態(tài)，因此置灰的按鈕點(diǎn)擊之后是不應(yīng)該給出反饋信息的。

這里我們可以看到一個(gè)權(quán)衡：雖然“即時(shí)反饋”這條原則很重要，但可供性（affordance），也就是指示一個(gè)物體如何被操作，也不能違反。具體來(lái)說(shuō)，一個(gè)置灰的按鈕，它已經(jīng)被設(shè)置為置灰的狀態(tài)，就清晰地指示出按鈕不能被點(diǎn)擊；此時(shí)如果點(diǎn)擊按鈕后彈出toast，則與此時(shí)按鈕的可供性不符合，因此是不可取的做法。

投票案例

分析到這里，文章開始的那個(gè)例子就明晰了：點(diǎn)擊第 2 張圖的投票按鈕，不應(yīng)該彈出toast。但頁(yè)面中還是有很多被置灰的按鈕，這個(gè)頁(yè)面看起來(lái)不是很友好，筆者表示對(duì)這個(gè)頁(yè)面不太滿意。

順便分享一個(gè)經(jīng)驗(yàn)：對(duì)頁(yè)面的不滿意，很多時(shí)候是我做出好方案的法寶。因?yàn)椴粷M意，所以會(huì)一直想辦法優(yōu)化。保持對(duì)自己不滿意的頁(yè)面的不妥協(xié)態(tài)度，這非常重要。

分析一下這個(gè)投票頁(yè)面，在投完票之后，用戶已經(jīng)選擇了一位選手，此時(shí)最關(guān)心的是“我是否已經(jīng)投上票”了。如果對(duì)這個(gè)活動(dòng)比較感興趣，用戶還可能會(huì)想要了解一下投票的排名，已經(jīng)瀏覽一下都有哪些選手參與了投票。因此，這個(gè)頁(yè)面可以改成如下這樣：

更改后的方案，在用戶點(diǎn)擊投票之后，首先指明了用戶投的是誰(shuí)、現(xiàn)在多少票、排名是多少；后續(xù)的頁(yè)面展示了票數(shù)的排名，從而避免了滿屏都是置灰按鈕的情況。

以上通過(guò)一個(gè)案例，分析了置灰按鈕的使用規(guī)則。討論讓我們認(rèn)識(shí)更深刻，歡迎留言討論。

關(guān)于作者

新設(shè)計(jì)青年，2017 年度作家評(píng)選人氣獎(jiǎng)。愛奇藝高級(jí)交互設(shè)計(jì)師。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。 5 年交互設(shè)計(jì)經(jīng)驗(yàn)，專注設(shè)計(jì)領(lǐng)域。微信公眾號(hào)：新設(shè)計(jì)青年。

標(biāo)題名稱：在按鈕置灰時(shí)，該如何提供給用戶反饋？
網(wǎng)頁(yè)URL：http://chinadenli.net/article10/cjisdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、微信公眾號(hào)、營(yíng)銷型網(wǎng)站建設(shè)、云服務(wù)器、全網(wǎng)營(yíng)銷推廣、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)