一個沒有用的按鈕，爲何還要放在頁面上呢？

轉載自公衆號：1鳴說。做者：一鳴。十二贊產品經理。

咱們知道，在作頁面設計的時候，最重要的就是肯定「頁面元素」。哪些元素須要放在頁面上，哪些元素不須要放在頁面上，這些都是須要深思熟慮的。這一節咱們來說講頁面元素中比較特殊的一類元素——無效元素。

那麼什麼是「無效元素」呢？通常來講，對於推動頁面流程沒有任何幫助的元素，均屬於無效元素。好比說有一個按鈕，點擊以後發現實際上是無效的，或者說該展現內容的地方其實是空的等，都屬於本文定義的「無效」狀況。「無效」指的是不產生做用，對推動頁面流程沒有任何幫助，即將這個元素徹底地去除，也並不會影響頁面的正常使用。

「無效」並非「無用」，不少新人在剛開始作頁面設計的時候，很容易想固然地把一些頁面中的無效元素刪除，簡單的思考就是「既然沒用，幹嗎還把它放上面？」或者是爲了頁面看起來簡潔，而直接把無效元素給去除了。

咱們先來看看「無效按鈕」。

什麼是「無效按鈕」呢？例如在點保存的時候，提示不能保存，並告知不能保存的緣由。這裏的保存按鈕就是上述定義中的無效按鈕，由於點擊保存並無起到「保存」的做用，並無使流程往前推動。再例如在點擊「選擇」的時候，正常的操做是彈窗列表頁，從中進行選擇，若是若是這個列表頁是空的，那麼顯然沒法選擇，這個時候這裏的「選擇」按鈕即是無效按鈕。簡單來說，全部不能達到「預期效果」的按鈕均爲無效按鈕。

通常狀況下，咱們應對「無效按鈕」有如下4種策略：

（1）策略一：直接隱藏按鈕。

（2）策略二：顯示按鈕但禁用。鼠標懸停提示禁用的緣由。

（3）策略三：顯示按鈕並可操做，點擊後彈窗提示不可用的緣由。

（4）策略四：顯示按鈕並可操做，進入新頁面（包含彈窗頁）提示不可用。

這4種策略的適用場景分別是什麼？咱們針對電商系統常見的先後臺頁面逐一說明各自的應對策略。

列表頁內容

當列表頁的內容爲空時，該頁面就是「無效頁面」，一般來說，列表頁爲空屬於特殊情形，通常不隱藏，而是在列表頁展現內容的區域告知暫無內容。後臺部分列表頁很常見，採起這種策略的緣由是列表頁內容爲空僅爲臨時性的特殊狀況，非大機率事件，無須對該種狀況增長額外判斷，同時也可讓用戶知曉存在這麼一個頁面。另外主動性列表頁（由用戶自行主動產生內容的列表頁）一旦隱藏入口將沒法進行內容新增。

更準確的講，實際上列表頁內容爲空情形屬於以上的策略四。通常都是經過點擊事件後進入列表頁，承載點擊事件的按鈕便屬於以上的策略四，採起策略四的緣由通常是：經過點擊按鈕的下一步操做一般是可用的，便不在這一個環節進行攔截了，用戶的預期是這個按鈕是可操做的，即使禁用仍是會習慣性的去進行點擊。

列表頁操做按鈕

列表頁除了展現內容的「業務區」，通常會在行尾放置「操做區」，對每一行的內容進行操做。列表頁的操做按鈕的主要特色是，按鈕都基本一致，所以對於一個不可用按鈕直接隱藏會致使按鈕區的錯位，所以對於每一行的按鈕都同樣的操做區，採起策略二是不錯的選擇。實際上策略二和策略三並沒有區別，除非是須要提醒的內容過多，沒法在按鈕區承載，則使用消息框提示，不然通常都建議使用策略二。

上面這種是廣泛狀況，還有一種特殊狀況是，對於同一行的元素存在多種狀態，每種狀態的操做有明顯不同的地方，很難作到統一，若是將全部按鈕都進行擺放，都會形成操做區大大冗餘，得不償失。在這種狀況下，就採起策略一。將其餘狀態的按鈕進行隱藏。常見的例如訂單列表頁就採起了這種策略。

編輯頁

在編輯頁中，咱們知道，若是用戶填寫的內容未達到要求的話，咱們是不容許用戶進行保存的。這個時候若是用戶點擊保存，很顯然是無效的，這種狀況怎麼處理呢？通常來講，有兩個策略：一是用戶沒完成一個輸入，就對輸入區進行檢測和判斷，若是填寫錯誤，則標紅提示錯誤信息，在用戶未完成全部的必填項以前，保存按鈕均保持禁用，僅當全部內容均正確輸入後纔將保存按鈕變動爲可用。二是在用戶輸入時不檢測，保存按鈕始終保持可用，可是點擊保存時，提示沒法保存的緣由。以上兩種策略都可用，不過策略一的用戶體驗會高於策略二。

總歸一點，全部的策略都是圍繞着「用戶預期」來的，都是爲了讓用戶可以少思考，更好地使用，少出錯。而不是爲了使頁面看起來「簡潔」而強行「簡潔」，不然就是本末倒置了。上面的二三四策略區別並不明顯，主要區別在因而否須要隱藏一個不可用的按鈕，一個簡單的方法就是，若是這個按鈕是這個頁面是主要元素，那就絕對不要隱藏，不然會形成用戶操做中斷。一個按鈕雖然不能點，可是卻給用戶提供的明確且有效的信息，而若是直接隱藏了，則這個時候很容易產生困惑，會一直去尋找這個按鈕，找不到只會認爲是遺漏了而不會認爲產品貼心地幫他過濾了無效信息。

【原文連接】