數(shù)字產(chǎn)品的有效交互系統(tǒng)由具有其任務(wù)和功能的小元素組成。為了建立足夠的系統(tǒng)焚刚，關(guān)注所有細(xì)節(jié)至關(guān)重要晒夹。
按鈕是用戶界面的核心交互組件启盛，它對用戶體驗以及網(wǎng)站和應(yīng)用程序的轉(zhuǎn)換方面發(fā)揮著重要的作用。UI按鈕根據(jù)其功能而有所不同葛家，可以分為不同的類型户辞。這篇文章呼吁大家關(guān)注：（CTA）按鈕上的UI設(shè)計技巧，里面涵蓋了他們的本質(zhì)癞谒。在直觀導(dǎo)航中的作用以及業(yè)務(wù)目標(biāo)的重要性底燎。讓我們看看是什么讓CTA按鈕脫穎而出，從中學(xué)習(xí)最好的做法弹砚。
什么是CTA按鈕双仍，為什么它很重要？
號召性用語（CTA）按鈕是web網(wǎng)絡(luò)和移動用戶界面的互動元素：其主要目標(biāo)是誘使用戶采取某些操作桌吃，為特定頁面或屏幕提供轉(zhuǎn)換朱沃，例如購買，聯(lián)系茅诱，訂閱等逗物。
傳統(tǒng)上，CTA按鈕很容易被注意到瑟俭。設(shè)計師故意以這種方式創(chuàng)建它們翎卓，以至于人們?nèi)滩蛔↑c(diǎn)擊它。這就是為什么他們按鈕通常是大膽的摆寄，其中包含特定的號召性用語（例如“了解更多”或“立即購買”）失暴，它鼓勵我們推動它坯门。
潛在客戶的生成和購買是可以創(chuàng)建號召性行動的基本業(yè)務(wù)目標(biāo)。當(dāng)一個按鈕設(shè)計足夠吸引潛在客戶的注意力時逗扒，它可以吸引他們點(diǎn)擊并進(jìn)入下一個階段古戴，比如填寫一個簡短的聯(lián)系表單或進(jìn)行預(yù)定的一個產(chǎn)品。
這樣一來缴阎，網(wǎng)站訪問者和應(yīng)用程序用戶可以通過銷售渠道從一個階段引導(dǎo)到另一個階段允瞧，幫助他們了解有關(guān)產(chǎn)品或服務(wù)的詳細(xì)信息。即使是專業(yè)制作的內(nèi)容也可能無法保證用戶的高度參與蛮拔。如果沒有CTA按鈕述暂，人們更有可能快速掃描內(nèi)容，只留下內(nèi)容建炫，沒有任何操作畦韭。
有些人可能認(rèn)為足夠的號召性按鈕設(shè)計僅適用于大尺寸和鮮艷的顏色，以實現(xiàn)其所有目標(biāo)肛跌。不過艺配，CTA的有效性還有很多方面。讓我們看看他們是什么衍慎？以及他們適當(dāng)使用的實際例子转唉。
尺寸
大小是幫助按照其重要性劃分UI組件的最常用工具之一。元素越大稳捆，它變得越明顯赠法。由于CTA的先前目標(biāo)是吸引用戶的注意力，因此設(shè)計師通常會試圖讓它們在屏幕上相比其他按鈕中脫穎而出乔夯，尤其是通過顯著的尺寸砖织。
大按鈕有很高的機(jī)會被發(fā)現(xiàn)和點(diǎn)擊，但你必須保持一些限制末荐。一個引人注目的號召性用語按鈕通常足夠大侧纯，可以快速找到，但不會太大甲脏，以免布局的視覺組合和層次結(jié)構(gòu)受到破壞眶熬。市場領(lǐng)導(dǎo)者通常會在其準(zhǔn)則中提供有關(guān)按鈕有效大小的建議。例如剃幌，蘋果公司表示聋涨，移動用戶界面中的CTA應(yīng)至少為44×44像素，而微軟推薦34×26像素负乡。
顏色和形狀
視覺上有吸引力-尺寸只是強(qiáng)大CTA的一個方面牍白。為了讓按鈕更明顯，選擇顏色和形狀也非常重要抖棘。人的情緒和行為與視覺環(huán)境高度相關(guān)茂腥。我們的思維對顏色和形狀也有反應(yīng)狸涌，但我們通常不會注意到它。當(dāng)我們的眼睛感覺到一種顏色時最岗，它們與大腦相連帕胆，這個大腦向內(nèi)分泌系統(tǒng)發(fā)出信號，釋放荷爾蒙般渡，負(fù)責(zé)情緒和情緒的轉(zhuǎn)變懒豹。心理科學(xué)有不同的顏色和形狀影響我們意識的具體分支。以下是關(guān)于顏色和形狀的常見含義驯用。
顏色含義：
紅色：自信脸秽，青春和力量。
橙色：友善蝴乔，溫暖记餐，充滿活力。
黃色：幸福薇正，樂觀和溫暖片酝。
綠色。和平挖腰，成長和健康雕沿。
藍(lán)色：信任，安全和穩(wěn)定猴仑。
紫色：豪華晦炊，富有創(chuàng)意，明智宁脊。
黑色：可靠，復(fù)雜贤姆，經(jīng)驗豐富榆苞。
白色：簡單，冷靜霞捡，干凈坐漏。
形狀含義：
正方形和矩形：紀(jì)律，力量碧信，勇氣赊琳，安全性，可靠性砰碴。
三角形：興奮躏筏，風(fēng)險，危險呈枉，平衡趁尼，穩(wěn)定埃碱。
圓圈，橢圓和橢圓：永恒酥泞，女性砚殿，宇宙，魔法芝囤，神秘似炎。
抽象形意義：意義的二重性，唯一性悯姊，精心制作羡藐。
傳統(tǒng)上，CTA按鈕看起來像水平矩形挠轴，因為人們習(xí)慣將這種形狀視為可點(diǎn)擊的按鈕。此外岸晦，建議設(shè)計具有圓角的CTA欧啤，因為它們被認(rèn)為是指向按鈕內(nèi)部的注意力的復(fù)制。
顏色的選擇取決于使過程更加復(fù)雜的各個方面启上。設(shè)計師需要考慮這些因素邢隧，如作品的基本色彩，以及目標(biāo)受眾的潛在偏好和心理特征冈在。在為CTA選擇顏色時有一個條件非常重要：按鈕和背景顏色應(yīng)該足夠?qū)Ρ鹊够郏员鉉TA能夠從其他UI組件中脫穎。
位置
CTA按鈕的放置位置對其性能至關(guān)重要包券。如果他們位于用戶眼睛無法捕捉到的區(qū)域纫谅，則其他視覺方面（如顏色和尺寸）可能無法有效工作。但是如何理解什么樣的位置更加妥當(dāng)溅固？
許多研究表明付秕，在閱讀網(wǎng)頁之前，人們會掃描它以了解他們是否感興趣侍郭⊙猓考慮到這一事實，設(shè)計人員可能會了解最突出的可掃描區(qū)域亮元，并將呼叫行為置于用戶的路徑中猛计。
根據(jù)包括Nielsen Norman Group，UXPin團(tuán)隊等在內(nèi)的不同研究報告爆捞，網(wǎng)頁上有幾種流行掃描模式奉瘤，其中包括“F”和“Z”模式。
對于包含大量內(nèi)容的網(wǎng)頁煮甥，例如博客毛好，新聞平臺望艺，F-模式是最常見的。用戶首先掃描屏幕頂部的水平線肌访，然后向下移動頁面并讀取找默，通常覆蓋較短區(qū)域的水平線。最后一個是在副本左側(cè)的垂直線吼驶，在段落的初始句子中查找關(guān)鍵字惩激。
Z-模式是一種典型的掃描著陸頁或未加載副本的網(wǎng)站的模型，并且不需要向下滾動頁面蟹演，這意味著所有核心數(shù)據(jù)在預(yù)滾動區(qū)域中都可見风钻。用戶首先從左上角開始掃描頁面頂部，尋找重要信息酒请，然后下到相反的對角骡技，結(jié)束頁面底部的水平線，再從左到右對羞反。
這些模式允許設(shè)計師將CTA放置在最受關(guān)注的位置布朦，如頂角，并將其他要點(diǎn)注意的點(diǎn)放在頂部和底部線上昼窗。另外是趴，將CTA按鈕放置在布局的中心是一個好主意，尤其是當(dāng)它不與其他UI元素過載時澄惊。
顯微鏡
顯微鏡在調(diào)動行動的效率方面發(fā)揮著重要作用唆途。它被定義為：用戶提示文本的小部分。更具體地說掸驱，顯微鏡包括按鈕和菜單副本肛搬，錯誤消息，安全說明毕贼，條款和條件滚婉，以及任何類型的產(chǎn)品使用說明。
CTA顯微鏡實際上是一個調(diào)用帅刀，告訴用戶如果點(diǎn)擊按鈕他們將采取什么行動。強(qiáng)大的CTA顯微鏡通常很短但一致远剩，因此可以快速吸引用戶的注意力扣溺。
號召性用語按鈕是電子商務(wù)中功能最強(qiáng)大的銷售工具之一，也是影響頁面或屏幕轉(zhuǎn)換效果的重要因素之一瓜晤。設(shè)計師需要了解CTA的重要性锥余，并深切關(guān)注影響其表現(xiàn)的所有細(xì)節(jié)。
推薦閱讀
UI / UX設(shè)計術(shù)語表以及導(dǎo)航元素
UX設(shè)計術(shù)語表：界面導(dǎo)航元素痢掠、設(shè)置
界面設(shè)計3C：顏色驱犹，對比度嘲恍，內(nèi)容視覺層次的有效提示輕松實現(xiàn)：努力保存用戶界面的技巧
