一個(gè)好的國(guó)際品牌網(wǎng)站，可以向全世界的用戶展示企業(yè)的風(fēng)采、產(chǎn)品、服務(wù)等信息，在全球范圍內(nèi)強(qiáng)化品牌形象，增加更多的銷售機(jī)會(huì)。同時(shí)，還可以收集用戶的需求、解決部分售后問題。既然建立一個(gè)高端大氣上檔次國(guó)際品牌官網(wǎng)，可以帶來如此多的益處，我們應(yīng)該如何打造呢？

一、品牌網(wǎng)站的結(jié)構(gòu)

做網(wǎng)站和寫文章一樣，也是從結(jié)構(gòu)開始構(gòu)思的，第一章節(jié)寫什么，第二章節(jié)寫什么……最后一章寫什么；網(wǎng)站的一級(jí)頁(yè)面（首頁(yè)）展示哪些內(nèi)容，二級(jí)頁(yè)面展示哪些內(nèi)容，三級(jí)頁(yè)面展示哪些內(nèi)容，大的框架定好之后，再針對(duì)每個(gè)頁(yè)面進(jìn)行細(xì)節(jié)設(shè)計(jì)。

由于互聯(lián)網(wǎng)中信息量極其龐大，為了向用戶展示更多有價(jià)值的信息，搜索引擎會(huì)優(yōu)先抓取每個(gè)網(wǎng)站中相對(duì)重要的頁(yè)面(即權(quán)重較高的頁(yè)面)，頁(yè)面的權(quán)重按照一級(jí)頁(yè)面> 二級(jí)頁(yè)面> 三級(jí)頁(yè)面> 四級(jí)頁(yè)面> …… 依次往后遞減。頁(yè)面層級(jí)越高，用戶的到達(dá)率越低，因此網(wǎng)站的層級(jí)不宜設(shè)計(jì)得過深，清晰的網(wǎng)站結(jié)構(gòu)可以幫助用戶快速獲取所需信息。

二、導(dǎo)航

品牌網(wǎng)站的導(dǎo)航是需要精心設(shè)計(jì)的，好的導(dǎo)航是用戶的指路牌，它總是能帶領(lǐng)用戶去到想去的頁(yè)面。

1.主導(dǎo)航

下拉的圖文并茂的導(dǎo)航是首選，普通的文字導(dǎo)航不夠直觀，圖片可以讓用戶感受到產(chǎn)品的外形和顏色，搭配文字使用容易形成記憶，發(fā)揮視覺錘語言釘?shù)男Ч?

2.面包屑導(dǎo)航

面包屑導(dǎo)航的概念來源于一個(gè)有趣童話故事，迷路的小孩利用撒下的面包屑追溯回家的路。面包屑導(dǎo)航可以讓用戶了解當(dāng)前所處的網(wǎng)站位置，以及當(dāng)前頁(yè)面在整個(gè)網(wǎng)站中的位置。面包屑導(dǎo)航一般出現(xiàn)在網(wǎng)站的主導(dǎo)航下面或者網(wǎng)站底部導(dǎo)航的上面。

3.網(wǎng)站底部導(dǎo)航

或許有人會(huì)有疑問，網(wǎng)站的頂部已經(jīng)有導(dǎo)航了，為什么底部還要再設(shè)計(jì)一個(gè)呢？

其實(shí)，網(wǎng)站的底部導(dǎo)航是很有必要的。相較于頂部導(dǎo)航，底部導(dǎo)航是全部鋪開的，當(dāng)我們?yōu)g覽到網(wǎng)站底部的時(shí)候，可以直接切換到想去的頁(yè)面，十分便捷。

4.網(wǎng)站地圖

當(dāng)用戶找不到想要的頁(yè)面的時(shí)候，有兩種方法，一種方法是使用站內(nèi)搜索，還有一個(gè)就是查看網(wǎng)站地圖，因?yàn)榫W(wǎng)站地圖是整個(gè)網(wǎng)站的最詳細(xì)的目錄。同時(shí)，網(wǎng)站地圖清晰的結(jié)構(gòu)，有利于搜索引擎抓取及收錄。

三、內(nèi)部鏈接

有些網(wǎng)站的頁(yè)面很多，但是產(chǎn)品經(jīng)理、設(shè)計(jì)師在設(shè)計(jì)頁(yè)面的時(shí)候，沒有將這些頁(yè)面聯(lián)系起來，從而出現(xiàn)了網(wǎng)頁(yè)孤島。孤島頁(yè)面帶來的不良影響是，如果當(dāng)前頁(yè)面做得平平淡淡，沒有用戶需要的信息，用戶會(huì)離開網(wǎng)站。

網(wǎng)站頁(yè)面的關(guān)鍵詞內(nèi)鏈密度建議保持在6%~8%之間，在當(dāng)前頁(yè)面平平淡淡或者十分吸引人的時(shí)候，可以引導(dǎo)用戶點(diǎn)擊關(guān)鍵詞內(nèi)鏈，去更多的頁(yè)面，讓用戶在網(wǎng)站里流連忘返。

一般內(nèi)鏈的設(shè)計(jì)方法為：同類產(chǎn)品推薦、查看所有產(chǎn)品／文章、上一個(gè)產(chǎn)品／文章、下一個(gè)產(chǎn)品／文章以及各類導(dǎo)航等。

 

四、網(wǎng)站首頁(yè)

使用大圖片或者全屏背景的網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)成為一種趨勢(shì)，這樣的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格備受各大品牌的歡迎，因?yàn)檫@樣的設(shè)讓網(wǎng)頁(yè)外觀看起來非常的簡(jiǎn)約大方。

一般情況下，國(guó)際品牌官網(wǎng)的設(shè)計(jì)規(guī)范和風(fēng)格調(diào)性是總部規(guī)定好的，不同國(guó)家和地區(qū)在遵循統(tǒng)一規(guī)范的情況下進(jìn)行本土化設(shè)計(jì)和運(yùn)營(yíng)，因?yàn)槊總€(gè)地區(qū)售賣的產(chǎn)品、代言人、促銷活動(dòng)等都是具有差異化的。

如下圖所示：蘭蔻中國(guó)和蘭蔻德國(guó)的網(wǎng)站框架及設(shè)計(jì)風(fēng)格一致，但banner圖中的代言人和產(chǎn)品是有差異的，符合蘭蔻品牌本土化的戰(zhàn)略。

五、產(chǎn)品列表頁(yè)面

產(chǎn)品列表頁(yè)的設(shè)計(jì)可以根據(jù)跨國(guó)公司的產(chǎn)品線來設(shè)計(jì)，如果產(chǎn)品線多、產(chǎn)品型號(hào)多，就可以設(shè)計(jì)成具有篩選功能的產(chǎn)品列表頁(yè)。用戶可以根據(jù)不同的品類、型號(hào)、價(jià)格、功能、參數(shù)去選擇想要的產(chǎn)品。

如果產(chǎn)品型號(hào)少，則可以參考蘋果國(guó)際品牌官網(wǎng)的做法，為Mac、iPad、iPhone、Watch、Music5條產(chǎn)品線的產(chǎn)品，分別設(shè)計(jì)產(chǎn)品類目頁(yè)。

以iPhone的產(chǎn)品列表頁(yè)為例，這個(gè)頁(yè)面展示了：iPhone X、iPhone 8、機(jī)型比較、Apple Pay 刷公交功能、增強(qiáng)現(xiàn)實(shí)功能、iOS12、iPhone煥新計(jì)劃、iPhone配件等，這些都是與iPhone產(chǎn)品相關(guān)的內(nèi)容——新產(chǎn)品、新功能、活動(dòng)、配件信息。

在自家網(wǎng)站的GA谷歌分析中，筆者發(fā)現(xiàn)機(jī)型比較功能（產(chǎn)品比較功能）的使用率很高，確實(shí)根據(jù)字面上的意思我們看不出來iPhone X和iPhone 8的區(qū)別，但是有了產(chǎn)品比較功能，用戶可以一目了然的看出兩個(gè)產(chǎn)品之間的差異。對(duì)于具有選擇困難癥的用戶來說，這無疑可以輔助他們進(jìn)行購(gòu)買決策。

產(chǎn)品比較功能需要產(chǎn)品經(jīng)理和設(shè)計(jì)師針對(duì)產(chǎn)品的賣點(diǎn)和參數(shù)進(jìn)行篩選，通過競(jìng)品調(diào)研、用戶需求分析等方法，找出用戶感興趣的比較項(xiàng)。

 

六、產(chǎn)品詳情頁(yè)

產(chǎn)品詳情頁(yè)是設(shè)計(jì)的重中之中，因?yàn)橛脩羰峭ㄟ^詳情頁(yè)來了解產(chǎn)品，那么我們?nèi)绾蝸硖岣呱唐吩斍轫?yè)的購(gòu)買轉(zhuǎn)化率呢？

高質(zhì)量的精修產(chǎn)品圖片、產(chǎn)品視頻、抓人的文案、閱讀舒適的排版……這些都提升頁(yè)面的轉(zhuǎn)化率的制勝法寶。那么，如果展示的是同一品類的產(chǎn)品，比如掃地機(jī)器人，我們應(yīng)該怎樣通過設(shè)計(jì)去體現(xiàn)不同型號(hào)的價(jià)格呢？

我們可以通過掃地機(jī)器人的家居場(chǎng)景進(jìn)行區(qū)分，左邊的畫面使用了品質(zhì)感更高的深色系家居環(huán)境，明顯價(jià)值感更強(qiáng)，右邊選擇的是現(xiàn)代簡(jiǎn)歐風(fēng)格，更適合年輕的用戶。

之前，萬堂老師給我們做企業(yè)培訓(xùn)的時(shí)候講到一個(gè)案例：

有些天貓女裝，讓漂亮的女模特穿著自己家的衣服在游艇上、私人飛機(jī)旁攝影，通過用戶向往的生活，勾起用戶的購(gòu)買欲望。

這其實(shí)也是通過高端場(chǎng)景的營(yíng)造來提升產(chǎn)品的品質(zhì)感，增加產(chǎn)品的附加價(jià)值。

商品詳情頁(yè)由大量的視頻、圖片和文字組成，整個(gè)頁(yè)面的文件往往都很大，打開網(wǎng)頁(yè)時(shí)需要加載很久，我們應(yīng)該如何解決呢？

必須對(duì)圖片進(jìn)行壓縮處理，既要文件小（每張圖片不超過100kb），又要保持清晰，漸進(jìn)式圖片是最好的選擇。漸進(jìn)式圖片帶來的好處是——讓用戶還沒有下載完圖片，就可以看到最終圖像的大致輪廓，一定程度上可以提升用戶體驗(yàn)。

優(yōu)化前：打開網(wǎng)頁(yè)時(shí)，圖片是一條一條加載出來的，看不到圖片的全貌。

優(yōu)化后：打開網(wǎng)頁(yè)時(shí)，圖片可以全部展示出來，漸漸的從模糊到清晰，網(wǎng)站加載速度快時(shí)，根本察覺不到模糊的狀態(tài)。

七、從哪里購(gòu)買

當(dāng)用戶通過官網(wǎng)了解到品牌的信息和產(chǎn)品的信息，決定購(gòu)買的時(shí)候，我們需要引導(dǎo)他們進(jìn)行購(gòu)買，優(yōu)化購(gòu)買體驗(yàn)，可以提高產(chǎn)品的購(gòu)買轉(zhuǎn)化率。

有些國(guó)際品牌官網(wǎng)是具有電商購(gòu)買功能的，有些沒有。建設(shè)和維護(hù)一套全球的電商系統(tǒng)的成本是十分高昂的，而且現(xiàn)在很多用戶習(xí)慣在亞馬遜、天貓之類的第三方平臺(tái)購(gòu)買。

本文研究的是國(guó)際品牌不帶電商功能的情況下，如何引導(dǎo)用戶進(jìn)行線上和線下的購(gòu)買。

導(dǎo)航上：

通過如何購(gòu)買和購(gòu)物車icon引導(dǎo)用戶進(jìn)入如何購(gòu)買的網(wǎng)頁(yè)，網(wǎng)頁(yè)中展示品牌在該地區(qū)的所有線上店鋪的購(gòu)買link，線下店鋪通過地圖功能引導(dǎo)。

商品詳情頁(yè)：

立即購(gòu)買按鈕，可以鏈接到對(duì)應(yīng)的第三方店鋪，如該產(chǎn)品在亞馬遜的購(gòu)買頁(yè)面。

售后頁(yè)面：

售后做的好，可以促進(jìn)用戶的產(chǎn)品復(fù)購(gòu)率及分享率。一般官網(wǎng)可以提供售后電話、在線售后聊天軟件、售后郵箱、AI售后機(jī)器人、說明書、如何使用視頻、FAQ等功能。官網(wǎng)上自助的售后服務(wù)，可以幫助一大部分的用戶解決問題，節(jié)約了大量的人力成本。

搜索頁(yè)面：

有目的性的用戶一般會(huì)使用搜索功能，比如他想了解某型號(hào)的產(chǎn)品，在使用的過程中遇到了問題等等，這些都可以通過搜索功能得到答案。

在設(shè)計(jì)搜索功能之初，我們就需要制定好搜索規(guī)則：

• 全站的文字都是可以搜索的；

• 針對(duì)搜索結(jié)果進(jìn)行分類，可以分為產(chǎn)品類、資訊類、售后類等；

• 搜索框內(nèi)關(guān)鍵詞推薦；

• 搜索結(jié)果為0時(shí)，推薦項(xiàng)設(shè)置，預(yù)留聯(lián)系方式，方便進(jìn)一步解決用戶問題。

圖字分離& 語言包：

國(guó)際品牌官網(wǎng)的大部分是由圖片和文字組成的，建議圖片和文字分離，不要把文字做到圖片上，而是將文字放在代碼里。這樣不僅有利于SEO搜索引擎的爬取，也有利于語言包的制作。

作為專業(yè)的國(guó)際化網(wǎng)站，需要支持幾十種語言。我們的做法是，總部準(zhǔn)備標(biāo)準(zhǔn)版的英文文案，翻譯社統(tǒng)一翻譯成多國(guó)語言，然后由當(dāng)?shù)厥袌?chǎng)部同事進(jìn)行審核優(yōu)化，最后，將優(yōu)化好的多國(guó)語言包交由IT同事開發(fā)上傳。

聆聽用戶的聲音：

通過網(wǎng)站的在線反饋功能、用戶搜索的內(nèi)容、GA網(wǎng)站數(shù)據(jù)分析可以收集到用戶的需求，定期的收集和分析用戶的需求，進(jìn)行官網(wǎng)的迭代優(yōu)化，這是一個(gè)持續(xù)的過程。

本文是從產(chǎn)品經(jīng)理和設(shè)計(jì)師的角度出發(fā)去打造一個(gè)國(guó)際品牌官網(wǎng)，官網(wǎng)上線前還需要進(jìn)行域名購(gòu)買、服務(wù)器租用、前后端開發(fā)、SEO優(yōu)化、官網(wǎng)內(nèi)容上傳等事項(xiàng)，需要開發(fā)同事、SEO專業(yè)機(jī)構(gòu)以及各地區(qū)子公司官網(wǎng)運(yùn)營(yíng)人員的大力的支持。這些不屬于本文的研究范疇。

至此，一個(gè)高端大氣上檔次的國(guó)際品牌官網(wǎng)完成。