為用戶提供即時(shí)反饋是交互設(shè)計(jì)中非常重要的原則。當(dāng)按鈕顯示為灰色時(shí)，如何向用戶提供反饋？我們來看看這篇文章。

為用戶提供即時(shí)反饋是交互設(shè)計(jì)中非常重要的原則。它是關(guān)于系統(tǒng)如何以立即有效的方式響應(yīng)用戶操作的設(shè)計(jì)。在用戶工作時(shí)提供即時(shí)，適當(dāng)?shù)姆答伔浅Ｖ匾?

一個(gè)簡(jiǎn)單的例子可以說明這一點(diǎn)：當(dāng)你的計(jì)算機(jī)凍結(jié)時(shí)，無論你指出什么，計(jì)算機(jī)都不會(huì)做出反應(yīng)。系統(tǒng)沒有反饋，用戶的心臟將崩潰。我們今天要討論的是一種非常特殊的反饋：當(dāng)按鈕變灰時(shí)，應(yīng)該如何向用戶提供反饋？

我們先來看一個(gè)案例。這是一個(gè)浮動(dòng)的投票層。每個(gè)玩家下方都有一個(gè)投票按鈕。每個(gè)用戶每天只能投票給一名玩家。

看看這個(gè)程序沒問題。但如果您在投票后添加頁(yè)面，則會(huì)顯示問題：

圖2為了表達(dá)“不能再投票”，所有的按鈕都顯示為灰色，所以我們?cè)谄聊簧系玫揭粋€(gè)灰色的按鈕。雖然按鈕是灰色的，但按鈕仍然是按鈕的形狀，仍然有想要點(diǎn)擊的愿望。

然后問題就來了。此時(shí)點(diǎn)擊灰色按鈕，應(yīng)彈出Toast提示：“每天只有一票~~~”？有了這個(gè)問題，讓我們研究灰色按鈕。

灰色按鈕

灰色按鈕廣泛用于登錄注冊(cè)，例如微信：

左圖是默認(rèn)登錄頁(yè)面，登錄按鈕顯示為灰色;當(dāng)用戶輸入密碼（一次只有一位）時(shí)，登錄按鈕會(huì)亮起。

乍一看，只輸入一個(gè)密碼，有些是不合理的。畢竟，用戶的密碼數(shù)字幾乎不可能是一個(gè)數(shù)字。此時(shí)，用戶不太可能登錄，但存在干擾。

但是如果再考慮一下，假設(shè)用戶的密碼是6位數(shù)，當(dāng)微信只有6位數(shù)時(shí)點(diǎn)亮按鈕時(shí)，它實(shí)際上會(huì)偽裝顯示用戶密碼的位數(shù)。如果設(shè)置最小數(shù)量的按鈕點(diǎn)亮？例如，在用戶輸入6位數(shù)后，它也是一個(gè)選項(xiàng)，但它比當(dāng)前方案稍微復(fù)雜一些。它并不簡(jiǎn)單，更直接。

以下示例應(yīng)位于登錄注冊(cè)中，灰色按鈕應(yīng)用程序的頂部按鈕：

在此示例中，按鈕“獲取驗(yàn)證碼”僅在用戶輸入11位數(shù)（移動(dòng)電話號(hào)碼為11位）時(shí)亮起。這個(gè)程序無可挑剔，沒有錯(cuò)。

在登錄時(shí)，按鈕顯示為灰色，主要是提示用戶現(xiàn)在無法點(diǎn)擊該按鈕，可以在輸入密碼/電話號(hào)碼等信息后點(diǎn)擊。在某種程度上，這可以防止用戶在沒有輸入時(shí)無法單擊。由于按鈕呈灰色顯示，因此按鈕本身設(shè)置為不可用，因此灰顯的按鈕在單擊后不應(yīng)提供反饋。

在這里我們可以看到一種權(quán)衡：雖然“即時(shí)反饋”的原則很重要，但是不能違反指示對(duì)象如何操作的可供性。具體地說，已經(jīng)設(shè)置為灰色狀態(tài)的灰色按鈕清楚地表示該按鈕不能被點(diǎn)擊;此時(shí)，如果單擊按鈕并彈出Toast，則按鈕的可用性不匹配。因此，這是不可取的。

投票案例

分析一下，文章開頭的例子很清楚：點(diǎn)擊第二張圖片中的投票按鈕，你不應(yīng)該彈出吐司。但頁(yè)面上仍有很多按鈕呈灰色顯示。這個(gè)頁(yè)面看起來不太友好。作者說我對(duì)這個(gè)頁(yè)面不是很滿意。

順便說一句，分享經(jīng)驗(yàn)：對(duì)頁(yè)面的不滿，很多次是我制定好計(jì)劃的法寶。因?yàn)槲也粷M意，我會(huì)一直嘗試優(yōu)化。在您不滿意的頁(yè)面上保持不妥協(xié)的態(tài)度非常重要。

分析這個(gè)投票頁(yè)面，投票后已經(jīng)投票，用戶選擇了一名玩家，此時(shí)最關(guān)注的是“我已投票”。如果您對(duì)此活動(dòng)感興趣，您可能還想知道投票的排名。您已經(jīng)瀏覽了哪些玩家參與了投票。因此，此頁(yè)面可以更改如下：

在更改之后，在用戶點(diǎn)擊投票之后，它首先指示用戶投票的人，當(dāng)前投票數(shù)以及排名是多少;后續(xù)頁(yè)面顯示了投票的排名，從而避免了全屏灰顯的情況。

以上使用案例來分析使用灰色按鈕的規(guī)則。討論讓我們更加了解，歡迎留言。

專欄

新設(shè)計(jì)青年，每個(gè)人都是產(chǎn)品經(jīng)理專欄作家，2017年作家評(píng)選最佳人氣獎(jiǎng)。愛奇藝高級(jí)互動(dòng)設(shè)計(jì)師。庫(kù)爾德海龜曾在騰訊微生活，網(wǎng)易和宜信服務(wù)。 5年的互動(dòng)設(shè)計(jì)經(jīng)驗(yàn)，專注于設(shè)計(jì)領(lǐng)域。微信公眾號(hào)：新設(shè)計(jì)青年。

這篇文章最初發(fā)表。未經(jīng)許可，禁止復(fù)制。

該地圖來自PEXELS，基于CC0協(xié)議

« 網(wǎng)站優(yōu)化主網(wǎng)站更換服務(wù)器 | 學(xué)習(xí)SEO并不好，因?yàn)槟愕谋ж?fù)太大 »