B2B網(wǎng)站的核心就是以出售信息,溝通買賣雙方。在溝通買賣雙方、推動了商品交易的同時,B2B網(wǎng)站也創(chuàng)造了大量的內(nèi)容。
B2B概念
B2B 是指進行電子商務(wù)交易的供需雙方都是商家(或企業(yè)、公司),她(他)們使用了互聯(lián)網(wǎng)的技術(shù)或各種商務(wù)網(wǎng)絡(luò)平臺,完成商務(wù)交易的過程。電子商務(wù)是現(xiàn)代 B2B marketing的一種具體主要的表現(xiàn)形式。
含有三要素:
⒈買賣:B2B 網(wǎng)站平臺為消費者提供質(zhì)優(yōu)價廉的商品,吸引消費者購買的同時促使更多商家的入駐。
⒉合作:與物流公司建立合作關(guān)系,為消費者的購買行為提供最終保障,這是 B2B 平臺硬性條件之一。
⒊服務(wù):物流主要是為消費者提供購買服務(wù),從而實現(xiàn)再一次的交易。
1,網(wǎng)站產(chǎn)品經(jīng)理立項,寫產(chǎn)品計劃書,確定新產(chǎn)品或新功能的市場意義和經(jīng)濟效益(往往在立項之初,還需要與市場部門配合調(diào)查,并與公司分管的副總多次開會討論),提交上級審批。
2,計劃書審批同意后,確認需要設(shè)計的部分。
網(wǎng)站產(chǎn)品經(jīng)理和用戶體驗研究員(user researcher),信息建構(gòu)師(information architect),視覺設(shè)計師(visual designer)、ui設(shè)計師(user interface designer),互動設(shè)計師(interaction designer),開發(fā)/程序員(web developer),工程師(engineer)一起討論需要的支持,然后訂出時間計劃分工合作。
3,接下來,一般情況下先由用戶體驗研究員作調(diào)查、分析后由信息建構(gòu)師設(shè)計產(chǎn)品架構(gòu)。(他們需要緊密配合)
4,產(chǎn)品架構(gòu)確認后,由互動設(shè)計師(interaction designer)作出互動流程。(也是需要不斷修正)
5,視覺設(shè)計師(visual designer)和user interface designer作出視覺設(shè)計。
6,開發(fā)|程序猿web developer把設(shè)計通過編寫程序(html, dhtml, php, javascript……)等等再現(xiàn)出來
7,交給工程師。
8,做完后用戶體驗研究員需要做用戶測試,qa(quality assurance)需要測驗這一產(chǎn)品的每一步驟,確認產(chǎn)品的使用質(zhì)量。
9,如果有問題需要讓工程師或相關(guān)人員解決。
頁面設(shè)計注意事項
一、頁面用色、框架商業(yè)化
由于B2B行業(yè)網(wǎng)站的內(nèi)容是嚴(yán)謹?shù)摹⒏叨说?,涉及行業(yè)的發(fā)展動態(tài)、各種技術(shù)交流、企業(yè)的營銷管理知識等信息,注定了內(nèi)容是嚴(yán)謹?shù)摹⒏叨说?;由于其涉的? 企業(yè)與企業(yè)之間的交易促進、信息交流與交友,所以在商業(yè)欄目更多的要體現(xiàn)出濃厚的商業(yè)氛圍,一切頁面設(shè)計都是為商人而考慮的。
A 頁面的用色要更嚴(yán)謹、忌諱非商業(yè)色彩
藍色、紅色、黃色是B2B行業(yè)網(wǎng)站的常用主色,其中常常是幾種顏色搭配使用,當(dāng)然在使用過程中,常常是用這幾種顏色之外的顏色來搭配,或者這幾種顏色的漸變色。
忌諱使用如下幾種顏色為主色調(diào):
綠色:綠色更多的象征大自然、純潔、天然等含義,不符合B2B行業(yè)網(wǎng)站的嚴(yán)謹、商業(yè)兩個特點,可作為橙色、紅色等的搭配顏色,但是建議不能作為主色調(diào)。
粉紅色:這種顏色更多表達的是女性化、溫馨的氛圍,就算是以女性產(chǎn)品為特色的行業(yè),也不能使用,作為搭配顏色也盡量少用,畢竟與用戶需求相差太遠。
黑色:黑色、灰色是頁面絕大部分文字可以采用的顏色,但是不能作為B2B行業(yè)網(wǎng)站的主色調(diào)。
B 頁面的標(biāo)題欄和導(dǎo)航欄更多要方形的、規(guī)則的
作為企業(yè)網(wǎng)站、時尚類型的網(wǎng)站,或者為了表達時尚、活潑的主題,網(wǎng)站的設(shè)計可以比較活潑一些,多采用圓形或不規(guī)則的排版方式,但是作為B2B行業(yè)網(wǎng)站,就不能這樣設(shè)計。
每個部分要具有明顯的區(qū)分,每個區(qū)域都是規(guī)則的,使用的圖片、背景都是嚴(yán)謹?shù)?。不能把圖片斜放、用很大的橢圓形、用很大的圖標(biāo)、用卡通的圖標(biāo)、活潑的圖形等來設(shè)計網(wǎng)站的標(biāo)題欄和導(dǎo)航欄。
C 整體風(fēng)格應(yīng)嚴(yán)謹、充滿商業(yè)氛圍
網(wǎng)站的整體風(fēng)格比用色、標(biāo)題欄設(shè)計更加重要,某個搭配顏色比較活潑、時尚一些,并不會影響整體的風(fēng)格。某個圖片不規(guī)則,或者網(wǎng)頁里的內(nèi)容圖片不規(guī)則,也 不會對整體的感覺產(chǎn)生多大影響。整體的頁面風(fēng)格不能花哨,要降低框架、背景等對閱讀內(nèi)容的影響,降低頁面的噪聲,整體風(fēng)格要淡雅,讓訪問的人靜下心來思 考。
二、內(nèi)容和功能決定表現(xiàn)形式和界面設(shè)計
頁面設(shè)計是沒有一個固定標(biāo)準(zhǔn)的,很多時候不能用美丑來判斷,也不能用是否有創(chuàng)意來判斷,而應(yīng)該綜合分析這個頁面的訪問者,頁面內(nèi)容、功能。有時候一點創(chuàng) 意都沒有,和其他很多網(wǎng)站都是類似的,才是最好的,因為就應(yīng)該是這樣的。任何設(shè)計、功能都是為訪問者、使用者服務(wù)的,設(shè)計者的分析能力遠比創(chuàng)意來的重要。
三、盡量使用習(xí)慣用法,不要輕易使用新用法
所謂習(xí)慣用法,是用戶經(jīng)常使用的網(wǎng)站,或者非常知名的網(wǎng)站用法,往往就是用戶的習(xí)慣,因為知名網(wǎng)站的用戶最多,用戶也是最認可的。相同的功能,或者說不會因為網(wǎng)站的不同而表達方式發(fā)生變化的功能,就可以用習(xí)慣用法。
比如當(dāng)我們來到一個新網(wǎng)站的時候,常常需要了解這個網(wǎng)站的介紹、主辦方聯(lián)系方式等信息,習(xí)慣就是在網(wǎng)站底部找這些信息,絕大部分的網(wǎng)站底部都有一排的鏈接來表達,如果你設(shè)計網(wǎng)站時,希望很創(chuàng)新,把這些鏈接不放在底部,用戶就會覺得不習(xí)慣。
對設(shè)計師來講,那怕這樣的熟悉讓你覺得相似而乏味,一點都沒有創(chuàng)新,你還是要這樣去用。但并不是說我們不需要創(chuàng)新,相反,在策劃、設(shè)計的工作中,需要大膽的創(chuàng)新,如果我們不打算使用一種習(xí)慣用法,策劃者、設(shè)計師必須確認新用法有如下兩個特點:
(1)同樣清楚,同樣不言而喻:只是換一個更好的表達方式,和原來本質(zhì)上沒有太大的改變,同樣讓用戶一眼就能看明白,不是完全憑空的創(chuàng)新,要比原來的更好才可以。
(2)帶來很大的價值,值得用戶付出努力來學(xué)習(xí):這個功能雖然是以前大家沒有見過的,但是我們確認他能帶來質(zhì)的變化,而不是僅僅換個用戶不習(xí)慣的功能和 界面。比如以前絕大多數(shù)的網(wǎng)站注冊都是一步搞定,現(xiàn)在如果注冊會員,有許多網(wǎng)站就分為二步或三步,為什么要這么設(shè)計呢?因為填寫的內(nèi)容太多,分成幾步用戶更能接受。
四、建立清楚的視覺層次,讓用戶能用視覺上區(qū)分
頁面具有層次感,一看就能明白那些是重點,那些是次要的,每個部分表達的內(nèi)容都非常的清晰,用戶能很快的找到自己重點關(guān)注的部分。與此相反的就是頁面很 凌亂,結(jié)構(gòu)不清晰,用戶來到頁面不知道那些是重點。網(wǎng)絡(luò)用戶耐性很差,30秒之內(nèi)很難發(fā)現(xiàn)自己感興趣的內(nèi)容,可能就不找了,認為網(wǎng)站不是他感興趣的,或者 干脆以后都不來了,但是實際上網(wǎng)站有他要的內(nèi)容或想使用的功能,只是由于頁面設(shè)計的不好,不能更快找到而已。
A 越重要的部分越突出
在一個頁面上,如果沒有重點,用戶就要花很多時間在所有一樣的內(nèi)容里去找他最喜歡的內(nèi)容和功能,對用戶不夠友好。越是用戶經(jīng)常使用、經(jīng)常閱讀的內(nèi)容,越要放在最重要的位置,用戶會用最短的時間獲得最關(guān)注的內(nèi)容和功能,才能吸引他留下來。
B 功能或內(nèi)容相關(guān)的部分在視覺上也要相關(guān)
在功能或內(nèi)容相關(guān)的部分視覺也要相關(guān),因為用戶掃描的時候,視覺相關(guān)的部分就會作為一起掃描,否則容易忽略掉,同時會顯得凌亂。常用的方法是把相關(guān)的功能或內(nèi)容用同樣的框、同樣的背景、同樣的圖標(biāo)來表達。
C 功能或內(nèi)容在邏輯上包含的部分在視覺上也要進行嵌套
所謂邏輯上包含,就是從邏輯的角度推理,他應(yīng)該是屬于包含的,比如:B2B行業(yè)網(wǎng)站的上游原料和設(shè)備,如果我們把這2個部分放在一個頁面,就應(yīng)該把設(shè)備 和原料分開來設(shè)計,但是原料和設(shè)備模塊本身還會包括許多不同的內(nèi)容,為了讓想采購的企業(yè)很快速的找到自己想要的產(chǎn)品,就要在設(shè)備模塊和原料模塊內(nèi)部再進行 嵌套。
五、訪問者不是在閱讀,而是在掃描
《別讓我思考》一書講:“訪問者不是在閱讀,而是在掃描,是極少數(shù)幾個得到了證明的事實之一,人們會花極少的時間來閱讀大部分的頁面,相反,我們只是掃 描一下(或者匆匆掠過)網(wǎng)頁,尋找能吸引我們注意力的文字或詞語?!睂τ趯?dǎo)航頁、首頁等,用戶會更多的用掃描來獲得自己感興趣的內(nèi)容。對于內(nèi)容最終頁,用 戶在閱讀前也會先掃描一下大概內(nèi)容,對于太長的文章或內(nèi)容,就要看下是否有小標(biāo)題,如果有就要先掃描小標(biāo)題,看自己是否感興趣,感興趣了才會繼續(xù)閱讀下 去。用戶一般會先掃描如下內(nèi)容:
A、與我們現(xiàn)在手頭任務(wù)有關(guān)的,急需想知道的。
B、我們當(dāng)前或接下來的個人興趣,比如:想采購一批機器、想找工作;
C、還有我們腦袋里一些根深蒂固的詞,例如“免費”、“打折”、“美女”等。B2B行業(yè)網(wǎng)站用戶都會感興趣的:例如行業(yè)最爆炸性的新聞、知名公司老總動態(tài)、最新求購等。
當(dāng)我們在策劃、設(shè)計網(wǎng)站的頁面時,在編輯網(wǎng)站內(nèi)容時,要時刻謹記用戶不是在閱讀,而是在掃描,將這個思想貫徹地執(zhí)行下去。會指導(dǎo)很多正確的策劃和設(shè)計, 比如:重要的內(nèi)容要大標(biāo)題、要加粗;每個模塊盡量能圖文并茂,讓讀者掃描的時候看到圖片,更容易引起興趣;對廣告文案等要多加總結(jié)、提煉,吸引他們感興 趣;編輯在寫文章、內(nèi)容編輯的時候,對于超過800字的文章,最好能加上小標(biāo)題,讓用戶可以預(yù)先掃描是否感興趣等。
六、閉門炸者做出的東西,永遠趕不上綜合借鑒者的
網(wǎng)頁技術(shù)更新很快,一個網(wǎng)站的界面設(shè)計壽命僅僅2-3年而已。不管是垃圾還是精品,都沒有所謂的經(jīng)典。經(jīng)典只存在于是那個首次成功創(chuàng)新性的應(yīng)用。一個閉 門造車者做出的東西,是遠遠趕不上綜合借鑒者的。網(wǎng)頁設(shè)計不同于其他藝術(shù),在模仿加創(chuàng)新的網(wǎng)頁設(shè)計領(lǐng)域當(dāng)中,即便是完全自己設(shè)計的,也是沿用了人們已經(jīng)認 同的大部分用戶習(xí)慣,而且這種沿襲的痕跡有時非常的明顯!還有那個設(shè)計者敢腆著臉說,這都是我自己的原創(chuàng)設(shè)計?對于業(yè)界來說,經(jīng)典只是個理念和象征!
對于B2B行業(yè)網(wǎng)站的設(shè)計,要多參考,多模仿,找出幾十個同類型的最優(yōu)秀網(wǎng)站來參考,分析別的網(wǎng)站為什么要這么設(shè)計,取其精華,去其糟粕,聯(lián)系自己設(shè)計 網(wǎng)站的特點加以改進或修改,往往這樣的設(shè)計才是最成功的設(shè)計。因為最成功的網(wǎng)站都是經(jīng)過多方研究的,他們不僅僅模仿,也有屬于自己的創(chuàng)新,大部分也經(jīng)得起 用戶的考驗,符合絕大部分用戶的需求。
七、大部分的界面應(yīng)弱化,強調(diào)功能和內(nèi)容
B2B行業(yè)門戶網(wǎng)站不同于企業(yè)網(wǎng)站,它存在的最大價值在于給用戶提供一個平臺,提供更多有價值的內(nèi)容,界面存在的價值在于輔助、引導(dǎo)用戶更好的去使用這 個平臺,發(fā)現(xiàn)里面自己感興趣的內(nèi)容,挑選并閱讀,獲得知識。并不是要濃墨重彩的使用大量的顏色和圖標(biāo)來表達頁面的主題,這個是一些設(shè)計B2B行業(yè)網(wǎng)站的人 常犯的錯誤,尤其是初學(xué)者。
做一個企業(yè)網(wǎng)站,我們?yōu)槭裁匆褂么蟮膱D片、圖標(biāo),大面積的顏色去渲染這個頁面呢?因為每個企業(yè)都有其自己獨特的產(chǎn)品與企業(yè)文化,來這個頁面的讀者都是想了解這個企業(yè)或產(chǎn)品的,我們需要用設(shè)計向訪問者很直觀的傳遞企業(yè)信息,尤其是很多品牌公司網(wǎng)站。B2B行業(yè)網(wǎng)站的專題設(shè)計、收費服務(wù)介紹等頁面與建設(shè)企業(yè)網(wǎng)站一樣,需要用大圖片、小圖標(biāo)、大面積的顏色來襯托頁面的主題。
八、頁面要模塊化,可修改性要強
模塊化不僅可以提高重用性,也能統(tǒng)一網(wǎng)站風(fēng)格,還可以降低程序開發(fā)的強度。模塊化的最大好處就是統(tǒng)一網(wǎng)站風(fēng)格,讓用戶無論在網(wǎng)站的那個頁面,也能明白還是在這個網(wǎng)站,形成了很強的品牌辨識度。時刻記住,做網(wǎng)站的最終目標(biāo),就是做品牌,必須要作為設(shè)計的指導(dǎo)思想。
無論是架構(gòu)、模塊或圖片,都要考慮其可修改性。舉個簡單的例子:按鈕,很多人喜歡制作圖片,N個按鈕就是N張圖片。如果只做3-5類按鈕的背景圖片,在網(wǎng)頁代碼里打上文字,那么修改起來就簡單了,讓程序/網(wǎng)頁制作者自己改字就可以了。然而網(wǎng)頁顯示的字體是帶有鋸齒的,一般既能清晰又保證美觀的字體字號有 幾類:“宋體12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑體 20px | verdana 9px |Arial Black 12px+|”等等。