作者：ZoeYiker
鏈接：http://www.reibang.com/p/f6a2dba0a6ef
數(shù)字產(chǎn)品的有效交互系統(tǒng)由具有其任務(wù)和功能的小元素組成乍桂。為了建立足夠的系統(tǒng)瞳筏，關(guān)注所有細(xì)節(jié)至關(guān)重要馏鹤。
按鈕是用戶界面的核心交互組件，它在用戶體驗(yàn)以及網(wǎng)站和應(yīng)用程序的轉(zhuǎn)換率方面發(fā)揮著重要的作用乳幸。UI按鈕根據(jù)其功能而有所不同，可以分為不同的類型。這篇文章致力于呼吁大家關(guān)注：CTA按鈕（Call to Action用戶行為號(hào)召）的設(shè)計(jì)技巧魂挂，涵蓋了他們的本質(zhì)，在直觀導(dǎo)航中的角色以及業(yè)務(wù)目標(biāo)的重要性馁筐。讓我們通過實(shí)踐學(xué)習(xí)來看看涂召，是什么讓CTA按鈕脫穎而出。
什么是CTA按鈕敏沉，為什么它很重要果正？
行為召喚按鈕（CTA）是任何網(wǎng)絡(luò)和移動(dòng)用戶界面的互動(dòng)元素：其主要目標(biāo)是誘使用戶采取某些操作，為特定頁面或屏幕呈現(xiàn)轉(zhuǎn)化盟迟，例如購買秋泳，聯(lián)系，訂閱等攒菠。
傳統(tǒng)上迫皱，CTA按鈕很容易被注意到，甚至辖众，設(shè)計(jì)師故意以這種方式創(chuàng)建它們卓起，以致人們?nèi)滩蛔∪c(diǎn)擊它和敬。這就是為什么他們的按鈕通常是大膽的，其中包含特定的號(hào)召性用語（例如“了解更多”或“立即購買”）戏阅，它鼓勵(lì)我們推動(dòng)它昼弟。
潛在客戶的生成和購買是可以創(chuàng)建號(hào)召性行動(dòng)的基本業(yè)務(wù)目標(biāo)。當(dāng)一個(gè)按鈕的設(shè)計(jì)足夠吸引潛在客戶的注意力時(shí)奕筐，它可以吸引他們點(diǎn)擊并進(jìn)入下一個(gè)階段舱痘，比如填寫一個(gè)簡(jiǎn)短的聯(lián)系表單或完成產(chǎn)品的預(yù)定。
通過這種方式救欧，網(wǎng)站訪問者和應(yīng)用用戶可以通過銷售渠道從一個(gè)階段引導(dǎo)到另一個(gè)階段衰粹，幫助他們了解有關(guān)產(chǎn)品或服務(wù)的詳細(xì)信息。即使是專業(yè)制作的內(nèi)容也可能無法保證用戶的高度參與度笆怠。如果沒有CTA按鈕铝耻，人們更有可能快速掃描內(nèi)容，一覽而過蹬刷，但不包含任何交互操作瓢捉。
有些人可能認(rèn)為，一個(gè)足夠的號(hào)召性按鈕設(shè)計(jì)只適用于大尺寸和明亮的顏色办成，來實(shí)現(xiàn)其所有的目標(biāo)泡态。不過，確保CTA的有效性還有很多方面迂卢。讓我們看看他們是什么以及他們適當(dāng)使用的實(shí)際例子某弦。
是什么一個(gè)引人注目的CTA按鈕？
尺寸
大小是幫助按照其重要性劃分UI組件的最常用工具之一而克。元素越大靶壮，它表現(xiàn)得越明顯。由于CTA的先前目標(biāo)是吸引用戶的注意力员萍，因此設(shè)計(jì)師通常會(huì)嘗試讓它們?cè)谄聊簧系钠渌粹o中脫穎而出腾降，尤其是通過顯著的尺寸。
大按鈕有很高的機(jī)會(huì)被發(fā)現(xiàn)和點(diǎn)擊碎绎，但你必須保持一些限制螃壤。一個(gè)引人注目的號(hào)召性用語按鈕通常足夠大，可以快速找到筋帖，但不會(huì)太大奸晴，以免布局的視覺組合和層次結(jié)構(gòu)受到損害。市場(chǎng)領(lǐng)導(dǎo)者通常會(huì)在其準(zhǔn)則中提供有關(guān)按鈕有效大小的建議日麸。例如蚁滋，蘋果公司表示，移動(dòng)用戶界面中的CTA應(yīng)至少為44×44像素，而微軟推薦34×26像素辕录。
顏色和形狀
視覺上有吸引力的尺寸只是強(qiáng)大CTA的一個(gè)方面睦霎。為了讓按鈕更明顯，選擇合適的顏色和形狀至關(guān)重要走诞。人的情緒和行為與視覺環(huán)境高度相關(guān)副女。我們的思維對(duì)顏色和形狀有反應(yīng)，但我們通常不會(huì)注意到它蚣旱。當(dāng)我們的眼睛感覺到一種顏色時(shí)碑幅，它們與大腦相連，這個(gè)大腦向內(nèi)分泌系統(tǒng)發(fā)出信號(hào)塞绿，釋放荷爾蒙沟涨，負(fù)責(zé)情感和心情的轉(zhuǎn)變。心理學(xué)中有不同的顏色和形狀影響我們意識(shí)的具體分支异吻。在我們以前的文章中裹赴，我們描述了這種影響對(duì)設(shè)計(jì)解決方案的作用。以下是關(guān)于顏色和形狀具有的常見含義的簡(jiǎn)要指南诀浪。
顏色含義：
紅色
自信棋返，青春和力量。
橙色
友善雷猪，溫暖睛竣，充滿活力。
黃色
幸福求摇，樂觀和溫暖射沟。
綠色
和平，成長和健康与境。
藍(lán)色
信任躏惋，安全和穩(wěn)定。
紫色
豪華嚷辅，富有創(chuàng)意，明智距误。
黑色
可靠簸搞，復(fù)雜，經(jīng)驗(yàn)豐富准潭。
白色
簡(jiǎn)單趁俊，冷靜，干凈刑然。
形狀含義：
正方形和矩形
紀(jì)律寺擂，力量，勇氣，安全性怔软，可靠性垦细。
三角形
興奮，風(fēng)險(xiǎn)挡逼，危險(xiǎn)括改，平衡，穩(wěn)定家坎。
圓圈嘱能，橢圓和橢圓
永恒，女性虱疏，宇宙惹骂，魔法，神秘做瞪。
抽象形
意義的二重性对粪，唯一性，精心制作穿扳。
傳統(tǒng)上衩侥，CTA按鈕看起來像水平矩形，因?yàn)槿藗兞?xí)慣將這種形狀視為可點(diǎn)擊的按鈕矛物。此外茫死，建議設(shè)計(jì)帶有圓角的CTA按鈕，因?yàn)樗鼈儽徽J(rèn)為是指向按鈕內(nèi)部的引起注意力的復(fù)制履羞。
顏色的選擇取決于使過程更復(fù)雜的各個(gè)方面峦萎。設(shè)計(jì)師需要考慮這些因素，如作品的基本色彩忆首，以及目標(biāo)受眾的潛在偏好和心理特征爱榔。在為CTA選擇顏色時(shí)有一個(gè)條件非常重要：按鈕和背景顏色的對(duì)比應(yīng)該足夠鮮明，以便CTA可以從其他UI組件中脫穎而出糙及。
位置
CTA按鈕的放置對(duì)其性能至關(guān)重要详幽。如果他們位于用戶眼睛無法捕捉到的區(qū)域，則其他視覺方面（如顏色和尺寸）可能無法有效工作浸锨。但是如何理解什么樣的位置更加合適唇聘？
許多研究表明，在閱讀網(wǎng)頁之前柱搜，人們會(huì)掃描它以了解他們是否感興趣迟郎。考慮到這一事實(shí)聪蘸，設(shè)計(jì)人員可能會(huì)了解最突出的可掃描區(qū)域宪肖，并將呼叫行為置于用戶的路徑中表制。
根據(jù)包括Nielsen Norman Group，UXPin團(tuán)隊(duì)等在內(nèi)的不同研究報(bào)告控乾，網(wǎng)頁上有幾種流行的掃描模式么介，其中包括“F”和“Z”模式。
F模式
F模式包含大量?jī)?nèi)容的網(wǎng)頁阱持，例如博客夭拌，新聞平臺(tái)中是最常見的。用戶首先掃描屏幕頂部的水平線衷咽，然后向下移動(dòng)頁面并讀取通常覆蓋較短區(qū)域的水平線鸽扁。最后一個(gè)是在副本左側(cè)的垂直線，在那里他們?cè)诙温涞某跏季渥又胁檎谊P(guān)鍵字镶骗。
Z模式
Z模式是一種典型的掃描著陸頁或未加載副本的網(wǎng)站的模型桶现，并且不需要向下滾動(dòng)頁面，這意味著所有核心數(shù)據(jù)在預(yù)滾動(dòng)區(qū)域中都可見鼎姊。用戶首先從左上角開始掃描頁面頂部骡和，尋找重要信息，然后沿著對(duì)角線向下到對(duì)角相寇，結(jié)束于頁面底部的水平線慰于，再從左到右。
這些模式允許設(shè)計(jì)師將CTA放置在最受關(guān)注的位置唤衫，例如頂角婆赠，并將其他要點(diǎn)注意力放在頂部和底部。此外佳励，將CTA按鈕放置在布局的中心是一個(gè)好主意休里，特別是當(dāng)它不與其他UI元素相互干擾時(shí)。
微文案
微文案在CTA按鈕設(shè)計(jì)中也發(fā)揮著重要作用赃承。它被定義為CTA按鈕內(nèi)的小部分文本妙黍。更具體地說，微文案包括按鈕內(nèi)的標(biāo)簽瞧剖，報(bào)錯(cuò)消息拭嫁，安全說明，條款和條件抓于，以及任何類型的產(chǎn)品使用說明做粤。
CTA微文案實(shí)際上是一個(gè)導(dǎo)示，告訴用戶如果點(diǎn)擊按鈕他們將采取什么行動(dòng)毡咏。強(qiáng)大的CTA微文案通常很短但一致，因此可以快速吸引用戶的注意力逮刨。
行為召喚按鈕（CTA）是電子商務(wù)中功能最強(qiáng)大的銷售工具之一呕缭，也是影響頁面或屏幕良好轉(zhuǎn)換的重要因素之一堵泽。設(shè)計(jì)師需要了解CTA的重要性恢总，并深切關(guān)注影響其表現(xiàn)的所有細(xì)節(jié)。
