DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 如何設計完美的行為引導按鈕
如何設計完美的行為引導按鈕
編輯:關於網頁技巧     

網頁制作Poluoluo文章簡介:本文討論如果設計完美的“行為引導”按鈕,並展示30個比較棒的行為引導按鈕設計。

行為引導按鈕是你,作為網站設計師,希望你的用戶點擊的按鈕。它們通常是一個下載、注冊或出售的鏈接。

Seth Godin (The Big Red Fez)稱這類按鈕為香蕉,而你的用戶就是那些猴子。目標是,猴子能在3秒鐘內找到香蕉(在他們放棄和離開以前)。“強迫自己設計的每一個網頁,只有一個主要目標。這就是香蕉。把它做的大些,把它做成藍色(或紅色) ,讓他醒目”。

本文討論如果設計完美的“行為引導”按鈕,並展示30個比較棒的行為引導按鈕設計

如何設計完美的行為引導按鈕

你的行為引導按鈕必須是醒目的,而且突然出現在用戶的眼前。這裡是5個典型的比較棒的行為引導按鈕。

1. 色彩

按鈕的顏色應該從頁面的其它部分中突出出來,因此通常是一個比較鮮艷的高對比度的色彩。

Colour
2. 位置

它應該放到用戶期望能容易找到的地方。文件上方、產品內部、頁面的頭部或者是頂部右側的導航。它應該是醒目的,不難尋找的。

Location
3. 語言

你所使用的與你的用戶溝通的語言很重要。它應該是比較短的,扼要(不羅嗦),而且應該由行為動詞開頭,比如 注冊、下載、創建、試一下等等。

同時給用戶一個點擊行為引導按鈕的理由,如“免費”對用戶來說是排名第一的誘惑。

Language
4. 大小問題

為了使它醒目,因為它是你最最重要的按鈕,你想讓你的用戶點擊它,把它做的比其他按鈕些,給用戶足夠大的地方來點擊它。

Size
5.呼吸空間

你的按鈕不能與其他元素挨的太緊,不能看起來擁擠。它需要足夠的 margins,這樣他就可以“鶴立雞群”,文字也需要足夠的padding ,這樣它才易讀。

Room to breathe

網頁制作Poluoluo文章簡介:本文討論如果設計完美的“行為引導”按鈕,並展示30個比較棒的行為引導按鈕設計。

比較棒的行為引導按鈕展示

1. Things
Things
2. Wordpress e-Commerce
Wordpress e-Commerce
3. Skype
CM Capture 3.png
4. PB Wiki
PB Wiki
5. Exceptional
Exceptional
6. PicsEngine
PicsEngine
7. InCase
InCase
8. GoodBarry
GoodBarry
9. Plan HQ
Plan HQ
10. TypePad
TypePad
11. Mozilla Firefox
Mozilla Firefox
12. 37 Signals
37 Signals
13. Hambo Design
Hambo Design
14. Cake PHP
Cake PHP
15. Traffik
Traffik
16. Boag World
Boag World
17. Donor Tools
Donor Tools
18. Luke Larsen
Luke Larsen
19. Square Space
Square Space
20. Wu Foo
Wu Foo
21. Barack Obama
Barack Obama
22. Freshbooks
Freshbooks
23. Crazy Egg
Crazy Egg
24. Web Notes
Web Notes
25. Campaign Monitor
Campaign Monitor
26. Light CMS
CM Capture 26.png
27. Litmus
Light CMS
28. Stumble Upon
Stumble Upon
29. Remember The Milk
Remember The Milk
30. Ekklesia 360
Ekklesia 360

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved