高校網(wǎng)站設(shè)計(jì)中B2B網(wǎng)站頁(yè)面設(shè)計(jì)技巧

　　高校網(wǎng)站設(shè)計(jì)，我想大家都知道B2B行業(yè)網(wǎng)站具有B2B網(wǎng)站和門戶網(wǎng)站的特點(diǎn)，這決定了頁(yè)面設(shè)計(jì)與其他網(wǎng)站的一些區(qū)別。這里從理論上探討一下頁(yè)面設(shè)計(jì)和制作的基本要點(diǎn)，供大家參考。歡迎大家能批評(píng)和糾正錯(cuò)誤。

　　一是頁(yè)面色彩、框架、整體風(fēng)格要嚴(yán)謹(jǐn)，充滿商業(yè)氣息

　　由于B2B行業(yè)網(wǎng)站內(nèi)容嚴(yán)謹(jǐn)高端，涉及行業(yè)發(fā)展趨勢(shì)、各種技術(shù)交流、企業(yè)營(yíng)銷管理知識(shí)等信息，注定內(nèi)容嚴(yán)謹(jǐn)高端；因?yàn)樯婕暗狡髽I(yè)之間的交易推廣、信息交流、交友等，所以商業(yè)欄目要展現(xiàn)出濃厚的商業(yè)氛圍，所有的頁(yè)面設(shè)計(jì)都是針對(duì)商人的。

　　A頁(yè)的顏色要更嚴(yán)謹(jǐn)，避免非商業(yè)色彩。

　　藍(lán)色、紅色和黃色是B2B網(wǎng)站常用的主要顏色，其中幾種顏色經(jīng)常一起使用。當(dāng)然，在使用過(guò)程中，這些顏色之外的顏色經(jīng)常會(huì)一起使用，或者顏色逐漸變化。

　　衍生的顏色包括:深藍(lán)色、深紅色、鮮紅色、橙色、橙黃色、灰色等。，這里沒(méi)有列出。配色由設(shè)計(jì)師自己決定，最后我們?cè)賮?lái)回顧一下。

　　禁忌使用以下顏色作為主色調(diào):

　　綠色:綠色更象征著自然、純潔、自然等含義。不符合B2B行業(yè)網(wǎng)站嚴(yán)謹(jǐn)、商業(yè)化的特點(diǎn)?？梢宰鳛槌燃t色的搭配色，但建議不要作為主色調(diào)。

　　粉色:這個(gè)顏色更多的是女性化和溫暖。即使是以女性產(chǎn)品為特色的行業(yè)，也不能用。作為搭配色，要盡量少用。畢竟離用戶的需求還很遠(yuǎn)。

　　黑色:黑色和灰色是頁(yè)面上大部分文字可以使用的顏色，但不能作為B2B網(wǎng)站的主色調(diào)。

　　B頁(yè)的標(biāo)題欄和導(dǎo)航欄要更方更規(guī)整

　　作為一個(gè)企業(yè)網(wǎng)站，一個(gè)時(shí)尚的網(wǎng)站，或者為了表達(dá)時(shí)尚活潑的主題，網(wǎng)站設(shè)計(jì)可以更加活潑，用圓形或者不規(guī)則的排版，但是作為一個(gè)B2B網(wǎng)站，就不能這樣設(shè)計(jì)。

　　每個(gè)部分都要區(qū)分清楚，每個(gè)區(qū)域都要規(guī)整，使用的圖片和背景要嚴(yán)謹(jǐn)。你不能把網(wǎng)站的標(biāo)題欄和導(dǎo)航欄設(shè)計(jì)成斜圖片、大橢圓、大圖標(biāo)、卡通圖標(biāo)和活潑的圖形。

　　c整體風(fēng)格要嚴(yán)謹(jǐn)，充滿商業(yè)氣息

　　網(wǎng)站的整體風(fēng)格比顏色和標(biāo)題欄設(shè)計(jì)更重要。一定的配色更加活潑時(shí)尚，不會(huì)影響整體風(fēng)格。不規(guī)則的圖片，或者網(wǎng)頁(yè)中內(nèi)容的不規(guī)則圖片，對(duì)整體感覺(jué)不會(huì)有太大影響。整體頁(yè)面風(fēng)格不能花哨。要減少框架和背景對(duì)閱讀內(nèi)容的影響，減少頁(yè)面的噪音。整體風(fēng)格要優(yōu)雅，讓游客靜下心來(lái)思考。

　　第二，內(nèi)容和功能決定了表現(xiàn)形式和界面設(shè)計(jì)

　　頁(yè)面設(shè)計(jì)沒(méi)有固定的標(biāo)準(zhǔn)。很多時(shí)候，我們不能以美丑來(lái)判斷，也不能以是否有創(chuàng)意來(lái)判斷。相反，我們應(yīng)該全面分析這個(gè)頁(yè)面的訪問(wèn)者、內(nèi)容和功能。有時(shí)候一點(diǎn)創(chuàng)意都沒(méi)有，跟其他很多網(wǎng)站差不多，最好的，因?yàn)閼?yīng)該是這樣的。任何設(shè)計(jì)和功能都是為訪問(wèn)者和用戶服務(wù)的，設(shè)計(jì)師的分析能力遠(yuǎn)比創(chuàng)造力重要。

　　示例:

　　如果用戶注冊(cè)頁(yè)面頭上有很多導(dǎo)航欄，左右有很多精彩的內(nèi)容推薦，還有設(shè)計(jì)精美的圖標(biāo)，那就錯(cuò)了。這個(gè)頁(yè)面上的鏈接越少越好，頁(yè)面越簡(jiǎn)單。最重要的是引導(dǎo)用戶靜下心來(lái)，填寫真實(shí)豐富的內(nèi)容，否則用戶可能一半的操作都有麻煩，還有更好的內(nèi)容吸引他，他就不再填寫了。

　　在設(shè)計(jì)任何一個(gè)頁(yè)面之前，設(shè)計(jì)者都必須靜下心來(lái)，想一想頁(yè)面在表達(dá)什么，或者是什么樣的功能，然后根據(jù)內(nèi)容和功能來(lái)確定表達(dá)的形式。在規(guī)劃網(wǎng)站時(shí)，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，需要初步考慮頁(yè)面的表現(xiàn)形式。詳見(jiàn)《第四版B2B行業(yè)門戶網(wǎng)站規(guī)劃研究報(bào)告》第八章，系統(tǒng)闡述了這一問(wèn)題。

　　第三，多用成語(yǔ)，不要輕易使用新的用法。

　　所謂習(xí)慣用語(yǔ)，是指用戶經(jīng)常使用的網(wǎng)站，或者知名網(wǎng)站的用法，這往往是用戶的習(xí)慣，因?yàn)橹W(wǎng)站的用戶數(shù)量最多，用戶的認(rèn)可度也最高。同樣的功能，或者不會(huì)因?yàn)榫W(wǎng)站不同而改變表達(dá)的功能，都可以搭配成語(yǔ)使用。

　　比如我們來(lái)到一個(gè)新的網(wǎng)站，往往需要了解網(wǎng)站的介紹、主辦方的聯(lián)系方式等信息。習(xí)慣是在網(wǎng)站底部找到這些信息。大多數(shù)網(wǎng)站底部都有一排鏈接來(lái)表達(dá)。如果你設(shè)計(jì)網(wǎng)站，你想非常創(chuàng)新，如果你不把這些鏈接放在底部，用戶會(huì)感到不舒服。

　　對(duì)于設(shè)計(jì)師來(lái)說(shuō)，即使這樣的熟悉感讓你覺(jué)得相似和無(wú)趣，完全沒(méi)有創(chuàng)新，你還是要這樣使用。但這并不意味著我們不需要?jiǎng)?chuàng)新。相反，在規(guī)劃設(shè)計(jì)工作中，我們需要大膽創(chuàng)新。如果我們不打算使用一個(gè)成語(yǔ)，規(guī)劃者和設(shè)計(jì)者必須確認(rèn)這個(gè)新用法有以下兩個(gè)特點(diǎn):

　　(1)同樣清晰，同樣不言而喻:只是一種更好的表達(dá)，本質(zhì)上與原作沒(méi)有太大變化，也讓用戶一眼就明白，這不是完全無(wú)中生有的創(chuàng)新，而是比原作更好。

　　(2)它帶來(lái)了巨大的價(jià)值，值得用戶努力學(xué)習(xí):雖然這個(gè)功能以前從未見(jiàn)過(guò)，但我們確認(rèn)它能帶來(lái)質(zhì)的變化，而不僅僅是改變用戶不習(xí)慣的功能和界面。比如過(guò)去大多數(shù)網(wǎng)站都是一步注冊(cè)的?，F(xiàn)在注冊(cè)會(huì)員，很多網(wǎng)站都是分兩三步走的。為什么要這樣設(shè)計(jì)？因?yàn)橐顚懙膬?nèi)容太多，用戶把內(nèi)容分成幾個(gè)步驟更容易接受。

　　第四，建立清晰的視覺(jué)層次，讓用戶在視覺(jué)上進(jìn)行區(qū)分。

　　頁(yè)面有層次感，一眼就能看出哪些是重要的，哪些是次要的。每個(gè)部分表達(dá)的內(nèi)容都非常清晰，用戶可以快速找到自己關(guān)注的部分。相反，頁(yè)面凌亂，結(jié)構(gòu)不清晰，用戶來(lái)到頁(yè)面就不知道重點(diǎn)是什么。網(wǎng)民的耐心很差。30秒內(nèi)很難找到自己感興趣的內(nèi)容，所以可能找不到。他們認(rèn)為網(wǎng)站對(duì)他們來(lái)說(shuō)不感興趣，或者他們根本不會(huì)來(lái)。但是，其實(shí)網(wǎng)站有他想要的內(nèi)容或者他想要使用的功能，只是因?yàn)轫?yè)面設(shè)計(jì)不好，找不到更快。

　　一個(gè)部分越重要，它就越突出。

　　A在一個(gè)頁(yè)面上，如果沒(méi)有焦點(diǎn)，用戶會(huì)花很多時(shí)間在所有相同的內(nèi)容中尋找自己喜歡的內(nèi)容和功能，這對(duì)用戶來(lái)說(shuō)是不友好的。用戶經(jīng)常使用和閱讀的內(nèi)容越多，就越重要。用戶將在最短的時(shí)間內(nèi)獲得最關(guān)注的內(nèi)容和功能，吸引他們留下來(lái)。

　　在頁(yè)面設(shè)計(jì)中，突出重點(diǎn)內(nèi)容的方式有很多，常用的有:加粗字體、放大字號(hào)、字與周圍顏色不同的顏色、字前醒目的圖標(biāo)、圖片或顏色作為背景等。，在《B2B行業(yè)門戶網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)研究報(bào)告》第三章中進(jìn)行了重點(diǎn)介紹。

　　B與功能或內(nèi)容相關(guān)的部分也要視覺(jué)上相關(guān)。

　　視覺(jué)中與功能或內(nèi)容相關(guān)的部分也應(yīng)該是相關(guān)的，因?yàn)楫?dāng)用戶掃描時(shí)，與視覺(jué)相關(guān)的部分會(huì)一起掃描，否則很容易同時(shí)被忽略和凌亂。常用的方法是用同一個(gè)框、同一個(gè)背景、同一個(gè)圖標(biāo)來(lái)表達(dá)相關(guān)的功能或內(nèi)容。

　　C函數(shù)或內(nèi)容的邏輯部分也應(yīng)該可視化嵌套。

　　所謂邏輯包含，就是從邏輯的角度進(jìn)行推理。應(yīng)該屬于包容性，比如B2B行業(yè)網(wǎng)站的上游原材料和設(shè)備。如果把這兩部分放在一頁(yè)上，設(shè)備和原材料要分開(kāi)設(shè)計(jì)，但是原材料和設(shè)備模塊本身會(huì)包含很多不同的內(nèi)容。為了讓想要采購(gòu)的企業(yè)快速找到自己想要的產(chǎn)品，應(yīng)該嵌套在設(shè)備模塊和原材料模塊內(nèi)部。

　　第五，參觀者在掃描而不是閱讀

　　《不要讓我思考》一書說(shuō):“訪客不是在閱讀，而是在掃描，這是少數(shù)被證明的事實(shí)之一。人們花很少的時(shí)間閱讀大多數(shù)頁(yè)面。相反，我們只是掃描(或?yàn)g覽)網(wǎng)頁(yè)，尋找能夠吸引我們注意力的單詞或詞語(yǔ)。”用于導(dǎo)航頁(yè)面、主頁(yè)等。，用戶會(huì)多掃描獲取自己感興趣的內(nèi)容。對(duì)于內(nèi)容的最后一頁(yè)，用戶還會(huì)在閱讀前掃描大致內(nèi)容。對(duì)于太長(zhǎng)的文章或內(nèi)容，要看是否有副標(biāo)題。如果有，就要掃描小標(biāo)題，看看有沒(méi)有興趣，然后再繼續(xù)看。一般情況下，用戶會(huì)先掃描以下內(nèi)容:

　　A.與手頭的任務(wù)有關(guān)，我們迫切需要知道。

　　B.我們現(xiàn)在或下一步的個(gè)人興趣，比如:想購(gòu)買一批機(jī)器，找工作；

　　c.我們腦子里有一些根深蒂固的詞，比如“免費(fèi)”、“打折”、“美容”。B2B網(wǎng)站用戶會(huì)感興趣:比如行業(yè)內(nèi)最具爆炸性的新聞，知名公司大佬的動(dòng)向，最新的購(gòu)買情況等。

　　我們?cè)谝?guī)劃設(shè)計(jì)網(wǎng)站頁(yè)面、編輯網(wǎng)站內(nèi)容時(shí)，要時(shí)刻記住用戶不是在閱讀，而是在掃描，這樣才能始終如一地貫徹這一理念。會(huì)引導(dǎo)很多正確的規(guī)劃設(shè)計(jì)，比如:重要內(nèi)容要大標(biāo)題和加粗；每個(gè)模塊都可以盡量圖文并茂，讓讀者在掃描時(shí)能看到圖片，更容易引起興趣；我們應(yīng)該對(duì)廣告文案進(jìn)行總結(jié)和提煉，以吸引他們的興趣。編輯文章和內(nèi)容時(shí)，最好給800字以上的文章加上副標(biāo)題，讓用戶提前掃描是否感興趣。

　　第六，人們閉門造車，遠(yuǎn)遠(yuǎn)落后于全面參考

　　網(wǎng)頁(yè)更新很快，一個(gè)網(wǎng)站界面的設(shè)計(jì)壽命只有2-3年。沒(méi)有經(jīng)典這回事，不管是垃圾還是精品。經(jīng)典的存在是第一次成功的創(chuàng)新應(yīng)用。一個(gè)幕后人做出來(lái)的東西，遠(yuǎn)遠(yuǎn)落后于綜合參考人。網(wǎng)頁(yè)設(shè)計(jì)不同于其他藝術(shù)。在網(wǎng)頁(yè)設(shè)計(jì)的模仿和創(chuàng)新領(lǐng)域，即使完全是自己設(shè)計(jì)，也遵循了人們已經(jīng)認(rèn)同的大部分用戶習(xí)慣，這種傳承的痕跡有時(shí)也非常明顯！而且設(shè)計(jì)師還敢一臉羞澀的說(shuō)這些都是我自己原創(chuàng)的設(shè)計(jì)？對(duì)于行業(yè)來(lái)說(shuō)，經(jīng)典只是一個(gè)概念和符號(hào)！

　　對(duì)于B2B行業(yè)網(wǎng)站的設(shè)計(jì)，我們應(yīng)該參考和模仿幾十個(gè)同類型最好的網(wǎng)站進(jìn)行參考，分析為什么其他網(wǎng)站要這樣設(shè)計(jì)，取其精華去其糟粕，根據(jù)自己設(shè)計(jì)的網(wǎng)站的特點(diǎn)進(jìn)行改進(jìn)或修改，這往往是最成功的設(shè)計(jì)。因?yàn)樽畛晒Φ木W(wǎng)站都被多方研究過(guò)，他們不僅模仿，而且有自己的創(chuàng)新，大部分都能經(jīng)得起用戶的考驗(yàn)，滿足大部分用戶的需求。

　　第七，B2B行業(yè)網(wǎng)站的大部分界面都要弱化，強(qiáng)調(diào)功能和內(nèi)容

　　B2B門戶網(wǎng)站不同于企業(yè)網(wǎng)站。它最大的價(jià)值在于為用戶提供了一個(gè)平臺(tái)和更有價(jià)值的內(nèi)容。界面的價(jià)值在于輔助和引導(dǎo)用戶更好地使用這個(gè)平臺(tái)，找到自己感興趣的內(nèi)容，選擇閱讀，獲取知識(shí)。不是用很多顏色和圖標(biāo)來(lái)表達(dá)頁(yè)面的主題。這是一些設(shè)計(jì)B2B網(wǎng)站的人，尤其是初學(xué)者經(jīng)常犯的錯(cuò)誤。

　　作為一個(gè)企業(yè)網(wǎng)站，為什么要用大圖片、大圖標(biāo)、大面積的顏色來(lái)渲染這個(gè)頁(yè)面？因?yàn)槊總€(gè)企業(yè)都有自己獨(dú)特的產(chǎn)品和企業(yè)文化，來(lái)到這個(gè)頁(yè)面的讀者都想了解這個(gè)企業(yè)或者產(chǎn)品，我們需要用設(shè)計(jì)將企業(yè)信息直觀地傳達(dá)給訪問(wèn)者，尤其是很多品牌公司的網(wǎng)站。和建筑企業(yè)的網(wǎng)站一樣，B2B網(wǎng)站的頁(yè)面，如主題設(shè)計(jì)、收費(fèi)服務(wù)介紹等，都需要大圖片、小圖標(biāo)、大面積的顏色來(lái)襯托頁(yè)面的主題。

　　第八，頁(yè)面應(yīng)模塊化，可修改

　　模塊化不僅可以提高可重用性，還可以統(tǒng)一網(wǎng)站風(fēng)格，降低程序開(kāi)發(fā)強(qiáng)度。模塊化最大的好處就是統(tǒng)一了網(wǎng)站風(fēng)格，讓用戶明白自己是在網(wǎng)站的那個(gè)頁(yè)面上，還是在這個(gè)網(wǎng)站上，從而形成強(qiáng)大的品牌認(rèn)可度。永遠(yuǎn)記住，一個(gè)網(wǎng)站的最終目標(biāo)是做品牌，這一定是設(shè)計(jì)的指導(dǎo)思想。如何打造B2B行業(yè)網(wǎng)站的品牌，在《B2B行業(yè)門戶網(wǎng)站推廣實(shí)用秘籍》中有系統(tǒng)的講解。

　　無(wú)論是架構(gòu)、模塊還是圖片，都要考慮其可修改性。舉個(gè)簡(jiǎn)單的例子:按鈕，很多人喜歡做圖片，n個(gè)按鈕就是n張圖片。如果只做3-5個(gè)按鈕的背景圖，在網(wǎng)頁(yè)代碼中打文字，會(huì)很容易修改，讓節(jié)目/網(wǎng)頁(yè)制作人自己改文字。但是，網(wǎng)頁(yè)上顯示的字體是鋸齒狀的。一般可以清晰美觀的字體有幾種類型:“宋12px |宋12px Bold |宋14px |宋14px Bold | Bold 20px | verdana 9px | arial back 12px+|”等等。