從這一篇文章開始，我將結(jié)合我們多年的外貿(mào)網(wǎng)站建站、優(yōu)化經(jīng)驗(yàn)，教大家如何設(shè)計(jì)自己的網(wǎng)站，從而滿足國(guó)外客戶的用戶體驗(yàn)，全面提升外貿(mào)自建站的流量與訂單獲取能力。

這個(gè)是2018年下半年，我們?yōu)橐患夜こ虣C(jī)械客戶開發(fā)的外貿(mào)網(wǎng)站，開發(fā)周期將近1個(gè)半月。在這期間，沒有任何一個(gè)階段爭(zhēng)取過客戶的改進(jìn)意見。從開始設(shè)計(jì)到驗(yàn)收，一次性一氣呵成。

根據(jù)這個(gè)案例，我來講解，我從哪些角度去進(jìn)行網(wǎng)站架構(gòu)和內(nèi)容設(shè)計(jì)。你們開始記！

#1、了解全球行業(yè)網(wǎng)站通用色調(diào)

每一個(gè)行業(yè)和產(chǎn)品領(lǐng)域，都有其獨(dú)特的主流色系。這種顏色背景，能夠不斷強(qiáng)化產(chǎn)品或者服務(wù)在客戶心里的感覺。

我們看很多網(wǎng)站的設(shè)計(jì)并不美觀，但是在行內(nèi)客戶看來，它又極其地道，這在很多程度上取決于網(wǎng)站的主色調(diào)。

對(duì)于工程機(jī)械行業(yè)而言，我在進(jìn)行網(wǎng)站開發(fā)之前，會(huì)通過相關(guān)關(guān)鍵詞，搜索全球競(jìng)爭(zhēng)對(duì)手的產(chǎn)品圖片、服務(wù)流程、電子版彩本（我在之前的文章，提及過我有下載老外彩本的愛好。實(shí)際上，這對(duì)于我的設(shè)計(jì)方案，幫助很大）。

很多工作和積累，看似無用，當(dāng)真正發(fā)揮效力的時(shí)候，你會(huì)感覺信手拈來而又自信滿滿。

所以，最終我做了兩套色系方案：

• #FE0000（紅色）+ #000000（黑色）+ #FFFFFF（白色）+ #FFB717（黃色）
• #FFBE00（黃色）+ #000000（黑色）+ #FFFFFF（白色）+ #F1F1F1（灰色）

第一種方案，紅色與黑色、白色相結(jié)合，一定會(huì)有機(jī)械設(shè)備高端的感覺。但是由于工程機(jī)械的產(chǎn)品需要添加土黃色，所以視覺上的紅色一定會(huì)被黃色沖淡和同化，所以我舍棄了這個(gè)方案。

現(xiàn)在給大家呈現(xiàn)的，就是第二種色系搭配。

我是一個(gè)經(jīng)常自以為是的人，所以很少聽取客戶的設(shè)計(jì)意見。我很自信，對(duì)于國(guó)外網(wǎng)站元素和用戶體驗(yàn)的理解和把控，比客戶更加精準(zhǔn)。

所以，我想說的是，如果你打算做好自己的網(wǎng)站，平時(shí)一定要注意整理自己行業(yè)的電子彩本、產(chǎn)品色調(diào)、品牌網(wǎng)站。僅靠臨時(shí)抱佛腳，就想一蹴而就的事情，基本不會(huì)發(fā)生。

#2、首屏Banner海報(bào)設(shè)計(jì)，獨(dú)樹一幟

開篇引入的Banner只是其中一張海報(bào)，以下是另外一張。我們要向客戶傳達(dá)兩點(diǎn)內(nèi)容：一是目前熱賣的主打產(chǎn)品；第二個(gè)方面是我們的產(chǎn)品最大的理念和價(jià)值。

我希望大家在做構(gòu)圖和文案的時(shí)候，能夠準(zhǔn)確切中客戶要害，不要寫一些不痛不癢的廢話。什么叫不痛不癢的廢話？比如：

• 我們是中國(guó)最大的***供應(yīng)商，專注于***產(chǎn)品研發(fā)與設(shè)計(jì)**年。
• 更高的產(chǎn)品質(zhì)量、更好的售后服務(wù)。
• 致力于如何服務(wù)于全球多少國(guó)家、多少客戶。

不要整些虛頭巴腦的，老外不傻。我們需要深入地了解客戶在應(yīng)用產(chǎn)品時(shí)，出現(xiàn)的每一個(gè)問題、每一個(gè)細(xì)節(jié)、每一個(gè)因?yàn)楫a(chǎn)品或者系統(tǒng)故障所帶去的損失！

把這些變成設(shè)計(jì)的靈感和文案，直擊心底、毫不留情。與此同時(shí)，你要記住，你不是一個(gè)只賣產(chǎn)品的供應(yīng)商，你是一直在進(jìn)行技術(shù)服務(wù)的輸出，所以不要盲目地只關(guān)注產(chǎn)品的頁面感覺，多一些應(yīng)用和技術(shù)細(xì)節(jié)展示，會(huì)讓客戶印象深刻。

#3、產(chǎn)品展示，風(fēng)格清新靈活

我不喜歡阿里巴巴的產(chǎn)品展示風(fēng)格，過于對(duì)稱和死板。而你看大量的國(guó)外網(wǎng)站，都是講求順其自然，局部與整體的融合感。

在這里，會(huì)有兩個(gè)問題你要問我：

1. 為什么整體背景顏色選擇淺灰色？
2. 為什么產(chǎn)品要加邊框，而且是圓形邊框？

首先，因?yàn)檎麄€(gè)Body的字體顏色一定為黑色，這是毋庸置疑的設(shè)計(jì)常識(shí)。在此基礎(chǔ)上，淺灰色會(huì)襯托出黑色的正式、大氣、嚴(yán)謹(jǐn)。

所以，在展示產(chǎn)品時(shí)，如果能夠給客戶這樣一種感覺，就再好不過了。

然后，對(duì)于產(chǎn)品主圖添加圓形邊框，主要因?yàn)楫a(chǎn)品外形環(huán)狀居多，加上圓框，視覺上的融合度更高，看上去更加舒服，毫不突兀。

你看，同樣在展示產(chǎn)品大類，其實(shí)老外更加喜歡簡(jiǎn)潔明了，不要加一些JavaScript的動(dòng)態(tài)特效，嘩眾取寵的結(jié)果往往貽笑大方。

#4、關(guān)于我們，頁面的靈魂所在

你不要告訴我，只要把產(chǎn)品的優(yōu)勢(shì)和特點(diǎn)描述清楚即可。信用全球化的時(shí)代，任何人都逃避不了建立信用體系這件事。

這件事情本身的價(jià)值，遠(yuǎn)超產(chǎn)品出口所帶來的的短期利益。

但其實(shí)我們國(guó)內(nèi)供應(yīng)商，并不在意。長(zhǎng)此以往，中國(guó)沒有品牌這一定論，毫不為過。那么，我是怎么做About Us或者說Company Overview的布局設(shè)計(jì)？

首先，我要多寫。為什么？—— 逆向思維。

• 只有沒有實(shí)力的公司，才會(huì)經(jīng)常性地運(yùn)用圖片和虛無縹緲的內(nèi)容來湊版塊。
• 老外的網(wǎng)站都是結(jié)結(jié)實(shí)實(shí)的案例、技術(shù)細(xì)節(jié)、加工與研發(fā)能力。
• 越不說，越顯得心虛；自曝其短，往往也是取得信任的過程。

要多說，好的、不好的都說。怎么可能有完美的供應(yīng)商？敢于承認(rèn)自己曾經(jīng)出現(xiàn)的問題，恰恰是贏得信任非常重要的前奏。客戶不會(huì)對(duì)你產(chǎn)生懷疑，他們?cè)诤醯氖悄愫髞恚趺匆徊讲礁纳坪吞岣叩摹?br>
所以，在這些思維的引導(dǎo)下，我采用了這種布局。讓公司的歷程與核心技術(shù)工藝，躍然眼前。

#5、緊抓不放，時(shí)刻將解決方案擺在首位

毫不避諱地講，任何產(chǎn)品和服務(wù)的內(nèi)驅(qū)力，一定來自它扎實(shí)的技術(shù)體系。這種技術(shù)（研發(fā)和生產(chǎn)）不一定是最完善或者最先進(jìn)的。但是對(duì)于老外，尤其是歐美國(guó)家客戶而言，扎實(shí)靠譜的技術(shù)方案，一定是產(chǎn)品的核心競(jìng)爭(zhēng)力。

所以，在設(shè)計(jì)網(wǎng)站頁面的時(shí)候，你要時(shí)時(shí)刻刻提醒自己：向客戶展示你的系統(tǒng)方案，而不是只會(huì)報(bào)價(jià)、只會(huì)推銷產(chǎn)品。

你的網(wǎng)站設(shè)計(jì)應(yīng)該展現(xiàn)出一種氣質(zhì)：我不賣產(chǎn)品，甚至你給我錢我都不要；我只講我的技術(shù)和方案，不管你聽沒聽懂，在我講完之后，你哪里來回哪里去。

我們看德國(guó)的產(chǎn)品公司，永遠(yuǎn)輸出的都是自我價(jià)值。正是因?yàn)槌撩杂谧约簶?gòu)建的技術(shù)體系，追求技術(shù)層面的不斷深入和探索，才有產(chǎn)品價(jià)值的飛速提升。不是不知道客戶的重要性，是真的沒有時(shí)間Care那些表面工程。

在做網(wǎng)站設(shè)計(jì)時(shí)，也是同樣道理。更多地來展示技術(shù)細(xì)節(jié)和系統(tǒng)方案，是最為重要的。在這里，我想說三點(diǎn)感受：

• 一個(gè)好的設(shè)計(jì)師，是要具備自己發(fā)現(xiàn)、總結(jié)、感悟的能力的，不是一味地依賴客戶提供素材。
• 老外往往不是靠你“舔”來的，高端的客戶往往看重的是你的技術(shù)、細(xì)節(jié)、自信。
• 系統(tǒng)方案永遠(yuǎn)比只賣單一產(chǎn)品更能體現(xiàn)品牌價(jià)值和利潤(rùn)空間。

所以你看，在準(zhǔn)備設(shè)計(jì)自己網(wǎng)站之前，其實(shí)我們需要深入了解非常多的東西，建立多個(gè)角度的運(yùn)營(yíng)思維。這些思維，會(huì)幫助我們創(chuàng)造出更加合適的框架模塊。

這種架構(gòu)的表現(xiàn)力，往往是更加具有穿透力的。在用戶訴求方面，也更加到位而富有張力。