我曾經(jīng)講過(guò)，設(shè)計(jì)師的分析能力遠(yuǎn)遠(yuǎn)大于設(shè)計(jì)技術(shù)本身，那分析什么呢?本研究報(bào)告認(rèn)為，用戶行為分析是設(shè)計(jì)師最應(yīng)該精通的。對(duì)于按鈕，無(wú)論是真按鈕，還是偽按鈕(偽按鈕是：僅表示這個(gè)鏈接與數(shù)據(jù)提交相關(guān)，或者就是為了突出鏈接，用按鈕表示，叫“偽按鈕”)，之所以要以按鈕的形式表示，最大的目的還是希望讓用戶知道點(diǎn)這個(gè)按鈕時(shí)可以提交數(shù)據(jù)，是可以和網(wǎng)站交互的，或者點(diǎn)了以后就可以出現(xiàn)與網(wǎng)站或用戶交互的頁(yè)面出現(xiàn)，那么評(píng)價(jià)設(shè)計(jì)成敗的標(biāo)準(zhǔn)就變成了：有需求的用戶是不是注意到、愿意去點(diǎn)這個(gè)按鈕，而不是這個(gè)按鈕本身多么漂亮。用戶會(huì)想，我為什么要點(diǎn)這個(gè)按鈕，這個(gè)按鈕很重要嗎?因?yàn)橹袊?guó)人做事，都是受利益驅(qū)動(dòng)，任何時(shí)候，設(shè)計(jì)師都要關(guān)注用戶的利益。

本小節(jié)將從按鈕的顏色、按鈕的大小、按鈕的形狀、按鈕上及旁邊的文字、放置的位置5個(gè)方面來(lái)說(shuō)明我們?cè)O(shè)計(jì)、使用按鈕的一般標(biāo)準(zhǔn)。

1 使用高對(duì)比度、醒目的顏色來(lái)突出按鈕的重要性

按鈕使用高對(duì)比度的顏色和醒目的顏色，都是為了突出按鈕的重要性，兩者很多時(shí)候是同時(shí)使用的。在大部分的時(shí)候，我們使用按鈕，都是要突出其重要性，只有少數(shù)時(shí)候可以不突出其重要性，比如作為次要的按鈕，故意而為之，如圖(13)所示。

圖(13) 中國(guó)制造網(wǎng)搜索按鈕采用對(duì)比度高的醒目黃色按鈕(截圖：2011-2-9)

如圖(13)右邊所示，有兩個(gè)按鈕，右邊一個(gè)按鈕的顏色和背景顏色基本相同，左邊的按鈕背景顏色為黃色，與四周的顏色完全不一樣，字體顏色也不一樣，并且字體是加粗的。這就表明左邊的按鈕很重要，而且還比同為按鈕的右邊按鈕更重要，點(diǎn)擊后實(shí)際也是如此。

2 使用比較大的按鈕來(lái)突出按鈕的重要性

在一個(gè)網(wǎng)頁(yè)中，一個(gè)元素相對(duì)于其周?chē)氐拇笮”砻髌渲匾裕涸卦酱螅驮街匾?，無(wú)論是文字還是按鈕，都是同樣的道理，因?yàn)樗涯浚@個(gè)重要性，是需要根據(jù)頁(yè)面想表達(dá)的重點(diǎn)來(lái)確定的。

圖(14) 阿里巴巴中國(guó)站“服裝欄目”搜索按鈕很大(截圖：2011-2-9)

如圖(14)為阿里巴巴中國(guó)站“服裝欄目”搜索按鈕，從圖可以看出，搜索按鈕非常大，與一般的門(mén)戶網(wǎng)站的搜索框都要大。是因?yàn)榘⒗锇桶妥隽?0多年了，有海量的信息，且屬于綜合B2B網(wǎng)站，任何一個(gè)用戶來(lái)到網(wǎng)站后，僅靠直接瀏覽或分類(lèi)瀏覽，找到自己需要的信息需要時(shí)間，而且比較困難。所以搜索變的非常重要，作為網(wǎng)站運(yùn)營(yíng)方，也希望采購(gòu)商通過(guò)搜索來(lái)獲得信息，才能體現(xiàn)出網(wǎng)站應(yīng)有的價(jià)值。所以大家可以看到阿里巴巴的搜索按鈕比一般的B2B行業(yè)門(mén)戶網(wǎng)站的搜索按鈕更大，如果是剛開(kāi)通的B2B細(xì)分行業(yè)網(wǎng)站，過(guò)分的突出搜索，就不對(duì)了，因?yàn)闆](méi)有多少信息可以搜索，反而把網(wǎng)站的弱點(diǎn)暴露了。設(shè)計(jì)也是和網(wǎng)站所處的實(shí)際情況相關(guān)的。

圖(15) 阿里巴巴中國(guó)站“產(chǎn)品頁(yè)面”簽訂保障合同按鈕(截圖：2011-2-9)

從圖(15)的按鈕可以看出，這些優(yōu)秀網(wǎng)站的產(chǎn)品經(jīng)理都明白，在一個(gè)頁(yè)面里要鼓動(dòng)采購(gòu)商采取行動(dòng)，簽訂合同，立即詢價(jià)，希望讓供應(yīng)商更多的獲得采購(gòu)商的信息，增加詢盤(pán)，更多的達(dá)成采購(gòu)。這些按鈕都非常大、非常顯眼，甚至從美觀的角度說(shuō)，都過(guò)了，太大了，但是從實(shí)用的角度說(shuō)，就是要這樣才能讓這個(gè)按鈕的價(jià)值最大化，所以《B2B行業(yè)門(mén)戶網(wǎng)站設(shè)計(jì)開(kāi)發(fā)實(shí)戰(zhàn)研究報(bào)告》認(rèn)為：設(shè)計(jì)師要從“打造一個(gè)產(chǎn)品”的高度來(lái)對(duì)待網(wǎng)頁(yè)每個(gè)元素的設(shè)計(jì)，而不能僅從美觀的角度出發(fā)，很多時(shí)候美觀要為“實(shí)用”犧牲。

3 按鈕的形狀要規(guī)則、突出、嚴(yán)肅，不能卡通、娛樂(lè)化、太突出或太不突出

前面的章節(jié)講過(guò)：“頁(yè)面的框架更多的是方形的、規(guī)則的”，同樣道理，網(wǎng)頁(yè)按鈕也應(yīng)該是方形的、規(guī)則的，可以有一點(diǎn)圓角，但是圓角不能太大，太大就顯得不夠嚴(yán)肅、不夠商業(yè)化。正如我在《B2B行業(yè)門(mén)戶網(wǎng)站策劃實(shí)戰(zhàn)研究報(bào)告》里講，B2B行業(yè)網(wǎng)站畢竟是面對(duì)20歲以上的已經(jīng)工作的職業(yè)人士，工作應(yīng)該是嚴(yán)肅的，不能娛樂(lè)化。

下面6個(gè)按鈕是收集各個(gè)B2B綜合網(wǎng)站和行業(yè)網(wǎng)站的登錄注冊(cè)按鈕，從這里可以看出，B2B行業(yè)網(wǎng)站的按鈕大部分都是長(zhǎng)方形，并適當(dāng)有一個(gè)小小的圓角。當(dāng)兩個(gè)按鈕放一起的時(shí)候，我們要分辨出是主要行動(dòng)還是次要行動(dòng)，最后一個(gè)按鈕是截取自阿里巴巴的，就做的比較好，用顏*分了主要行動(dòng)和次要行動(dòng)。

圖(16)各個(gè)B2B綜合網(wǎng)站和行業(yè)網(wǎng)站的登錄注冊(cè)按鈕

圖(17)是在阿里巴巴(左邊)和慧聰網(wǎng)(右邊)截取的用戶注冊(cè)按鈕，可以看到兩個(gè)網(wǎng)站的設(shè)計(jì)師水平的不同，明顯左邊的阿里巴巴要顯眼，比右邊的好，右邊太不突出，類(lèi)似的設(shè)計(jì)很多網(wǎng)站都有，我認(rèn)為都要修改。左邊和右邊其實(shí)都是直接用的系統(tǒng)按鈕，都不是設(shè)計(jì)成圖片的，不同的是，阿里巴巴的按鈕增加了CSS樣式，變的更好看、更顯眼。從這個(gè)細(xì)節(jié)就可以看出，阿里巴巴的產(chǎn)品做的更好。

圖(17)阿里巴巴和慧聰?shù)淖?cè)提交按鈕對(duì)比

圖(18)的第1、第2個(gè)按鈕，我認(rèn)為第一個(gè)太圓，顯的太不嚴(yán)肅，用在商業(yè)網(wǎng)站上不妥，第2個(gè)按鈕太突出，放在頁(yè)面上像一個(gè)補(bǔ)丁，按鈕可以大點(diǎn)，但是不能往外突出太多。第三個(gè)登錄按鈕，太大了，純粹為了使左右對(duì)齊而使用超大的按鈕，這樣會(huì)顯得頁(yè)面非常粗糙，這些案例都是選自B2B行業(yè)網(wǎng)站，本報(bào)告認(rèn)為這個(gè)設(shè)計(jì)是失敗的。

圖(18)B2B行業(yè)網(wǎng)站設(shè)計(jì)的不符合規(guī)范的按鈕

4 要通過(guò)按鈕上及旁邊的文字告訴用戶的期待或解釋疑問(wèn)

我們?cè)O(shè)計(jì)按鈕要從分析用戶行為的角度來(lái)做設(shè)計(jì)，顏色很吸引眼球、也比較大，都是為了吸引用戶更多的幾率看到這個(gè)按鈕，那看到以后的行為呢?用戶仍然會(huì)想，我為什么要點(diǎn)這個(gè)按鈕，點(diǎn)了對(duì)我有什么好處，或者說(shuō)點(diǎn)了會(huì)不會(huì)產(chǎn)生什么壞處，或者可能對(duì)按鈕上的字不理解，不熟悉而不想點(diǎn)，作為設(shè)計(jì)師，就要通過(guò)按鈕上的文字來(lái)告訴用戶，如果需要比較多的字或者說(shuō)要加注釋，就需要在按鈕的上面、下面或右邊，來(lái)引導(dǎo)用戶繼續(xù)采取下一步行動(dòng)。當(dāng)然對(duì)一些大家都很熟悉的按鈕，比如：登錄、提交等，就不必畫(huà)蛇添足去做解釋了。

如圖(19)的第一個(gè)按鈕上的文字為“免費(fèi)注冊(cè)”，是為了打消大家以為注冊(cè)會(huì)收費(fèi)，而不點(diǎn)擊，從營(yíng)銷(xiāo)的角度來(lái)說(shuō)，是打免費(fèi)牌，吸引更多人提交自己的公司信息、聯(lián)系方式，網(wǎng)站才有用戶、內(nèi)容，網(wǎng)站銷(xiāo)售人員才能有更多潛在客戶，這點(diǎn)我在《B2B行業(yè)門(mén)戶網(wǎng)站推廣實(shí)戰(zhàn)秘籍》里做了詳細(xì)闡述。第三個(gè)按鈕上的“立即登錄”是為了吸引是會(huì)員的趕快登錄，因?yàn)橹挥械卿浐?，用戶才可能進(jìn)行更多的操作，比如：發(fā)布信息、查看詢價(jià)、更深入了解網(wǎng)站等，一個(gè)網(wǎng)站每天有多少個(gè)會(huì)員登錄，與每天有多少會(huì)員注冊(cè)一樣，是作為運(yùn)營(yíng)的一個(gè)重要考核指標(biāo)的。第三個(gè)按鈕右邊的文字，是為了解決用戶可能遇到的問(wèn)題，比如當(dāng)我想點(diǎn)登錄按鈕的時(shí)候，我想起來(lái)了，密碼忘記了，在按鈕旁邊就要出現(xiàn)密碼找回的鏈接。同時(shí)可能還不是會(huì)員，這個(gè)時(shí)候就要提醒用戶，你還可以免費(fèi)注冊(cè)。

圖(19)按鈕表達(dá)的意思及提示

圖(20)有6個(gè)按鈕，都是在告訴用戶，會(huì)員可以做什么，如果你不是會(huì)員，別在猶豫了，趕快行動(dòng)吧!就好比電視購(gòu)物節(jié)目告訴您，購(gòu)買(mǎi)這個(gè)產(chǎn)品有什么好處、很多優(yōu)惠，現(xiàn)在立即拿起電話撥打某某號(hào)碼一樣。在這些鼓動(dòng)的文字上，盡量少加或不加鏈接，省去用戶點(diǎn)擊鏈接來(lái)思考。

圖(20)按鈕告訴我們可以做什么

除了可以在按鈕上加文字，還可以在按鈕上加個(gè)圖標(biāo)，往往可以讓按鈕看起來(lái)更精致，而且小圖標(biāo)往往可以起到以形表意的效果。如圖(21)第一排的4個(gè)按鈕都加了小圖標(biāo)，和文字一起，讓用戶幾乎不用思考，就知道按鈕代表的含義，點(diǎn)擊按鈕后可以做什么。

按鈕上的文字要簡(jiǎn)短、精煉，不要加很多不必要的文字在按鈕上，會(huì)增加用戶思考的時(shí)間，比如圖(21)的第5個(gè)按鈕，“點(diǎn)擊進(jìn)入”4個(gè)字完全是多余的。通常情況下：一個(gè)按鈕，結(jié)合頁(yè)面上的其他交互和信息組織，要能恰到好處的組合成一個(gè)完整的句子“我點(diǎn)擊會(huì)發(fā)生什么”，而“點(diǎn)擊進(jìn)入”4個(gè)字是在我和鼠標(biāo)之間的事，而不必要在網(wǎng)頁(yè)上出現(xiàn)。最后一個(gè)按鈕是大家常見(jiàn)的播放器的按鈕，因?yàn)榇蠹叶己苁煜ち?，電視的遙控上也是這個(gè)按鈕，所以用文字也是多余的了，直接用形狀表示，簡(jiǎn)單明了。當(dāng)然可以在鼠標(biāo)放上去顯示文字提示，用戶體驗(yàn)更好，從這個(gè)角度上來(lái)說(shuō)，也可能說(shuō)是地方太小而不能用文字來(lái)表達(dá)。

圖(21) 按鈕上加了小圖標(biāo)，一目了然

5 按鈕出現(xiàn)的位置、周?chē)欠窨瞻祝c這個(gè)按鈕的重要性相關(guān)

按鈕放在那個(gè)位置，也是很有講究的，放的位置不同，其重要性也是不一樣的。同時(shí)周?chē)粲锌瞻?，也表明這個(gè)網(wǎng)站按鈕是很重要的。

如圖(22)的2個(gè)按鈕，上下左右都有許多空白，比如第1個(gè)、第2個(gè)按鈕，離下面和上面都有很高距離，這個(gè)就是設(shè)計(jì)師故意而為之，因?yàn)槿绻粹o離上下的距離太近，就不夠突出了。就會(huì)被淹沒(méi)在文字中，適當(dāng)?shù)脑谥車(chē)舭?，就是好的突出方式之一?/p>

圖(22) 按鈕周?chē)目瞻妆容^大

這個(gè)小節(jié)講到這里，就講完了，雖然一個(gè)小按鈕，但是也大有學(xué)問(wèn)，需要管理層、產(chǎn)品經(jīng)理、設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站時(shí)認(rèn)真去揣摩，只有注重產(chǎn)品細(xì)節(jié)，才能使用戶有好的體驗(yàn)，才能打造出成功的產(chǎn)品。

本文原創(chuàng)作者：李學(xué)江，交流QQ：1580658565。