提高轉化率的界面，終極觸發設計指南

Sponsor

不論是網頁設計師還是電商設計師，轉化率是非常重要的KPI。如下圖“PUSH HERE”的控件，它不僅僅是UI界面設計的一個元素，更是引導用戶點擊網頁或商品的終極“觸發”。如果沒有這個按鈕，網頁就不會形成二次點擊，商品詳情頁之后不會形成購買。

“PUSH HERE”的觸發按鈕

在這里我們先解釋一個名詞：CTA，CTA即是“Call-to Action”的縮略語。任何形式的UI界面設計，營銷人員都希望用戶能夠進行下一步的動作，最終形成購買，提高轉化。然而越來越多的電子產品讓現代人的注意力難以集中和專注，任何一個小東西都能分散我們的注意力，因此設計一個出色的Call-to Action Button變得極為重要。

在UI設計中 ，CTA是一類具有特殊功能的控件，能夠引導用戶立刻進行下一步操作的控件（通常位于比較明顯的位置，優先級高于其他按鈕）

本文將告訴您如何通過文字引導、按鈕顏色、按鈕大小和位置，去抓住用戶的注意力，為營銷帶來高轉化率。

文字引導

艾倫要打印一些東西，但是排隊的人很長，她想插隊，所以她用了三種提問方式：

1、不好意思，我有五頁紙要復印，能讓我先用嗎？——60%的人點頭

2、不好意思，因為我有急事，能先借我用下打印機嗎？就五頁?！?b>94%的人點頭

3、不好意思，因為我想復印，能先借我用下打印機嗎？就五頁?！?b>93%的人點頭

你看，“原因”一詞的位置和后面的內容導致了結果如此不同。人們通常更關心“原因”而不是“結果”。

因此，不要忽視了中文里不同詞語的強大力量，它們具有非常大的說服力。有專家表示，在簡歷中加入一些涉及情感的特定詞匯，可以讓您的簡歷更能打動HR。

例如上圖的網頁設計中，搜索框旁邊的觸發控件是“TRY FOR FREE”，設計師Stack利用了“FREE”一詞的雙重含義：免費點擊、自由選擇。這樣的按鈕是不是看起來很棒？

許多網站在CTA控件設計時采用的另一個策略是“利用詞語自身傳遞的信息”。比如動詞就能很直接地傳遞信息，它能觸發用戶采取特定的操作，用戶點擊控件是因為他們很明白按鈕的意思。

使用較多的動詞如：

英文：Try It Free, Learn More, Get Early Access, Get Started。

中文：免費嘗試、了解更多、進一步了解、從這里開始等。

控件顏色

CTA是馮·瑞瑟夫效應最好的案例，也被稱為隔離效應。這個效應是對視覺產生記憶的預測，它簡單解釋為：當有多個相似物體共同存在時，與其他物體不同的那個最容易被記憶。

這也是為什么必須將CTA控件設計得與眾不同的原因。

首先，確定CTA控件的設計要素：顏色、視覺效果、排版等，同時還要讓它們具備可讀性、易讀性和高對比度，正式發布前，要進行不斷改動和測試。

Starkplugin是一款非常好用的、協助您進行對比度檢查的軟件。像花哨的漸變或太過鮮艷的顏色，Starkplugin都會顯示是低對比度。如下圖所示。

對比度不僅僅是設計一個CTA控件要考慮的問題，整體也要考慮對比度。強大的CTA控件不僅能做到對比度的自我協調，還能實現整體協調。

Sketch的著陸頁就是一個非常完美的案例。它顯示了CTA控件的重要性，還有協調性；不僅塑造了良好的品牌形象，更極大地抓取了用戶的眼球。

下圖是它的著陸頁，作為設計師的您千萬別錯過！

控件尺寸

尺寸也是設計CTA控件時需要重視的要素?？丶叽绮粌H取決于自身的內容，還受到頁面周圍元素的影響。

設計界有一個通用的標準，基本能夠適用大部分頁面，包括針對老年人開發的頁面。如下圖所示。

研究表明，42-72像素之間的按鈕視效比最高。這意味著42像素是最小值，72像素是最適合用戶的按鈕大小。

大的按鈕會吸引用戶的絕大多數注意力，讓用戶看不到網頁提供了什么服務，這對頁面的其他內容會產生重要影響。然而使按鈕太小會嚴重影響其操作性，沒有什么比按鈕太小而無法按下更令人沮喪的了。

移動端則面臨另一個常見問題。Scott Hurff曾提出一個理論：“為手指設計”，您要留意一下它的意思。這個理論告訴我們，要在手指的自然弧度范圍內創建最舒適的界面。

IPHONE的手指區域熱圖

顯而易見，移動端的CTA控件必須做到高度舒適。仔細對照參考上圖所示的手指區域熱圖，就能很容易知道按鈕在哪個位置最舒適，而在該舒適區內，會極大地提高點擊率。

控件位置

用戶在使用界面時，線性路徑的設計至關重要。通過文字引導和合適的按鈕位置，讓用戶自然地訪問界面，那么就能夠使用戶更快地注意到您的CTA控件。

這就是菲特定律。

菲特定律：獲取目標的時間是到目標的距離和大小的函數

因此，縮短到CTA控件的時間和距離，對提高轉化非常有幫助。

仔細觀察注意力熱度圖，你會發現最常見的閱讀模式是F型。近幾年的人眼追蹤研究表明，F型模式仍然存在，而且同時適用于PC和移動端。

這種迷人的閱讀模式是由于人類本身的行為學，而不是一種技術，這意味著“搜索”控件可以放在左下角。

Airbnb的設計師們采用了一種不同的方法。他們利用z型布局和古登堡圖。CTA控件被放置在終端區域，用來與其他內容區別開，并觸發用戶點擊。

當用戶到達表單的右下角時，瀏覽過程停止，需要讓用戶知道該進行什么操作，因此這是插入Call to Action元素的最佳位置。

總結

CTA控件會對轉化率產生巨大的影響，并且是頁面設計中最重要的元素。通過牢記一些基本的設計原則，你可以讓你的按鈕脫穎而出，并抓住用戶所有的注意力。

最后，通常情況下，創新并不是那么必要，有時真正做好某事的最佳方法是向行業領袖學習。仔細研究一下最成功的互聯網公司，看看他們是如何圍繞著CTA控件來組織內容的，這將幫助您找到適合您的、最大程度提高轉化率的界面。

原文作者：Jim Raptis
原文地址：https://medium.muz.li/call-to-action-an-extensive-guide-140fef523b08
翻譯作者：秀芳 | 運營設計師
編輯整理：鉛筆頭 | 設計達人編輯組

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。