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

盡管是一個設計細節，但按鈕設計確實起著舉足輕重的作用。按鈕是用戶訪問的最重要入口，也是轉化的觸發動作。如果在按鈕設計上有明顯的敗筆，那基本要和老板說再見了。

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

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

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

Dropbox的購買提醒頁有兩個虛擬按鈕

中間的藍色按鈕是我們習慣了的標準的實心按鈕，兩側的透明按鈕就是虛擬按鈕。

從邏輯上講，虛擬按鈕似乎并不適合于Web設計，因為它們并不是有形的或者明確可以點擊的，它們還缺少傳統按鈕的那些引人注目的元素。然而研究表明，對用戶來說，可能并不是這樣。

這篇文章的目的，是想通過具體案例討論虛擬按鈕的優缺點，以給產品經理和交互設計師以幫助。

虛擬按鈕是什么

Web設計博主們寫了大量的文章來探討如何設計更好用的按鈕。在這些指導意見中，博主們試圖回答那些困擾著產品經理、交互設計師和開發工程師的問題：

• 哪種顏色最有吸引力？甚至什么才是真正有價值的注意力？
• 按鈕尺寸應該多大？尺寸的影響大嗎？
• 按鈕里的文案該怎么寫？
• 放在按鈕周圍的文案應該是什么樣的？
• 移動端和M站的按鈕設計是一樣的嗎？要根據拇指的操作區域進行調整嗎？

不管你如何看待Web設計中的虛擬按鈕，當你設計按鈕時，都會問到以上問題。

先來看下虛擬按鈕的優缺點。

虛擬按鈕的缺點

簡單

之所以行為召喚要使用醒目顏色，就是因為要引導用戶的視覺流，讓用戶的視線聚焦在目標區域。但對于虛擬按鈕，只有按鈕輪廓和里面的文字有顏色。正因為有顏色的區域很少，所以虛擬按鈕很難吸引用戶注意力，動畫或者醒目的圖形等其他元素會讓用戶忽視虛擬按鈕的存在。

Elevated Third的A/B測試

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

用戶習慣

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

可讀性

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

透明度

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

位置

傳統按鈕的好處之一，是適用于頁面的大多數位置。然而使用虛擬按鈕時，不得不考慮到用戶迷路的風險，這意味著設計師要提前預測用戶視覺流，然后把按鈕放在指定位置上。

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

虛擬按鈕的優點

很明顯，以上的缺點都在意料之內。當使用這樣的設計元素時，必然會權衡利弊。

極簡主義

有沒有想過虛擬按鈕的來源？大多數人都把虛擬按鈕歸結于2013年底iOS 7的發布。由于iPhone決定采用更簡單的界面設計準則，虛擬按鈕的出現和廣泛使用也就再自然不過。

極簡主義的要點是盡可能的減少網頁承載的信息，利用干凈、簡單的界面設計，凸出有效內容的展示和信息傳遞。

Bootstrap使用的虛擬按鈕是極簡主義優點的范例。

Bootstrap網頁上極簡的虛擬按鈕

專業性

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

Neil Patel網站上的所有行為召喚按鈕都是虛擬按鈕

筆者認為，虛擬按鈕最適合于專業的商業網站。商業網站的價值是展現公司信息，而不在于大色塊、吸引眼球的功能按鈕。虛擬按鈕在用戶瀏覽信息時并不礙眼，一旦用戶決定進行某項操作，就能通過虛擬按鈕觸達。

?尺寸

當在Web設計中引入行為召喚時，一定要考慮到最理想的尺寸，尤其是在M站。是不是太小了，用戶看不到？是不是太大了，太突兀了？是否適合點擊呢？如果使用傳統按鈕，則很難找到一個安全尺寸，因為可能會給用戶帶來不必要的干擾。

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

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

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

LG使用的是實心按鈕。

LG的M網上小小的實心按鈕

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

?減少與其他元素的沖突

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

Asana網站上的虛擬按鈕

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

動畫

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

Smashing Magazine將動畫和虛擬按鈕結合使用

正如示例中展示的，動畫為用戶提供了操作確認和反饋，好像在說“看哪，這確實是個按鈕，點一下試試，會出現什么”。

Haruki的網站，也是虛擬按鈕和動畫結合的范例。

Haruki Murakami使用動畫激勵用戶

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

多節點的行為召喚

通常，我不建議多節點的行為召喚，尤其在移動端設計上，空間已經很局限了，給用戶過多選擇會有問題。然而，虛擬按鈕就不會造成擁擠和選擇困難，因為他們占用的空間很小，通常不會干擾頁面其他元素。

Turbo Tax的多節點行為召喚

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

Google Maps也提供了好的示范。

Google Maps的持續行為召喚

本例中的兩個并排按鈕不一定是主選項和副選項，但當兩個外觀相似的按鈕并排放置時，虛擬按鈕的作用是作為對比，凸出另一個按鈕。

Apple也經常使用虛擬按鈕，在下面這個例子中，虛擬按鈕的功能是切換tab。

Apple使用虛擬按鈕作為tab標題

當頁面或tab非選中時，虛擬按鈕能指示非選中狀態。

虛擬按鈕測試

已經分析了虛擬按鈕的優勢和劣勢，但在實際中，要如何應用虛擬按鈕呢？虛擬按鈕能產生實際的轉化嗎？有如下幾個相關的測試：

測試1：SEEK的測試

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

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

在這次測試中，她驚奇的發現，藍色的實心按鈕和虛擬按鈕的轉化效果在前兩名。排除了紫色和灰色方案后，她做了第二組A/B測試。

SEEK對比藍色實心按鈕和藍色虛擬按鈕

在測試最后，Kayla和她的團隊再次發現藍色的實心按鈕和藍色的虛擬按鈕的轉化效果基本相同，分別為14%和13.1%。

測試2：TruConversion的著陸頁按鈕

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

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

TruConversion對三個按鈕進行測試

TruConversion想知道這些按鈕的轉化效果，它利用熱點地圖來確定哪個按鈕受關注最多。

?TruConversion使用熱點地圖確定結果

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

測試3：Fresh Egg的透明/實心按鈕

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

Fresh Egg進行了幾次A/B測試，如下。

?Fresh Egg在主頁上進行的A/B測試

在對虛擬按鈕和實心按鈕的第二次測試中，Fresh Egg在3個鏈接上進行點擊的A/B測試，通過熱點地圖監測用戶活動，從而判斷用戶花費多長時間找到并且點擊一個按鈕。

正如預想到的，虛擬按鈕的表現并不好：

• 虛擬按鈕比實心按鈕更難找到；
• 虛擬按鈕的點擊量很低；
• 虛擬按鈕有很大概率被誤點；

結論：在正確的場景使用虛擬按鈕

按鈕設計是復雜的，即使設計好點擊和跳轉，也不代表一直不變。我們要不斷地分析數據，評估設計方案，進行A/B測試。這是唯一保持領先的辦法，這也是為什么，我認為虛擬按鈕始終應該是備選方案之一。

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

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

譯者：李小新

原文作者：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/

本文系人人都是產品經理翻譯團隊 @李小新? 翻譯發布，未經本站許可，禁止轉載。

題圖來自unsplash，基于CC0協議