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

本小節(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)戶(hù)網(wǎng)站的搜索框都要大。是因?yàn)榘⒗锇桶妥隽?0多年了，有海量的信息，且屬于綜合B2B網(wǎng)站，任何一個(gè)用戶(hù)來(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)戶(hù)網(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)，簽訂合同，立即詢(xún)價(jià)，希望讓供應(yīng)商更多的獲得采購(gòu)商的信息，增加詢(xún)盤(pán)，更多的達(dá)成采購(gòu)。這些按鈕都非常大、非常顯眼，甚至從美觀的角度說(shuō)，都過(guò)了，太大了，但是從實(shí)用的角度說(shuō)，就是要這樣才能讓這個(gè)按鈕的價(jià)值最大化，所以我認(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è)化。正如首頁(yè)所講，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è)按鈕是截取自阿里巴巴的，就做的比較好，用顏色區(qū)分了主要行動(dòng)和次要行動(dòng)。

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

圖（17）是在阿里巴巴（左邊）和慧聰網(wǎng)（右邊）截取的用戶(hù)注冊(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ì)是失敗的。

標(biāo)簽： B2B行業(yè)網(wǎng)站設(shè)計(jì) B2B行業(yè)網(wǎng)站按鈕 用戶(hù)體驗(yàn) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。