作為WEB端和移動(dòng)端的組成部分，按鈕承載著引導(dǎo)用戶的作用，遵循怎樣的設(shè)計(jì)原則，才可以讓按鈕真正起到作用，同時(shí)不造成誤解呢？

按鈕對(duì)于現(xiàn)在的我們來(lái)說(shuō)，不管是WEB端還是移動(dòng)端，已經(jīng)非常常見了。但是對(duì)于早期互聯(lián)網(wǎng)來(lái)說(shuō)，樣式比較少。當(dāng)時(shí)只有超鏈接，也就是文字鏈接，點(diǎn)擊一次，就可以直接到達(dá)。

這種超鏈接也就是目前我們看到的樣式，文字+藍(lán)色下劃線。

還有一種就是Button，有方形的、圓形的、立體的、hover的、按下的、釋放的等等種樣式。

這是早期的谷歌首頁(yè)，兩種按鈕樣式還是對(duì)比很清楚的。

現(xiàn)在的互聯(lián)網(wǎng)較之前相比，按鈕樣式越來(lái)越復(fù)雜。因?yàn)楝F(xiàn)在的信息越來(lái)越多，為了更清楚讓用戶分清主次，就需要不同的樣式來(lái)表達(dá)。

現(xiàn)在我們常見的按鈕樣式無(wú)外乎就是文字按鈕、普通按鈕、圖標(biāo)按鈕、標(biāo)簽按鈕、懸浮按鈕這幾種樣式，我先簡(jiǎn)單介紹一下。

文字按鈕

對(duì)于文字按鈕，既定的規(guī)則是通過(guò)藍(lán)色或者加下劃線表示，當(dāng)然不是必須是藍(lán)色的，也可以根據(jù)產(chǎn)品換成其他顏色。但是需要形成對(duì)比，具有可識(shí)別性，讓用戶知道這是一個(gè)可以點(diǎn)擊的鏈接。

比如百度的搜索熱點(diǎn)，用藍(lán)色向用戶傳達(dá)：我是可以點(diǎn)擊的；而旁邊的不可點(diǎn)擊的數(shù)字則以黑色做對(duì)比，告訴用戶：你看看就好了，不要花時(shí)間來(lái)點(diǎn)我，對(duì)用戶來(lái)說(shuō)非常直觀明了，用戶看到后基本不會(huì)去花時(shí)間去試試能不能點(diǎn)擊，除非個(gè)別人就想試一試的。

而對(duì)于加下劃線的超鏈接，和其他文字對(duì)比，也是直觀明了。

普通按鈕

普通按鈕則分為幽靈按鈕和填充按鈕。對(duì)于大家來(lái)說(shuō)，這應(yīng)該比較常見了，視覺(jué)層級(jí)上來(lái)說(shuō)，填充按鈕肯定高于幽靈按鈕，一般引導(dǎo)性的操作都會(huì)使用填充按鈕。

在這兩種按鈕上，每個(gè)按鈕都會(huì)包含一個(gè)文本指令，它會(huì)告訴用戶這個(gè)按鈕的功能和指向。所以，按鈕上的文本要盡量簡(jiǎn)潔、直觀，并且要符合整個(gè)網(wǎng)站風(fēng)格的語(yǔ)音語(yǔ)調(diào)。

當(dāng)用戶點(diǎn)擊按鈕的時(shí)候，按鈕所指示的內(nèi)容和結(jié)果應(yīng)當(dāng)合理、迅速地呈現(xiàn)在用戶眼前，無(wú)論是提交表單、跳轉(zhuǎn)到新的頁(yè)面，用戶通過(guò)這個(gè)按鈕應(yīng)當(dāng)獲得他所預(yù)期的結(jié)果。

圖標(biāo)按鈕

圖標(biāo)按鈕在WEB端和移動(dòng)端也非常常見，用圖標(biāo)意形的方式直接告訴用戶，點(diǎn)擊這個(gè)按鈕可以達(dá)到什么結(jié)果，比較形象化。

標(biāo)簽按鈕

標(biāo)簽按鈕則可以進(jìn)行分類，標(biāo)記不同的屬性和維度，可以進(jìn)行編輯操作，比如“添加”和“刪除”。

懸浮按鈕

而懸浮按鈕可以說(shuō)是代表用戶在界面上最高頻次的操作。

由于懸浮按鈕通常承載的是主要的、有代表性的操作，通常它應(yīng)該是個(gè)積極正向的交互，比如創(chuàng)建、分享、探索等；不應(yīng)該執(zhí)行破壞性的操作，比如刪除。

高德高航的兩個(gè)懸浮按鈕則為“回到原位置”和“查找路線”。

總結(jié)

無(wú)論對(duì)于什么按鈕來(lái)說(shuō)。

“操作前，操作結(jié)果可預(yù)知”這個(gè)原則很重要，這個(gè)按鈕是只放圖標(biāo)就可以了？還是要寫上文字用戶才清楚？——這是經(jīng)常會(huì)遇到的問(wèn)題。

要做這個(gè)判斷，我們得先確定：需要讓用戶清楚到什么程度。應(yīng)該盡量讓用戶能猜到點(diǎn)擊后將帶來(lái)什么結(jié)果，這樣用戶才更敢去點(diǎn)擊。

是不是只放一個(gè)圖標(biāo)，用戶就沒(méi)法猜到后果？那也不一定。這要看產(chǎn)品里的上下文情景，還有用戶對(duì)產(chǎn)品的熟悉程度。相機(jī)APP里，只放一個(gè)拍攝的圖標(biāo)，幾乎所有人都知道是拍攝。

寫到這，突然想到了之前在設(shè)計(jì)彈窗按鈕的時(shí)候，遇到的一個(gè)問(wèn)題，是“確定在左，取消在右”，還是“取消在左，確定在右”？

同時(shí)用過(guò)Windows和Mac系統(tǒng)的用戶，應(yīng)該清楚，這兩個(gè)系統(tǒng)對(duì)于這個(gè)設(shè)計(jì)是完全相反的。Windows是“確定在左，取消在右”，Mac則相反，那到底哪個(gè)才更合理呢？

Android 的設(shè)計(jì)規(guī)范中則規(guī)定，“‘取消’操作的按鈕始終處于左邊，當(dāng)用戶執(zhí)行這個(gè)操作的時(shí)候會(huì)回到上一個(gè)狀態(tài)，而正向操作的按鈕則安排在右側(cè)”。也就是說(shuō)，在Android規(guī)范當(dāng)中，“取消”按鈕是在“確認(rèn)”按鈕的左邊。

根據(jù)古騰堡原則：人們?cè)跒g覽頁(yè)面的時(shí)候，都趨向于從上到下，從左到右的眼球運(yùn)動(dòng)規(guī)律。左上角是視覺(jué)的第一落點(diǎn)區(qū)，而右下角是視覺(jué)最終落點(diǎn)區(qū)。用戶的視覺(jué)中心往往在頁(yè)面的左上方，而結(jié)束瀏覽時(shí)視線往往落在右下角。

既然用戶的最終操作行為是“確認(rèn)”，我們是不是就應(yīng)該把“確認(rèn)”按鈕放在最終視覺(jué)落點(diǎn)區(qū)呢？這樣用戶既不會(huì)錯(cuò)過(guò)“確認(rèn)”這個(gè)重要操作，也保證用戶在這之前都掃描到了所有的操作。

所以根據(jù)這個(gè)原則，建議是放在右邊。但是按照遵循設(shè)計(jì)規(guī)范來(lái)說(shuō)，平臺(tái)的一致性原則優(yōu)先級(jí)較高，用戶有可能會(huì)有錯(cuò)誤或者遲疑的風(fēng)險(xiǎn)，這個(gè)就需要通過(guò)用戶反饋來(lái)調(diào)整了。

同時(shí)在我們?cè)O(shè)計(jì)彈窗時(shí)，應(yīng)該讓每個(gè)彈窗都盡可能明確，不能只是為用戶提供選擇而已，明確的標(biāo)簽?zāi)軌驇椭脩粼谶x擇的時(shí)候不遲疑，更迅速和準(zhǔn)確的去點(diǎn)擊。

比如以下這個(gè)案例：

第一個(gè)彈窗中，“No”僅僅是回答問(wèn)題，但并沒(méi)有指向性，并未指出這么選擇的后果。而第二個(gè)彈窗則好了許多，“Cancel”和“Discard”兩個(gè)選項(xiàng)，后者和前文所提出的問(wèn)題相對(duì)應(yīng)，指向性明確，Cancel 的含義更加清晰。

當(dāng)然在設(shè)計(jì)彈窗時(shí)，我們還可以自定義落焦點(diǎn)。當(dāng)首選操作是正向操作時(shí)，視覺(jué)重量要大于次要操作，比如“保存”；而反向操作時(shí)，不可逆的操作比較高，所以為了避免用戶出錯(cuò)的風(fēng)險(xiǎn)，此時(shí)在速度和正確性上相比，正確則是比較重要的，比如“刪除”，所以這時(shí)設(shè)計(jì)師就需要把引導(dǎo)性做好。

好了，按鈕設(shè)計(jì)就聊到這，下篇見。

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

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