<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>搜索引擎行銷|數字行銷|社會化媒體行銷 Archives - Hubspot.one - Martech 與廣告行銷知識庫</title>
	<atom:link href="https://hubspot.one/tag/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E8%A1%8C%E9%8A%B7%E6%95%B8%E5%AD%97%E8%A1%8C%E9%8A%B7%E7%A4%BE%E6%9C%83%E5%8C%96%E5%AA%92%E9%AB%94%E8%A1%8C%E9%8A%B7/feed/" rel="self" type="application/rss+xml" />
	<link>https://hubspot.one/tag/搜索引擎行銷數字行銷社會化媒體行銷/</link>
	<description>專注行銷技術、ABM 行銷、SEO、CRM、行銷策略分享</description>
	<lastBuildDate>Mon, 14 Nov 2022 16:10:03 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.2</generator>
	<item>
		<title>什麼是NPS？ NPS如何計算？又如何使用？</title>
		<link>https://hubspot.one/wtf-is-nps/</link>
		
		<dc:creator><![CDATA[CMO]]></dc:creator>
		<pubDate>Mon, 14 Nov 2022 16:10:03 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[內容行銷|數字行銷|行銷策略]]></category>
		<category><![CDATA[搜索引擎優化|數字行銷]]></category>
		<category><![CDATA[搜索引擎行銷|數字行銷|社會化媒體行銷]]></category>
		<category><![CDATA[數字分析|數字行銷]]></category>
		<category><![CDATA[數字行銷|行銷策略]]></category>
		<guid isPermaLink="false">https://hubspot.one/digital-marketing/wtf-is-nps/</guid>

					<description><![CDATA[<p>NPS並不是“泥菩薩”的縮寫，而是“Net Promoter Score”的首字母縮寫，意為“淨推薦值”。由貝恩諮詢的Fred Reichheld於2003年提出。如今，NPS已經是全球頭部企業衡量產品和服務的主要指標之一。對數字行銷者而言，對此概念的充分理解有它的意義。</p>
<p>The post <a rel="nofollow" href="https://hubspot.one/wtf-is-nps/">什麼是NPS？ NPS如何計算？又如何使用？</a> appeared first on <a rel="nofollow" href="https://hubspot.one">Hubspot.one - Martech 與廣告行銷知識庫</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div class="entry-content single-content">
<figure id="attachment_8289" aria-describedby="caption-attachment-8289" style="width: 1440px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8289" src="" alt="NPS - Net Promoter Score" width="1440" height="720" srcset="https://hubspot.one/wp-content/uploads/2022/11/nps-isnt-perfect.png 1440w, https://hubspot.one/wp-content/uploads/2021/01/nps-isnt-perfect-300x150.png 300w, https://hubspot.one/wp-content/uploads/2021/01/nps-isnt-perfect-510x255.png 510w, https://hubspot.one/wp-content/uploads/2021/01/nps-isnt-perfect-768x384.png 768w" sizes="(max-width: 1440px) 100vw, 1440px" data-original="https://hubspot.one/wp-content/uploads/2022/11/nps-isnt-perfect.png"><figcaption id="caption-attachment-8289" class="wp-caption-text"> NPS – Net Promoter Score</figcaption></figure>
<p>NPS並不是“泥菩薩”的縮寫，而是“Net Promoter Score”的首字母縮寫，意為“淨推薦值”。由貝恩諮詢的Fred Reichheld於2003年提出。如今，NPS已經是全球頭部企業衡量產品和服務的主要指標之一。對數字行銷者而言，對此概念的充分理解有它的意義。比如，</p>
<ul>
<li>NPS體現了你的產品和服務的行銷潛力。它是否在被“推一把”之後能不迅速失速。</li>
<li> NPS體現了你的品牌文化內容被主動傳播的能力。是否會有消費者主動推薦形成自然增長。</li>
<li> NPS體現了你的品牌的口碑和客戶滿意度。它揭示著你的增長內幕，是否是“一邊在建，一邊在拆”。</li>
<li> NPS還可以參與到預測模型中，從側面評估用戶忠誠度和現有用戶的流失風險。</li>
</ul>
<h2>NPS怎麼計算？</h2>
<p>你是否經常看到網站或者APP問你類似這樣的問題——“你是否會把我們推薦給他人？”通常會給你從0到10的11個選項，0代表“絕對不會”，10代表“絕對會”。在大量收集該問題的回答後，我們便可以計算NPS的值。</p>
<figure id="attachment_8275" aria-describedby="caption-attachment-8275" style="width: 1000px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8275" src="" alt="NPS的計算方法（貝恩諮詢）" width="1000" height="522" data-original="https://hubspot.one/wp-content/uploads/2021/01/measuring-your-nps.gif"><figcaption id="caption-attachment-8275" class="wp-caption-text"> NPS的計算方法（貝恩諮詢）</figcaption></figure>
<ol>
<li>將回答分為三類——0~6為批判者（Detractors），7和8為中立者（Passives），9和10為推薦者（Promotors）。</li>
<li>將推薦者的人數減去批判者的人數得到的差除以總問卷數後獲得的百分比即是NPS的值。</li>
</ol>
<figure id="attachment_8286" aria-describedby="caption-attachment-8286" style="width: 600px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8286" src="" alt="NPS三種角色的動態模擬" width="600" height="338" data-original="https://hubspot.one/wp-content/uploads/2021/01/nps-simulation.gif"><figcaption id="caption-attachment-8286" class="wp-caption-text"> NPS三種角色的動態模擬</figcaption></figure>
<p>對於不同產品和服務，一刀切地用“推薦”來問問題可能不是很合適。你也可以用其他方式來問，比如“我們的服務是否讓你有好心情？”，“您下一次是否還會購買使用我們的產品？”</p>
<p>在HubSpot One看來，NPS的“高明之處”在於避免了我們將評分結果簡單粗暴地進行“平均”。因此光看某部電影平均幾顆星，不如看看該電影的NPS值，這將從另一角度讓我們了解電影的反饋情況。</p>
<figure id="attachment_8276" aria-describedby="caption-attachment-8276" style="width: 1817px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8276" src="" alt="豆瓣電影評分與NPS" width="1817" height="684" srcset="https://hubspot.one/wp-content/uploads/2021/01/rating-nps.png 1817w, https://hubspot.one/wp-content/uploads/2021/01/rating-nps-300x113.png 300w, https://hubspot.one/wp-content/uploads/2021/01/rating-nps-510x192.png 510w, https://hubspot.one/wp-content/uploads/2021/01/rating-nps-768x289.png 768w, https://hubspot.one/wp-content/uploads/2021/01/rating-nps-1536x578.png 1536w" sizes="(max-width: 1817px) 100vw, 1817px" data-original="https://hubspot.one/wp-content/uploads/2021/01/rating-nps.png"><figcaption id="caption-attachment-8276" class="wp-caption-text">豆瓣電影評分與NPS</figcaption></figure>
<p>我們在上表可以看到剛剛擠入8.0的豆瓣高分電影和8.8分的電影之間NPS相差近40分，遠沒有8.8來得“舒適”。</p>
<h2>怎樣的NPS才是好的NPS？</h2>
<p>既然我們可以更容易地反映客戶“滿意度”或“忠誠度”那麼NPS為多少才能反映出好的滿意度或忠誠度呢？從上面豆瓣的例子我們可以看到，如果你有可靠的第三方數據，你首先要和同類目的“競品”相比。</p>
<p>一些機構，如Retently也會發布分行業的NPS基準報告。</p>
<figure id="attachment_8279" aria-describedby="caption-attachment-8279" style="width: 1308px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8279" src="" alt="Retently.com發布的2020年NPS分行業基準報告" width="1308" height="1184" srcset="https://hubspot.one/wp-content/uploads/2021/01/nps-benchmarks-2020.png 1308w, https://hubspot.one/wp-content/uploads/2021/01/nps-benchmarks-2020-300x272.png 300w, https://hubspot.one/wp-content/uploads/2021/01/nps-benchmarks-2020-510x462.png 510w, https://hubspot.one/wp-content/uploads/2021/01/nps-benchmarks-2020-768x695.png 768w" sizes="(max-width: 1308px) 100vw, 1308px" data-original="https://hubspot.one/wp-content/uploads/2021/01/nps-benchmarks-2020.png"><figcaption id="caption-attachment-8279" class="wp-caption-text"> Retently.com發布的2020年NPS分行業基準報告</figcaption></figure>
<p>我們看到保險行業的NPS竟然高達70。這是令人難以置信的，因為這意味著平均分要在9/10以上。因此HubSpot One建議讀者不要盲信基準報告，（也不要盲信諮詢公司的佈道者）。<strong>對你來說重要的是和過去的自己相比</strong>。</p>
<figure id="attachment_8280" aria-describedby="caption-attachment-8280" style="width: 2632px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8280" src="" alt="低於25就算糟糕？荒謬之極" width="2632" height="1699" srcset="https://hubspot.one/wp-content/uploads/2021/01/bad-nps.png 2632w, https://hubspot.one/wp-content/uploads/2021/01/bad-nps-300x194.png 300w, https://hubspot.one/wp-content/uploads/2021/01/bad-nps-510x329.png 510w, https://hubspot.one/wp-content/uploads/2021/01/bad-nps-768x496.png 768w, https://hubspot.one/wp-content/uploads/2021/01/bad-nps-1536x992.png 1536w, https://hubspot.one/wp-content/uploads/2021/01/bad-nps-2048x1322.png 2048w" sizes="(max-width: 2632px) 100vw, 2632px" data-original="https://hubspot.one/wp-content/uploads/2021/01/bad-nps.png"><figcaption id="caption-attachment-8280" class="wp-caption-text">低於25就算糟糕？荒謬之極</figcaption></figure>
<p>NPS的絕對值也沒有借鑒的價值可言，NPS等於0就很糟糕嗎？至少你大約還有平均分7/10的水平。</p>
<figure id="attachment_8283" aria-describedby="caption-attachment-8283" style="width: 733px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8283" src="" alt="中位數對應NPS" width="733" height="895" srcset="https://hubspot.one/wp-content/uploads/2021/01/meanvsnps.png 733w, https://hubspot.one/wp-content/uploads/2021/01/meanvsnps-246x300.png 246w, https://hubspot.one/wp-content/uploads/2021/01/meanvsnps-510x623.png 510w" sizes="(max-width: 733px) 100vw, 733px" data-original="https://hubspot.one/wp-content/uploads/2021/01/meanvsnps.png"><figcaption id="caption-attachment-8283" class="wp-caption-text">中位數對應NPS</figcaption></figure>
<h2>正確使用NPS</h2>
<p>要正確使用NPS就必須了解NPS的缺陷。我們上文已經提到一些。</p>
<ol>
<li>首先NPS是一個差值，其減數跨越了0~6。換句話說，你獲得了一個0和獲得一個6是沒有差別的。在一些情況下（如惡意刷差評）這的確有用，但在更多時候會讓你忽略了一些問題帶來的極端的反饋。你還真的需要去了解為什麼你會拿到差評。</li>
<li>其次NPS並不是唯一的衡量滿意度或忠誠度的指標。 NPS既不是萬金油也不是萬能藥，它並不能取代平均分、中位數。正如BusinessesOverBroadway所言，你去衡量兩組人的身高哪組高會用超過一米八的人數減去不到一米七的人數嗎？這個差值是不必要的。</li>
<li>第三是推薦對人這樣複雜的個體來說很難一刀切。 Christina Stahlkopf在哈佛商業評論中寫道：“在許多時候我們向一些人勸阻使用某一產品的同時又會向另一群人推薦這一產品。另一些時候，我們向同一對象勸阻使用某一產品的同時，又會推薦同品牌的另一產品給相同的對象。”</li>
<li>最後NPS會讓我們對兩級分化現象產生誤判。 Craig Stoss在《NPS isn&#8217;t Perfect…but here&#8217;s why it&#8217;s still useful for your business》一文中給出一個生動的例子，描述了這一現象。</li>
</ol>
<figure id="attachment_8285" aria-describedby="caption-attachment-8285" style="width: 369px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8285" src="" alt="同樣是20的NPS可以有多種不同情況" width="369" height="324" srcset="https://hubspot.one/wp-content/uploads/2021/01/vacsie.png 369w, https://hubspot.one/wp-content/uploads/2021/01/vacsie-300x263.png 300w" sizes="(max-width: 369px) 100vw, 369px" data-original="https://hubspot.one/wp-content/uploads/2021/01/vacsie.png"><figcaption id="caption-attachment-8285" class="wp-caption-text">同樣是20的NPS可以有多種不同情況</figcaption></figure>
<p>NPS是一個過度簡化的指標。在簡化帶來美感的同時，它很難成為一個KPI來指導我們的工作，而僅僅能作為一個參考性的指標。它無法代替其他重要指標來詮釋忠誠度和滿意度。僅就忠誠度來說就有下面三種：</p>
<ul>
<li>保留忠誠度：是客戶保持客戶和/或不使用競爭對手並導致長期客戶更容易服務的程度。<br /> – 您切換到其他提供商的可能性有多大？<br /> – 您有多大可能續簽服務合同？</li>
<li>倡導忠誠度：是客戶宣傳您的產品和/或品牌並吸引新客戶的程度。<br /> – 您向您的朋友/同事推薦我們的可能性有多大？<br /> – 總體而言，您對我們的表現滿意嗎？</li>
<li>購買忠誠度：是客戶增加購買行為並導致每位客戶平均收入增加的程度。<br /> – 您將來有多大可能向我們購買不同的解決方案？<br /> – 您有多大可能在整個公司範圍內擴大我們產品的使用範圍？</li>
</ul>
<p>我們可以看到NPS的計算範圍和問卷方式可以有差異。參與問卷的如果是你的粉絲群那麼結果會很不一樣，長期用戶和近期打過交道的用戶可以區別開來。而有時我們也會去調查一下競爭對手陣營對我們的看法。為此貝恩公司也定義了三種不同的NPS，見下圖。</p>
<figure id="attachment_8284" aria-describedby="caption-attachment-8284" style="width: 1000px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8284" src="" alt="三種不同類型的NPS" width="1000" height="539" data-original="https://hubspot.one/wp-content/uploads/2021/01/three-types-of-nps.gif"><figcaption id="caption-attachment-8284" class="wp-caption-text">三種不同類型的NPS</figcaption></figure>
<h2>現在，讓我們總結一下</h2>
<p>HubSpot One為讀者總結了以下四點：</p>
<ol>
<li>NPS是一個簡單的反映增長潛力的指標，它可以給我們快速參考。</li>
<li> NPS需要結合其他的指標才能客觀地反映增長的健康情況。</li>
<li> NPS的使用中，我們可以採用細分的方法控制問卷範圍和提問方式獲得不同洞察。</li>
<li> NPS的基準指標需要充分了解數據產生過程才能正確使用。和歷史表現相比更加有效。</li>
</ol>
<p>如果你對NPS有自己的獨到見解，歡迎通過HubSpot One微信公眾號（digital-marketer）評論。</p>
</div>
<p>The post <a rel="nofollow" href="https://hubspot.one/wtf-is-nps/">什麼是NPS？ NPS如何計算？又如何使用？</a> appeared first on <a rel="nofollow" href="https://hubspot.one">Hubspot.one - Martech 與廣告行銷知識庫</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>CTA怎麼設計才能提高轉化率？小按鈕，大學問</title>
		<link>https://hubspot.one/cta-button-design-for-cro/</link>
		
		<dc:creator><![CDATA[CMO]]></dc:creator>
		<pubDate>Mon, 14 Nov 2022 16:09:25 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[內容行銷|數字行銷]]></category>
		<category><![CDATA[搜索引擎行銷|數字行銷|社會化媒體行銷]]></category>
		<category><![CDATA[數字廣告|數字行銷]]></category>
		<category><![CDATA[數字行銷|行銷策略]]></category>
		<guid isPermaLink="false">https://hubspot.one/digital-marketing/cta-button-design-for-cro/</guid>

					<description><![CDATA[<p>Call-To-Action（CTA）是我們常見的用戶交互元素，也是數字行銷中的一個轉化率優化課題。好的CTA設計可以提升轉化率，而糟糕的CTA設計會平白浪費寶貴的流量。HubSpot One將以此文為讀者總結CTA設計的要點。</p>
<p>The post <a rel="nofollow" href="https://hubspot.one/cta-button-design-for-cro/">CTA怎麼設計才能提高轉化率？小按鈕，大學問</a> appeared first on <a rel="nofollow" href="https://hubspot.one">Hubspot.one - Martech 與廣告行銷知識庫</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div class="entry-content single-content">
<p>Call-To-Action（CTA）是我們常見的用戶交互元素，也是數字行銷中的一個轉化率優化課題。好的CTA設計可以提升轉化率，而糟糕的CTA設計會平白浪費寶貴的流量。HubSpot One將以此文為讀者總結CTA設計的要點。</p>
<figure id="attachment_8355" aria-describedby="caption-attachment-8355" style="width: 1200px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="wp-image-8355 size-full" src="" alt="Call-To-Action的最佳實踐是什麼？" width="1200" height="630" srcset="https://hubspot.one/wp-content/uploads/2022/11/call-to-action-cover.png 1200w, https://hubspot.one/wp-content/uploads/2021/02/call-to-action-cover-300x158.png 300w, https://hubspot.one/wp-content/uploads/2021/02/call-to-action-cover-510x268.png 510w, https://hubspot.one/wp-content/uploads/2021/02/call-to-action-cover-768x403.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" data-original="https://hubspot.one/wp-content/uploads/2022/11/call-to-action-cover.png"><figcaption id="caption-attachment-8355" class="wp-caption-text"> <em>Call-To-Action的最佳實踐是什麼？</em></figcaption></figure>
<h2>什麼是Call To Action？</h2>
<p>一般譯作行動召喚。是指頁面、視圖、電郵、廣告中號召指引用戶產生特地行為的交互元素。比如常見的“了解更多”按鈕，“立即註冊”按鈕。如果沒有CTA，用戶會有這樣的疑問——“我來到這個界面，你到底期望我做什麼？”這樣你的內容就單單成為informational的內容，而不是transactional的內容了。</p>
<h2>設計CTA的時候需要考慮哪些方面？</h2>
<p>首先，請在心中默念三遍：“好看不一定好用”。在設計CTA的時候我們通常從下面幾個方面來考慮：</p>
<ol>
<li>數量</li>
<li>位置</li>
<li>形狀</li>
<li>顏色</li>
<li>大小</li>
<li>文字</li>
<li>移動版</li>
</ol>
<p>可以說一個優秀的CTA沁透了優秀的已轉化為中心的設計師和行銷者的良苦用心和滿滿的愛！</p>
<h2>CTA設計在數量上有哪些考慮？</h2>
<p>我們常用的CTA有單個使用的，也有兩個一組使用的。<strong>一般不建議超過兩個</strong>。單獨使用時CTA更給用戶“強勢”的感覺，也就是暗示在此界面中，執行該操作是唯一選擇。單獨使用CTA是許多落地頁的普遍用法。然而，有時我們也可以留給用戶一些後退的餘地，加入第二個CTA。在這兩個CTA之間我們可以留有差別，也可以使用同種設計不注入我們的傾向讓用戶自己決定。</p>
<p>如果你運營著一個在線社區，你可以在落地頁放上一個醒目的“立即加入”按鈕。但是如果你覺得讓用戶先以匿名遊客看看更能夠幫助轉化則可以在此按鈕旁邊加上第二個“匿名預覽”的按鈕。下面這個Spotify的落地頁是另一個優秀的範例</p>
<figure id="attachment_8347" aria-describedby="caption-attachment-8347" style="width: 1013px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8347" src="" alt="Spotify使用了兩個CTA" width="1013" height="482" srcset="https://hubspot.one/wp-content/uploads/2021/02/two-button-example.png 1013w, https://hubspot.one/wp-content/uploads/2021/02/two-button-example-300x143.png 300w, https://hubspot.one/wp-content/uploads/2021/02/two-button-example-510x243.png 510w, https://hubspot.one/wp-content/uploads/2021/02/two-button-example-768x365.png 768w" sizes="(max-width: 1013px) 100vw, 1013px" data-original="https://hubspot.one/wp-content/uploads/2021/02/two-button-example.png"><figcaption id="caption-attachment-8347" class="wp-caption-text"> <em>Spotify使用了兩個CTA</em></figcaption></figure>
<h2>CTA應該放在什麼位置？</h2>
<p>CTA應該放在界面的醒目位置，如果是網頁中則<strong>應該放在第一屏</strong>。 CTA應該放在你的行銷訊息之後，<strong>在訪客視線的必經之路上</strong>。許多時候我們還會用箭頭來幫助用戶更加容易地找到CTA。</p>
<figure id="attachment_8346" aria-describedby="caption-attachment-8346" style="width: 600px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8346" src="" alt="為按鈕添加箭頭" width="600" height="300" srcset="https://hubspot.one/wp-content/uploads/2021/02/arrow-button.jpg 600w, https://hubspot.one/wp-content/uploads/2021/02/arrow-button-300x150.jpg 300w, https://hubspot.one/wp-content/uploads/2021/02/arrow-button-510x255.jpg 510w" sizes="(max-width: 600px) 100vw, 600px" data-original="https://hubspot.one/wp-content/uploads/2021/02/arrow-button.jpg"><figcaption id="caption-attachment-8346" class="wp-caption-text"><em>為按鈕添加箭頭</em></figcaption></figure>
<p>為了使CTA更為醒目，你需要在其周圍<strong>留足空白</strong>。我們之前在討論交互設計師素養的時候也提到過這點。當然你也可以通過人物視線來引導訪客視線，如下圖：</p>
<figure id="attachment_8444" aria-describedby="caption-attachment-8444" style="width: 750px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8444" src="" alt="視線如何操控視線？" width="750" height="563" srcset="https://hubspot.one/wp-content/uploads/2021/03/heat-map-sight.jpg 750w, https://hubspot.one/wp-content/uploads/2021/03/heat-map-sight-300x225.jpg 300w, https://hubspot.one/wp-content/uploads/2021/03/heat-map-sight-510x383.jpg 510w, https://hubspot.one/wp-content/uploads/2021/03/heat-map-sight-320x240.jpg 320w, https://hubspot.one/wp-content/uploads/2021/03/heat-map-sight-100x75.jpg 100w" sizes="(max-width: 750px) 100vw, 750px" data-original="https://hubspot.one/wp-content/uploads/2021/03/heat-map-sight.jpg"><figcaption id="caption-attachment-8444" class="wp-caption-text"><em>視線如何操控視線？</em></figcaption></figure>
<p>我們之後還會討論手機版的情況。</p>
<h2>CTA的形狀有什麼講究？</h2>
<p>你可以用幾個文字或者一個圖標來構成CTA，但是作為CTA的按鈕的點擊率大多數情況下會遠超前者。<strong>畢竟“被點”這件事上來講，按鈕就是為此而生的</strong>。</p>
<p>為了讓按鈕更像按鈕，我們可以調整材質、紋理或利用陰影來凸顯按鈕。你可以使用圓形或圓角矩形來與輸入框的長方體區別開來。不過請務必保證平台按鈕不會形狀各異五花八門。</p>
<p>下面的案例中Google用了一個無法點擊的按鈕形狀文本“您還在等什麼呢？”讓人十分無語。</p>
<figure id="attachment_8343" aria-describedby="caption-attachment-8343" style="width: 1920px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="wp-image-8343 size-full" src="" alt="“等你變成一個按鈕讓我點呀！”" width="1920" height="1005" srcset="https://hubspot.one/wp-content/uploads/2021/02/e-baidu-lp.png 1920w, https://hubspot.one/wp-content/uploads/2021/02/e-baidu-lp-300x157.png 300w, https://hubspot.one/wp-content/uploads/2021/02/e-baidu-lp-510x267.png 510w, https://hubspot.one/wp-content/uploads/2021/02/e-baidu-lp-768x402.png 768w, https://hubspot.one/wp-content/uploads/2021/02/e-baidu-lp-1536x804.png 1536w" sizes="(max-width: 1920px) 100vw, 1920px" data-original="https://hubspot.one/wp-content/uploads/2021/02/e-baidu-lp.png"><figcaption id="caption-attachment-8343" class="wp-caption-text"> <em>“等你變成一個按鈕讓我點呀！”</em></figcaption></figure>
<h2>作為CTA的按鈕推薦什麼顏色呢？</h2>
<p>許多時候我們選擇按鈕顏色都是因為我們品牌的VI，或者說老闆色，身不由己。但如果讓你放開大膽選擇你會選擇什麼顏色呢？</p>
<figure id="attachment_8344" aria-describedby="caption-attachment-8344" style="width: 500px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8344" src="" alt="悄悄告訴你我會用金色。嘿嘿。" width="500" height="280" srcset="https://hubspot.one/wp-content/uploads/2021/02/golden-button.jpg 500w, https://hubspot.one/wp-content/uploads/2021/02/golden-button-300x168.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" data-original="https://hubspot.one/wp-content/uploads/2021/02/golden-button.jpg"><figcaption id="caption-attachment-8344" class="wp-caption-text"><em>悄悄告訴你我會用金色。嘿嘿。</em></figcaption></figure>
<p>CTA按鈕用什麼顏色似乎早有定論。比如紅、綠、橙（黃）依次是轉化率最高的按鈕顏色，而黑、白、棕依次是轉化率最低的按鈕顏色。看著這個結論我們其實可以說許多故事，比如紅色代表激情，綠色代表通行，橙色代表溫暖安心等等。但HubSpot One還是希望讀者<strong>結合按鈕所在的頁面顏色選出優秀對比度且更吸睛的按鈕顏色</strong>，除非……</p>
<h2>除非你想用鬼按鈕！</h2>
<p>鬼按鈕（Ghost Button）就是那些空心的只有框沒有填充色的按鈕。這種設計蘋果愛用，已經流行了幾年。鬼按鈕看上去很乾淨，與環境自然地融為一體，以至於讓人忘了要去點擊。因此鬼按鈕不是任何人都能駕馭的。</p>
<figure id="attachment_8345" aria-describedby="caption-attachment-8345" style="width: 650px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="wp-image-8345 size-full" src="" alt="一個正常按鈕和兩個鬼按鈕" width="650" height="300" srcset="https://hubspot.one/wp-content/uploads/2021/02/ghost-button.png 650w, https://hubspot.one/wp-content/uploads/2021/02/ghost-button-300x138.png 300w, https://hubspot.one/wp-content/uploads/2021/02/ghost-button-510x235.png 510w" sizes="(max-width: 650px) 100vw, 650px" data-original="https://hubspot.one/wp-content/uploads/2021/02/ghost-button.png"><figcaption id="caption-attachment-8345" class="wp-caption-text"><em>一個正常按鈕和兩個鬼按鈕</em></figcaption></figure>
<p>雖然有許多“國際品牌”都曾經或者正在使用鬼按鈕，但是HubSpot One還是想勸退行銷者們<strong>盡量避免使用</strong>這種設計。如果要使用請增加按鈕的尺寸來填補存在感低的問題，也可以僅在次要CTA使用鬼按鈕（如上面Spotify的例子），以此來襯托作為主CTA的實心按鈕。</p>
<h2>尺寸並不是越大越好？ ！</h2>
<p>按鈕的尺寸並不是越大越好，按鈕太大會變醜只是次要原因，主要原因是因為太大的尺寸會吞食周圍的留白。作為CTA的按鈕在尺寸方面還有<strong>一個常見的問題是將按鈕和上方的輸入框設計得一樣寬</strong>，這裡就不舉例了。這樣的設計會讓按鈕變得不像按鈕。正確的做法是將按鈕設計得略短於上方的文案或者輸入框。這在平面設計上叫作<strong>倒金字塔設計</strong>，會增加行動的緊迫感。</p>
<figure id="attachment_8348" aria-describedby="caption-attachment-8348" style="width: 679px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8348" src="" alt="這個newsletter的設計中體現了倒金字塔的實踐" width="679" height="1549" srcset="https://hubspot.one/wp-content/uploads/2021/02/inverted-pyramid-example.jpg 679w, https://hubspot.one/wp-content/uploads/2021/02/inverted-pyramid-example-132x300.jpg 132w, https://hubspot.one/wp-content/uploads/2021/02/inverted-pyramid-example-449x1024.jpg 449w, https://hubspot.one/wp-content/uploads/2021/02/inverted-pyramid-example-673x1536.jpg 673w" sizes="(max-width: 679px) 100vw, 679px" data-original="https://hubspot.one/wp-content/uploads/2021/02/inverted-pyramid-example.jpg"><figcaption id="caption-attachment-8348" class="wp-caption-text"><em>這個newsletter的設計中體現了倒金字塔的實踐</em></figcaption></figure>
<h2>CTA上的文案有哪些注意點？</h2>
<p>相比“查看詳情”，“了解更多”這樣的“大街貨”，你可以更加個性化地設計按鈕上的文字，如“免費領取課程大綱”，“開始七天無限試用”。最重要的是<strong>要體現價值讓用戶有收益的預期</strong>。</p>
<figure id="attachment_8351" aria-describedby="caption-attachment-8351" style="width: 1869px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8351" src="" alt="這個“喵”有多可愛！" width="1869" height="960" srcset="https://hubspot.one/wp-content/uploads/2021/02/smashing-magazine-newsletter.png 1869w, https://hubspot.one/wp-content/uploads/2021/02/smashing-magazine-newsletter-300x154.png 300w, https://hubspot.one/wp-content/uploads/2021/02/smashing-magazine-newsletter-510x262.png 510w, https://hubspot.one/wp-content/uploads/2021/02/smashing-magazine-newsletter-768x394.png 768w, https://hubspot.one/wp-content/uploads/2021/02/smashing-magazine-newsletter-1536x789.png 1536w" sizes="(max-width: 1869px) 100vw, 1869px" data-original="https://hubspot.one/wp-content/uploads/2021/02/smashing-magazine-newsletter.png"><figcaption id="caption-attachment-8351" class="wp-caption-text"><em>這個“喵”有多可愛！</em></figcaption></figure>
<p>在按鈕周圍，你或許需要一些其他文字來掃除用戶點擊的顧慮，如“30天價格保障”，“7天無條件退款”等。你也可以通過這些文案來增加轉化緊迫感，如“僅剩32份”，“剩餘36小時”。不過要注意的是不可以欺騙用戶哦！</p>
<p>你需要明確用戶行為的預期，如果點擊了以後就冷不防自動下載一個100M的APP，你可能一開始就失去用戶的信任。</p>
<p>最後，CTA按鈕內的文案不易過長，畢竟越短越有力。你還要避免在按鈕文字最後以感嘆號或問號這樣的標點符號結尾，這讓你的CTA看上去不像CTA。</p>
<h2>移動設備上的CTA一樣設計嗎？</h2>
<p>當然不一樣！你有沒有遇到過手機上輸入法打開後把表單下面的按鈕擋住的情況？在小屏上設計CTA需要有場景方面的考慮。</p>
<p>一個移動設備UI設計師熟知的概念叫作拇指區域（Thumb Zone）。這是當人們單手握手機時拇指能覆蓋的操控區域。</p>
<figure id="attachment_8352" aria-describedby="caption-attachment-8352" style="width: 957px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8352" src="" alt="移動設備的拇指區域" width="957" height="618" srcset="https://hubspot.one/wp-content/uploads/2021/02/thumb-zone-mapping-opt.png 957w, https://hubspot.one/wp-content/uploads/2021/02/thumb-zone-mapping-opt-300x194.png 300w, https://hubspot.one/wp-content/uploads/2021/02/thumb-zone-mapping-opt-510x329.png 510w, https://hubspot.one/wp-content/uploads/2021/02/thumb-zone-mapping-opt-768x496.png 768w" sizes="(max-width: 957px) 100vw, 957px" data-original="https://hubspot.one/wp-content/uploads/2021/02/thumb-zone-mapping-opt.png"><figcaption id="caption-attachment-8352" class="wp-caption-text"><em>移動設備的拇指區域</em></figcaption></figure>
<p>上圖很好地解釋了拇指區域，你需要把CTA安放在綠色區域才不會給正在交互的用戶造成困擾。</p>
<p>除此之外，按鈕在移動設備上要達到足夠讓胖手指的用戶輕鬆點擊的安全大小（你的手指會遮住按鈕）。你更需要對CTA周圍進行留白排除乾擾。</p>
<figure id="attachment_8353" aria-describedby="caption-attachment-8353" style="width: 500px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-8353" src="" alt="按鈕太小會給用戶造成不便" width="500" height="275" srcset="https://hubspot.one/wp-content/uploads/2021/02/smaller-touch-targets-preview-opt.png 500w, https://hubspot.one/wp-content/uploads/2021/02/smaller-touch-targets-preview-opt-300x165.png 300w" sizes="(max-width: 500px) 100vw, 500px" data-original="https://hubspot.one/wp-content/uploads/2021/02/smaller-touch-targets-preview-opt.png"><figcaption id="caption-attachment-8353" class="wp-caption-text"><em>按鈕太小會給用戶造成不便</em></figcaption></figure>
<h2>CTA的優化方法是？</h2>
<p>至此，我們講了許多CTA的雷坑也講了一些最佳實踐。那麼CTA究竟如何優化呢？唔呣，當然是A/B測試了。 A/B測試不同的CTA可能是最容易測試的元素了，很容易在Google Optimize這樣的工具中進行。不過你還可以使用鼠標跟踪和眼球跟踪等手段，此時你或許需要專業的團隊來協助。</p>
</div>
<p>The post <a rel="nofollow" href="https://hubspot.one/cta-button-design-for-cro/">CTA怎麼設計才能提高轉化率？小按鈕，大學問</a> appeared first on <a rel="nofollow" href="https://hubspot.one">Hubspot.one - Martech 與廣告行銷知識庫</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
