按標準設計B2B行業網站按鈕 促進使用者互動

　　本人曾經講過，設計師的分析能力遠遠大於設計技術本身，那分析什麼呢?本研究報告認為，使用者行為分析是設計師最應該精通的。對於按鈕，無論是真按鈕，還是偽按鈕(偽按鈕是：僅表示這個連結與資料提交相關，或者就是為了突出連結，用按鈕表示，叫“偽按鈕”)，之所以要以按鈕的形式表示，最大的目的還是希望讓使用者知道點這個按鈕時可以提交資料，是可以和網站互動的，或者點了以後就可以出現與網站或使用者互動的頁面出現，那麼評價設計成敗的標準就變成了：有需求的使用者是不是注意到、願意去點這個按鈕，而不是這個按鈕本身多麼漂亮。使用者會想，我為什麼要點這個按鈕，這個按鈕很重要嗎?因為中國人做事，都是受利益驅動，任何時候，設計師都要關注使用者的利益。

　　本小節將從按鈕的顏色、按鈕的大小、按鈕的形狀、按鈕上及旁邊的文字、放置的位置5個方面來說明我們設計、使用按鈕的一般標準。

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

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

　　圖(13) 中國製造網搜尋按鈕採用對比高的醒目黃色按鈕(截圖：2011-2-9)

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

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

　　在一個網頁中，一個元素相對於其周圍元素的大小表明其重要性：元素越大，它就越重要，無論是文字還是按鈕，都是同樣的道理，因為他更醒目，而這個重要性，是需要根據頁面想表達的重點來確定的。

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

　　如圖(14)為阿里巴巴中國站“服裝欄目”搜尋按鈕，從圖可以看出，搜尋按鈕非常大，與一般的門戶網站的搜尋方塊都要大。是因為阿里巴巴做了10多年了，有海量的資訊，且屬於綜合B2B網站，任何一個使用者來到網站後，僅靠直接瀏覽或分類瀏覽，找到自己需要的資訊需要時間，而且比較困難。所以搜尋變的非常重要，作為網站運營方，也希望採購商通過搜尋來獲得資訊，才能體現出網站應有的價值。所以大家可以看到阿里巴巴的搜尋按鈕比一般的B2B行業門戶網站的搜尋按鈕更大，如果是剛開通的B2B細分行業網站，過分的突出搜尋，就不對了，因為沒有多少資訊可以搜尋，反而把網站的弱點暴露了。設計也是和網站所處的實際情況相關的。

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

　　從圖(15)的按鈕可以看出，這些優秀網站的產品經理都明白，在一個頁面裡要鼓動採購商採取行動，簽訂合約，立即詢價，希望讓供應商更多的獲得採購商的資訊，增加詢盤，更多的達成採購。這些按鈕都非常大、非常顯眼，甚至從美觀的角度說，都過了，太大了，但是從實用的角度說，就是要這樣才能讓這個按鈕的價值最大化，所以我認為：設計師要從“打造一個產品”的高度來對待網頁每個元素的設計，而不能僅從美觀的角度出發，很多時候美觀要為“實用”犧牲。

　　3 按鈕的形狀要規則、突出、嚴肅，不能卡通、娛樂化、太突出或太不突出

　　前面的章節講過：“頁面的架構更多的是方形的、規則的”，同樣道理，網頁按鈕也應該是方形的、規則的，可以有一點圓角，但是圓角不能太大，太大就顯得不夠嚴肅、不夠商業化。正如首頁所講，B2B行業網站畢竟是面對20歲以上的已經工作的職業人士，工作應該是嚴肅的，不能娛樂化。

　　下面6個按鈕是收集各個B2B綜合網站和行業網站的登入註冊按鈕，從這裡可以看出，B2B行業網站的按鈕大部分都是長方形，並適當有一個小小的圓角。當兩個按鈕放一起的時候，我們要分辨出是主要行動還是次要行動，最後一個按鈕是截取自阿里巴巴的，就做的比較好，用顏色區分了主要行動和次要行動。

　　圖(16)各個B2B綜合網站和行業網站的登入註冊按鈕

　　圖(17)是在阿里巴巴(左邊)和慧聰網(右邊)截取的使用者註冊按鈕，可以看到兩個網站的設計師水平的不同，明顯左邊的阿里巴巴要顯眼，比右邊的好，右邊太不突出，類似的設計很多網站都有，我認為都要修改。左邊和右邊其實都是直接用的系統按鈕，都不是設計成圖片的，不同的是，阿里巴巴的按鈕增加了 CSS樣式，變的更好看、更顯眼。從這個細節就可以看出，阿里巴巴的產品做的更好。

　　圖(17)阿里巴巴和慧聰的註冊提交按鈕對比

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

　　圖(18)B2B行業網站設計的不符合規範的按鈕

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

　　我們設計按鈕要從分析使用者行為的角度來做設計，顏色很吸引眼球、也比較大，都是為了吸引使用者更多的幾率看到這個按鈕，那看到以後的行為呢?使用者仍然會想，我為什麼要點這個按鈕，點了對我有什麼好處，或者說點了會不會產生什麼壞處，或者可能對按鈕上的字不理解，不熟悉而不想點，作為設計師，就要通過按鈕上的文字來告訴使用者，如果需要比較多的字或者說要加註釋，就需要在按鈕的上面、下面或右邊，來引導使用者繼續採取下一步行動。當然對一些大家都很熟悉的按鈕，比如：登入、提交等，就不必畫蛇添足去做解釋了。

　　如圖(19)的第一個按鈕上的文字為“免費註冊”，是為了打消大家以為註冊會收費，而不點擊，從營銷的角度來說，是打免費牌，吸引更多人提交自己的公司資訊、連絡方式，網站才有使用者、內容，網站銷售人員才能有更多潛在客戶。第三個按鈕上的“立即登入”是為了吸引是會員的趕快登入，因為只有登入後，使用者才可能進行更多的操作，比如：發布資訊、查看詢價、更深入瞭解網站等，一個網站每天有多少個會員登入，與每天有多少會員註冊一樣，是作為運營的一個重要考核指標的。第三個按鈕右邊的文字，是為瞭解決使用者可能遇到的問題，比如當我想點登入按鈕的時候，我想起來了，密碼忘記了，在按鈕旁邊就要出現密碼找回的連結。同時可能還不是會員，這個時候就要提醒使用者，你還可以免費註冊。

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

　　圖(20)有6個按鈕，都是在告訴使用者，會員可以做什麼，如果你不是會員，別在猶豫了，趕快行動吧!就好比電視購物節目告訴您，購買這個產品有什麼好處、很多優惠，現在立即拿起電話撥打某某號碼一樣。在這些鼓動的文字上，盡量少加或不加連結，省去使用者點選連結來思考。

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

　　除了可以在按鈕上加文字，還可以在按鈕上加個表徵圖，往往可以讓按鈕看起來更精緻，而且小表徵圖往往可以起到以形表意的效果。如圖(21)第一排的4個按鈕都加了小表徵圖，和文字一起，讓使用者幾乎不用思考，就知道按鈕代表的含義，點擊按鈕後可以做什麼。

　　按鈕上的文字要簡短、精鍊，不要加很多不必要的文字在按鈕上，會增加使用者思考的時間，比如圖(21)的第5個按鈕，“點擊進入”4個字完全是多餘的。通常情況下：一個按鈕，結合頁面上的其他互動和資訊組織，要能恰到好處的組合成一個完整的句子“我點擊會發生什麼”，而“點擊進入”4個字是在我和滑鼠之間的事，而不必要在網頁上出現。最後一個按鈕是大家常見的播放器的按鈕，因為大家都很熟悉了，電視的遙控上也是這個按鈕，所以用文字也是多餘的了，直接用形狀表示，簡單明了。當然可以在滑鼠放上去顯示文字提示，使用者體驗更好，從這個角度上來說，也可能說是地方太小而不能用文字來表達。

　　圖(21) 按鈕上加了小表徵圖，一目瞭然

　　5 按鈕出現的位置、周圍是否空白，與這個按鈕的重要性相關

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

　　如圖(22)的2個按鈕，上下左右都有許多空白，比如第1個、第2個按鈕，離下面和上面都有很高距離，這個就是設計師故意而為之，因為如果按鈕離上下的距離太近，就不夠突出了。就會被淹沒在文字中，適當的在周圍留白，就是好的突出方式之一。

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

　　這個小節講到這裡，就講完了，雖然一個小按鈕，但是也大有學問，需要管理層、產品經理、設計師在設計網站時認真去揣摩，只有注重產品細節，才能使使用者有好的體驗，才能打造出成功的產品。

　　本文原創作者：李學江，歡迎交流指導諮詢。