當(dāng)前位置:首頁 >  站長 >  網(wǎng)站運(yùn)營 >  正文

按標(biāo)準(zhǔn)設(shè)計B2B行業(yè)網(wǎng)站按鈕 促進(jìn)用戶互動

 2012-01-14 12:58  來源:   我來投稿 撤稿糾錯

  域名預(yù)訂/競價,好“米”不錯過

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

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

1 使用高對比度、醒目的顏色來突出按鈕的重要性

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

 

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

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

2 使用比較大的按鈕來突出按鈕的重要性

在一個網(wǎng)頁中,一個元素相對于其周圍元素的大小表明其重要性:元素越大,它就越重要,無論是文字還是按鈕,都是同樣的道理,因?yàn)樗涯?,而這個重要性,是需要根據(jù)頁面想表達(dá)的重點(diǎn)來確定的。

 

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

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

 

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

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

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

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

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

 

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

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

 

圖(17)阿里巴巴和慧聰?shù)淖蕴峤话粹o對比

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

 

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

4 要通過按鈕上及旁邊的文字告訴用戶的期待或解釋疑問

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

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

 

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

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

 

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

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

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

 

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

5 按鈕出現(xiàn)的位置、周圍是否空白,與這個按鈕的重要性相關(guān)

按鈕放在那個位置,也是很有講究的,放的位置不同,其重要性也是不一樣的。同時周圍留有空白,也表明這個網(wǎng)站按鈕是很重要的。

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

 

圖(22) 按鈕周圍的空白比較大

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

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

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

  • 郵件營銷提高轉(zhuǎn)化率的訣竅和按鈕設(shè)計

    當(dāng)群發(fā)郵件發(fā)送過去后,公司為促成轉(zhuǎn)化,在郵件中:1、營造緊迫感:公司推出的系列產(chǎn)品讓利于消費(fèi)者,比方說8.3、在產(chǎn)品介紹完后便附上下單鏈接:在某產(chǎn)品圖文并茂的介紹后面,迅速附上下單的鏈接,消費(fèi)者只需輕輕點(diǎn)擊一下,便可進(jìn)去網(wǎng)站特定欄目,下單購買,幾乎都是一鍵式操作,非常簡單。

  • CTA實(shí)例教學(xué):怎樣設(shè)計一個訪客看了就想點(diǎn)的行為引導(dǎo)按鈕?

    CTA即CalltoAction,又叫行為引導(dǎo)按鈕,是一個網(wǎng)站的核心組成元素之一。大部分站長做網(wǎng)站不僅僅是為了給訪客提供一個學(xué)習(xí)、交流、互動的平臺,更重要的是將訪客轉(zhuǎn)化為用戶,達(dá)成某項(xiàng)他們想要的行為,比如注冊、登錄、訂閱、預(yù)約、購買等。好的行為引導(dǎo)按鈕在這一點(diǎn)上很有幫助,它有助于提高用戶的轉(zhuǎn)化率,增

    標(biāo)簽:
    按鈕設(shè)計
  • 淺析在網(wǎng)頁設(shè)計中如何讓按鈕激發(fā)用戶點(diǎn)擊欲望

    現(xiàn)在建設(shè)網(wǎng)站一個重要的核心要素就是能夠?qū)τ脩舢a(chǎn)生良好的吸引力,能夠引導(dǎo)用戶逐層深入的點(diǎn)擊網(wǎng)站,這樣才能夠有效提升用戶在網(wǎng)站上的停留時間,這樣就能夠有效的為網(wǎng)站培養(yǎng)忠誠用戶打下堅(jiān)實(shí)基礎(chǔ)。對此很多站長開始在網(wǎng)頁設(shè)計上下功夫,可是有時候?qū)τ谝恍┘?xì)節(jié)掌握不當(dāng),或者忽略了一些細(xì)節(jié),導(dǎo)致網(wǎng)站的吸引力出現(xiàn)了明顯的

  • 移動應(yīng)用設(shè)計:談導(dǎo)航欄返回按鈕的替代方案

    呼,又要夜間上新了。其實(shí)自己偶爾還會進(jìn)去關(guān)于BeForWeb里面看看將近兩年前寫的博客開篇語。當(dāng)時的動力現(xiàn)在仍在,當(dāng)時愛的那個世界現(xiàn)在仍在愛,并且越來越讓我覺得自豪;這讓我開心了些。周六晚上有在喝冰啤酒的兄弟姐妹嗎,有的話我們虛擬碰個杯吧先,周末愉快=)前

    標(biāo)簽:
    告警按鈕
    按鈕設(shè)計
  • 超鏈接和按鈕 設(shè)計中默認(rèn)樣式的強(qiáng)大威力

    默認(rèn)樣式,就是最原生態(tài)的樣式。就像大家經(jīng)常用的按鈕或者藍(lán)色有下劃線的超鏈接。本文,潛行者m將從兩個元素來討論默認(rèn)樣式在設(shè)計中的應(yīng)用。超鏈接的默認(rèn)樣式超鏈接的默認(rèn)樣式超鏈接是網(wǎng)頁中最常用最基礎(chǔ)的元素,可以說是必不可少的。我們設(shè)置超鏈接,也是希望人們

    標(biāo)簽:
    按鈕設(shè)計

熱門排行

信息推薦