|
以下內(nèi)容由Mockplus團(tuán)隊(duì)翻譯整理，僅供學(xué)習(xí)交流，Mockplus是更快更簡(jiǎn)單的原型設(shè)計(jì)工具。 現(xiàn)代行業(yè)發(fā)展越來(lái)越多地和優(yōu)質(zhì)的設(shè)計(jì)建立聯(lián)系，尤其是電子產(chǎn)品行業(yè)。它們總是千方百計(jì)地吸引用戶。這些電子產(chǎn)品的UI界面就成了兵家必爭(zhēng)之地，哪怕只是一個(gè)小小的Call to Action (CTA)按鈕。 Investopedia 對(duì)CTA的介紹： 行為召喚（CTA）是一種營(yíng)銷術(shù)語(yǔ)，是指營(yíng)銷人員希望其受眾或讀者采取的下一步措施，通常以按鈕的形式展現(xiàn)，并可以直接鏈接到銷售頁(yè)面。 簡(jiǎn)而言之，CTA就是你希望你的網(wǎng)站訪問(wèn)用戶采取的下一步行動(dòng)。 
以下是一些常見的CTA設(shè)計(jì)技巧分析和案例分享。希望對(duì)你有所啟發(fā)。 具有吸引力的文案Copyblogger的Brian Clark用他的經(jīng)驗(yàn)很好地闡釋了文字的力量。曾有一個(gè)案例， 社會(huì)心理學(xué)家艾倫·蘭格（Ellen Langer）要求插隊(duì)使用復(fù)印機(jī)。 她嘗試了三種不同的詢問(wèn)方式：
作為一個(gè)觸發(fā)詞，“因?yàn)椤钡膹?qiáng)調(diào)作用幾乎可以讓你忽略其后面的“原因”。 因此，我們可以得出這樣一個(gè)結(jié)論：相比長(zhǎng)篇大論，某些詞匯更能有效地說(shuō)服人們。 專家表示，文案中加入一些帶有感情色彩的詞匯更能增加說(shuō)服力。 
例如，上面截圖中，Slack的CTA充分利用了free的雙重含義：不僅試用免費(fèi)，而且行動(dòng)自由和選擇自由都會(huì)潛移默化地影響用戶的行為。 許多網(wǎng)站的CTA利用其具有操作性的文案引導(dǎo)用戶采取特定的行為。因?yàn)檫@些文案不僅有指導(dǎo)作用，同時(shí)也回答了用戶為什么需要點(diǎn)擊該按鈕的原因。 大多數(shù)成功的公都采用漸進(jìn)式的文案，例如：“免費(fèi)試用”、“了解更多”、“搶先體驗(yàn)”、“入門”等，并通過(guò)對(duì)CTA按鈕添加強(qiáng)調(diào)效果提升轉(zhuǎn)化率。 
對(duì)比色CTA按鈕是馮·雷斯托夫效應(yīng)的最佳例證。 馮·雷斯托夫效應(yīng)，也稱為“隔離效應(yīng)”，預(yù)測(cè)當(dāng)存在多個(gè)相似物體時(shí)，最與眾不同的那個(gè)最有可能被記住。 這也是為什么在日常設(shè)計(jì)中，CTA按鈕總是在一排相似的按鈕中脫穎而出的最重要原因。 
VisualEyes 插件生成的視覺熱力圖 顏色是影響按鈕隔離效果的第一因素。建議經(jīng)常使用對(duì)比色來(lái)吸引用戶注意，使主要操作按鈕更加突出。 首先，你應(yīng)該確保按鈕的顏色、視覺效果、排版是協(xié)調(diào)一致的。按鈕的可讀性、易讀性和對(duì)比度非常重要，需要事先進(jìn)行測(cè)試?？梢越柚?a href="https://www./" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(66, 152, 186); outline: none medium; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.2s ease-in-out 0s; word-break: break-all;">Stark在設(shè)計(jì)過(guò)程中測(cè)試按鈕的對(duì)比度。 
如Stark插件顯示，精美的漸變或鮮艷的色彩并不總是作為對(duì)比色的最佳方案！ 此外，關(guān)于對(duì)比度的方法不僅僅適用于按鈕元素本身。 功能強(qiáng)大的CTA按鈕也應(yīng)具有足夠的對(duì)比度，并且在整個(gè)界面中凸顯出來(lái)。 在這方面，Sketch app的著陸頁(yè)就是一個(gè)完美的示例。它很好地展示了CTA按鈕與頁(yè)面色彩對(duì)比的重要性。它不僅尊重其自身品牌，而且還創(chuàng)建了醒目的CTA按鈕來(lái)吸引大多數(shù)訪問(wèn)者的注意力。 簡(jiǎn)而言之，在這種情況下，這個(gè)按鈕對(duì)用戶是非常具有吸引力的！ 
Sketch App著錄頁(yè) 
VisualEyes 插件生成的Sketch App頁(yè)面視覺熱力圖 尺寸適度CTA按鈕的尺寸和位置在其可視性和可訪問(wèn)性中起著至關(guān)重要的作用。而按鈕的尺寸大小受許多因素的影響。 通過(guò)對(duì)按鈕大小和間距的研究，總結(jié)出了一種適用于大多數(shù)用戶（包括老年人）的標(biāo)準(zhǔn)。 
研究表明，42-72像素之間的按鈕準(zhǔn)確率最高。 也就是說(shuō)，最適合用戶的最小按鈕尺寸是42像素，最大按鈕尺寸是72像素。 過(guò)大的按鈕會(huì)因?yàn)槠溥^(guò)于引人注目，而讓用戶忽略了網(wǎng)站所提供的服務(wù)。這對(duì)網(wǎng)站頁(yè)面來(lái)說(shuō)是一個(gè)非常大的影響。而將按鈕設(shè)置得太小，則會(huì)嚴(yán)重影響其可訪問(wèn)性。沒(méi)有什么比按鈕太小而無(wú)法觸及更讓人崩潰的了。 移動(dòng)端的按鈕設(shè)計(jì)則面臨著另外一個(gè)問(wèn)題: 由Scott Hurff提出的“為拇指而設(shè)計(jì)”。 這是一個(gè)值得高度重視的問(wèn)題。在設(shè)計(jì)中，應(yīng)該在我們的拇指自然弧形范圍內(nèi)構(gòu)建最舒適的使用界面。 
不同iPhone尺寸設(shè)備上的拇指區(qū)域熱圖 顯然，“CTA”按鈕應(yīng)該以一種舒適的方式被觸發(fā)。因此，參考``拇指區(qū)''熱圖，設(shè)計(jì)師可以輕松地為他們的CTA按鈕選擇最合適的位置。 由此一來(lái)，在應(yīng)用程序的“自然區(qū)域”內(nèi)，按下按鈕的機(jī)會(huì)可以成倍增加。 順其自然用戶在使用頁(yè)面內(nèi)容時(shí)遵循的直接路徑非常重要。 以一種鼓勵(lì)自然閱讀的方式來(lái)排列文案和按鈕，你可以輕松地引導(dǎo)你的用戶到達(dá)CTA按鈕。 上述陳述與流行的菲茨定律是一致的。 獲取目標(biāo)的時(shí)間取決于目標(biāo)的距離和大小。 因此，在用戶流程的末尾放置CTA按鈕，可以大大減少轉(zhuǎn)化的阻力。 
Airbnb用戶流程&CTA按鈕  VisualEyes 插件生成的用戶流程視覺熱力圖 仔細(xì)觀察不難發(fā)現(xiàn)，最常見的眼睛掃描圖案呈F形。近期的眼動(dòng)追蹤研究表明，無(wú)論在臺(tái)式機(jī)還是移動(dòng)設(shè)備上，F(xiàn)形掃描模式是當(dāng)今最普遍的視覺運(yùn)動(dòng)方式。 這種閱讀模式更多地取決于人類的行為，而不是技術(shù)，這也表明``搜索''按鈕可能位于左下角。 Airbnb的設(shè)計(jì)師采用了不同的方法。他們利用Z型布局和Gutenberg（古騰堡）圖，將 CTA按鈕置于終端區(qū)域，以消除干擾并鼓勵(lì)用戶采取行動(dòng)。 當(dāng)用戶到達(dá)表單的右下角時(shí)，閱讀或“頁(yè)面掃描”過(guò)程中斷，用戶需要采取行動(dòng)。這是插入CTA按鈕的最佳位置。 總結(jié)一般來(lái)說(shuō)，CTA按鈕作為網(wǎng)站界面中最重要的元素，會(huì)對(duì)公司轉(zhuǎn)化產(chǎn)生巨大的影響。記住這些基本的設(shè)計(jì)原則，可以讓你的CTA按鈕設(shè)計(jì)在頁(yè)面中脫穎而出，吸引用戶注意力。 學(xué)習(xí)工具，但不受限于某種工具。摹客iDoc，高效協(xié)作，從產(chǎn)品到開發(fā)，只要一個(gè)文檔，讓你的團(tuán)隊(duì)高效協(xié)作！ |
|
|
