注重細(xì)節(jié)設(shè)計：動作按鈕，沒你想的那么簡單

動作按鈕?不就是一個按鈕加兩文字么?這有什么好說的·····

　　如果你還這么認(rèn)為，那就大錯特錯了。一個小小按鈕，看似簡單，里面卻有大大的學(xué)問。

　　下面是我總結(jié)的一點(diǎn)見解，希望拋磚引玉，給大家一點(diǎn)啟示。

　　按鈕分為兩個部分：按鈕文字 按鈕形狀

　　先說說按鈕文字的設(shè)計：

1 用文字創(chuàng)造出一種緊迫感

　　這主要適用在購物網(wǎng)站，使用一種緊迫感的詞語更可能讓用戶采取行動。在按鈕上加“現(xiàn)在””立即“ “馬上”等文字，能大大提升按鈕的轉(zhuǎn)化率。這些文字能給用戶暗示和感知，如果繼續(xù)等待，很有可能錯過這次大好的機(jī)會。

　　不信?可以試一試。

　　很多購物網(wǎng)站都使用了這一招

　　拋個小小問題給大家討論一下：

　　如果整個頁面都是立即購買 立即搶購 立即秒殺，那還真的會有作用嗎?

　　例如這個頁面，此時立即兩個字真的會對用戶起到作用嗎?

　　個人觀點(diǎn)：“立即”“ 馬上”“ 限時”等詞語是非常好，但不要濫用。只有在最核心的業(yè)務(wù)中用到，才能對轉(zhuǎn)化率真正起到作用。

　　如果滿屏滿屏都是立即立即，那讓用戶立即去哪呢?

2 用動詞開始一個按鈕文字

　　行動按鈕一般要以一個動詞開始，否則他就不是一個召喚行為的按鈕。

　　———–David Hamill

　　行動按鈕使用動詞，會讓用戶產(chǎn)生馬上去行動的心里暗示，同時動詞也帶有指向性性，告訴下一步用戶該做什么。

　　這個理論看似簡單，真正使用時卻會經(jīng)常出錯。

　　正面案例：

　　財付通會員，在任務(wù)介紹中，加了一個GO做為按鈕的文案。使得加了GO的按鈕比其他任務(wù)的點(diǎn)擊量大很多，是其他任務(wù)點(diǎn)擊量的三倍以上。不難看出一個小小文字的巨大魔力了吧。

　　反面案例：

　　這是我在做財付通旅行時，特價機(jī)票的一個介紹模塊。按鈕的文字寫的是詳情，詳情不是動詞，是一個名詞。對用戶來說詳情沒有任何的動作指向性，所以這無疑是一個失敗的例子。那么，改成什么會更加貼切一點(diǎn)呢?

　　普通一點(diǎn)：改成立即查看是不是好一點(diǎn)?

　　或者更大膽一點(diǎn)，改成猛擊，是不是更好?

3 保留人情味，讓按鈕看上去更加有趣

　　不要讓你的按鈕看上去干巴巴的，千篇一律。如果可以，盡量讓你的按鈕看上去更加有意思吧。有些情況，甚至可以放棄我之前說的那些規(guī)則。

　　Google的“手氣不錯”按鈕，如果按照前兩天規(guī)則來說，一定是一個非常不合格的按鈕文案。但我卻覺得它非常有創(chuàng)意，讓用戶在操作時，能感受到那么一點(diǎn)樂趣。

　　還有亞馬遜的注冊按鈕，它沒有和其他網(wǎng)頁一樣，干巴巴的放注冊兩字。新用戶，從這里開始。有一種將客人請到家中的感覺，這種感覺讓用戶感覺非常體貼。

　　這是國外的一個買產(chǎn)品網(wǎng)站，它的按鈕也不是千篇一律的BUY，而是使用了四個不同的動詞?！發(fā)et’go” ” get me started” ” I’m all in” ”bring it on”。

　　上面是對按鈕文字的見解，接下來說說按鈕的形狀

1 使用適當(dāng)?shù)闹甘緢D形。

　　一個按鈕上的箭頭啟示，直觀地告訴用戶，單擊該按鈕將執(zhí)行相應(yīng)的操作，帶他們到另一個頁面以從事一項任務(wù)。很多按鈕文字上無法描述的語言，使用指示圖形后，就非常直觀了。

　　看起來有些不好理解，看個案例，你就明白了。

　　這是我在做財付通機(jī)票時，訂機(jī)票的一個詳情頁。

　　財付通機(jī)票,選擇航班后，會出現(xiàn)各個供貨商的機(jī)票信息。但選擇按鈕上沒有任何圖形指示，用戶不知道點(diǎn)擊完選擇按鈕后出現(xiàn)的選擇框完全沒有預(yù)期。預(yù)訂按鈕上也沒有圖形指示，不知道點(diǎn)完選擇后，是跳到新頁面還是如何。

　　淘寶在選擇和預(yù)訂按鈕加了一個向下和向右的箭頭，指向性就明確多了。

2 按鈕的大小與留白

　　根據(jù)費(fèi)茨定律，點(diǎn)擊區(qū)域越大，點(diǎn)擊目標(biāo)所需的時間越短，用戶的鼠標(biāo)能輕松觸達(dá)。所以，如果按鈕非常重要，我們可以加大他們大小。

　　但按鈕不是越大越好，一個小按鈕，把它放大10%，它的可用性會顯著提升，但如果你將一個本來就很大的按鈕再增加10%，它和可用性之間就不成正比了。

　　如果想突出按鈕，可以將按鈕周圍留白多一點(diǎn)。

　　這個頁面加入購物車按鈕，周圍包圍了無數(shù)其他元素，所得加入購物車的按鈕變得非常不明顯。這是一個反例，將按鈕放得太小太擠，會直接導(dǎo)致用戶購買的轉(zhuǎn)換率下降。

總結(jié)：

　　現(xiàn)在大家恍然大悟吧，行動按鈕雖小，但在頁面中起到了巨大的作用。這是用戶在瀏覽完你的頁面，最后采不采取行動最致命的關(guān)鍵點(diǎn)。如果按鈕設(shè)計的讓用戶眼前一亮，他就會毫不猶豫的掉進(jìn)你設(shè)計的“陷阱”中。如果設(shè)計的平淡無奇，他也許在點(diǎn)按鈕的這一刻就放棄行動。那你之前做的一切努力，都白費(fèi)了。

　　所以設(shè)計師在考慮按鈕時，應(yīng)根據(jù)按鈕的使用場景，從按鈕的文字和形狀上，多考慮一些，再多考慮一些。

名稱欄目：注重細(xì)節(jié)設(shè)計：動作按鈕，沒你想的那么簡單
文章來源：http://www.muchs.cn/news5/168255.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、關(guān)鍵詞優(yōu)化、建站公司、靜態(tài)網(wǎng)站、小程序開發(fā)、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)