編輯導(dǎo)語：在界面中，各種模塊的設(shè)計以及B端體驗細(xì)節(jié)都是非常重要的，在設(shè)計模式中，我們需要不斷的優(yōu)化設(shè)計模式的細(xì)節(jié)；本文作者分享了關(guān)于B端體驗細(xì)節(jié)中的按鈕不可用的設(shè)計模式，我們一起來了解一下。

設(shè)計模式來源于實踐，又高于實踐。

一、什么是設(shè)計模式

De Dream說：“模式意味著重用，對于一個導(dǎo)航很復(fù)雜的網(wǎng)站，訪問者容易迷失在各種各樣的鏈接里，此時我們就可以應(yīng)用逃生艙模式——在網(wǎng)頁上設(shè)置統(tǒng)一出口（通常是把首頁的鏈接加在站點的圖標(biāo)上），無論什么時候，點擊這個出口（站點圖標(biāo)），就可以回到首頁，重新開始。現(xiàn)在，這一點已經(jīng)成為網(wǎng)站的慣例了?！?/p>

通過De Dream的描述不知道大家對模式有沒有了一些基本認(rèn)知，設(shè)計模式最早是來源于建筑設(shè)計領(lǐng)域，1996年左右，人機交互領(lǐng)域也提出了以用戶為中心的界面設(shè)計模式。

設(shè)計模式最簡單的可以理解為：“設(shè)計模式是針對某類場景的通用化解決方案，某種設(shè)計模式如果描述足夠清晰，可使得在過去良好使用的設(shè)計在未來某種類似的情境下復(fù)制使用?！本拖馜e Dream說的逃生艙設(shè)計模式，其再次使用率極高，是一個通用性很高的設(shè)計模式。

二、設(shè)計模式的特征

從上對設(shè)計模式的描述中，我們可以發(fā)現(xiàn)，設(shè)計模式的本質(zhì)在于抽象和復(fù)用；雖然一個設(shè)計模式不能覆蓋所有場景，但是只要能覆蓋一部分相似的場景，就是一個可被收錄的設(shè)計模式。

那設(shè)計模式有哪些特征呢？我們可以總結(jié)出如下幾點：

1. 基于場景

設(shè)計模式是基于場景的，具有場景化，一旦離開場景，其可復(fù)用價值就會降低。如果在不適用的場景下使用了該設(shè)計模式，會造成設(shè)計品質(zhì)降低。

之前遇到過這么一個情況，產(chǎn)品經(jīng)理使用select選擇器選擇讓用戶從2000條數(shù)據(jù)里面選擇200條的場景，導(dǎo)致頁面性能下降及用戶體驗受挫，事實上，select選擇器并不是為這樣的場景服務(wù)的。

2. 抽象與復(fù)用

設(shè)計模式是從一個個案例中抽象出來的形式，如果一種設(shè)計只能解決某個單一的問題，這類型設(shè)計不能稱之為設(shè)計模式，設(shè)計模式需要具備抽象性，能解決相似類型的問題。

3. 好的見解

設(shè)計模式是從實踐中提取出來的，它是一種好的優(yōu)質(zhì)的解決方案，而不是所有可被解決問題的解決方案都是設(shè)計模式。

4. 演進(jìn)與拓展

設(shè)計模式并不是一成不變的，而是根據(jù)業(yè)務(wù)、技術(shù)、用戶需求的變化而不斷演進(jìn)的。同時在實踐中，我們可以不斷拓展設(shè)計模式，幫助B端產(chǎn)品設(shè)計越來越具備體系化。

5. 端的區(qū)別

某些設(shè)計模式在不同端上會有差異，即移動端、PC端、手表端、VR、AR等載體上，設(shè)計模式會因為端的區(qū)別而呈現(xiàn)差異。

例如移動端底部導(dǎo)航欄建議少于5個以內(nèi)，但PC端沒有這個要求；移動端的設(shè)計模式與手勢觸控交互緊密相關(guān)，但PC端是與鼠標(biāo)關(guān)聯(lián)度較高。

三、B端為什么需要設(shè)計模式

在介紹今天的話題“按鈕不可用的設(shè)計模式”前，我們先來聊聊B端為什么需要設(shè)計模式？

1. 讓產(chǎn)品界面具備體系化設(shè)計方案

沒有設(shè)計模式，設(shè)計者在設(shè)計B端界面的時候會隨意為之，要么由需求觸發(fā)、要么由經(jīng)驗觸發(fā)、要么是產(chǎn)品經(jīng)理說了算、要么是技術(shù)要求的、等等；而有了設(shè)計模式后，設(shè)計者在設(shè)計B端界面時，會先判斷業(yè)務(wù)場景，再選用合適的設(shè)計模式，最后驗證設(shè)計模式是否合適該場景；同時設(shè)計者在遇到類似的場景時，會優(yōu)先考慮一致的設(shè)計模式，保證產(chǎn)品用戶體驗的一致性。

如此往復(fù)，不但設(shè)計者提升了體系化的設(shè)計思維，產(chǎn)品也在潛移默化中具備了體系化的設(shè)計方案。

2. 讓產(chǎn)品界面的設(shè)計品質(zhì)得到提升

毫無疑問，設(shè)計模式可以提升產(chǎn)品界面的設(shè)計品質(zhì)，使用設(shè)計模式，產(chǎn)品至少在體驗一致性上會大大提升。如果能不斷抽取優(yōu)秀的設(shè)計模式，那么人機交互方面也會更加符合用戶的期望。

3. 讓團隊成員統(tǒng)一產(chǎn)品設(shè)計認(rèn)知

產(chǎn)品若能建立自己的設(shè)計模式庫，并同步到團隊成員，那么在設(shè)計評審階段，將有效提升大家對設(shè)計結(jié)果的一致性認(rèn)知。大家不會再為自己的喜好提出意見，而將會給出更加有依據(jù)支撐的方案。

4. 提升產(chǎn)品團隊設(shè)計者的界面設(shè)計效率

設(shè)計模式有一個顯著的優(yōu)勢，即它可以提升設(shè)計者的設(shè)計效率；雖然不斷總結(jié)設(shè)計模式是一件費力且耗時的事情，但設(shè)計模式一旦建立，將大大提升設(shè)計者及產(chǎn)研效率，是一件非常有意義的事情。

好了，介紹完了設(shè)計模式，我們將進(jìn)入正題，“按鈕不可用的設(shè)計模式”有哪些，本文將分為以下三個部分去講解：

• What 是什么
• When 使用場景
• How 如何使用（交互）

為什么B端產(chǎn)品中會出現(xiàn)按鈕不可用的狀態(tài)呢？通常有這么幾種情況：

• 用戶使用的當(dāng)下賬號無權(quán)限，需切換成有權(quán)限的賬號才可以操作（例如普通權(quán)限者無法給產(chǎn)品添加成員）；
• 用戶需滿足某種條件后，才可激活操作（例如輸入賬號密碼，才可激活登錄、注冊按鈕；用戶選擇父節(jié)點后，才可添加子節(jié)點；對話框輸入內(nèi)容后，才可激活發(fā)送按鈕）。

四、按鈕不可用的設(shè)計模式

1. 按鈕直接不出現(xiàn)

1）What 是什么

按鈕不可用設(shè)計模式一之“按鈕直接不出現(xiàn)”是指如果該按鈕對于用戶來說不可用，直接在頁面上不展示。

2）When 使用場景

這種設(shè)計模式通常使用在用戶賬號無權(quán)限的情況下出現(xiàn)。

3）How 如何使用（交互）

不出現(xiàn)，即無交互。

2. 按鈕直接置灰

1）What 是什么

按鈕不可用設(shè)計模式二之“按鈕直接置灰”是指當(dāng)B端產(chǎn)品中有些按鈕不可操作時，直接展示禁用狀態(tài)，讓用戶一看便知該按鈕不可操作。

2）When 使用場景

使用“按鈕直接置灰”，就是想讓用戶一眼明白該按鈕不可操作，同時由于該按鈕的操作級別不是很高，該按鈕的操作要求不是必須；或激活該按鈕的條件非常明顯（如輸入賬號情況下，登錄按鈕才可用；對話框輸入內(nèi)容后，才可激活發(fā)送按鈕），因此無需提示用戶什么條件下會激活該禁用按鈕。

3）How 如何使用（交互）

首先，按鈕直接展示不可用狀態(tài)；其次，當(dāng)用戶將鼠標(biāo)懸浮到按鈕上時，鼠狀態(tài)變?yōu)榻脩B(tài)。

3. 按鈕置灰+文字提示

1）What 是什么

按鈕不可用設(shè)計模式三之“按鈕置灰+文字提示”是指當(dāng)B端產(chǎn)品中有些按鈕不可操作時，直接展示禁用狀態(tài)，讓用戶一看便知該按鈕不可操作；但當(dāng)用戶鼠標(biāo)移入操作區(qū)時，按鈕會給予用戶反饋提示。

2）When 使用場景

當(dāng)操作按鈕為核心按鈕，或操作頻率極高，或激活該按鈕的條件非常隱藏時，就必須讓用戶知曉通過何種方式可以激活按鈕，進(jìn)而達(dá)成用戶核心操作目標(biāo)。

3）How 如何使用（交互）

首先，按鈕直接展示不可用狀態(tài)；其次，當(dāng)用戶將鼠標(biāo)懸浮到按鈕上時，按鈕上方出現(xiàn)文字提示。

4. 按鈕不置灰+鼠標(biāo)點擊彈框提示

1）What 是什么

按鈕不可用設(shè)計模式四之“按鈕不置灰+鼠標(biāo)點擊彈框提示”是指用戶點擊按鈕，會出現(xiàn)模態(tài)彈框提示。

2）When 使用場景

當(dāng)用戶激活按鈕是一件較為重要的事情，且需要通過先完成其他任務(wù)流（任務(wù)流通常需要通過跳轉(zhuǎn)頁面或其他方式來完成）才能激活按鈕時，建議使用“按鈕不置灰+鼠標(biāo)點擊彈框提示”的設(shè)計模式，例如在SaaS類B端產(chǎn)品中，激活按鈕需要用戶先開通某項功能。

3）How 如何使用（交互）

首先，按鈕不展示不可用狀態(tài)，其次，當(dāng)用戶點擊按鈕時，界面中間出現(xiàn)模態(tài)彈框，告知用戶下一步該如何操作。

五、不建議使用的情況

在一些B端產(chǎn)品中，按鈕不可用會出現(xiàn)這么一種情況，即“按鈕不置灰+鼠標(biāo)點擊全局提示”。

當(dāng)時，我找到了相關(guān)的產(chǎn)品負(fù)責(zé)人，詢問他們當(dāng)時是怎么考慮這種設(shè)計的，產(chǎn)品負(fù)責(zé)人表示他也不清楚，界面上習(xí)慣性有啥需要告知用戶的都用全局提示來反饋用戶；但經(jīng)過深入思考后，這種按鈕不可用的交互模式還是略欠妥當(dāng)。

1. 最優(yōu)性

全局提示是一種不打斷用戶當(dāng)前操作的輕提示，如果不可用按鈕想讓用戶知道如何激活可用，是可以用以上“按鈕置灰+文字提示”的設(shè)計模式去代替的。

2. 掌控感

“按鈕置灰+文字提示”中的文字提示，比全局提示更顯得穩(wěn)定，因為全局提示是會到時間消失的，而文字提示如果用戶鼠標(biāo)不移開按鈕，文字提示常在，用戶可以仔細(xì)閱讀提示文字的意涵，整個交互過程由用戶自己掌控。

3. 鄰近性

“按鈕置灰+文字提示”設(shè)計模式中的文字提示直接出現(xiàn)在按鈕附近，符合設(shè)計原則中同類元素或闡述同一個對象的元素彼此之間更靠近。文字提示會比全局提示更靠近禁用按鈕。

六、總結(jié)：設(shè)計模式的價值

綜上可見，總結(jié)和優(yōu)化設(shè)計模式雖然是一件辛苦的差事，但設(shè)計模式的優(yōu)勢顯而易見：

• 它是產(chǎn)品一致性的基石；
• 它是團隊溝通的保障；
• 它可提升產(chǎn)品專業(yè)性；
• 它………………

近期會不斷總結(jié)工作中遇到的設(shè)計細(xì)節(jié)，轉(zhuǎn)化成設(shè)計模式和大家見面。

作者：知果；公眾號：知果日記

本文由 @知果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。