(樂購網(wǎng)專欄 作者：李學(xué)江)在B2B行業(yè)網(wǎng)站的框架設(shè)計制作過程中，標(biāo)題欄設(shè)計制作是工作量最大的，頁面框架中最多的。網(wǎng)站Logo和導(dǎo)航條的設(shè)計，基本每個頁面都是和首頁一樣的，相比之下工作量會小很多。無論是網(wǎng)站首頁、二級欄目頁，還是導(dǎo)航頁、內(nèi)容最終頁，優(yōu)秀的標(biāo)題欄總能讓讀者方便快捷的找到想閱讀的內(nèi)容，又不會對頁面內(nèi)容產(chǎn)生干擾作用。
1 B2B行業(yè)網(wǎng)站標(biāo)題欄設(shè)計的一般標(biāo)準(zhǔn)
B2B行業(yè)網(wǎng)站與一般的商業(yè)門戶網(wǎng)站在標(biāo)題欄設(shè)計上大部分是相同的，但是由于B2B行業(yè)網(wǎng)站更多的訪問者和使用者是在辦公室學(xué)習(xí)和工作的，需要更嚴(yán)肅的氛圍，他們需要的更多是商機信息、行業(yè)資訊、行業(yè)技術(shù)知識等內(nèi)容，而不是娛樂和休閑。同時和企業(yè)網(wǎng)站標(biāo)題欄設(shè)計具有很大的區(qū)別，頁面不需要通過標(biāo)題欄的顏色和外形來突出產(chǎn)品的特色及品牌文化，所以B2B行業(yè)網(wǎng)站要弱化標(biāo)題欄的圖片和顏色，不要對訪問者獲得內(nèi)容造成影響，一般標(biāo)準(zhǔn)如下。
1.1 標(biāo)題欄上的字要比網(wǎng)頁上的大部分的內(nèi)容字號更大一些，加粗，要更突出一些
也許大家覺得這個標(biāo)準(zhǔn)誰都知道，但是在我的實際工作中，以及接受很多人的咨詢過程中，看到過一些網(wǎng)站，以及一些設(shè)計師給我的頁面標(biāo)題欄上的字就和內(nèi)容上的字一樣大，都為12PX加粗，也許是他們無心，也許是他們覺得已經(jīng)加粗了，但是從這里看出，一些人還是沒有上升到理論的層面，憑感覺。一般為字號為：14PX，加粗。
圖(45) 中農(nóng)網(wǎng)首頁資訊部分標(biāo)題欄
如上圖所示，為中農(nóng)網(wǎng)(www.ap88.com)首頁資訊部分標(biāo)題欄，從標(biāo)題欄可以看出，農(nóng)業(yè)要聞、圖片新聞、農(nóng)資資訊幾個字，都要比下面的未推薦的文章標(biāo)題的字要大，當(dāng)前選中部分已加粗，讓訪問者明白，現(xiàn)在所看到的是當(dāng)前加粗的農(nóng)業(yè)要聞部分。所以標(biāo)題欄加粗、字號更大是所有頁面設(shè)計者、網(wǎng)站測試者必須要明確的基本標(biāo)準(zhǔn)。當(dāng)然對內(nèi)容中重點推薦標(biāo)題，可以比標(biāo)題欄字號更大。
圖(46) 某服裝網(wǎng)站的標(biāo)題欄，字號未變大，未加粗，沒有層次感
如上圖所示，為某服裝網(wǎng)站的標(biāo)題欄，就是不規(guī)范的，標(biāo)題欄上的字既沒有加粗，也沒有變大，頁面看起來沒有層次感。這個方面報紙、期刊、書籍的排版做的最好，要向他們學(xué)習(xí)，讓訪問者更好的尋找內(nèi)容，有更好的閱讀體驗。
1.2 標(biāo)題欄無論怎么設(shè)計，字無論采用了什么效果，都必須非常清晰，不能花哨
根據(jù)網(wǎng)頁的主題，內(nèi)容的種類，不同頁面的標(biāo)題欄會設(shè)計成不同的效果，但是無論我們怎么設(shè)計，都必須要使標(biāo)題欄上的字看起來很清楚、明白，使訪問者一目了然，不能為了更好看，更有藝術(shù)效果，而使字看起來不清楚、不突出。
更重要的是，由于B2B行業(yè)網(wǎng)站的頁面要更嚴(yán)肅，標(biāo)題欄的字，圖片和顏色，都要看起來更嚴(yán)肅一些，不能太花哨，太漂亮，簡潔大方更好。
圖(47) 某行業(yè)網(wǎng)站首頁會員推薦標(biāo)題欄
如圖(47)是某行業(yè)網(wǎng)站首頁會員推薦標(biāo)題欄，標(biāo)題欄上“會員推薦”幾個字就不清楚，其實只要做一些簡單的調(diào)整，把字上下居中顯示，把背景顏色再深一些，字做點效果，就會更清楚一些。
1.3 標(biāo)題欄上不能大面積使用刺眼的顏色，不能太突出，干擾用戶尋找內(nèi)容
B2B行業(yè)網(wǎng)站的首頁、一級欄目、二級欄目、內(nèi)容頁等頁面，訪問者需要從頁面里尋找大量自己感興趣的內(nèi)容，與專題頁面、企業(yè)網(wǎng)站等不同，尤其是品牌企業(yè)網(wǎng)站的內(nèi)容不多，需要通過顏色、字體、外形等來渲染產(chǎn)品的品牌特色，可以大面積使用顏色作為標(biāo)題欄的背景色，采用很大的字號，不會喧賓奪主，會給訪問者建立一個氛圍。
圖(48) 中國服裝網(wǎng)資訊欄目標(biāo)題欄
從圖(48)可以看出，標(biāo)題欄使用了藍(lán)色，由于標(biāo)題欄太長，所以不能使用很深的藍(lán)色，而是采用了藍(lán)色的漸變色，這樣就弱化了標(biāo)題欄的視覺沖擊力，讓訪問者更關(guān)注內(nèi)容。正如我在《B2B行業(yè)門戶網(wǎng)站策劃實戰(zhàn)研究報告》里講過，凡是成功的B2B行業(yè)網(wǎng)站，絕大部分都有很好的頁面設(shè)計功底，我們要多學(xué)習(xí)成功的行業(yè)網(wǎng)站。
1.4 標(biāo)題欄應(yīng)與所包含的內(nèi)容形成一個整體，在視覺上形成區(qū)別
每一個標(biāo)題欄下面所屬的內(nèi)容都代表一個細(xì)分的內(nèi)容，標(biāo)題欄起到的作用就是希望訪問者能盡快找到自己感興趣的內(nèi)容，要達(dá)到這個目的，就要用標(biāo)題欄和邊框?qū)?nèi)容包圍起來，形成一個整體，讓訪問者從視覺上更能區(qū)分自己正在看的是什么種類的信息。
圖(49) 新浪網(wǎng)財經(jīng)欄目首頁切換的標(biāo)題欄
如圖(49)新浪網(wǎng)財經(jīng)欄目首頁切換的標(biāo)題欄，從“商品-貨幣”部分切換到“滾動新聞”部分，不僅文字變了，文字下的背景也變成了白色，和下面的內(nèi)容形成封閉的整體。如果切換過去，文字下面的顏色還是淺藍(lán)色，就形成不了一個整體。
1.5 標(biāo)題欄的角不能太圓、太卡通，背景不能用太鮮艷的花紋，不能用橢圓形
B2B行業(yè)網(wǎng)站需要更嚴(yán)肅一些的風(fēng)格，所以標(biāo)題欄切忌圓角太圓，也不能用太鮮艷的花紋作為背景，甚至使用橢圓形的。在我多年的工作經(jīng)驗中，看到過一些設(shè)計師提供的B2B行業(yè)網(wǎng)站頁面標(biāo)題欄圓角太圓，這種設(shè)計給人很不嚴(yán)肅的氛圍，有一點圓角就可以了。在設(shè)計一些比較有特點的企業(yè)網(wǎng)站或品牌網(wǎng)站時，以及大家看到的QQ空間、51空間等個人主頁可以使用一些個性化的標(biāo)題欄，但是在B2B行業(yè)網(wǎng)站不能使用。這個就是網(wǎng)站定位與設(shè)計的聯(lián)系所在。
以上講的幾點，雖然道理很淺顯，大家一看都覺得很簡單，大部分的設(shè)計師在設(shè)計的時候都能在潛意識里遵守這些標(biāo)準(zhǔn)。但是《B2B行業(yè)門戶網(wǎng)站設(shè)計開發(fā)實戰(zhàn)研究報告》認(rèn)為，總有一些設(shè)計師他有時會犯以上錯誤中的一個或幾個，作為網(wǎng)站的產(chǎn)品經(jīng)理、產(chǎn)品測試者、網(wǎng)站管理人員，必須要能懂得這些細(xì)節(jié)，在產(chǎn)品開發(fā)過程中及時的糾正這些問題。
推薦閱讀
甲骨文CEO薪酬高達(dá)9600萬美元 大部分來自期權(quán)
甲骨文CEO 拉里·埃里森 9月24日消息，據(jù)國外媒體報道，甲骨文創(chuàng)始人兼CEO拉里·埃里森(Larry Ellison)是世界是最富有的人之一。據(jù)公司向美國證券交易委員會(SEC)提交的文件顯示，埃里森2012財年的薪酬達(dá)到了9620萬美>>>詳細(xì)閱讀
本文標(biāo)題：B2B行業(yè)網(wǎng)站標(biāo)題欄設(shè)計的一般標(biāo)準(zhǔn)
地址：http://www.geekbao.cn/a/b2b/20120924/86781.html
網(wǎng)友點評
精彩導(dǎo)讀
科技快報
品牌展示