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

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

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

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

看看這個程序沒問題。但如果您在投票后添加頁面，則會顯示問題：

圖2為了表達“不能再投票”，所有的按鈕都顯示為灰色，所以我們在屏幕上得到一個灰色的按鈕。雖然按鈕是灰色的，但按鈕仍然是按鈕的形狀，仍然有想要點擊的愿望。

然后問題就來了。此時點擊灰色按鈕，應彈出Toast提示：“每天只有一票~~~”？有了這個問題，讓我們研究灰色按鈕。

灰色按鈕

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

左圖是默認登錄頁面，登錄按鈕顯示為灰色;當用戶輸入密碼（一次只有一位）時，登錄按鈕會亮起。

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

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

以下示例應位于登錄注冊中，灰色按鈕應用程序的頂部按鈕：

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

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

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

投票案例

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

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

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

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

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

專欄

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

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

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

« 詳細的攜程APP訂單評估流程和高保真原型實施 | 圍繞用戶需求，在B站廣告的“三步”策略 »