今天彬Go將和大家一起討論網(wǎng)頁設(shè)計趨勢中很重要的環(huán)節(jié)，那就是”勾引”用戶的按鈕。所謂”勾引”用戶的按鈕，其實對于Web設(shè)計師來說，就是如何設(shè)計出一個能讓大多來訪的用戶都有點(diǎn)擊欲望的按鈕。通常這些按鈕被鏈接到下載、注冊和購買等功能。

國外設(shè)計師 Seth Godin 將按鈕比喻成香蕉，而你的用戶則會被比喻成可愛的小猴子。我們的目標(biāo)是能夠讓小猴子在3秒之內(nèi)快速找到它們想要的香蕉(也就是在用戶放棄并離開你的網(wǎng)站之前)。強(qiáng)迫你自己在設(shè)計每個網(wǎng)頁的時候都要遵循一個且僅有一個的目標(biāo)，那就是”香蕉”！讓它更大、更醒目、更美觀！

這篇文章將和大家一起討論如何設(shè)計完美”勾引”用戶點(diǎn)擊的按鈕并會為大家展示30個不錯的網(wǎng)頁按鈕設(shè)計實例。

如何設(shè)計完美”勾引”用戶點(diǎn)擊的按鈕好的按鈕設(shè)計一定會是醒目且能”勾引”用戶眼球的。以下是好的按鈕設(shè)計必不可少的5個特征:

1.顏色

顏色一定要能與平靜的頁面相比更加與眾不同，因此它要更亮而且有高對比度的顏色。

2.位置

它們應(yīng)當(dāng)”座落于”用戶期望更容易找到它們的地方。產(chǎn)品旁邊、頁頭、導(dǎo)航的頂部右側(cè)…這些都是醒目且不難找到的地方。

3.文字表達(dá)

在按鈕上使用什么文字表達(dá)給用戶是非常重要的。它應(yīng)當(dāng)簡短并切中要點(diǎn)(不羅嗦)，并以動詞開始，如:注冊、下載、創(chuàng)建、嘗試等…

如果想切實的達(dá)到”勾引”用戶點(diǎn)擊的按鈕，添加”免費(fèi)”二字的確可以起到誘惑的效果，當(dāng)然那要真的是免費(fèi)，不要誤導(dǎo)或欺騙用戶。

4.尺寸問題

如果它是你最重要的按鈕并且你希望更多的用戶點(diǎn)擊它，那么讓它更醒目些是沒有壞處的。把這個按鈕設(shè)計的比其他按鈕更大些并讓用戶在更多的地方找到并點(diǎn)擊它。

5.可”呼吸”的空間

你的按鈕不能和網(wǎng)頁中的其他元素擠在一起。它需要充足的margin(外邊距)才能更加突出，也需要更多的padding(內(nèi)邊距)才能讓文字更容易閱讀。

30個網(wǎng)頁按鈕設(shè)計實例

1.Things

2.Wordpress e-Commerce

3.Skype

4. PB Wiki

5.Exceptional

6.PicsEngine

7.InCase

8.GoodBarry

9.Plan HQ

10.TypePad

11.Mozilla Firefox

12.37 Signals

13.Hambo Design

14.Cake PHP

15.Traffik

16.Boag World

17.Donor Tools

18.Luke Larsen

19.Square Space

20.Wu Foo

21.Barack Obama

22.Freshbooks

23.Crazy Egg

24.Web Notes

25.Campaign Monitor

26.Light CMS

27.Litmus

28.Stumble Upon

29.Remember The Milk

30.Ekklesia 360

留意更新訂閱彬Go以查看前端開發(fā)/CSS框架最新教程及資源。

英文原文:Web Design Trends: Call To Action Buttons
翻譯原文:網(wǎng)頁設(shè)計趨勢之:”勾引”用戶的按鈕(暴風(fēng)彬彬)