(樂購網(wǎng)專欄 作者:李學(xué)江)B2B行業(yè)網(wǎng)站由于具有B2B網(wǎng)站的特性和門戶網(wǎng)站的特性,決定了頁面設(shè)計(jì)與其他網(wǎng)站一些不同點(diǎn)。在寫作“B2B行業(yè)門戶網(wǎng)站頁面設(shè)計(jì)”章節(jié)之前,在此從理論上講下頁面設(shè)計(jì)及制作的基本要點(diǎn),供大家參考,講的不對的,希望大家批評指正。
1 頁面用色、框架及整體風(fēng)格應(yīng)該是嚴(yán)謹(jǐn)?shù)模錆M商業(yè)氛圍的
由于B2B行業(yè)網(wǎng)站的內(nèi)容是嚴(yán)謹(jǐn)?shù)摹⒏叨说模婕靶袠I(yè)的發(fā)展動態(tài)、各種技術(shù)交流、企業(yè)的營銷管理知識等信息,注定了內(nèi)容是嚴(yán)謹(jǐn)?shù)摹⒏叨说?由于其涉的是企業(yè)與企業(yè)之間的交易促進(jìn)、信息交流與交友,所以在商業(yè)欄目更多的要體現(xiàn)出濃厚的商業(yè)氛圍,一切頁面設(shè)計(jì)都是為商人而考慮的。
A 頁面的用色要更嚴(yán)謹(jǐn)、忌諱非商業(yè)色彩
藍(lán)色、紅色、黃色是B2B行業(yè)網(wǎng)站的常用主色,其中常常是幾種顏色搭配使用,當(dāng)然在使用過程中,常常是用這幾種顏色之外的顏色來搭配,或者這幾種顏色的漸變色。
由此衍生的顏色包括:深藍(lán)色、暗紅色、鮮紅色、橙色、橙黃色、灰色等等,在此不一一列舉,顏色的搭配由設(shè)計(jì)師自己來確定,我們最后來審核。
忌諱使用如下幾種顏色為主色調(diào):
綠色:綠色更多的象征大自然、純潔、天然等含義,不符合B2B行業(yè)網(wǎng)站的嚴(yán)謹(jǐn)、商業(yè)兩個特點(diǎn),可作為橙色、紅色等的搭配顏色,但是建議不能作為主色調(diào)。
粉紅色:這種顏色更多表達(dá)的是女性化、溫馨的氛圍,就算是以女性產(chǎn)品為特色的行業(yè),也不能使用,作為搭配顏色也盡量少用,畢竟與用戶需求相差太遠(yuǎn)。
黑色:黑色、灰色是頁面絕大部分文字可以采用的顏色,但是不能作為B2B行業(yè)網(wǎng)站的主色調(diào)。
B 頁面的標(biāo)題欄和導(dǎo)航欄更多要方形的、規(guī)則的
作為企業(yè)網(wǎng)站、時尚類型的網(wǎng)站,或者為了表達(dá)時尚、活潑的主題,網(wǎng)站的設(shè)計(jì)可以比較活潑一些,多采用圓形或不規(guī)則的排版方式,但是作為B2B行業(yè)網(wǎng)站,就不能這樣設(shè)計(jì)。
每個部分要具有明顯的區(qū)分,每個區(qū)域都是規(guī)則的,使用的圖片、背景都是嚴(yán)謹(jǐn)?shù)摹2荒馨褕D片斜放、用很大的橢圓形、用很大的圖標(biāo)、用卡通的圖標(biāo)、活潑的圖形等來設(shè)計(jì)網(wǎng)站的標(biāo)題欄和導(dǎo)航欄。
C 整體風(fēng)格應(yīng)嚴(yán)謹(jǐn)、充滿商業(yè)氛圍
網(wǎng)站的整體風(fēng)格比用色、標(biāo)題欄設(shè)計(jì)更加重要,某個搭配顏色比較活潑、時尚一些,并不會影響整體的風(fēng)格。某個圖片不規(guī)則,或者網(wǎng)頁里的內(nèi)容圖片不規(guī)則,也不會對整體的感覺產(chǎn)生多大影響。整體的頁面風(fēng)格不能花哨,要降低框架、背景等對閱讀內(nèi)容的影響,降低頁面的噪聲,整體風(fēng)格要淡雅,讓訪問的人靜下心來思考。
2 內(nèi)容和功能決定表現(xiàn)形式和界面設(shè)計(jì)
頁面設(shè)計(jì)是沒有一個固定標(biāo)準(zhǔn)的,很多時候不能用美丑來判斷,也不能用是否有創(chuàng)意來判斷,而應(yīng)該綜合分析這個頁面的訪問者,頁面內(nèi)容、功能。有時候一點(diǎn)創(chuàng)意都沒有,和其他很多網(wǎng)站都是類似的,才是最好的,因?yàn)榫蛻?yīng)該是這樣的。任何設(shè)計(jì)、功能都是為訪問者、使用者服務(wù)的,設(shè)計(jì)者的分析能力遠(yuǎn)比創(chuàng)意來的重要。
舉例說明:
用戶注冊頁面如果頭部有很多導(dǎo)航條,左邊或右邊有許多精彩內(nèi)容推薦,設(shè)計(jì)很漂亮的圖標(biāo),反而是不對的,這個頁面的鏈接應(yīng)該越少越好,頁面越簡潔越好。引導(dǎo)用戶靜下心來填寫真實(shí)、豐富的內(nèi)容才是最關(guān)鍵的,不然用戶可能操作一半,覺得麻煩,還有更好的內(nèi)容吸引他,就不再填寫下去了。
任何一個頁面在設(shè)計(jì)之前,設(shè)計(jì)師都必須要靜下心來想想,這個頁面在表達(dá)什么內(nèi)容,或者說是一個什么樣的功能,根據(jù)內(nèi)容和功能再來確定應(yīng)該具有的表現(xiàn)形式。網(wǎng)站策劃時就要初步為設(shè)計(jì)師考慮頁面的表達(dá)形式,詳情請參考《B2B行業(yè)門戶網(wǎng)站策劃實(shí)戰(zhàn)研究報告》第四版第8章,對這個問題進(jìn)行過系統(tǒng)化的闡述。
3 要多使用習(xí)慣用法,不要輕易使用一種新用法
所謂習(xí)慣用法,是用戶經(jīng)常使用的網(wǎng)站,或者非常知名的網(wǎng)站用法,往往就是用戶的習(xí)慣,因?yàn)橹W(wǎng)站的用戶最多,用戶也是最認(rèn)可的。相同的功能,或者說不會因?yàn)榫W(wǎng)站的不同而表達(dá)方式發(fā)生變化的功能,就可以用習(xí)慣用法。
比如當(dāng)我們來到一個新網(wǎng)站的時候,常常需要了解這個網(wǎng)站的介紹、主辦方聯(lián)系方式等信息,習(xí)慣就是在網(wǎng)站底部找這些信息,絕大部分的網(wǎng)站底部都有一排的鏈接來表達(dá),如果你設(shè)計(jì)網(wǎng)站時,希望很創(chuàng)新,把這些鏈接不放在底部,用戶就會覺得不習(xí)慣。
對設(shè)計(jì)師來講,那怕這樣的熟悉讓你覺得相似而乏味,一點(diǎn)都沒有創(chuàng)新,你還是要這樣去用。但并不是說我們不需要創(chuàng)新,相反,在策劃、設(shè)計(jì)的工作中,需要大膽的創(chuàng)新,如果我們不打算使用一種習(xí)慣用法,策劃者、設(shè)計(jì)師必須確認(rèn)新用法有如下兩個特點(diǎn):
(1)同樣清楚,同樣不言而喻:只是換一個更好的表達(dá)方式,和原來本質(zhì)上沒有太大的改變,同樣讓用戶一眼就能看明白,不是完全憑空的創(chuàng)新,要比原來的更好才可以。
(2)帶來很大的價值,值得用戶付出努力來學(xué)習(xí):這個功能雖然是以前大家沒有見過的,但是我們確認(rèn)他能帶來質(zhì)的變化,而不是僅僅換個用戶不習(xí)慣的功能和界面。比如以前絕大多數(shù)的網(wǎng)站注冊都是一步搞定,現(xiàn)在如果注冊會員,有許多網(wǎng)站就分為二步或三步,為什么要這么設(shè)計(jì)呢?因?yàn)樘顚懙膬?nèi)容太多,分成幾步用戶更能接受。
4 建立清楚的視覺層次,讓用戶能從視覺上區(qū)分
頁面具有層次感,一看就能明白那些是重點(diǎn),那些是次要的,每個部分表達(dá)的內(nèi)容都非常的清晰,用戶能很快的找到自己重點(diǎn)關(guān)注的部分。與此相反的就是頁面很凌亂,結(jié)構(gòu)不清晰,用戶來到頁面不知道那些是重點(diǎn)。網(wǎng)絡(luò)用戶耐性很差,30秒之內(nèi)很難發(fā)現(xiàn)自己感興趣的內(nèi)容,可能就不找了,認(rèn)為網(wǎng)站不是他感興趣的,或者干脆以后都不來了,但是實(shí)際上網(wǎng)站有他要的內(nèi)容或想使用的功能,只是由于頁面設(shè)計(jì)的不好,不能更快找到而已。
A 越重要的部分越突出
在一個頁面上,如果沒有重點(diǎn),用戶就要花很多時間在所有一樣的內(nèi)容里去找他最喜歡的內(nèi)容和功能,對用戶不夠友好。越是用戶經(jīng)常使用、經(jīng)常閱讀的內(nèi)容,越要放在最重要的位置,用戶會用最短的時間獲得最關(guān)注的內(nèi)容和功能,才能吸引他留下來。
在頁面設(shè)計(jì)的時候,突出重點(diǎn)的內(nèi)容有許多的方法,常用的有:字體加粗、字號變大、字的顏色和周圍的顏色不一樣、文字前配上醒目的圖標(biāo)、用圖片或顏色作為背景等等,在《B2B行業(yè)門戶網(wǎng)站設(shè)計(jì)開發(fā)實(shí)戰(zhàn)研究報告》第三章做了重點(diǎn)闡述。
推薦閱讀
(速途網(wǎng)專欄 作者:張野)B2B衰落是不爭的事實(shí),公認(rèn)的原因是:“傳統(tǒng)B2B模式僅僅提供了信息流,無法滿足目前電商環(huán)境下,商家以及消費(fèi)者的新訴求。”于是,不管是阿里帝國,還是一些行業(yè)新秀,都希望借此機(jī)會進(jìn)行模式>>>詳細(xì)閱讀
本文標(biāo)題:8招教您做好B2B行業(yè)網(wǎng)站頁面設(shè)計(jì)
地址:http://m.sdlzkt.com/a/b2b/20120806/79866.html