當前位置:才華齋>資格證>電子商務師>

8招做好B2B行業網站頁面設計

電子商務師 閱讀(2.28W)

導語:B2B行業網站由於具有B2B網站的特性和入口網站的特性,決定了頁面設計與其他網站一些不同點。在此從理論上講下頁面設計及製作的基本要點,供大家參考。

8招做好B2B行業網站頁面設計

  1頁面用色、框架及整體風格應該是嚴謹的,充滿商業氛圍的

由於B2B行業網站的內容是嚴謹的、高階的,涉及行業的發展動態、各種技術交流、企業的營銷管理知識等資訊,註定了內容是嚴謹的、高階的;由於其涉的是企業與企業之間的交易促進、資訊交流與交友,所以在商業欄目更多的要體現出濃厚的商業氛圍,一切頁面設計都是為商人而考慮的。

A頁面的用色要更嚴謹、忌諱非商業色彩

藍色、紅色、黃色是B2B行業網站的常用主色,其中常常是幾種顏色搭配使用,當然在使用過程中,常常是用這幾種顏色之外的顏色來搭配,或者這幾種顏色的漸變色。

由此衍生的顏色包括:深藍色、暗紅色、鮮紅色、橙色、橙黃色、灰色等等,在此不一一列舉,顏色的搭配由設計師自己來確定,我們最後來稽核。

忌諱使用如下幾種顏色為主色調:

綠色:綠色更多的象徵大自然、純潔、天然等含義,不符合B2B行業網站的嚴謹、商業兩個特點,可作為橙色、紅色等的搭配顏色,但是建議不能作為主色調。

粉紅色:這種顏色更多表達的是女性化、溫馨的氛圍,就算是以女性產品為特色的行業,也不能使用,作為搭配顏色也儘量少用,畢竟與使用者需求相差太遠。

黑色:黑色、灰色是頁面絕大部分文字可以採用的顏色,但是不能作為B2B行業網站的主色調。

B頁面的標題欄和導航欄更多要方形的、規則的

作為企業網站、時尚型別的網站,或者為了表達時尚、活潑的主題,網站的設計可以比較活潑一些,多采用圓形或不規則的排版方式,但是作為B2B行業網站,就不能這樣設計。

每個部分要具有明顯的區分,每個區域都是規則的,使用的圖片、背景都是嚴謹的。不能把圖片斜放、用很大的橢圓形、用很大的圖示、用卡通的圖示、活潑的圖形等來設計網站的標題欄和導航欄。

C整體風格應嚴謹、充滿商業氛圍

網站的整體風格比用色、標題欄設計更加重要,某個搭配顏色比較活潑、時尚一些,並不會影響整體的風格。某個圖片不規則,或者網頁裡的內容圖片不規則,也不會對整體的'感覺產生多大影響。整體的頁面風格不能花哨,要降低框架、背景等對閱讀內容的影響,降低頁面的噪聲,整體風格要淡雅,讓訪問的人靜下心來思考。

  2內容和功能決定表現形式和介面設計

頁面設計是沒有一個固定標準的,很多時候不能用美醜來判斷,也不能用是否有創意來判斷,而應該綜合分析這個頁面的訪問者,頁面內容、功能。有時候一點創意都沒有,和其他很多網站都是類似的,才是最好的,因為就應該是這樣的。任何設計、功能都是為訪問者、使用者服務的,設計者的分析能力遠比創意來的重要。

舉例說明:

使用者註冊頁面如果頭部有很多導航條,左邊或右邊有許多精彩內容推薦,設計很漂亮的圖示,反而是不對的,這個頁面的連結應該越少越好,頁面越簡潔越好。引導使用者靜下心來填寫真實、豐富的內容才是最關鍵的,不然使用者可能操作一半,覺得麻煩,還有更好的內容吸引他,就不再填寫下去了。

任何一個頁面在設計之前,設計師都必須要靜下心來想想,這個頁面在表達什麼內容,或者說是一個什麼樣的功能,根據內容和功能再來確定應該具有的表現形式。網站策劃時就要初步為設計師考慮頁面的表達形式,詳情請參考《B2B行業入口網站策劃實戰研究報告》第四版第8章,對這個問題進行過系統化的闡述。

3要多使用習慣用法,不要輕易使用一種新用法

所謂習慣用法,是使用者經常使用的網站,或者非常知名的網站用法,往往就是使用者的習慣,因為知名網站的使用者最多,使用者也是最認可的。相同的功能,或者說不會因為網站的不同而表達方式發生變化的功能,就可以用習慣用法。

比如當我們來到一個新網站的時候,常常需要了解這個網站的介紹、主辦方聯絡方式等資訊,習慣就是在網站底部找這些資訊,絕大部分的網站底部都有一排的連結來表達,如果你設計網站時,希望很創新,把這些連結不放在底部,使用者就會覺得不習慣。

對設計師來講,那怕這樣的熟悉讓你覺得相似而乏味,一點都沒有創新,你還是要這樣去用。但並不是說我們不需要創新,相反,在策劃、設計的工作中,需要大膽的創新,如果我們不打算使用一種習慣用法,策劃者、設計師必須確認新用法有如下兩個特點:

(1)同樣清楚,同樣不言而喻:只是換一個更好的表達方式,和原來本質上沒有太大的改變,同樣讓使用者一眼就能看明白,不是完全憑空的創新,要比原來的更好才可以。

(2)帶來很大的價值,值得使用者付出努力來學習:這個功能雖然是以前大家沒有見過的,但是我們確認他能帶來質的變化,而不是僅僅換個使用者不習慣的功能和介面。比如以前絕大多數的網站註冊都是一步搞定,現在如果註冊會員,有許多網站就分為二步或三步,為什麼要這麼設計呢?因為填寫的內容太多,分成幾步使用者更能接受。

  4建立清楚的視覺層次,讓使用者能從視覺上區分

頁面具有層次感,一看就能明白那些是重點,那些是次要的,每個部分表達的內容都非常的清晰,使用者能很快的找到自己重點關注的部分。與此相反的就是頁面很凌亂,結構不清晰,使用者來到頁面不知道那些是重點。網路使用者耐性很差,30秒之內很難發現自己感興趣的內容,可能就不找了,認為網站不是他感興趣的,或者乾脆以後都不來了,但是實際上網站有他要的內容或想使用的功能,只是由於頁面設計的不好,不能更快找到而已。

  A越重要的部分越突出

在一個頁面上,如果沒有重點,使用者就要花很多時間在所有一樣的內容裡去找他最喜歡的內容和功能,對使用者不夠友好。越是使用者經常使用、經常閱讀的內容,越要放在最重要的位置,使用者會用最短的時間獲得最關注的內容和功能,才能吸引他留下來。

在頁面設計的時候,突出重點的內容有許多的方法,常用的有:字型加粗、字號變大、字的顏色和周圍的顏色不一樣、文字前配上醒目的圖示、用圖片或顏色作為背景等等,在《B2B行業入口網站設計開發實戰研究報告》第三章做了重點闡述。

B功能或內容相關的部分在視覺上也要相關

在功能或內容相關的部分視覺也要相關,因為使用者掃描的時候,視覺相關的部分就會作為一起掃描,否則容易忽略掉,同時會顯得凌亂。常用的方法是把相關的功能或內容用同樣的框、同樣的背景、同樣的圖示來表達。

C功能或內容在邏輯上包含的部分在視覺上也要進行巢狀

所謂邏輯上包含,就是從邏輯的角度推理,他應該是屬於包含的,比如:B2B行業網站的上游原料和裝置,如果我們把這2個部分放在一個頁面,就應該把裝置和原料分開來設計,但是原料和裝置模組本身還會包括許多不同的內容,為了讓想採購的企業很快速的找到自己想要的產品,就要在裝置模組和原料模組內部再進行巢狀。

  5訪問者不是在閱讀,而是在掃描

《別讓我思考》一書講:“訪問者不是在閱讀,而是在掃描,是極少數幾個得到了證明的事實之一,人們會花極少的時間來閱讀大部分的頁面,相反,我們只是掃描一下(或者匆匆掠過)網頁,尋找能吸引我們注意力的文字或詞語。”對於導航頁、首頁等,使用者會更多的用掃描來獲得自己感興趣的內容。對於內容最終頁,使用者在閱讀前也會先掃描一下大概內容,對於太長的文章或內容,就要看下是否有小標題,如果有就要先掃描小標題,看自己是否感興趣,感興趣了才會繼續閱讀下去。使用者一般會先掃描如下內容:

A、與我們現在手頭任務有關的,急需想知道的。

B、我們當前或接下來的個人興趣,比如:想採購一批機器、想找工作;

C、還有我們腦袋裡一些根深蒂固的詞,例如“免費”、“打折”、“美女”等。B2B行業網站使用者都會感興趣的:例如行業最爆炸性的新聞、知名公司老總動態、最新求購等。

當我們在策劃、設計網站的頁面時,在編輯網站內容時,要時刻謹記使用者不是在閱讀,而是在掃描,將這個思想貫徹地執行下去。會指導很多正確的策劃和設計,比如:重要的內容要大標題、要加粗;每個模組儘量能圖文並茂,讓讀者掃描的時候看到圖片,更容易引起興趣;對廣告文案等要多加總結、提煉,吸引他們感興趣;編輯在寫文章、內容編輯的時候,對於超過800字的文章,最好能加上小標題,讓使用者可以預先掃描是否感興趣等。

  6閉門造車者做出的東西,是遠遠趕不上綜合借鑑者的

網頁技術更新很快,一個網站的介面設計壽命僅僅2-3年而已。不管是垃圾還是精品,都沒有所謂的經典。經典只存在於是那個首次成功創新性的應用。一個閉門造車者做出的東西,是遠遠趕不上綜合借鑑者的。網頁設計不同於其他藝術,在模仿加創新的網頁設計領域當中,即便是完全自己設計的,也是沿用了人們已經認同的大部分使用者習慣,而且這種沿襲的痕跡有時非常的明顯!還有那個設計者敢腆著臉說,這都是我自己的原創設計?對於業界來說,經典只是個理念和象徵!

對於B2B行業網站的設計,要多參考,多模仿,找出幾十個同類型的最優秀網站來參考,分析別的網站為什麼要這麼設計,取其精華,去其糟粕,聯絡自己設計網站的特點加以改進或修改,往往這樣的設計才是最成功的設計。因為最成功的網站都是經過多方研究的,他們不僅僅模仿,也有屬於自己的創新,大部分也經得起使用者的考驗,符合絕大部分使用者的需求。

  7 B2B行業網站大部分的介面應弱化,強調功能和內容

B2B行業入口網站不同於企業網站,它存在的最大價值在於給使用者提供一個平臺,提供更多有價值的內容,介面存在的價值在於輔助、引導使用者更好的去使用這個平臺,發現裡面自己感興趣的內容,挑選並閱讀,獲得知識。並不是要濃墨重彩的使用大量的顏色和圖示來表達頁面的主題,這個是一些設計B2B行業網站的人常犯的錯誤,尤其是初學者。

做一個企業網站,我們為什麼要使用大的圖片、圖示,大面積的顏色去渲染這個頁面呢?因為每個企業都有其自己獨特的產品與企業文化,來這個頁面的讀者都是想了解這個企業或產品的,我們需要用設計向訪問者很直觀的傳遞企業資訊,尤其是很多品牌公司網站。B2B行業網站的專題設計、收費服務介紹等頁面與建設企業網站一樣,需要用大圖片、小圖示、大面積的顏色來襯托頁面的主題。

  8頁面要模組化、可修改性要強

模組化不僅可以提高重用性,也能統一網站風格,還可以降低程式開發的強度。模組化的最大好處就是統一網站風格,讓使用者無論在網站的那個頁面,也能明白還是在這個網站,形成了很強的品牌辨識度。時刻記住,做網站的最終目標,就是做品牌,必須要作為設計的指導思想。

無論是架構、模組或圖片,都要考慮其可修改性。舉個簡單的例子:按鈕,很多人喜歡製作圖片,N個按鈕就是N張圖片。如果只做3-5類按鈕的背景圖片,在網頁程式碼裡打上文字,那麼修改起來就簡單了,讓程式/網頁製作者自己改字就可以了。然而網頁顯示的字型是帶有鋸齒的,一般既能清晰又保證美觀的字型字號有幾類:“宋體12px |宋體12px粗體|宋體14px |宋體14px粗體|黑體20px | verdana 9px | Arial Black 12px+|”等等。

關於B2B行業網站頁面設計基礎就講這8點,這將作為設計B2B行業入口網站的指導思想,也是順利看完本章節的基礎知識。也許還有更多的設計基礎知識,待大家自己在工作中去總結和提升。作為一個做產品策劃的非設計工作者,對設計談的8點看法,希望廣大設計者和產品策劃朋友對李學江拍磚。