發(fā)布日期：2017/3/29

在網(wǎng)頁設(shè)計(jì)中采取行動(dòng)的召喚 -在用戶體驗(yàn)（UX），特殊是-是一個(gè)術(shù)語，用于在網(wǎng)頁中的元素，征求用戶的行動(dòng)。好流行 的體現(xiàn)，呼吁采取行動(dòng)網(wǎng)絡(luò)接口的形式可單擊按鈕，當(dāng)按下時(shí)，執(zhí)行一個(gè)動(dòng)作（例如：“買這個(gè)吧！”）或者導(dǎo)致一個(gè)網(wǎng)頁的其他信息（例如，“了解更多...” ），要求用戶采取行動(dòng)。

我們?nèi)绾尾拍芙�立有用的調(diào)用操作按鈕吸引用戶的注重力，吸引他們點(diǎn)擊？我們將在這篇文章中，通過分享一些有用的設(shè)計(jì)技術(shù)，探索一些例子往返答這個(gè)問題。

 
         好佳實(shí)踐有用的呼叫“動(dòng)作按鈕”

到Web界面的操作按鈕設(shè)計(jì)調(diào)用需要一些預(yù)先計(jì)劃和規(guī)劃;它的原型設(shè)計(jì)和信息架構(gòu)過程中的一部分，為了讓他們很好地工作。在本節(jié)中，我們將討論一些設(shè)計(jì)技術(shù)的呼叫操作按鈕。

繪制用戶的關(guān)注與大小

在網(wǎng)頁中，相對(duì)其周圍的元素的元素的大小注解它的主要性：元素是較大的，更主要的是。決定如何是至關(guān)主要的某些站點(diǎn)操作和大小，您的通話按鈕行動(dòng)。

調(diào)用動(dòng)作按鈕與周圍的元素的大小

Lifetree創(chuàng)意體現(xiàn)出這種想法的大小來透露表現(xiàn)他們的呼叫操作按鈕的主要性。比較其與該公司的標(biāo)志按鈕的大小。為了吸引用戶的注重，調(diào)用操作按鈕大約是20％ （寬）標(biāo)志。即使標(biāo)志被放置在網(wǎng)頁上，你的眼睛被吸引到調(diào)用操作按鈕，因?yàn)槠漭^大的尺寸與周圍的元素。

調(diào)用操作按鈕與不太主要的電話行動(dòng)的大小

一個(gè)網(wǎng)頁可能有多個(gè)呼叫的行動(dòng)。要指示行動(dòng)與其他行動(dòng)調(diào)用的相對(duì)主要性，你可以改變它們的大小。下面是一個(gè)例子，這樣概念上的Paramore的|里德網(wǎng)站：調(diào)用操作按鈕，要求用戶注冊(cè)他們的通信是顯明大于繼續(xù)閱讀呼吁采取行動(dòng)，注解這個(gè)網(wǎng)頁上，他們寧愿你采取行動(dòng)的訂閱與閱讀的博客文章。

繪制用戶注重凸起位置

在網(wǎng)頁上的的調(diào)用操作按鈕位置畫眼睛的訪客是至關(guān)主要的。放置在顯眼的位置，如一個(gè)網(wǎng)頁的頂端部分的，可能會(huì)導(dǎo)致更高的著陸頁轉(zhuǎn)換，因?yàn)橛脩艨赡軙?huì)注重到的調(diào)用操作按鈕，并采取行動(dòng)。

放置在一個(gè)卓異的面積

把一個(gè)呼叫按鈕上一位卓異的行動(dòng)，使得它脫穎而出，在網(wǎng)頁布局的方法之一。在行動(dòng)中上的dailymile的調(diào)用操作按鈕看起來是在一個(gè)更高的層面（頂部）其他的元素，如酒吧圖形的網(wǎng)站，你可以看到這個(gè)想法。

在網(wǎng)頁的頂部的放置

為了說明這個(gè)概念，在“發(fā)布招聘來看看！” 打電話給位于你的網(wǎng)絡(luò)招聘網(wǎng)站在很右上角的動(dòng)作按鈕。通過將呼叫行動(dòng)中一個(gè)特別很是凸起的區(qū)域，它更可能的用戶會(huì)發(fā)現(xiàn)它過一會(huì)后，他們已經(jīng)看了看該網(wǎng)站的內(nèi)容。例如，假如一個(gè)作業(yè)海報(bào)的張貼工作采取行動(dòng)之前，要瀏覽這個(gè)網(wǎng)站，“發(fā)布工作！” 呼吁采取行動(dòng)將是為他們預(yù)備的頁導(dǎo)致他們的轉(zhuǎn)換，他們將在那里他們可以很容易地采取這樣的行動(dòng)，因?yàn)樗�凸起的位置，更容易記住�?/p>

安置在一個(gè)布局的中間

定位調(diào)用操作按鈕在中心的網(wǎng)絡(luò)布局，沒有（或顯明較小的去加重的）側(cè)翼的元素可以是一種有用的體例提請(qǐng)注重和誘人的動(dòng)作。在的情況下PicsEngine，即使調(diào)用操作按鈕不具有較高的顏色與背景的對(duì)比度和周圍的頁面元素，它仍然提請(qǐng)注重，僅僅通過它的中間位置。

使用空格從其他元素中星散呼叫的行動(dòng)

調(diào)用操作按鈕周圍的空白（或死腔）是一種有用的體例，使得它脫穎而出的地方有許多元素。

空白字符用于區(qū)分調(diào)用操作按鈕

IconDock如何有用的足夠的空白。即使是一個(gè)小的和顯然的調(diào)用操作按鈕，但它仍然凸起，因?yàn)樵谄湎噜彽脑�素之間的空間。

不同量的空白來透露表現(xiàn)邏輯連接

更多的空白，有操作按鈕與周圍的元件之間的調(diào)用，連接他們。因此，假如你有其他的元素，可以幫助說服用戶采取行動(dòng)，削減這些元素之間的CTA中的空白。

例如，捐助者工具上面的文字“注冊(cè)”呼吁行動(dòng)，告訴用戶注冊(cè)的益處。在它的右邊是一個(gè)瀏覽器的截圖是為了美觀，而不一定是提醒用戶點(diǎn)擊“注冊(cè)”呼叫操作按鈕。通過削減中的空格之間的文本，并呼吁采取行動(dòng)按鈕，你這兩個(gè)元素在視覺上。在瀏覽器的截圖和圖像之間的空白，確保行動(dòng)的要求，眼睛都不能偏離。

使用高對(duì)比的顏色

決定使用什么顏色的呼叫操作按鈕，是特別很是主要的。使用您的呼叫操作按鈕，具有高對(duì)比度，相對(duì)于周圍的元素和背景的顏色，因?yàn)樗�是特別很是主要的，以確保用戶注重到您的行動(dòng)呼吁。

色彩的對(duì)比與周圍的元素

Notepod舉例說明了如何調(diào)用之間的行動(dòng)和其周圍的元素，可以有用吸引用戶的關(guān)注，直接把它的色彩對(duì)比。周圍的元素全是黑的，而調(diào)用操作按鈕，是一個(gè)通亮的藍(lán)色。

前景/背景顏色對(duì)比

谷溪堂將其通亮的黃色的“了解更多”調(diào)用上述操作按鈕的灰度圖像。即使有簡(jiǎn)單的調(diào)用操作按鈕設(shè)計(jì)在頂部的復(fù)雜元素（在這種情況下，照片），它仍然是，因?yàn)轭伾�的選擇。

提供二次行動(dòng)方案

一個(gè)網(wǎng)頁可以有多個(gè)呼叫的行動(dòng)。有時(shí)有需要為了說服后采取行動(dòng)所需的主呼叫的用戶提供一個(gè)輔助操作。例如，在用戶注冊(cè)的Web服務(wù)，一些用戶可能需要進(jìn)一步的信息會(huì)提醒采取行動(dòng)簽署輔助操作可能是在提醒他們采取產(chǎn)品介紹或訪問一個(gè)網(wǎng)頁的更多信息，有關(guān)的產(chǎn)品。

旁邊的主要操作顯示輔助操作

OfficeVP顯示兩個(gè)旁邊的操作按鈕呼叫對(duì)方-中間和位于頂部的網(wǎng)絡(luò)布局。通過不同的顏色，用戶可以看到他們有兩個(gè)不同的路線：他們可以直接（主要行動(dòng)），或者，假如他們想了解更多在提交之前，他們可以采取的一個(gè)旅游次要?jiǎng)幼鳌?/p>

變速箱也顯示了這種概念具有二次行動(dòng)所需的主要行動(dòng)。在這種情況下，將主要?jiǎng)幼魇菫橛脩糍徺I應(yīng)用程序。假如他們想嘗試一下在購買之前，那么第二所需的行動(dòng)是次下載的應(yīng)用程序。請(qǐng)注重，使它更為凸起比輔助操作中，具有較高的顏色對(duì)比度其比二次呼叫動(dòng)作按鈕的背景透露表現(xiàn)主要?jiǎng)幼鳌Ｒ虼耍�可以有用地由左到右畫眼睛�?/p>

另外，還要注重使用之間的兩個(gè)呼叫按鈕相對(duì)于其他元素在該地區(qū)的行動(dòng)，有用地削減空白的按鈕組合在一路。

以下主要操作顯示輔助操作

另外，你不妨來顯示二級(jí)以下主要行動(dòng)的行動(dòng)。這可能是需要的，假如你需要有更大的視覺星散您的通話行動(dòng)。virB的這種情況下，“立即加入”行動(dòng)呼吁放在上面的產(chǎn)品介紹中的輔助操作。請(qǐng)注重，進(jìn)一步星散輔助操作的主要操作使用更柔和的顏色，它的默認(rèn)狀況。

傳達(dá)一種緊迫感

使用勇敢，自傲，和飭令的話，可以改變用戶的感知，以這樣的體例，以說服他們，他們不應(yīng)該等待更長的時(shí)間來采取行動(dòng)，并采取行動(dòng)，等待行動(dòng)的措辭會(huì)導(dǎo)致罰款或錯(cuò)過的機(jī)會(huì)。

點(diǎn)擊絲錐演示了這種想法，呼吁采取行動(dòng)的緊迫性。“現(xiàn)在購買”撥打我們的行動(dòng)按鈕文本“促銷價(jià)”，巧妙地暗示，在用戶等待采取行動(dòng)，更高的風(fēng)險(xiǎn)，支出更多的入門價(jià)格將通過。

通常情況下，建議執(zhí)行一個(gè)動(dòng)作，可以有用創(chuàng)造緊迫感。使用的話，如“現(xiàn)在”，“立即”和“現(xiàn)在”可以傳達(dá)這樣的緊迫性。組委會(huì)為美國（BarackObama.com）的例子，吸引網(wǎng)站訪問者“捐贈(zèng)”。相反，假如只是簡(jiǎn)單地說：“捐贈(zèng)”，緊迫感就會(huì)消逝，用戶可能不太可能采取行動(dòng)。

推薦用戶采取行動(dòng)是很容易的

通常情況下，用戶毫不猶豫地采取行動(dòng)源于思想，一個(gè)行動(dòng)將是困難的，昂貴的，耗時(shí)的。通過照顧這些關(guān)注，操作按鈕，您的通話可能會(huì)導(dǎo)致更多的轉(zhuǎn)換。

例如，在大本營，操作按鈕調(diào)用明確定義的時(shí)間，將用戶注冊(cè)，并告訴用戶注冊(cè)是不花錢的（免費(fèi)）。這種做法削弱了兩個(gè)主要的用戶所關(guān)注的問題，當(dāng)談到采取行動(dòng)在線支付（這也要求他們采取額外的行動(dòng)，如得到他們的信用卡）和時(shí)間的限制。

在茶回合應(yīng)用的例子，他們告訴用戶，他們將不會(huì)收到垃圾郵件的電子郵件采取行動(dòng)的訂閱他們的電子郵件服務(wù)，這是給您的電子郵件，第三方服務(wù)時(shí)，引起人們的關(guān)注。

告訴用戶什么期望

大多數(shù)互聯(lián)網(wǎng)用戶都在猶豫，他們?cè)诰W(wǎng)絡(luò)上面值拿東西。根據(jù)經(jīng)驗(yàn)，他們的信賴已經(jīng)銷毀之前承諾免費(fèi)服務(wù)的鏈接，才發(fā)現(xiàn)，他們不得不把自己的信用卡號(hào)碼，以獲得他們想要的東西。為了提高點(diǎn)擊轉(zhuǎn)換和建立信賴，展望用戶的嫌疑，并告訴他們，他們將獲得通過你向他們提出采取行動(dòng)。當(dāng)調(diào)用操作按鈕設(shè)計(jì)，認(rèn)為所有效戶將有潛在的問題，并確保你回答他們的時(shí)間。

Mozilla Firefox瀏覽器，告訴用戶究竟是什么，通過點(diǎn)擊操作按鈕調(diào)用。操作按鈕的調(diào)用告訴你，你會(huì)得到火狐3.5，它是免費(fèi)的，并且對(duì)于那些需要更大的特異性，確切的版本是3.5.3的Windows操作系統(tǒng)中，使用的語言是英語，而且你應(yīng)該期待一個(gè)7.7MB的下載。

Onehub預(yù)期的問題，用戶采取行動(dòng)時(shí)是否需要支付或是否他們可以把產(chǎn)品進(jìn)行了試駕的告訴用戶，假如他們采取行動(dòng)簽署，他們將有一個(gè)30 -天試用版是免費(fèi)的。

呼叫“動(dòng)作按鈕”設(shè)計(jì)展

現(xiàn)在，我們已經(jīng)討論了一些好佳實(shí)踐，設(shè)計(jì)調(diào)用操作按鈕，讓我們來看看一些示范性的實(shí)現(xiàn)調(diào)用網(wǎng)站上的操作按鈕。在這些設(shè)計(jì)中，我們將配合從上面的技術(shù)和好佳做法，并探討它們?nèi)绾螏椭鷮?shí)現(xiàn)的設(shè)計(jì)實(shí)踐。

運(yùn)動(dòng)監(jiān)控
提出了兩種潛在的用戶操作：“試試吧”和“查看功能”的這組調(diào)用操作按鈕。誰知道運(yùn)動(dòng)監(jiān)視器，想嘗試一下現(xiàn)在對(duì)于用戶來說，他們可以采取所需的主要?jiǎng)幼鳎�而另一些人想探索在承諾的時(shí)間之前，可以采取輔助操作查看的Web應(yīng)用程序的功能。

文件共享HQ
調(diào)用操作按鈕告訴用戶所期待的（以分鐘為單位的“開始共享文件”）。

這組呼叫Livestream.com動(dòng)作按鈕使用垂直排列的分組來指示所希望的順序被呈現(xiàn)給用戶的操作的主要性。所需的主要措施是，其次是獲得有關(guān)該服務(wù)的具體信息，好后得到的估計(jì)，比較和對(duì)比不同的計(jì)劃。

Traffik CMS
呼叫操作按鈕被放置在一個(gè)顯眼的位置，在網(wǎng)頁的好頂端，并凸起顯示相對(duì)于周圍元素的大小和顏色的使用。

漢博設(shè)計(jì)
這個(gè)調(diào)用操作按鈕告訴用戶什么期望得到一個(gè)報(bào)價(jià)，沒有任何附加條件。該公司預(yù)計(jì)“報(bào)價(jià)多少成本我，假如我投資我的時(shí)間，在這個(gè)過程中經(jīng)歷的問題嗎？”

的Resumator，
你可以看到許多好佳實(shí)踐在行動(dòng)上調(diào)用操作按鈕，實(shí)現(xiàn)。首先，它使用了空白，大小，顏色清晰地將它從其他頁面元素。然后，要?jiǎng)?chuàng)建一個(gè)邏輯分組的元素，可以幫助說服用戶采取行動(dòng)，它具有更少的空白，它的功能上面的文字，并輔助操作“以旅游”的下面。

wufoo
Wufoo提供兩個(gè)操作，用戶可以采取在水平布置的體例，所需的操作與主左方。按鍵很大，特別很是辛勞錯(cuò)過，但他們卻是不礙眼的整體設(shè)計(jì)。

移動(dòng)Web設(shè)計(jì)中，
這個(gè)調(diào)用操作按鈕被放置在顯著位置，它有重大的規(guī)模和鮮明的顏色與周圍的元素。其次是為了提供額外的上下文是什么意思“購買書”，調(diào)用操作按鈕文字說明的成本和可用的格式（傳統(tǒng)圖書或PDF）。

NCover
這些調(diào)用的操作按鈕重疊。所需的主要?jiǎng)幼魇琼敳康乃{(lán)色輔助所需的動(dòng)作。用戶繪制的按鈕，因?yàn)榇笮。�并使用一個(gè)藍(lán)色的色調(diào)為二次所需的動(dòng)作靜音它相對(duì)于主所需的動(dòng)作。請(qǐng)注重使用空白來創(chuàng)建三個(gè)相關(guān)的元素，可以幫助進(jìn)行銷售的邏輯分組：文本，告訴用戶什么NCover，注冊(cè)呼吁采取行動(dòng)，并呼吁采取行動(dòng)的旅游。與此相反，請(qǐng)注重這組，在右邊的元素的增添之間的差額。

Xero的
行動(dòng)呼吁這組展品的使用，為用戶提供一個(gè)輔助操作。在右邊的主要所需的操作，有一個(gè)文本鏈接，要求用戶“了解更多”。對(duì)于不愿意馬上注冊(cè)的用戶，設(shè)計(jì)可能會(huì)增添，用戶將發(fā)現(xiàn)更多的“簽約前的可能性。

道效應(yīng)-間諜
這是一組操作按鈕調(diào)用，為用戶提供了三個(gè)選項(xiàng)：下載，現(xiàn)在購買，或升級(jí)。在這種情況下，所需的主要?jiǎng)幼魇窍螺d的應(yīng)用程序，然后由兩個(gè)相等的優(yōu)先級(jí)的行動(dòng)求購現(xiàn)在，或升級(jí)。這種區(qū)別是由不同的顏色的調(diào)用操作按鈕，更加凸起兩個(gè)次級(jí)行動(dòng)的主要操作。

發(fā)票機(jī)
在這里，你可以看到兩個(gè)呼叫按鈕，凸起了藍(lán)色的邊框的行動(dòng)。因?yàn)樗麄儌z都是相同的樣式，我們可以假設(shè)他們有平等的主要性。或許該公司決定，這是不可能的用戶將采取的行動(dòng)簽署之前看到他們所提供的是什么，或者是他們已經(jīng)確定的產(chǎn)品巡回演唱會(huì)幫助他們的成員更有用地轉(zhuǎn)換成觀眾。

Ekklesia 360
這組調(diào)用操作按鈕的圖標(biāo)展示了前進(jìn)的（指向右邊的箭頭透露表現(xiàn)）來透露表現(xiàn)感。他們使用高對(duì)比度的顏色對(duì)深藍(lán)色的背景下，以撥打電話的動(dòng)作凸起，在網(wǎng)頁的設(shè)計(jì)。

結(jié)帳
通過使用一個(gè)特別很是凸起的顏色相對(duì)于整體設(shè)計(jì)的操作按鈕調(diào)用，即使它上面的圖片是顯明大于按鈕的大小，但它仍然設(shè)法吸引用戶的注重。

spinen
直接和明確的語言告訴用戶什么期望時(shí)，他們采取行動(dòng)：在這種情況下，按一下上調(diào)用操作按鈕將讓他們找到更多的產(chǎn)品。

代碼庫
調(diào)用，操作按鈕，告訴用戶他們可以采取行動(dòng)：15天免費(fèi)試用。它設(shè)法吸引用戶的注重，通過使用高對(duì)比度的顏色，在左側(cè)的圖標(biāo)，以及大量的空白。

GoodBarry
在此呼吁采取行動(dòng)，你可以看到，如何的空白，大小和智能色彩決定是有用的，在撥打電話的動(dòng)作特別很是顯明的。強(qiáng)調(diào)他們的行動(dòng)將是“免費(fèi)”向用戶所期待的。

喚醒互動(dòng)
，相對(duì)于其周圍的元素調(diào)用操作按鈕的顏色使得它彈出，即使有少量的周圍的空白。

OH！媒體
真正代表這個(gè)調(diào)用操作按鈕的頁面，因?yàn)樗�的位置，周圍的空白，以�?好主要的-在色彩上有所選擇。在頁面看，眼睛都直接取材采取行動(dòng)的號(hào)召。

Pixelcrayons
看看如何，空格可以大大提高多的關(guān)注，這個(gè)調(diào)用操作按鈕繪制。

棒球場(chǎng)
的大小，這個(gè)調(diào)用動(dòng)作按鈕被有用地吸引用戶的注重力。它的清晰和直接的語言告訴用戶什么期望時(shí)采取行動(dòng)。

每月一個(gè)主題
調(diào)用行動(dòng)小組將主要在中心的替代行動(dòng)所需的操作。通過選擇一個(gè)特別很是凸起的顏色所需的主要行動(dòng)，隨著更大的區(qū)域，它管理把它上面的主要性的順序相比，輔助操作。

Scrapblog
使用凸起的顏色，足夠的空白，大小相對(duì)于周圍的元素，以吸引用戶的注重力，你就可以看到效果。直白的語言表達(dá)了一種自在，聲稱，你可以在“開始”馬上采取行動(dòng)。

13個(gè)創(chuàng)意的
調(diào)用操作按鈕顯示了如何通過使用一種特別很是規(guī)的設(shè)計(jì)，你仍然可以提請(qǐng)注重，即使周圍的元素的比例較大。

Kalculator
此呼吁采取行動(dòng)告訴用戶什么期望：通過單擊此呼吁采取行動(dòng)，他們應(yīng)該預(yù)見炮擊3.99美元。使用“只”字暗示，這是一個(gè)相當(dāng)不錯(cuò)的交易，它可以幫助進(jìn)行銷售。

網(wǎng)頁設(shè)計(jì)海灘
下面是一組調(diào)用兩種不同顏色的操作按鈕。更加凸起的一個(gè)，“報(bào)價(jià)”注解，它是所需的主要行動(dòng)。

蘇格蘭高地舞
呼叫按鈕呼吁關(guān)注自己的空白，有許多凸起的位置，并使用一個(gè)圖標(biāo)，以區(qū)分自己的行動(dòng)。通過使用這個(gè)詞：“現(xiàn)在”，它所傳達(dá)的緊迫感和需要立即采取行動(dòng)。

商業(yè)IQ
調(diào)用操作按鈕的大小和凸起的定位，吸引用戶的注重力。一個(gè)放大鏡圖標(biāo)添加上下文的行動(dòng)的目的。添加文本“搜索”預(yù)期的問題，用戶可能需要的行動(dòng)的成本。

儀表板
在這里，你可以看到使用的高對(duì)比色，使呼叫行動(dòng)中脫穎而出，即使在較大的頁面元素。

其他資源呼叫“動(dòng)作按鈕”

假如您想了解更多關(guān)于呼叫操作按鈕，這里有一些相關(guān)的資源和文章在其他網(wǎng)站上。

6修訂，是我寫的關(guān)于本教程在Photoshop中創(chuàng)建一個(gè)漂亮的，干凈的按鈕，會(huì)告訴你如何使大和顯明的調(diào)用操作按鈕步驟一步。

鼓舞人心的按鈕，
假如你需要一些靈感的按鈕設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)-模式塔，看看這個(gè)模式塔集。

10技術(shù)有用的“呼吁行動(dòng)”
保羅BOAG討論了一些技術(shù)，的通話操作按鈕。

的通話動(dòng)作按鈕
UX展位有一個(gè)的通話操作按鈕由一個(gè)好片。

Firefox中演示如何強(qiáng)烈呼吁行動(dòng)可以提高
閱讀一個(gè)的通話操作按鈕，可以提高轉(zhuǎn)換的著陸頁面的性能。你會(huì)發(fā)現(xiàn)一個(gè)比較之間的呼叫使用火狐，Opera和Internet Explorer的操作按鈕。