?邏輯上，虛擬按鈕可能并不適合于Web設(shè)計(jì)；然而對用戶來說，可能并不是那么回事。

盡管是一個(gè)設(shè)計(jì)細(xì)節(jié)，但按鈕設(shè)計(jì)確實(shí)起著舉足輕重的作用。按鈕是用戶訪問的最重要入口，也是轉(zhuǎn)化的觸發(fā)動(dòng)作。如果在按鈕設(shè)計(jì)上有明顯的敗筆，那基本要和老板說再見了。

盡管我們對全局按鈕的設(shè)計(jì)已經(jīng)有了很好的理解，但有時(shí)，仍會詫異于某些非常規(guī)按鈕的巨大作用，比如虛擬按鈕。

虛擬按鈕并不神秘，盡管聽起來怪怪的（Ghost Button）。對Web來說，虛擬按鈕起到行為召喚（CTA）的作用。

虛擬按鈕的最大特征就是外觀。從下圖Dropbox的案例中，我們能看出傳統(tǒng)按鈕和虛擬按鈕的區(qū)別。

Dropbox的購買提醒頁有兩個(gè)虛擬按鈕

中間的藍(lán)色按鈕是我們習(xí)慣了的標(biāo)準(zhǔn)的實(shí)心按鈕，兩側(cè)的透明按鈕就是虛擬按鈕。

從邏輯上講，虛擬按鈕似乎并不適合于Web設(shè)計(jì)，因?yàn)樗鼈儾⒉皇怯行蔚幕蛘呙鞔_可以點(diǎn)擊的，它們還缺少傳統(tǒng)按鈕的那些引人注目的元素。然而研究表明，對用戶來說，可能并不是這樣。

這篇文章的目的，是想通過具體案例討論虛擬按鈕的優(yōu)缺點(diǎn)，以給產(chǎn)品經(jīng)理和交互設(shè)計(jì)師以幫助。

虛擬按鈕是什么

Web設(shè)計(jì)博主們寫了大量的文章來探討如何設(shè)計(jì)更好用的按鈕。在這些指導(dǎo)意見中，博主們試圖回答那些困擾著產(chǎn)品經(jīng)理、交互設(shè)計(jì)師和開發(fā)工程師的問題：

• 哪種顏色最有吸引力？甚至什么才是真正有價(jià)值的注意力？
• 按鈕尺寸應(yīng)該多大？尺寸的影響大嗎？
• 按鈕里的文案該怎么寫？
• 放在按鈕周圍的文案應(yīng)該是什么樣的？
• 移動(dòng)端和M站的按鈕設(shè)計(jì)是一樣的嗎？要根據(jù)拇指的操作區(qū)域進(jìn)行調(diào)整嗎？

不管你如何看待Web設(shè)計(jì)中的虛擬按鈕，當(dāng)你設(shè)計(jì)按鈕時(shí)，都會問到以上問題。

先來看下虛擬按鈕的優(yōu)缺點(diǎn)。

虛擬按鈕的缺點(diǎn)

簡單

之所以行為召喚要使用醒目顏色，就是因?yàn)橐龑?dǎo)用戶的視覺流，讓用戶的視線聚焦在目標(biāo)區(qū)域。但對于虛擬按鈕，只有按鈕輪廓和里面的文字有顏色。正因?yàn)橛蓄伾膮^(qū)域很少，所以虛擬按鈕很難吸引用戶注意力，動(dòng)畫或者醒目的圖形等其他元素會讓用戶忽視虛擬按鈕的存在。

Elevated Third的A/B測試

我認(rèn)為Elevated Third做的A/B測試是一個(gè)很好的例子，它證明了無論在網(wǎng)頁還是電子郵件中，虛擬按鈕都無法給人留下深刻印象。

用戶習(xí)慣

當(dāng)用戶想進(jìn)入下一頁或者進(jìn)行下一個(gè)操作步驟時(shí)，他們已經(jīng)習(xí)慣于尋找傳統(tǒng)的填充醒目顏色的按鈕，有時(shí)這些按鈕還會帶有陰影和3D效果，以便更像可以按下的樣子。虛擬按鈕不符合這種用戶習(xí)慣，用戶不得不改變慣性思維去尋找它們。

可讀性

根據(jù)傳統(tǒng)的行為召喚準(zhǔn)則，按鈕使用深色字體，文本使用淺色字體；而虛擬按鈕卻不具備這種靈活性。相反，虛擬按鈕的文本依賴于深色和更高的可讀性，這限制了顏色選擇。

透明度

如果用戶沒有習(xí)慣于按鈕位置，那么透明度會是個(gè)棘手問題。盡管在測試時(shí)，虛擬按鈕看上去還不錯(cuò)；但在實(shí)際使用中，可能有大幅圖片在虛擬按鈕的周圍，也可能電腦屏幕較小，這都會降低按鈕的可讀性。視差滾動(dòng)時(shí)也同樣如此，如果圖片在按鈕的底層，那就很難找到按鈕或者辨識按鈕的內(nèi)容。

位置

傳統(tǒng)按鈕的好處之一，是適用于頁面的大多數(shù)位置。然而使用虛擬按鈕時(shí)，不得不考慮到用戶迷路的風(fēng)險(xiǎn)，這意味著設(shè)計(jì)師要提前預(yù)測用戶視覺流，然后把按鈕放在指定位置上。

在后面提到的例子中能看到，虛擬按鈕的位置很大程度取決于內(nèi)容。虛擬按鈕最常見的位置是主頁的banner下方，有時(shí)也會在簡短的簡介文案下方。

虛擬按鈕的優(yōu)點(diǎn)

很明顯，以上的缺點(diǎn)都在意料之內(nèi)。當(dāng)使用這樣的設(shè)計(jì)元素時(shí)，必然會權(quán)衡利弊。

極簡主義

有沒有想過虛擬按鈕的來源？大多數(shù)人都把虛擬按鈕歸結(jié)于2013年底iOS 7的發(fā)布。由于iPhone決定采用更簡單的界面設(shè)計(jì)準(zhǔn)則，虛擬按鈕的出現(xiàn)和廣泛使用也就再自然不過。

極簡主義的要點(diǎn)是盡可能的減少網(wǎng)頁承載的信息，利用干凈、簡單的界面設(shè)計(jì)，凸出有效內(nèi)容的展示和信息傳遞。

Bootstrap使用的虛擬按鈕是極簡主義優(yōu)點(diǎn)的范例。

Bootstrap網(wǎng)頁上極簡的虛擬按鈕

專業(yè)性

有一些不僅合乎邏輯，看上去還很專業(yè)的虛擬按鈕，比如Neil Patel。

Neil Patel網(wǎng)站上的所有行為召喚按鈕都是虛擬按鈕

筆者認(rèn)為，虛擬按鈕最適合于專業(yè)的商業(yè)網(wǎng)站。商業(yè)網(wǎng)站的價(jià)值是展現(xiàn)公司信息，而不在于大色塊、吸引眼球的功能按鈕。虛擬按鈕在用戶瀏覽信息時(shí)并不礙眼，一旦用戶決定進(jìn)行某項(xiàng)操作，就能通過虛擬按鈕觸達(dá)。

?尺寸

當(dāng)在Web設(shè)計(jì)中引入行為召喚時(shí)，一定要考慮到最理想的尺寸，尤其是在M站。是不是太小了，用戶看不到？是不是太大了，太突兀了？是否適合點(diǎn)擊呢？如果使用傳統(tǒng)按鈕，則很難找到一個(gè)安全尺寸，因?yàn)榭赡軙o用戶帶來不必要的干擾。

但對于虛擬按鈕，尺寸就不是個(gè)頭疼的問題了，比如Samsung。

?Sansung的M站上大大的虛擬按鈕

看這個(gè)按鈕多大！但它影響到你閱讀信息和觀看有趣的底圖了嗎？LG使用的是實(shí)心按鈕。

LG使用的是實(shí)心按鈕。

LG的M網(wǎng)上小小的實(shí)心按鈕

由于要填充醒目顏色，因此相比于Samsung，LG的按鈕在尺寸上明顯縮減很多。

?減少與其他元素的沖突

有時(shí)，你可能不希望行為召喚元素過于醒目。當(dāng)然，根本目標(biāo)是讓用戶點(diǎn)擊按鈕完成轉(zhuǎn)化，但在這之前，我們可能希望用戶先閱讀按鈕周圍的信息。比如Asana的例子。

Asana網(wǎng)站上的虛擬按鈕

按鈕并不是必須在最醒目的位置，特別是當(dāng)文字和圖片給出明確指引的情況下。

動(dòng)畫

如果頁面看上去死板，那選擇動(dòng)畫總是明智的。動(dòng)畫既能給用戶帶來小驚喜，還能保證頁面邏輯的一致性。虛擬按鈕和動(dòng)畫細(xì)節(jié)結(jié)合，常常事半功倍。

Smashing Magazine將動(dòng)畫和虛擬按鈕結(jié)合使用

正如示例中展示的，動(dòng)畫為用戶提供了操作確認(rèn)和反饋，好像在說“看哪，這確實(shí)是個(gè)按鈕，點(diǎn)一下試試，會出現(xiàn)什么”。

Haruki的網(wǎng)站，也是虛擬按鈕和動(dòng)畫結(jié)合的范例。

Haruki Murakami使用動(dòng)畫激勵(lì)用戶

這個(gè)設(shè)計(jì)方案的目的不在于操作反饋，而是在頁面切換時(shí)自然過渡，讓用戶保持注意力。

多節(jié)點(diǎn)的行為召喚

通常，我不建議多節(jié)點(diǎn)的行為召喚，尤其在移動(dòng)端設(shè)計(jì)上，空間已經(jīng)很局限了，給用戶過多選擇會有問題。然而，虛擬按鈕就不會造成擁擠和選擇困難，因?yàn)樗麄冋加玫目臻g很小，通常不會干擾頁面其他元素。

Turbo Tax的多節(jié)點(diǎn)行為召喚

看看頂級網(wǎng)站是如何使用兩個(gè)行為召喚的呢？橘黃色的按鈕是第一個(gè)行為召喚，虛擬按鈕是第二個(gè)。

Google Maps也提供了好的示范。

Google Maps的持續(xù)行為召喚

本例中的兩個(gè)并排按鈕不一定是主選項(xiàng)和副選項(xiàng)，但當(dāng)兩個(gè)外觀相似的按鈕并排放置時(shí)，虛擬按鈕的作用是作為對比，凸出另一個(gè)按鈕。

Apple也經(jīng)常使用虛擬按鈕，在下面這個(gè)例子中，虛擬按鈕的功能是切換tab。

Apple使用虛擬按鈕作為tab標(biāo)題

當(dāng)頁面或tab非選中時(shí)，虛擬按鈕能指示非選中狀態(tài)。

虛擬按鈕測試

已經(jīng)分析了虛擬按鈕的優(yōu)勢和劣勢，但在實(shí)際中，要如何應(yīng)用虛擬按鈕呢？虛擬按鈕能產(chǎn)生實(shí)際的轉(zhuǎn)化嗎？有如下幾個(gè)相關(guān)的測試：

測試1：SEEK的測試

用戶體驗(yàn)設(shè)計(jì)師兼研究員Kayla J. Heffernan測試虛擬按鈕是否真如設(shè)計(jì)師認(rèn)為的那么糟糕。SEEK針對虛擬按鈕作為再次召喚按鈕，進(jìn)行了如下的A/B測試：

SEEK在再次召喚按鈕上的測試

在這次測試中，她驚奇的發(fā)現(xiàn)，藍(lán)色的實(shí)心按鈕和虛擬按鈕的轉(zhuǎn)化效果在前兩名。排除了紫色和灰色方案后，她做了第二組A/B測試。

SEEK對比藍(lán)色實(shí)心按鈕和藍(lán)色虛擬按鈕

在測試最后，Kayla和她的團(tuán)隊(duì)再次發(fā)現(xiàn)藍(lán)色的實(shí)心按鈕和藍(lán)色的虛擬按鈕的轉(zhuǎn)化效果基本相同，分別為14%和13.1%。

測試2：TruConversion的著陸頁按鈕

在著陸頁上有如下三種不同的行為召喚按鈕：

• 一個(gè)大的、綠色的“Claim Your Free Copy”按鈕；
• 一個(gè)小的、黑色的“Claim Your Free Copy”按鈕；
• 一個(gè)小的、黑色輪廓、紅色文本的“Look Inside”按鈕；

TruConversion對三個(gè)按鈕進(jìn)行測試

TruConversion想知道這些按鈕的轉(zhuǎn)化效果，它利用熱點(diǎn)地圖來確定哪個(gè)按鈕受關(guān)注最多。

?TruConversion使用熱點(diǎn)地圖確定結(jié)果

意料之內(nèi)的，大的綠色按鈕獲得最多的點(diǎn)擊量，占到總點(diǎn)擊量的38.68%；但令人吃驚的是，盡管黑色按鈕在頂端的提示框上，用戶瀏覽頁面時(shí)最先看到，但僅僅有5.22%的點(diǎn)擊；黑色輪廓紅色文本的虛擬按鈕有7.9%的點(diǎn)擊，大大超出了研究者的預(yù)期。

測試3：Fresh Egg的透明/實(shí)心按鈕

正如前面提到的，必須小心設(shè)置虛擬按鈕的透明度。在下面的示例中，虛擬按鈕被放在了錯(cuò)誤的位置上。

Fresh Egg進(jìn)行了幾次A/B測試，如下。

?Fresh Egg在主頁上進(jìn)行的A/B測試

在對虛擬按鈕和實(shí)心按鈕的第二次測試中，F(xiàn)resh Egg在3個(gè)鏈接上進(jìn)行點(diǎn)擊的A/B測試，通過熱點(diǎn)地圖監(jiān)測用戶活動(dòng)，從而判斷用戶花費(fèi)多長時(shí)間找到并且點(diǎn)擊一個(gè)按鈕。

正如預(yù)想到的，虛擬按鈕的表現(xiàn)并不好：

• 虛擬按鈕比實(shí)心按鈕更難找到；
• 虛擬按鈕的點(diǎn)擊量很低；
• 虛擬按鈕有很大概率被誤點(diǎn)；

結(jié)論：在正確的場景使用虛擬按鈕

按鈕設(shè)計(jì)是復(fù)雜的，即使設(shè)計(jì)好點(diǎn)擊和跳轉(zhuǎn)，也不代表一直不變。我們要不斷地分析數(shù)據(jù)，評估設(shè)計(jì)方案，進(jìn)行A/B測試。這是唯一保持領(lǐng)先的辦法，這也是為什么，我認(rèn)為虛擬按鈕始終應(yīng)該是備選方案之一。

我并不認(rèn)為虛擬按鈕適用于一切場景。我認(rèn)為虛擬按鈕適合于官網(wǎng)和SaaS網(wǎng)站，而不是個(gè)人博客、電商或者新聞推薦類網(wǎng)站。此外，虛擬按鈕還是再次召喚不期望用戶馬上點(diǎn)擊它）的極好選擇，在這個(gè)場景下，虛擬按鈕好像在對用戶說：“如果你想購買商品，請點(diǎn)擊大的深色按鈕；但如果你想看商品詳情，就點(diǎn)擊我吧”。

虛擬按鈕的使用一定要結(jié)合場景。在特定的場景下，虛擬按鈕能帶來意想不到的收益，但如果不顧場景、交互和頁面內(nèi)容，為了簡單、極簡主義等原因而使用虛擬按鈕，則會事倍功半，損害用戶體驗(yàn)，對產(chǎn)品造成極大副作用。而虛擬按鈕適用于哪些具體場景，是否適用于你現(xiàn)在的產(chǎn)品，就需要每位產(chǎn)品經(jīng)理和交互設(shè)計(jì)師自己思考了。

譯者：李小新

原文作者：Suzanne Scacca,?a former WordPress implementer, trainer and agency manager who now works as a freelance copywriter. She specializes in crafting marketing, web design, WordPress and millennial-related content for a variety of publications.

原文地址：https://www.smashingmagazine.com/2018/01/ghost-button-design/

本文系人人都是產(chǎn)品經(jīng)理翻譯團(tuán)隊(duì) @李小新? 翻譯發(fā)布，未經(jīng)本站許可，禁止轉(zhuǎn)載。

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