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

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

我們如何才能建立有用的調用操作按鈕吸引用戶的注重力，吸引他們點擊？我們將在這篇文章中，通過分享一些有用的設計技術，探索一些例子往返答這個問題。

 
         好佳實踐有用的呼叫“動作按鈕”

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

繪制用戶的關注與大小

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

調用動作按鈕與周圍的元素的大小

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

調用操作按鈕與不太主要的電話行動的大小

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

繪制用戶注重凸起位置

在網(wǎng)頁上的的調用操作按鈕位置畫眼睛的訪客是至關主要的。放置在顯眼的位置，如一個網(wǎng)頁的頂端部分的，可能會導致更高的著陸頁轉換，因為用戶可能會注重到的調用操作按鈕，并采取行動。

放置在一個卓異的面積

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

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

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

安置在一個布局的中間

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

使用空格從其他元素中星散呼叫的行動

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

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

IconDock如何有用的足夠的空白。即使是一個小的和顯然的調用操作按鈕，但它仍然凸起，因為在其相鄰的元素之間的空間。

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

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

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

使用高對比的顏色

決定使用什么顏色的呼叫操作按鈕，是特別很是主要的。使用您的呼叫操作按鈕，具有高對比度，相對于周圍的元素和背景的顏色，因為它是特別很是主要的，以確保用戶注重到您的行動呼吁。

色彩的對比與周圍的元素

Notepod舉例說明了如何調用之間的行動和其周圍的元素，可以有用吸引用戶的關注，直接把它的色彩對比。周圍的元素全是黑的，而調用操作按鈕，是一個通亮的藍色。

前景/背景顏色對比

谷溪堂將其通亮的黃色的“了解更多”調用上述操作按鈕的灰度圖像。即使有簡單的調用操作按鈕設計在頂部的復雜元素（在這種情況下，照片），它仍然是，因為顏色的選擇。

提供二次行動方案

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

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

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

變速箱也顯示了這種概念具有二次行動所需的主要行動。在這種情況下，將主要動作是為用戶購買應用程序。假如他們想嘗試一下在購買之前，那么第二所需的行動是次下載的應用程序。請注重，使它更為凸起比輔助操作中，具有較高的顏色對比度其比二次呼叫動作按鈕的背景透露表現(xiàn)主要動作。因此，可以有用地由左到右畫眼睛。

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

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

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

傳達一種緊迫感

使用勇敢，自傲，和飭令的話，可以改變用戶的感知，以這樣的體例，以說服他們，他們不應該等待更長的時間來采取行動，并采取行動，等待行動的措辭會導致罰款或錯過的機會。

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

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

推薦用戶采取行動是很容易的

通常情況下，用戶毫不猶豫地采取行動源于思想，一個行動將是困難的，昂貴的，耗時的。通過照顧這些關注，操作按鈕，您的通話可能會導致更多的轉換。

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

在茶回合應用的例子，他們告訴用戶，他們將不會收到垃圾郵件的電子郵件采取行動的訂閱他們的電子郵件服務，這是給您的電子郵件，第三方服務時，引起人們的關注。

告訴用戶什么期望

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

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

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

呼叫“動作按鈕”設計展

現(xiàn)在，我們已經(jīng)討論了一些好佳實踐，設計調用操作按鈕，讓我們來看看一些示范性的實現(xiàn)調用網(wǎng)站上的操作按鈕。在這些設計中，我們將配合從上面的技術和好佳做法，并探討它們如何幫助實現(xiàn)的設計實踐。

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

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

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

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

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

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

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

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

NCover
這些調用的操作按鈕重疊。所需的主要動作是頂部的藍色輔助所需的動作。用戶繪制的按鈕，因為大小，并使用一個藍色的色調為二次所需的動作靜音它相對于主所需的動作。請注重使用空白來創(chuàng)建三個相關的元素，可以幫助進行銷售的邏輯分組：文本，告訴用戶什么NCover，注冊呼吁采取行動，并呼吁采取行動的旅游。與此相反，請注重這組，在右邊的元素的增添之間的差額。

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

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

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

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

結帳
通過使用一個特別很是凸起的顏色相對于整體設計的操作按鈕調用，即使它上面的圖片是顯明大于按鈕的大小，但它仍然設法吸引用戶的注重。

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

代碼庫
調用，操作按鈕，告訴用戶他們可以采取行動：15天免費試用。它設法吸引用戶的注重，通過使用高對比度的顏色，在左側的圖標，以及大量的空白。

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

喚醒互動
，相對于其周圍的元素調用操作按鈕的顏色使得它彈出，即使有少量的周圍的空白。

OH！媒體
真正代表這個調用操作按鈕的頁面，因為它的位置，周圍的空白，以及-好主要的-在色彩上有所選擇。在頁面看，眼睛都直接取材采取行動的號召。

Pixelcrayons
看看如何，空格可以大大提高多的關注，這個調用操作按鈕繪制。

棒球場
的大小，這個調用動作按鈕被有用地吸引用戶的注重力。它的清晰和直接的語言告訴用戶什么期望時采取行動。

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

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

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

Kalculator
此呼吁采取行動告訴用戶什么期望：通過單擊此呼吁采取行動，他們應該預見炮擊3.99美元。使用“只”字暗示，這是一個相當不錯的交易，它可以幫助進行銷售。

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

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

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

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

其他資源呼叫“動作按鈕”

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

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

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

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

的通話動作按鈕
UX展位有一個的通話操作按鈕由一個好片。

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