(樂購網(wǎng)專欄 作者：李學(xué)江)本人曾經(jīng)講過，設(shè)計(jì)師的分析能力遠(yuǎn)遠(yuǎn)大于設(shè)計(jì)技術(shù)本身，那分析什么呢?本研究報(bào)告認(rèn)為，用戶行為分析是設(shè)計(jì)師最應(yīng)該精通的。對(duì)于按鈕，無論是真按鈕，還是偽按鈕(偽按鈕是：僅表示這個(gè)鏈接與數(shù)據(jù)提交相關(guān)，或者就是為了突出鏈接，用按鈕表示，叫“偽按鈕”)，之所以要以按鈕的形式表示，最大的目的還是希望讓用戶知道點(diǎn)這個(gè)按鈕時(shí)可以提交數(shù)據(jù)，是可以和網(wǎng)站交互的，或者點(diǎn)了以后就可以出現(xiàn)與網(wǎng)站或用戶交互的頁面出現(xiàn)，那么評(píng)價(jià)設(shè)計(jì)成敗的標(biāo)準(zhǔn)就變成了：有需求的用戶是不是注意到、愿意去點(diǎn)這個(gè)按鈕，而不是這個(gè)按鈕本身多么漂亮。用戶會(huì)想，我為什么要點(diǎn)這個(gè)按鈕，這個(gè)按鈕很重要嗎?因?yàn)橹袊俗鍪拢际鞘芾骝?qū)動(dòng)，任何時(shí)候，設(shè)計(jì)師都要關(guān)注用戶的利益。
本小節(jié)將從按鈕的顏色、按鈕的大小、按鈕的形狀、按鈕上及旁邊的文字、放置的位置5個(gè)方面來說明我們?cè)O(shè)計(jì)、使用按鈕的一般標(biāo)準(zhǔn)。
1 使用高對(duì)比度、醒目的顏色來突出按鈕的重要性
按鈕使用高對(duì)比度的顏色和醒目的顏色，都是為了突出按鈕的重要性，兩者很多時(shí)候是同時(shí)使用的。在大部分的時(shí)候，我們使用按鈕，都是要突出其重要性，只有少數(shù)時(shí)候可以不突出其重要性，比如作為次要的按鈕，故意而為之，如圖(13)所示。
圖(13) 中國制造網(wǎng)搜索按鈕采用對(duì)比度高的醒目黃色按鈕(截圖：2011-2-9)
如圖(13)右邊所示，有兩個(gè)按鈕，右邊一個(gè)按鈕的顏色和背景顏色基本相同，左邊的按鈕背景顏色為黃色，與四周的顏色完全不一樣，字體顏色也不一樣，并且字體是加粗的。這就表明左邊的按鈕很重要，而且還比同為按鈕的右邊按鈕更重要，點(diǎn)擊后實(shí)際也是如此。
2 使用比較大的按鈕來突出按鈕的重要性
在一個(gè)網(wǎng)頁中，一個(gè)元素相對(duì)于其周圍元素的大小表明其重要性：元素越大，它就越重要，無論是文字還是按鈕，都是同樣的道理，因?yàn)樗涯�，而這個(gè)重要性，是需要根據(jù)頁面想表達(dá)的重點(diǎn)來確定的。
圖(14) 阿里巴巴中國站“服裝欄目”搜索按鈕很大(截圖：2011-2-9)
如圖(14)為阿里巴巴中國站“服裝欄目”搜索按鈕，從圖可以看出，搜索按鈕非常大，與一般的門戶網(wǎng)站的搜索框都要大。是因?yàn)榘⒗锇桶妥隽?0多年了，有海量的信息，且屬于綜合B2B網(wǎng)站，任何一個(gè)用戶來到網(wǎng)站后，僅靠直接瀏覽或分類瀏覽，找到自己需要的信息需要時(shí)間，而且比較困難。所以搜索變的非常重要，作為網(wǎng)站運(yùn)營方，也希望采購商通過搜索來獲得信息，才能體現(xiàn)出網(wǎng)站應(yīng)有的價(jià)值。所以大家可以看到阿里巴巴的搜索按鈕比一般的B2B行業(yè)門戶網(wǎng)站的搜索按鈕更大，如果是剛開通的B2B細(xì)分行業(yè)網(wǎng)站，過分的突出搜索，就不對(duì)了，因?yàn)闆]有多少信息可以搜索，反而把網(wǎng)站的弱點(diǎn)暴露了。設(shè)計(jì)也是和網(wǎng)站所處的實(shí)際情況相關(guān)的。
圖(15) 阿里巴巴中國站“產(chǎn)品頁面”簽訂保障合同按鈕(截圖：2011-2-9)
從圖(15)的按鈕可以看出，這些優(yōu)秀網(wǎng)站的產(chǎn)品經(jīng)理都明白，在一個(gè)頁面里要鼓動(dòng)采購商采取行動(dòng)，簽訂合同，立即詢價(jià)，希望讓供應(yīng)商更多的獲得采購商的信息，增加詢盤，更多的達(dá)成采購。這些按鈕都非常大、非常顯眼，甚至從美觀的角度說，都過了，太大了，但是從實(shí)用的角度說，就是要這樣才能讓這個(gè)按鈕的價(jià)值最大化，所以《B2B行業(yè)門戶網(wǎng)站設(shè)計(jì)開發(fā)實(shí)戰(zhàn)研究報(bào)告》認(rèn)為：設(shè)計(jì)師要從“打造一個(gè)產(chǎn)品”的高度來對(duì)待網(wǎng)頁每個(gè)元素的設(shè)計(jì)，而不能僅從美觀的角度出發(fā)，很多時(shí)候美觀要為“實(shí)用”犧牲。
3 按鈕的形狀要規(guī)則、突出、嚴(yán)肅，不能卡通、娛樂化、太突出或太不突出
前面的章節(jié)講過：“頁面的框架更多的是方形的、規(guī)則的”，同樣道理，網(wǎng)頁按鈕也應(yīng)該是方形的、規(guī)則的，可以有一點(diǎn)圓角，但是圓角不能太大，太大就顯得不夠嚴(yán)肅、不夠商業(yè)化。正如我在《B2B行業(yè)門戶網(wǎng)站策劃實(shí)戰(zhàn)研究報(bào)告》里講，B2B行業(yè)網(wǎng)站畢竟是面對(duì)20歲以上的已經(jīng)工作的職業(yè)人士，工作應(yīng)該是嚴(yán)肅的，不能娛樂化。
下面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è)按鈕是截取自阿里巴巴的，就做的比較好，用顏色區(qū)分了主要行動(dòng)和次要行動(dòng)。
圖(16)各個(gè)B2B綜合網(wǎng)站和行業(yè)網(wǎng)站的登錄注冊(cè)按鈕
圖(17)是在阿里巴巴(左邊)和慧聰網(wǎng)(右邊)截取的用戶注冊(cè)按鈕，可以看到兩個(gè)網(wǎng)站的設(shè)計(jì)師水平的不同，明顯左邊的阿里巴巴要顯眼，比右邊的好，右邊太不突出，類似的設(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è)按鈕太突出，放在頁面上像一個(gè)補(bǔ)丁，按鈕可以大點(diǎn)，但是不能往外突出太多。第三個(gè)登錄按鈕，太大了，純粹為了使左右對(duì)齊而使用超大的按鈕，這樣會(huì)顯得頁面非常粗糙，這些案例都是選自B2B行業(yè)網(wǎng)站，本報(bào)告認(rèn)為這個(gè)設(shè)計(jì)是失敗的。
推薦閱讀
(速途網(wǎng)專欄 作者：黃嘉榔)2012年9月9日，第九屆網(wǎng)商大會(huì)上落幕，會(huì)上眾多嘉賓演講都發(fā)人深思以及對(duì)未來的構(gòu)想，筆者特意收集了一下阿里巴巴董事局主席馬云在落幕日的演講稿。通過不同的角度看到了馬云的演講的范圍，>>>詳細(xì)閱讀
本文標(biāo)題：按標(biāo)準(zhǔn)設(shè)計(jì)B2B行業(yè)網(wǎng)站按鈕，促進(jìn)用戶互動(dòng)
地址：http://www.brh9h.cn/a/b2b/20120910/84349.html
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示