按鈕，在互聯(lián)網(wǎng)產(chǎn)品里在都被廣泛地使用，但我們很少有時間來總結(jié)按鈕背后的知識點。

其中按鈕的設計細節(jié)、規(guī)范更少有產(chǎn)品經(jīng)理知道了。如果要做一款app或web產(chǎn)品，那按鈕要投入的重點是哪里？如果在大廠做產(chǎn)品，那按鈕的細節(jié)規(guī)范又是什么？今天這一篇文章全部介紹了。

記得收藏@產(chǎn)品經(jīng)理、產(chǎn)品設計師、運營

1.按鈕的樣式分類

利用好按鈕的分類，是可以直接增加用戶體驗，減少用戶焦慮的最快辦法之一。

如下圖，按鈕主要分6大分類，因此好的產(chǎn)品經(jīng)理是場景選出積累按鈕做最合適的按鈕設計組合。達到用戶最佳的體驗

按鈕也有多種樣式，一個功能多項操作；多個功能并列操作；還有多個功能單選操作；

針對樣式設計，產(chǎn)品經(jīng)理只需要提前收集好按鈕的原型組件，就可以快速繪制樣式。針對自己每個功能下的頁面具體需求來做按鈕的擺放即可。

產(chǎn)品經(jīng)理還需要注意按鈕使用的場景，比如是app還是web上。在app上常用的帶圖標的矩形按鈕，而圖標則是在web上常用的。

2.按鈕的狀態(tài)

按鈕的狀態(tài)可以減少用戶操作焦慮，告知用戶當前系統(tǒng)狀態(tài)；比如上面社區(qū)文章點擊提交操作后，按鈕不同的狀態(tài)和多個樣式組合，告知了用戶當前發(fā)布狀態(tài)。

在早期產(chǎn)品和用戶量不高的情況下，這類同樣要避免采用。浪費了UI和前端開發(fā)資源，通過下一個頁面和系統(tǒng)固定的toast替換即可。

按鈕的狀態(tài)有6個，我整理放在下面。

普通狀態(tài)：可交互和可用的狀態(tài)。焦點狀態(tài)：用戶使用鍵盤或其他輸入方法來突出顯示一個元素。懸停狀態(tài)：用戶把光標置于可交互元素上的狀態(tài)。觸發(fā)狀態(tài)：用戶已點擊按鈕后的狀態(tài)。加載狀態(tài)：當操作沒有立即實現(xiàn)時，表示正在進行的狀態(tài)。禁用狀態(tài)：按鈕目前不可交互，但以后可以使用

在web端中通過增加懸停狀態(tài)，可以增加用戶的操作順滑度；在app端增加焦點狀態(tài)，可以減少用戶的操作疑惑。

而上面的6類狀態(tài)一般是組合式使用，不需要一次性6個狀態(tài)全部用；比如產(chǎn)品從0到1，只需要保證普通狀態(tài)即可；

3.按鈕的位置

按鈕的位置也直接會影響用戶的點擊率，在某些場景還會造成用戶的誤操作。比如在蘋果按鈕的保存和取消操作，保存在右。

在 windows下，確定按鈕是在左邊

同時當頁面存在多個按鈕，按鈕的位置也會影響首要和次要。設計這類按鈕是，你要確保用戶能夠知道首要操作：

比如 下面是某郵箱的界面操作

4.按鈕的交互操作

如今移動端屏幕帶來的多樣硬件支持，產(chǎn)品經(jīng)理可以對按鈕進行更多手勢交互設計為用戶提供更加細膩的草哦做，比如左右滑動；雙擊；長按去觸發(fā)按鈕背后的功能邏輯操作

我建議在產(chǎn)品生命周期早期或產(chǎn)品用戶量不多的情況下，建議交互操作減少。第一減少用戶的產(chǎn)品使用門檻；第二是減少產(chǎn)品開發(fā)難度；第三也是節(jié)約了產(chǎn)品研發(fā)時間。

按鈕的一切產(chǎn)品設計核心為用戶需求、產(chǎn)品轉(zhuǎn)化靠齊。

5.按鈕的文案

按鈕的文案可以直接的影響到用戶點擊情況，甚至還能吸引用戶點擊。

比如在大多國產(chǎn)軟件卸載時，都會冒出一臉哭喪狀的擬人化吉祥物，來向你確認是否繼續(xù)卸載，選擇之一便是「殘忍卸載」，這實際通過獲取用戶同理心減少卸載。

還有App Store下，針對付費app和免費app也有文案區(qū)別

App Store 購買按鈕的標準格式（出現(xiàn)在每個 app 各自的頁面里）是「￥XX.XX 購買應用軟件」或「免費應用軟件」，而在多個 app 并列的列表中采用簡化版的「￥XX.XX 購買」或「免費」。

通過按鈕文案把應用商店的app掛牌銷售，就像在一個服裝店商城一樣，用戶需要首先知價格，才能選擇購買。商品價格便宜的自然銷量就高了

6.按鈕的大小

在 app上尤其要注意按鈕的大小，過小用戶不能操作、太呆則影響頁面內(nèi)容展示。這一部分只需要按照按鈕的UI設計規(guī)范實行即可。在web端則會容易許多，因為鼠標是可以點擊的，但要突出按鈕的樣式和分類，避免用戶找不到按鈕操作的地方

1.2種類型的按鈕：「希望操作」「不希望操作」

通常，我們在產(chǎn)品中會為了達成某種指標，需要在界面上增加按鈕引導用戶去完成我們希望其完成的操作，我們稱之為「希望操作」，這類「召喚行為」最常出現(xiàn)的，是在按鈕設計的過程中。

有的按鈕在設計之初是希望用戶點擊，并且是主動讓用戶點擊；而有的只是希望業(yè)務、用戶體驗閉環(huán)而“被迫提供的”

為了減少用戶在美團app的銀行卡解綁操作，增加了2個環(huán)節(jié)。分別是頁面提示與彈窗提示。在按鈕上對保持綁定增加了提示、文案引導；

顏色、文案、按鈕的樣式可以引起用戶對操作的正向反饋和反面反饋，比如你看到很多產(chǎn)品在對你支付銀行卡綁定、手機號綁定、權(quán)限開啟，都會通過增強：“同意”的文案操作。

比如用戶在美團的賬戶失效，app提示重新登錄。「確定」按鈕通過黃色、位置布局來增強用戶的重新登錄。

比如在美團上的新用戶注冊，用戶需要同意《知情授權(quán)書》，按鈕「默認同意」的按鈕被增強了顏色，位置也放在了右邊。

產(chǎn)品希望用戶的操作，就會強化「希望操作」行為的按鈕，弱化「不希望操作」行為的按鈕。

而這里的希望：是指對北極星指標的行為

不希望：降低了北極星指標的行為

在微信公眾號里，也能見到這樣的設計：

希望用戶隨時保存，增加保存操作。

我們總是希望用戶持續(xù)操作下去，但也要給用戶提供回退的行為，

7.按鈕的設計樣式

按鈕的設計樣式會分4種

• 凸起按鈕
  

• 扁平按鈕

• 邊框按鈕
  

• 文本按鈕

• 圖標按鈕

如下圖

在點擊率上，4個樣式數(shù)據(jù)產(chǎn)品經(jīng)理可以記住下面4個順序

點擊率順序排列：凸起 > 扁平 > 邊框 > 文本。

好的按鈕設計：無需讓用戶思考，本能直接引導下一步操作。幫助用戶簡化一個思考點。

8.web與app的按鈕設計區(qū)別

我們現(xiàn)在見到越來越多的 Web 端產(chǎn)品，也開始遵循 App 產(chǎn)品的設計，把「不希望操作」放在左邊，「希望操作」按鈕放在右邊。

但在早期，Web 的「取消按鈕」基本是放在右邊，原因是眼睛的閱讀瀏覽習慣總是從左到右、從上到下來進行掃描屏幕，我們的視線會首先與文案聚焦到「希望操作」的按鈕上，也就是左邊，這時候鼠標輕而易舉地隨之而來。

而手指行為的操作，會以右為前進導向，且右手手勢因為便捷性，也會以右為確認操作。否則單手持機，且行進路徑長的話，用戶想進行確認操作會相對比較吃力。

這就是 Web 與 App 在按鈕位置上的主要區(qū)別。

在web端你的按鈕到底是放左邊還是右邊，還要基于產(chǎn)品背后的標準規(guī)范保持統(tǒng)一即可。不能2種都有，比如前面提到的WIN和MAC雖然是兩種位置，但至少在自己的系統(tǒng)里保持了統(tǒng)一。

9.按鈕的結(jié)束、開始兩種狀態(tài)

很多功能的入口是從一個按鈕開始，比如PMTalk的提問、發(fā)文都是點擊按鈕開始；同樣也有功能結(jié)束也是從一個按鈕結(jié)束，比如發(fā)布、提交、確認、取消。

但按鈕是可以嵌套搭配的，給予用戶多次選擇和點擊，減少或增加轉(zhuǎn)化率。比如前面提到的美團銀行卡解綁，點擊「解除綁定」后再提示彈窗。

比如上面的2個按鈕，一個是功能入口一個是頁面查詢；雖然都是代表了頁面跳轉(zhuǎn)，但背后邏輯是不一樣的。一個是用戶登錄注冊，一個只是普通的頁面瀏覽

不要過于把設計帶入到按鈕的工作中，反而專注在按鈕的使用場景、按鈕為用戶提供的價值。

按鈕設計是嚴格依附于產(chǎn)品生命周期的。在產(chǎn)品早期和用戶量本身就不多的情況下，一定要從簡、快、易3點考慮。

一個按鈕背后都有這么多產(chǎn)品設計點還不是一個頁面，甚至離一個功能十萬八千里遠，所以我希望這篇文章能夠幫助產(chǎn)品經(jīng)理在按鈕上掃除知識盲點，但更重要的是減少按鈕的設計成本，注重在重要的部分。

今天的分享就在這。

-END-