（一百五十六）B2B官網(wǎng)的設(shè)計(jì)思考

時(shí)間：2023-09-06 11:18:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-06 11:18:01 來源：網(wǎng)站運(yùn)營

（一百五十六）B2B官網(wǎng)的設(shè)計(jì)思考：最近遇到了好多次探討網(wǎng)頁設(shè)計(jì)的話題，可能我們身邊有很多優(yōu)秀的設(shè)計(jì)師，他們對PS的使用，以及按照要求設(shè)計(jì)個圖片、視覺很強(qiáng)；但是也存在相應(yīng)問題，一個較新的網(wǎng)頁設(shè)計(jì)師其實(shí)不懂很多網(wǎng)頁上要求的規(guī)范，就會導(dǎo)致設(shè)計(jì)出來的頁面，看上去很唯美，但是處處透露著不專業(yè)。

今天拋磚引玉提出數(shù)字營銷人眼中的網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)，期待越來越多的心得可以凝聚成一些成體系的素材，為各位數(shù)字營銷以及設(shè)計(jì)師提供一些靈感。

1、問：官網(wǎng)在設(shè)計(jì)上會給用戶傳遞什么信息？

回答：在B2B領(lǐng)域，你可以傳遞科技力和技術(shù)力，這兩個能力往往是生意決策的關(guān)鍵點(diǎn)，設(shè)計(jì)也是信息傳遞的一種方式，如果傳遞的是科技力會用什么設(shè)計(jì)元素呢？科技力是一個較抽象的名詞，在設(shè)計(jì)上需要用一些元素來詮釋，比如設(shè)計(jì)元素，如宇宙空間、星球、光、元件（各云廠商經(jīng)常使用，參考火山引擎），如果傳遞技術(shù)力會用什么元素表達(dá)呢？軟件公司也經(jīng)常用產(chǎn)品界面來表達(dá)自己的技術(shù)能力，產(chǎn)品界面會傳遞很多信息，潛在用戶很容易就看懂，尤其是當(dāng)產(chǎn)品界面?zhèn)鬟f了流程化的信息的時(shí)候，訪客會更容易被觸動，傳遞技術(shù)力除了圖片外，還有一個地方，那就是設(shè)計(jì)細(xì)節(jié)，花時(shí)間打磨一些細(xì)節(jié)會讓訪客感覺到這家公司的技術(shù)強(qiáng)大，比如原創(chuàng)建模、ICON、手繪設(shè)計(jì)，這個地方一定要注意，在原創(chuàng)設(shè)計(jì)的時(shí)候要遵循統(tǒng)一性原則，顏色要和主視覺統(tǒng)一，風(fēng)格要全站統(tǒng)（扁平化？2.5D？）；













2、問：官網(wǎng)設(shè)計(jì)的營銷邏輯是什么意思？

回答：設(shè)計(jì)師通常不會考慮網(wǎng)頁設(shè)計(jì)在營銷上有什么力量，但是營銷人會經(jīng)常思考這個問題，首先在顏色應(yīng)用、字體字號規(guī)范、空間布局上要有一定的標(biāo)準(zhǔn)，這樣可以讓訪客獲得潛意識的舒適，從而更愿意轉(zhuǎn)化，成為線索。除了這些不可知的影響之外，還有一些明顯的注意事項(xiàng)，比如我們經(jīng)常會讓網(wǎng)頁的整體顏色和按鈕顏色有明顯差異，來突出視覺重心，讓CTA（按鈕）作為黑夜中最亮的星，起到框架的作用，提領(lǐng)整個網(wǎng)頁，這樣才會有更多的人點(diǎn)擊按鈕進(jìn)入到表單頁。

而在按鈕周圍是需要有明顯的引導(dǎo)文字的，比如首頁的第一屏，我們需要清晰的行動號召引導(dǎo)語，告訴訪客他為什么要點(diǎn)擊按鈕，進(jìn)行下一步動作。

當(dāng)訪客點(diǎn)擊了按鈕會進(jìn)入到下一頁，打開表單頁，我們期望在設(shè)計(jì)上是連貫的；




3、問：在整體的結(jié)構(gòu)布局上，設(shè)計(jì)需要有什么思考？

回答：層次感，層次感是什么意思？在網(wǎng)頁設(shè)計(jì)的時(shí)候其實(shí)是有樓層設(shè)計(jì)的，首屏作為第一層，產(chǎn)品板塊作為第二層，解決方案可能是第三層，層與層之間，大概率會存在差異化的分割線。這樣訪客會知道閱讀完一個板塊，完結(jié)了，進(jìn)入下一個板塊，這也要求每個樓層都要有標(biāo)題和簡介，介紹這個樓層表述的內(nèi)容到底是什么，舉例：







4、什么是網(wǎng)頁設(shè)計(jì)里的“呼吸感”？

回答：說的就是留白，如果你有留意日本的設(shè)計(jì)風(fēng)格就會發(fā)現(xiàn)，留白是一種自信，可以傳遞品牌的自信，最常見的是網(wǎng)站地步的次導(dǎo)航，文字會很舒適的布局在底部的深色背景快上，而不是密密麻麻的緊湊布局，盡力給訪客營造一種“閑庭信步”的感覺。這跟演講中的停頓原理一樣。

另外除了設(shè)計(jì)上的呼吸感之外，就是交互上的呼吸感，我們稱之為微交互，不要讓交互動作大開大合，而是緩慢移動，這樣的細(xì)節(jié)處理，會讓訪客放松，更容易產(chǎn)生信任。

5、什么地方的設(shè)計(jì)體現(xiàn)“質(zhì)量”？

回答：越細(xì)節(jié)的地方越打磨，越體現(xiàn)質(zhì)量，比如按鈕的橫寬比，按鈕的圓角大小，以及按鈕的整體顏色設(shè)置，包含陰影。單獨(dú)把一個按鈕拿出來都是一件藝術(shù)品，這就是“質(zhì)量”的體現(xiàn)。

所以我們在網(wǎng)頁設(shè)計(jì)開始前就回去思考每個細(xì)節(jié)應(yīng)該如何打磨，比如所有的按鈕打磨出一套感覺，全站就可以應(yīng)用，說到按鈕，下面舉的例子看上去很舒適，為什么會有這樣的感覺呢？當(dāng)我們剖析原因的時(shí)候就會發(fā)現(xiàn)，這個舒適度有幾個要素構(gòu)成：

a、映入眼簾的是長寬比，這是矩形模塊最基礎(chǔ)的審美影響因素，寬度不夠很容易形成它很胖的感覺，而寬度可以把修長感做出來（我們可以學(xué)習(xí)此按鈕的長寬比）

b、圓角處理，如果你對設(shè)計(jì)有了解就會知道，圓角弧度占整個邊長的大小決定了它是否足夠精致，而角度大小也很有考究。

c、字號，用什么字體可能在網(wǎng)頁開始設(shè)計(jì)的時(shí)候就已經(jīng)定下來了，但是字號確是很講究的，因?yàn)樽痔柎笮Q定了它的上下左右邊距，字的大小以及按鈕輪廓大小決定按鈕的視覺舒適；

d、字體與背景的反差色，我見過很多按鈕上的字體顏色是看不清的，為什么會這樣呢？因?yàn)樽煮w顏色與按鈕顏色太靠近了，這是常見錯誤。

你看，一個按鈕就這么多細(xì)節(jié)，更別說整體的頁面設(shè)計(jì)。




6、在設(shè)計(jì)上，最難的，也是最重要的是什么？

回答：一致性，從全局到細(xì)節(jié)，從單頁到整體，如何營造肅殺之氣，就是要保證一致性，我經(jīng)常舉的一個例子是，軍隊(duì)的肅殺之氣，是因?yàn)闊o數(shù)個動作統(tǒng)一的個體營造的，任何一個細(xì)節(jié)，都是整體里的細(xì)節(jié)，這是B2B設(shè)計(jì)的獨(dú)有要點(diǎn)。如果有可能盡量用產(chǎn)品截圖，因?yàn)槿魏螆D片都應(yīng)該傳遞一定的信息，否則它的價(jià)值就發(fā)揮不出來；




先總結(jié)這么多，期待下次繼續(xù)補(bǔ)充。