動作按鈕?不就是一個按鈕加兩文字么?這有什么好說的·····
如果你還這么認(rèn)為,那就大錯特錯了。一個小小按鈕,看似簡單,里面卻有大大的學(xué)問。
下面是我總結(jié)的一點(diǎn)見解,希望拋磚引玉,給大家一點(diǎn)啟示。
按鈕分為兩個部分:按鈕文字???按鈕形狀
先說說按鈕文字的設(shè)計(jì):
1?用文字創(chuàng)造出一種緊迫感
這主要適用在購物網(wǎng)站,使用一種緊迫感的詞語更可能讓用戶采取行動。在按鈕上加“現(xiàn)在””立即“?“馬上”等文字,能大大提升按鈕的轉(zhuǎn)化率。這些文字能給用戶暗示和感知,如果繼續(xù)等待,很有可能錯過這次大好的機(jī)會。
不信?可以試一試。
![1](https://image.woshipm.com/wp-files/2014/01/163cf0070b64a902382be1abefd56333.png)
![2](https://image.woshipm.com/wp-files/2014/01/1e16d1a7eabf650bd23486b8e86ba49f.png)
很多購物網(wǎng)站都使用了這一招
拋個小小問題給大家討論一下:
如果整個頁面都是立即購買?立即搶購?立即秒殺,那還真的會有作用嗎?
![3](https://image.woshipm.com/wp-files/2014/01/17e8792250acca91325c8af00235fbe2.png)
例如這個頁面,此時立即兩個字真的會對用戶起到作用嗎?
個人觀點(diǎn):“立即”“?馬上”“?限時”等詞語是非常好,但不要濫用。只有在最核心的業(yè)務(wù)中用到,才能對轉(zhuǎn)化率真正起到作用。
如果滿屏滿屏都是立即立即,那讓用戶立即去哪呢?
2?用動詞開始一個按鈕文字
行動按鈕一般要以一個動詞開始,否則他就不是一個召喚行為的按鈕。
———–David?Hamill
行動按鈕使用動詞,會讓用戶產(chǎn)生馬上去行動的心里暗示,同時動詞也帶有指向性性,告訴下一步用戶該做什么。
這個理論看似簡單,真正使用時卻會經(jīng)常出錯。
正面案例:
![4](https://image.woshipm.com/wp-files/2014/01/0c00ea2d58f920f8cefb23cea16f2936.png)
財(cái)付通會員,在任務(wù)介紹中,加了一個GO做為按鈕的文案。使得加了GO的按鈕比其他任務(wù)的點(diǎn)擊量大很多,是其他任務(wù)點(diǎn)擊量的三倍以上。不難看出一個小小文字的巨大魔力了吧。
反面案例:
![5](https://image.woshipm.com/wp-files/2014/01/37a563bbd8b2e2bfc0177e1df0f61170.png)
這是我在做財(cái)付通旅行時,特價(jià)機(jī)票的一個介紹模塊。按鈕的文字寫的是詳情,詳情不是動詞,是一個名詞。對用戶來說詳情沒有任何的動作指向性,所以這無疑是一個失敗的例子。那么,改成什么會更加貼切一點(diǎn)呢?
![6](https://image.woshipm.com/wp-files/2014/01/28de87c3221ef0fae04efbff2c579a69.png)
![7](https://image.woshipm.com/wp-files/2014/01/c89232cc8fdf33f9810ccf6a22eeddc0.png)
普通一點(diǎn):改成立即查看是不是好一點(diǎn)?
或者更大膽一點(diǎn),改成猛擊,是不是更好?
3?保留人情味,讓按鈕看上去更加有趣
不要讓你的按鈕看上去干巴巴的,千篇一律。如果可以,盡量讓你的按鈕看上去更加有意思吧。有些情況,甚至可以放棄我之前說的那些規(guī)則。
![8](https://image.woshipm.com/wp-files/2014/01/c027c59aa8ec5d5df4a1c091029e6be5.png)
Google的“手氣不錯”按鈕,如果按照前兩天規(guī)則來說,一定是一個非常不合格的按鈕文案。但我卻覺得它非常有創(chuàng)意,讓用戶在操作時,能感受到那么一點(diǎn)樂趣。
還有亞馬遜的注冊按鈕,它沒有和其他網(wǎng)頁一樣,干巴巴的放注冊兩字。新用戶,從這里開始。有一種將客人請到家中的感覺,這種感覺讓用戶感覺非常體貼。
![9](https://image.woshipm.com/wp-files/2014/01/44e0314714c5b3075304e145c79168cd.png)
這是國外的一個買產(chǎn)品網(wǎng)站,它的按鈕也不是千篇一律的BUY,而是使用了四個不同的動詞。“l(fā)et’go”?”?get?me?started”??”?I’m?all?in”???”bring?it?on”。
![10](https://image.woshipm.com/wp-files/2014/01/64393ad6b00bb202827d3c6c9d56a2e4.png)
上面是對按鈕文字的見解,接下來說說按鈕的形狀
1?使用適當(dāng)?shù)闹甘緢D形。
一個按鈕上的箭頭啟示,直觀地告訴用戶,單擊該按鈕將執(zhí)行相應(yīng)的操作,帶他們到另一個頁面以從事一項(xiàng)任務(wù)。很多按鈕文字上無法描述的語言,使用指示圖形后,就非常直觀了。
看起來有些不好理解,看個案例,你就明白了。
這是我在做財(cái)付通機(jī)票時,訂機(jī)票的一個詳情頁。
![12](https://image.woshipm.com/wp-files/2014/01/1696ed0b98b88fa657675ce16fe3750a.png)
財(cái)付通機(jī)票,選擇航班后,會出現(xiàn)各個供貨商的機(jī)票信息。但選擇按鈕上沒有任何圖形指示,用戶不知道點(diǎn)擊完選擇按鈕后出現(xiàn)的選擇框完全沒有預(yù)期。預(yù)訂按鈕上也沒有圖形指示,不知道點(diǎn)完選擇后,是跳到新頁面還是如何。
淘寶在選擇和預(yù)訂按鈕加了一個向下和向右的箭頭,指向性就明確多了。
![13](https://image.woshipm.com/wp-files/2014/01/243863c1409c948cb163d323116beab6.png)
2?按鈕的大小與留白
根據(jù)費(fèi)茨定律,點(diǎn)擊區(qū)域越大,點(diǎn)擊目標(biāo)所需的時間越短,用戶的鼠標(biāo)能輕松觸達(dá)。所以,如果按鈕非常重要,我們可以加大他們大小。
但按鈕不是越大越好,一個小按鈕,把它放大10%,它的可用性會顯著提升,但如果你將一個本來就很大的按鈕再增加10%,它和可用性之間就不成正比了。
![14](https://image.woshipm.com/wp-files/2014/01/1fac2970cfd4ee10b55c624270c4b7e0.png)
如果想突出按鈕,可以將按鈕周圍留白多一點(diǎn)。
![15](https://image.woshipm.com/wp-files/2014/01/0766aaeb2ca6a0ea2cec9e1aa80be05a.png)
這個頁面加入購物車按鈕,周圍包圍了無數(shù)其他元素,所得加入購物車的按鈕變得非常不明顯。這是一個反例,將按鈕放得太小太擠,會直接導(dǎo)致用戶購買的轉(zhuǎn)換率下降。
總結(jié):
現(xiàn)在大家恍然大悟吧,行動按鈕雖小,但在頁面中起到了巨大的作用。這是用戶在瀏覽完你的頁面,最后采不采取行動最致命的關(guān)鍵點(diǎn)。如果按鈕設(shè)計(jì)的讓用戶眼前一亮,他就會毫不猶豫的掉進(jìn)你設(shè)計(jì)的“陷阱”中。如果設(shè)計(jì)的平淡無奇,他也許在點(diǎn)按鈕的這一刻就放棄行動。那你之前做的一切努力,都白費(fèi)了。
所以設(shè)計(jì)師在考慮按鈕時,應(yīng)根據(jù)按鈕的使用場景,從按鈕的文字和形狀上,多考慮一些,再多考慮一些。
via:盒子UI