非常干貨系列之UI設計就該這樣設計按鈕

一.推薦操作按鈕

推薦操作按鈕，一般是對頁面全局控制的，是頁面里推薦使用的關鍵操作。常見的推薦操作細分為下面三種類別。

推薦按鈕1

列舉ofo的首頁為例，頁面中下部黃色按鈕是頁面里推薦操作，按鈕在頁面中的配色，占的面積都比較突出，便于用戶分辨。能提高用戶的使用效率，降低用戶的學習成本。

推薦按鈕2

列舉了登錄頁面。頁面里推薦用戶去使用的操作，會比頁面中其他操作的重要程度更高。

推薦按鈕3

列舉了美團購買確認頁為例。很多O2O產品都有類似的結構。對頁面全局控制的按鈕，一般出現(xiàn)在購買頁、確認頁、個人中心等頁面。

二.次要操作按鈕

次要操作按鈕，一般是對頁面全局控制的，但重要程度較差，一般是新頁面的入口、頁面中對某個區(qū)域進行影響的操作。常見的推薦操作細分為下面三種類別。

次要按鈕1

列舉的情況是2個同級的按鈕，沒有明確的主次關系，只是希望用戶知道該頁面有這樣的功能。一般這樣的對應關系出現(xiàn)在登錄、注冊；評論、點贊；訂閱、收藏等功能。

次要按鈕2

很多App的登錄頁面喜歡做這樣的效果。登錄為推薦操作，注冊為次要操作。同類的操作還有支付流程等。

次要按鈕3

我列舉了直播軟件為例，默認推薦開始直播，次要推薦預告直播。因為對于軟件而言，還是期望用戶直播的。預告直播是對于少數(shù)知名的大V預熱準備的。對于大多數(shù)用戶而言，馬上開始才是剛需。

三.局部操作按鈕

局部操作按鈕，一般是對頁面中幾個相同模塊或某個固定模塊造成影響的。點擊后，一般按鈕的狀態(tài)會改變，或跳轉到新的頁面。

局部按鈕1

微博的關注頁面，頁面中展示的用戶較多，每個用戶后面都有關注按鈕，對于目標明確的用戶來說，這樣的操作更加高效。

局部按鈕2

列舉了點評的個人中心為例。局部按鈕是點評。只是頁面里一個很小的操作入口，不對任何內容造成影響。只是展示用。

局部按鈕3

荔枝FM直播頁面的開關按鈕，APP設置、權限、隱私等頁面比較常出現(xiàn)這樣的按鈕形式。

四.吸底按鈕

吸底按鈕最常出現(xiàn)的場景就是產品購買頁面和資訊瀏覽頁面。因為頁面中要呈現(xiàn)較多的內容，一屏顯示不下。將按鈕做成吸底的樣式，操作方便，能夠增強轉化率。

吸底按鈕1

微眾銀行的理財購買頁。因為頁面中要呈現(xiàn)較多的內容，一屏顯示不下。又希望感興趣的用戶能夠隨時執(zhí)行購買、收藏等操作。所以將按鈕做成吸底的樣式，增強轉化率。

吸底按鈕2

列舉的是音樂會員頁面。這種按鈕形式一般用于運營活動、買票的產品較多。這樣的按鈕形式較為活潑，用戶的點擊欲望會更強。

吸底按鈕3

列舉了商品詳情的底部購買按鈕，這種按鈕形式在電商產品中出現(xiàn)較多。我舉例的按鈕中，有很多操作功能，例如：立即購買、加入購物車、客服、收藏等。其中加入購物車的背景顏色最強，說明這是吸底按鈕中的推薦功能。

如果業(yè)務有需要，我們可以對同級的按鈕進行不同樣式的設計，來進行優(yōu)先級、重要程度的區(qū)分。

五.懸浮按鈕

懸浮按鈕1

很多音頻播放應用都喜歡這樣的設計。首先頁面足夠簡潔，用戶又可以隨時查看懸浮按鈕中的信息。

懸浮按鈕2

列舉的是抖音的懸浮按鈕。跟懸浮按鈕1一樣，同樣是常用于音頻、視頻播放頁面。抖音對懸浮按鈕的樣式進行了擬物化的設計，增加按鈕的合理性和趣味性，值得大家參考。

懸浮按鈕3

這種懸浮按鈕的樣式比較常見，也是Google制定的metiral design的推薦按鈕樣式。這種按鈕以懸浮的樣式出現(xiàn)，承載了很多功能的操作入口。這樣的擺放形式，會使得按鈕更突出，建議大家在做功能推薦的時候使用這種樣式。

六.按鈕的按壓態(tài)

在我們對按鈕執(zhí)行一個操作的時候，我們會收到按鈕的一個反饋。這個反饋就是按壓態(tài)。按壓態(tài)分為常規(guī)狀態(tài)、點擊時的狀態(tài)、點擊后的狀態(tài)及不可點的狀態(tài)。

1.常規(guī)狀態(tài)

按鈕的常規(guī)狀態(tài)，就是我們設計頁面時設定的按鈕樣式。

2.點擊狀態(tài)

模擬我們生活中的場景，我們按下按鈕的時候，

按鈕按下之后會陷下去，所以整體看上去不會再那么突出。

按壓態(tài)的顏色一般怎么設定：圖中列舉了2種制定按壓態(tài)顏色的方式。建議疊加30%透明度的黑色，這種方法能夠滿足App內全部場景的統(tǒng)一。

3.不可點的狀態(tài)

不可點擊的狀態(tài)，一般直接降低按鈕透明度，或者將按鈕顏色改為較弱的灰色。

不可點擊的按鈕目的是要讓用戶知道頁面有操作入口，但當前不可操作。設計的越弱，與預期越符合。

七.按鈕的性格

顏色和形狀都會對一個事物的屬性造成影響。

方形，四平八穩(wěn)，給人一種穩(wěn)定的感覺；圓形，珠圓玉潤，給人一種很活潑的感覺。

顏色也會給人一種感受，這里說得不是不同顏色。而是說同一個顏色，不同的飽和度。

黃色給人一種很活潑的感覺。但是降低飽和度之后變成金色，會傳達給用戶一種很成熟的感受。

顏色和形狀都會對設計語言造成影響，會影響到按鈕帶給人最直觀的感受。