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

1.顏色

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

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

2.位置

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

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

3.文字表達

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

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

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

4.尺寸問題

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

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

5.可”呼吸”的空間

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

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

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

1.Things

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

2.Wordpress e-Commerce

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

3.Skype

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

4. PB Wiki

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

5.Exceptional

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

6.PicsEngine

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

7.InCase

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

8.GoodBarry

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

9.Plan HQ

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

10.TypePad

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

11.Mozilla Firefox

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

12.37 Signals

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

13.Hambo Design

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

14.Cake PHP

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

15.Traffik

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

16.Boag World

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

17.Donor Tools

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

18.Luke Larsen

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

19.Square Space

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

20.Wu Foo

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

21.Barack Obama

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

22.Freshbooks

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

23.Crazy Egg

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

24.Web Notes

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

25.Campaign Monitor

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

26.Light CMS

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

27.Litmus

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

28.Stumble Upon

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

29.Remember The Milk

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

30.Ekklesia 360

網(wǎng)頁設(shè)計趨勢:“勾引”用戶的按鈕

原文鏈接:http://blog.bingo929.com/web-design-trends-call-to-action-signup-download-buttons.html

隨機推薦