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

我們?nèi)绾尾拍芙⒂行У恼{(diào)用操作按鈕吸引用戶的注意力，吸引他們點擊？我們將在這篇文章中，通過分享一些有效的設(shè)計技術(shù)，探索一些例子來回答這個問題。

?
???????? 最佳實踐有效的呼叫“動作按鈕”

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

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

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

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

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

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

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

繪制用戶注意突出位置

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

放置在一個杰出的面積

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

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

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

安置在一個布局的中心

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

使用空格從其他元素中分離呼叫的行動

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

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

IconDock如何有效的足夠的空白。即使是一個小的和顯然的調(diào)用操作按鈕，但它仍然突出，因為在其相鄰的元素之間的空間。

不同量的空白來表示邏輯連接

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

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

使用高對比的顏色

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

色彩的對比與周圍的元素

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

前景/背景顏色對比

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

提供二次行動方案

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

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

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

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

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

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

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

傳達一種緊迫感

使用大膽，自信，和命令的話，可以改變用戶的感知，以這樣的方式，以說服他們，他們不應(yīng)該等待更長的時間來采取行動，并采取行動，等待行動的措辭會導(dǎo)致罰款或錯過的機會。

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

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

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

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

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

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

告訴用戶什么期望

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

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

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

呼叫“動作按鈕”設(shè)計展

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

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

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

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

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

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

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

wufoo
Wufoo提供兩個操作，用戶可以采取在水平布置的方式，所需的操作與主左方。按鍵很大，非常辛苦錯過，但他們卻是不礙眼的整體設(shè)計。

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

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

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

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

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

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

結(jié)帳
通過使用一個非常突出的顏色相對于整體設(shè)計的操作按鈕調(diào)用，即使它上面的圖片是明顯大于按鈕的大小，但它仍然設(shè)法吸引用戶的注意。

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

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

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

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

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

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

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

每月一個主題
調(diào)用行動小組將主要在中間的替代行動所需的操作。通過選擇一個非常突出的顏色所需的主要行動，隨著更大的區(qū)域，它管理把它上面的重要性的順序相比，輔助操作。

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

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

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

網(wǎng)頁設(shè)計海灘
下面是一組調(diào)用兩種不同顏色的操作按鈕。更加突出的一個，“報價”表明，它是所需的主要行動。

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

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

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

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

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

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

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

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

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

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

本文作者來自北京傳誠信，轉(zhuǎn)載請注明出處：北京傳誠信（www.nainiuapp.com）

選擇北京網(wǎng)站建設(shè)公司-傳誠信，優(yōu)質(zhì)服務(wù)，絕對不容錯過 ！

?