非常干貨系列之UI設(shè)計(jì)就該這樣設(shè)計(jì)按鈕

一.推薦操作按鈕

推薦操作按鈕，一般是對(duì)頁(yè)面全局控制的，是頁(yè)面里推薦使用的關(guān)鍵操作。常見的推薦操作細(xì)分為下面三種類別。

推薦按鈕1

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

推薦按鈕2

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

推薦按鈕3

列舉了美團(tuán)購(gòu)買確認(rèn)頁(yè)為例。很多O2O產(chǎn)品都有類似的結(jié)構(gòu)。對(duì)頁(yè)面全局控制的按鈕，一般出現(xiàn)在購(gòu)買頁(yè)、確認(rèn)頁(yè)、個(gè)人中心等頁(yè)面。

二.次要操作按鈕

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

次要按鈕1

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

次要按鈕2

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

次要按鈕3

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

三.局部操作按鈕

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

局部按鈕1

微博的關(guān)注頁(yè)面，頁(yè)面中展示的用戶較多，每個(gè)用戶后面都有關(guān)注按鈕，對(duì)于目標(biāo)明確的用戶來(lái)說，這樣的操作更加高效。

局部按鈕2

列舉了點(diǎn)評(píng)的個(gè)人中心為例。局部按鈕是點(diǎn)評(píng)。只是頁(yè)面里一個(gè)很小的操作入口，不對(duì)任何內(nèi)容造成影響。只是展示用。

局部按鈕3

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

四.吸底按鈕

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

吸底按鈕1

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

吸底按鈕2

列舉的是音樂會(huì)員頁(yè)面。這種按鈕形式一般用于運(yùn)營(yíng)活動(dòng)、買票的產(chǎn)品較多。這樣的按鈕形式較為活潑，用戶的點(diǎn)擊欲望會(huì)更強(qiáng)。

吸底按鈕3

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

如果業(yè)務(wù)有需要，我們可以對(duì)同級(jí)的按鈕進(jìn)行不同樣式的設(shè)計(jì)，來(lái)進(jìn)行優(yōu)先級(jí)、重要程度的區(qū)分。

五.懸浮按鈕

懸浮按鈕1

很多音頻播放應(yīng)用都喜歡這樣的設(shè)計(jì)。首先頁(yè)面足夠簡(jiǎn)潔，用戶又可以隨時(shí)查看懸浮按鈕中的信息。

懸浮按鈕2

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

懸浮按鈕3

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

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

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

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

按鈕的常規(guī)狀態(tài)，就是我們?cè)O(shè)計(jì)頁(yè)面時(shí)設(shè)定的按鈕樣式。

2.點(diǎn)擊狀態(tài)

模擬我們生活中的場(chǎng)景，我們按下按鈕的時(shí)候，

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

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

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

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

不可點(diǎn)擊的按鈕目的是要讓用戶知道頁(yè)面有操作入口，但當(dāng)前不可操作。設(shè)計(jì)的越弱，與預(yù)期越符合。

七.按鈕的性格

顏色和形狀都會(huì)對(duì)一個(gè)事物的屬性造成影響。

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

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

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

顏色和形狀都會(huì)對(duì)設(shè)計(jì)語(yǔ)言造成影響，會(huì)影響到按鈕帶給人最直觀的感受。