用網頁按鈕形式提高網頁轉換率
標簽：
電商
2017.03.30
想xiang像xiang你ni在zai網wang路lu商shang店dian上shang看kan到dao了le喜xi歡huan的de商shang品pin，卻que因yin為wei網wang頁ye上shang沒mei有you購gou買mai按an鈕niu，隻zhi好hao帶dai著zhe無wu奈nai又you不bu滿man的de情qing緒xu，投tou向xiang其qi他ta網wang站zhan的de懷huai抱bao。許xu多duo電dian商shang業ye者zhe的de網wang站zhan雖sui然ran成cheng功gong吸xi引yin大da批pi流liu量liang，但dan成cheng交jiao率lv卻que不bu高gao，為wei什shen麼me？很hen多duo時shi候hou就jiu是shi少shao了le有you效xiao的de支zhi付fu按an鈕niu(Call to Action, CTA)。
不論是下載檔案、訂(ding)購(gou)商(shang)品(pin)，或(huo)導(dao)引(yin)到(dao)其(qi)他(ta)網(wang)頁(ye)，隻(zhi)要(yao)一(yi)個(ge)按(an)鈕(niu)，就(jiu)能(neng)讓(rang)消(xiao)費(fei)者(zhe)完(wan)成(cheng)你(ni)期(qi)望(wang)的(de)動(dong)作(zuo)。當(dang)消(xiao)費(fei)者(zhe)來(lai)到(dao)門(men)口(kou)，按(an)鈕(niu)就(jiu)是(shi)關(guan)鍵(jian)的(de)臨(lin)門(men)一(yi)腳(jiao)。按(an)鈕(niu)的(de)設(she)計(ji)沒(mei)有(you)規(gui)定(ding)的(de)標(biao)準(zhun)，最(zui)好(hao)能(neng)配(pei)合(he)網(wang)站(zhan)內(nei)容(rong)與(yu)整(zheng)體(ti)設(she)計(ji)，不(bu)過(guo)電(dian)子(zi)商(shang)務(wu)資(zi)訊(xun)網(wang)站(zhan) Econsultancy 和 Shopify 提供了一些重要的基本原則。
強烈對比的顏色
使用對比色或明亮顏色（如下圖），讓按鈕跳脫背景色。由於不同色彩有不同聯想，例如紅色會製造緊張感、藍色讓人冷靜，所以色彩的運用也須考量其關聯性，並與網頁色彩搭配。記住，吸睛不代表使用誇張的色彩和幹擾閱讀的動畫。
資料來源：Shopify
具動作性的用詞
在按鈕中使用簡單明了的動詞，讓消費者明確知道點這個鏈接的作用。最常見的包括「購買」、「加到購物車」或「下載」等用語。記住，簡單明了就夠了。
一眼就看到的大小
按鈕要多大才算夠看？ Econsultancy 認ren為wei愈yu大da愈yu好hao，不bu過guo最zui好hao還hai是shi搭da配pei頁ye麵mian設she計ji，才cai不bu會hui壞huai了le整zheng個ge畫hua麵mian協xie調tiao度du。不bu過guo也ye有you例li外wai情qing況kuang，必bi要yao時shi即ji使shi多duo占zhan些xie版ban麵mian也ye沒mei關guan係xi。瞧qiao瞧qiao下xia圖tu Firefox 的按鈕，是不是不去看到都不行？
資料來源：Econsultancy
放在顯眼的位置
renrendouzhidaoanniuyinggaifangzaixianyandedifang，dannalicaigouxianyanne？jiagexiafanghuochanpinqingdanyoubianshizuichangjiandeweizhi。youyuxiaofeizheyijingxiguanzaigudingweizhikandaoanniu，suoyibuyaoweilebiaoxinliyierbaanniubaizaiqiguaidedifang，yimiancongmingfanbeicongmingwu。
當頁麵內容很繁雜時，即使按鈕的設計再好，也可能被內容淹沒。在按鈕周圍放些留白可以改善這個問題。
可以的話，盡量讓消費者不須下拉網頁就能獲得必要資訊，方便使用者直接點旁邊的按鈕。如果網頁內容又多又長，可以在網頁上、下方都置入按鈕。千萬別讓消費者為了一個按鈕拉來拉去。
突顯按鈕的重要性
網頁上有多個不同用途的按鈕時，例如「立即購買」、「下載試用版」等，可以依按鈕重要性來設計，以突顯主要與次要的按鈕。例如 AVG 使用亮橘色呈現最重要的「立即購買」鈕，跟其他按鈕做區隔（下圖）。消費者不僅能一眼就看到，還能持續保持注意力。
資料來源：Econsultancy
製造急迫性
所謂物以稀為貴，「限時搶購」、「庫存有限」或「立即下單即享免運費服務」等文字會挑起消費者的購買欲。 ConversionXL 研究發現，營造急迫性可以讓成交率提升332%。將這類型文案搭配上述設計的按鈕，將會有意想不到的效果。
資料來源：Shopify
適用各種裝置
在多螢時代，網絡營銷必須通盤考量各種平台。因此，不論是pc版或移動版網頁上的按鈕，都必須一樣醒目、好操作。英國保險公司 Direct Line 的 iPad 網頁，就讓按鈕以平板裝置消費者習慣的滑動方式來運作（如下圖）。
資料來源：Econsultancy
看似微不足道的按鈕，若能掌握上述設計原則，把使用者介麵 (UI) 最優化，將能把成交率發揮最大化效果，因此每一個按鈕都值得被細心對待。
