更新時(shí)間：2025-05-21 00:16:36
網(wǎng)站建設(shè)
544相信大家都知道北京網(wǎng)站設(shè)計(jì)B2B行業(yè)網(wǎng)站具有B2B網(wǎng)站和門(mén)戶網(wǎng)站的特點(diǎn)，這決定了頁(yè)面設(shè)計(jì)與其他網(wǎng)站的一些區(qū)別。本文從理論上探討網(wǎng)頁(yè)設(shè)計(jì)制作的基本要點(diǎn)，供大家參考。如有不妥之處，希望大家批評(píng)指正。
第一，頁(yè)面色彩、框架、整體風(fēng)格要嚴(yán)謹(jǐn)，充滿商業(yè)氣息
因?yàn)锽2B行業(yè)網(wǎng)站內(nèi)容嚴(yán)謹(jǐn)高端，涉及行業(yè)發(fā)展趨勢(shì)、各種技術(shù)交流、企業(yè)營(yíng)銷(xiāo)管理知識(shí)等信息，注定了內(nèi)容的嚴(yán)謹(jǐn)高端；因?yàn)樯婕敖灰状龠M(jìn)、信息交流、企業(yè)間交友，所以商業(yè)欄目必須表現(xiàn)出濃厚的商業(yè)氣息，所有的頁(yè)面設(shè)計(jì)都是為商人服務(wù)的。
A.頁(yè)面用色要嚴(yán)謹(jǐn)，避免非商業(yè)色彩
藍(lán)色、紅色和黃色是B2B網(wǎng)站常用的主要顏色，其中幾種顏色經(jīng)常一起使用。當(dāng)然，在使用過(guò)程中，也經(jīng)常會(huì)同時(shí)使用這些顏色以外的顏色，或者顏色逐漸變化。
衍生出的顏色有：深藍(lán)、深紅、大紅、橙色、橙黃、灰色等。這里就不一一列舉了。配色是設(shè)計(jì)師自己定的，最后我們?cè)僭u(píng)測(cè)。
請(qǐng)勿使用以下顏色作為主色：
綠色： 綠色更多地象征著自然、純潔、自然等含義。不符合B2B行業(yè)網(wǎng)站嚴(yán)謹(jǐn)、商業(yè)化的特點(diǎn)。可以作為橙色和紅色的配色，但不推薦作為主色。
粉紅色：更加女性化和溫暖。即使在以女性產(chǎn)品為特色的行業(yè)中，也不能使用它。作為匹配色，請(qǐng)謹(jǐn)慎使用。畢竟離用戶的需求還差得很遠(yuǎn)。
黑色： 黑色和灰色是可以用于頁(yè)面上大部分文字的顏色，但它們不能用作B2B 網(wǎng)站的主色。
B、頁(yè)面的標(biāo)題欄和導(dǎo)航欄應(yīng)該比較方正
作為企業(yè)網(wǎng)站，時(shí)尚網(wǎng)站，或者表達(dá)時(shí)尚活潑的主題，網(wǎng)站設(shè)計(jì)可以比較活潑，圓形或者不規(guī)則的布局，但是作為B2B網(wǎng)站，就不能這樣設(shè)計(jì)了。
各部分要區(qū)分明確，各區(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)，富有商務(wù)氣息
網(wǎng)站的整體風(fēng)格比顏色和標(biāo)題欄設(shè)計(jì)更重要。搭配的顏色比較活潑時(shí)尚，不會(huì)影響整體風(fēng)格。不規(guī)則的圖片，或者網(wǎng)頁(yè)上不規(guī)則的內(nèi)容圖片，對(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í)候，我們無(wú)法通過(guò)它的美丑或創(chuàng)意來(lái)評(píng)判它。相反，有必要綜合分析該頁(yè)面的訪問(wèn)者、內(nèi)容和功能。有時(shí)完全沒(méi)有創(chuàng)意，就像許多其他網(wǎng)站一樣，是最好的，因?yàn)樗鼞?yīng)該是這樣的。任何設(shè)計(jì)和功能都是為參觀者和用戶服務(wù)的，設(shè)計(jì)師的分析能力遠(yuǎn)比創(chuàng)意重要。
示例：
如果用戶注冊(cè)頁(yè)面頭部有很多導(dǎo)航欄，左右有很多精彩的內(nèi)容推薦，圖標(biāo)設(shè)計(jì)得很漂亮，那就錯(cuò)了。此頁(yè)面上的鏈接越少越好，頁(yè)面越簡(jiǎn)單。最重要的是引導(dǎo)用戶靜下心來(lái)填寫(xiě)真實(shí)豐富的內(nèi)容，否則用戶操作到一半可能會(huì)遇到麻煩，如果有更好的內(nèi)容吸引他，他就不會(huì)再填寫(xiě)了。
設(shè)計(jì)者在設(shè)計(jì)任何頁(yè)面之前，都要先靜下心來(lái)想一想，這個(gè)頁(yè)面到底在表達(dá)什么，或者說(shuō)它有什么樣的功能，然后根據(jù)內(nèi)容和功能來(lái)確定表現(xiàn)形式。在規(guī)劃網(wǎng)站時(shí)，對(duì)于設(shè)計(jì)者來(lái)說(shuō)，首先要考慮頁(yè)面的形式。
第三，多使用成語(yǔ)，不要輕易使用一個(gè)新的用法
所謂慣用用法，是指用戶經(jīng)常使用的網(wǎng)站，或者知名網(wǎng)站的用法，往往是用戶的習(xí)慣，因?yàn)橹W(wǎng)站的用戶數(shù)量最多，最受用戶認(rèn)可。相同的功能，或者不因網(wǎng)站不同而改變表達(dá)方式的功能，都可以使用成語(yǔ)。
比如，我們來(lái)到一個(gè)新的網(wǎng)站，往往需要了解網(wǎng)站的介紹、主辦方的聯(lián)系方式等信息。習(xí)慣是在網(wǎng)站底部找到這些信息。大多數(shù)網(wǎng)站在底部都有一排鏈接來(lái)表達(dá)它。如果你設(shè)計(jì)一個(gè)網(wǎng)站，你想要非常有創(chuàng)意，如果你不把那些鏈接放在底部，用戶會(huì)覺(jué)得不舒服。
對(duì)于設(shè)計(jì)師來(lái)說(shuō)，即使這樣的熟悉讓你覺(jué)得雷同無(wú)聊，毫無(wú)創(chuàng)新可言，但你還是得這么用。但這并不意味著我們不需要?jiǎng)?chuàng)新。相反，在規(guī)劃設(shè)計(jì)工作中，要大膽創(chuàng)新。如果我們不打算使用一個(gè)習(xí)語(yǔ)，規(guī)劃者和設(shè)計(jì)者必須確認(rèn)這個(gè)新用法具有以下兩個(gè)特征：
(1) 同樣清楚不言而喻的是，只是一種更好的表達(dá)方式，本質(zhì)上與原版相同，也讓用戶一眼就明白，它并非完全創(chuàng)新，但比原版更好.
(2) 帶來(lái)了巨大的價(jià)值，值得用戶去學(xué)習(xí)：雖然這個(gè)功能以前從未見(jiàn)過(guò)，但我們確認(rèn)它可以帶來(lái)質(zhì)的變化，而不僅僅是改變用戶不用的功能和界面到。例如，大多數(shù)網(wǎng)站過(guò)去都是一步注冊(cè)的。如果你現(xiàn)在注冊(cè)成為會(huì)員，很多網(wǎng)站都分為兩步或三步。為什么要這樣設(shè)計(jì)？由于要填寫(xiě)的內(nèi)容太多，內(nèi)容分為
幾個(gè)步驟，用戶更容易接受。第四，建立清晰的視覺(jué)層次，讓用戶在視覺(jué)上區(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ì)他們不感興趣，或者他們以后根本不會(huì)來(lái)。但是，其實(shí)網(wǎng)站是有他想要的內(nèi)容或者他想要使用的功能的，只是因?yàn)轫?yè)面設(shè)計(jì)不好，不能更快的找到。
A.越重要的部分，越突出
在一個(gè)頁(yè)面上，如果沒(méi)有焦點(diǎn)，用戶會(huì)花很多時(shí)間在所有相同的內(nèi)容中尋找自己喜歡的內(nèi)容和功能，這對(duì)用戶來(lái)說(shuō)是不友好的。用戶經(jīng)常使用和閱讀的內(nèi)容越多，就越重要。用戶會(huì)在最短的時(shí)間內(nèi)獲得最關(guān)注的內(nèi)容和功能，吸引他們留下來(lái)。
在頁(yè)面設(shè)計(jì)中，突出重點(diǎn)內(nèi)容的方法有很多，常用的有:加粗字體、較大的字號(hào)、文字顏色與周?chē)伾煌⑽淖智懊嬗酗@眼的圖標(biāo)、圖片或顏色作為背景等等。
B.與功能或內(nèi)容相關(guān)的部分也要有視覺(jué)上的關(guān)聯(lián)
與功能或內(nèi)容相關(guān)的視覺(jué)部分也要有關(guān)聯(lián)，因?yàn)橛脩魭呙钑r(shí)，與視覺(jué)相關(guān)的部分會(huì)一起掃描，否則容易被忽略，同時(shí)也很亂。常用的方法是用同一個(gè)方框、同一個(gè)背景、同一個(gè)圖標(biāo)來(lái)表達(dá)相關(guān)的功能或內(nèi)容。
C.功能或內(nèi)容的邏輯包含部分也應(yīng)該在視覺(jué)上嵌套
所謂邏輯包含，就是從邏輯的角度進(jìn)行推理。應(yīng)該屬于收錄，比如B2B行業(yè)網(wǎng)站的上游原材料和設(shè)備。如果把這兩部分放在一個(gè)頁(yè)面上，就要把設(shè)備和原材料分開(kāi)設(shè)計(jì)，但是原材料和設(shè)備模塊本身會(huì)包含很多不同的內(nèi)容。為了讓要采購(gòu)的企業(yè)快速找到想要的產(chǎn)品，要嵌套在設(shè)備模塊和原材料模塊里面。
第五，參觀者在瀏覽而不是閱讀
用于導(dǎo)航頁(yè)面、主頁(yè)等。，用戶會(huì)多掃描獲取自己感興趣的內(nèi)容。對(duì)于內(nèi)容的最后一頁(yè)，用戶在閱讀之前還會(huì)對(duì)大致內(nèi)容進(jìn)行掃描。對(duì)于過(guò)長(zhǎng)的文章或內(nèi)容，要看是否有副標(biāo)題。如果有，就要掃一掃小標(biāo)題，看看有沒(méi)有興趣，然后再繼續(xù)看。一般來(lái)說(shuō)，用戶會(huì)先掃描以下內(nèi)容:
A.與手頭的任務(wù)有關(guān)，我們迫切需要知道的。
B.我們當(dāng)前或者接下來(lái)的個(gè)人興趣，比如:想購(gòu)買(mǎi)一批機(jī)器，找工作；
C.在我們的腦海里有一些根深蒂固的詞匯，比如“免費(fèi)”、“打折”、“美女”。B2B網(wǎng)站用戶會(huì)感興趣:比如業(yè)內(nèi)最具爆炸性的新聞，知名公司老板的動(dòng)向，最新購(gòu)買(mǎi)等。
我們?cè)谝?guī)劃設(shè)計(jì)網(wǎng)站的頁(yè)面，編輯網(wǎng)站的內(nèi)容時(shí)，要時(shí)刻記住，用戶不是在閱讀，而是在掃描，這樣才能一以貫之地貫徹這一理念。會(huì)指導(dǎo)很多正確的策劃設(shè)計(jì)，比如:重要內(nèi)容要頭條，加粗；每個(gè)模塊都可以盡量圖文并茂，讓讀者在掃描時(shí)能看到圖片，更容易引起興趣；我們應(yīng)該對(duì)廣告文案進(jìn)行總結(jié)和提煉，以吸引他們的興趣。在編輯文章和內(nèi)容的時(shí)候，最好給800字以上的文章加上小標(biāo)題，讓用戶可以提前掃描自己是否感興趣。
第六，關(guān)起門(mén)來(lái)做的東西，遠(yuǎn)遠(yuǎn)跟不上綜合參考
網(wǎng)頁(yè)更新快，一個(gè)網(wǎng)站的界面設(shè)計(jì)壽命只有2-3年。沒(méi)有所謂的經(jīng)典，無(wú)論是垃圾還是精品。經(jīng)典的存在是第一個(gè)成功的創(chuàng)新應(yīng)用。一個(gè)幕后人做出來(lái)的東西，遠(yuǎn)遠(yuǎn)落后于綜合參考人。網(wǎng)頁(yè)設(shè)計(jì)不同于其他藝術(shù)。在模仿創(chuàng)新的網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，即使完全是自己設(shè)計(jì)的，也依然遵循著人們?cè)缫鸭s定的大部分用戶習(xí)慣。
對(duì)于B2B行業(yè)網(wǎng)站的設(shè)計(jì)，要參考和模仿幾十個(gè)同類(lèi)型最好的網(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)站都是經(jīng)過(guò)多方研究的，不僅有模仿，還有自己的創(chuàng)新，而且大部分都是經(jīng)得起用戶考驗(yàn)，滿足大部分用戶需求的。
第七，B2B行業(yè)網(wǎng)站大部分界面要弱化，強(qiáng)調(diào)功能和內(nèi)容
B2B門(mén)戶網(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)站的人，尤其是新手，經(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ì)向訪問(wèn)者直觀地傳達(dá)企業(yè)信息，尤其是很多品牌公司的網(wǎng)站。B2B網(wǎng)站的頁(yè)面和建筑企業(yè)的網(wǎng)站一樣，如主題設(shè)計(jì)、收費(fèi)服務(wù)介紹等，都需要大圖、小圖標(biāo)、大面積的色彩來(lái)襯托頁(yè)面的主題。
第八，頁(yè)面應(yīng)該是模塊化的，可修改的
模塊化不僅可以提高復(fù)用性，還可以統(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)大的品牌識(shí)別。永遠(yuǎn)記住，網(wǎng)站的最終目的是做品牌，這一定是設(shè)計(jì)的指導(dǎo)思想。
無(wú)論是架構(gòu)、模塊還是畫(huà)面，都要考慮其可修改性。舉個(gè)簡(jiǎn)單的例子:按鈕，很多人喜歡做圖，n個(gè)按鈕就是n個(gè)圖。如果只做3-5個(gè)按鈕的背景圖，在網(wǎng)頁(yè)代碼中輸入文字，修改起來(lái)會(huì)比較容易，讓程序/網(wǎng)頁(yè)制作者自己改文字。但是，網(wǎng)頁(yè)上顯示的字體是參差不齊的。
我們專(zhuān)注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類(lèi)API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！
