2018-8-13 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
我們應(yīng)該如何打造一個(gè)高端大氣上檔次國際品牌官網(wǎng)呢？
一個(gè)好的國際品牌網(wǎng)站，可以向全世界的用戶展示企業(yè)的風(fēng)采、產(chǎn)品、服務(wù)等信息，在全球范圍內(nèi)強(qiáng)化品牌形象，增加更多的銷售機(jī)會(huì)。同時(shí)，還可以收集用戶的需求、解決部分售后問題。既然建立一個(gè)高端大氣上檔次國際品牌官網(wǎng)，可以帶來如此多的益處，我們應(yīng)該如何打造呢？
做網(wǎng)站和寫文章一樣，也是從結(jié)構(gòu)開始構(gòu)思的，第一章節(jié)寫什么，第二章節(jié)寫什么……最后一章寫什么；網(wǎng)站的一級頁面（首頁）展示哪些內(nèi)容，二級頁面展示哪些內(nèi)容，三級頁面展示哪些內(nèi)容，大的框架定好之后，再針對每個(gè)頁面進(jìn)行細(xì)節(jié)設(shè)計(jì)。
由于互聯(lián)網(wǎng)中信息量極其龐大，為了向用戶展示更多有價(jià)值的信息，搜索引擎會(huì)優(yōu)先抓取每個(gè)網(wǎng)站中相對重要的頁面(即權(quán)重較高的頁面)，頁面的權(quán)重按照一級頁面> 二級頁面> 三級頁面> 四級頁面> …… 依次往后遞減。頁面層級越高，用戶的到達(dá)率越低，因此網(wǎng)站的層級不宜設(shè)計(jì)得過深，清晰的網(wǎng)站結(jié)構(gòu)可以幫助用戶快速獲取所需信息。
品牌網(wǎng)站的導(dǎo)航是需要精心設(shè)計(jì)的，好的導(dǎo)航是用戶的指路牌，它總是能帶領(lǐng)用戶去到想去的頁面。
1.主導(dǎo)航
下拉的圖文并茂的導(dǎo)航是首選，普通的文字導(dǎo)航不夠直觀，圖片可以讓用戶感受到產(chǎn)品的外形和顏色，搭配文字使用容易形成記憶，發(fā)揮視覺錘語言釘?shù)男Ч?
面包屑導(dǎo)航的概念來源于一個(gè)有趣童話故事，迷路的小孩利用撒下的面包屑追溯回家的路。面包屑導(dǎo)航可以讓用戶了解當(dāng)前所處的網(wǎng)站位置，以及當(dāng)前頁面在整個(gè)網(wǎng)站中的位置。面包屑導(dǎo)航一般出現(xiàn)在網(wǎng)站的主導(dǎo)航下面或者網(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í)候，可以直接切換到想去的頁面，十分便捷。
當(dāng)用戶找不到想要的頁面的時(shí)候，有兩種方法，一種方法是使用站內(nèi)搜索，還有一個(gè)就是查看網(wǎng)站地圖，因?yàn)榫W(wǎng)站地圖是整個(gè)網(wǎng)站的最詳細(xì)的目錄。同時(shí)，網(wǎng)站地圖清晰的結(jié)構(gòu)，有利于搜索引擎抓取及收錄。
有些網(wǎng)站的頁面很多，但是產(chǎn)品經(jīng)理、設(shè)計(jì)師在設(shè)計(jì)頁面的時(shí)候，沒有將這些頁面聯(lián)系起來，從而出現(xiàn)了網(wǎng)頁孤島。孤島頁面帶來的不良影響是，如果當(dāng)前頁面做得平平淡淡，沒有用戶需要的信息，用戶會(huì)離開網(wǎng)站。
網(wǎng)站頁面的關(guān)鍵詞內(nèi)鏈密度建議保持在6%~8%之間，在當(dāng)前頁面平平淡淡或者十分吸引人的時(shí)候，可以引導(dǎo)用戶點(diǎn)擊關(guān)鍵詞內(nèi)鏈，去更多的頁面，讓用戶在網(wǎng)站里流連忘返。
一般內(nèi)鏈的設(shè)計(jì)方法為：同類產(chǎn)品推薦、查看所有產(chǎn)品／文章、上一個(gè)產(chǎn)品／文章、下一個(gè)產(chǎn)品／文章以及各類導(dǎo)航等。
使用大圖片或者全屏背景的網(wǎng)頁設(shè)計(jì)已經(jīng)成為一種趨勢，這樣的網(wǎng)頁設(shè)計(jì)風(fēng)格備受各大品牌的歡迎，因?yàn)檫@樣的設(shè)讓網(wǎng)頁外觀看起來非常的簡約大方。
一般情況下，國際品牌官網(wǎng)的設(shè)計(jì)規(guī)范和風(fēng)格調(diào)性是總部規(guī)定好的，不同國家和地區(qū)在遵循統(tǒng)一規(guī)范的情況下進(jìn)行本土化設(shè)計(jì)和運(yùn)營，因?yàn)槊總€(gè)地區(qū)售賣的產(chǎn)品、代言人、促銷活動(dòng)等都是具有差異化的。
如下圖所示：蘭蔻中國和蘭蔻德國的網(wǎng)站框架及設(shè)計(jì)風(fēng)格一致，但banner圖中的代言人和產(chǎn)品是有差異的，符合蘭蔻品牌本土化的戰(zhàn)略。
產(chǎn)品列表頁的設(shè)計(jì)可以根據(jù)跨國公司的產(chǎn)品線來設(shè)計(jì)，如果產(chǎn)品線多、產(chǎn)品型號多，就可以設(shè)計(jì)成具有篩選功能的產(chǎn)品列表頁。用戶可以根據(jù)不同的品類、型號、價(jià)格、功能、參數(shù)去選擇想要的產(chǎn)品。
如果產(chǎn)品型號少，則可以參考蘋果國際品牌官網(wǎng)的做法，為Mac、iPad、iPhone、Watch、Music5條產(chǎn)品線的產(chǎn)品，分別設(shè)計(jì)產(chǎn)品類目頁。
以iPhone的產(chǎn)品列表頁為例，這個(gè)頁面展示了：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)品之間的差異。對于具有選擇困難癥的用戶來說，這無疑可以輔助他們進(jìn)行購買決策。
產(chǎn)品比較功能需要產(chǎn)品經(jīng)理和設(shè)計(jì)師針對產(chǎn)品的賣點(diǎn)和參數(shù)進(jìn)行篩選，通過競品調(diào)研、用戶需求分析等方法，找出用戶感興趣的比較項(xiàng)。
產(chǎn)品詳情頁是設(shè)計(jì)的重中之中，因?yàn)橛脩羰峭ㄟ^詳情頁來了解產(chǎn)品，那么我們?nèi)绾蝸硖岣呱唐吩斍轫摰馁徺I轉(zhuǎn)化率呢？
高質(zhì)量的精修產(chǎn)品圖片、產(chǎn)品視頻、抓人的文案、閱讀舒適的排版……這些都提升頁面的轉(zhuǎn)化率的制勝法寶。那么，如果展示的是同一品類的產(chǎn)品，比如掃地機(jī)器人，我們應(yīng)該怎樣通過設(shè)計(jì)去體現(xiàn)不同型號的價(jià)格呢？
我們可以通過掃地機(jī)器人的家居場景進(jìn)行區(qū)分，左邊的畫面使用了品質(zhì)感更高的深色系家居環(huán)境，明顯價(jià)值感更強(qiáng)，右邊選擇的是現(xiàn)代簡歐風(fēng)格，更適合年輕的用戶。
之前，萬堂老師給我們做企業(yè)培訓(xùn)的時(shí)候講到一個(gè)案例：
有些天貓女裝，讓漂亮的女模特穿著自己家的衣服在游艇上、私人飛機(jī)旁攝影，通過用戶向往的生活，勾起用戶的購買欲望。
這其實(shí)也是通過高端場景的營造來提升產(chǎn)品的品質(zhì)感，增加產(chǎn)品的附加價(jià)值。
商品詳情頁由大量的視頻、圖片和文字組成，整個(gè)頁面的文件往往都很大，打開網(wǎng)頁時(shí)需要加載很久，我們應(yīng)該如何解決呢？
必須對圖片進(jìn)行壓縮處理，既要文件小（每張圖片不超過100kb），又要保持清晰，漸進(jìn)式圖片是最好的選擇。漸進(jìn)式圖片帶來的好處是——讓用戶還沒有下載完圖片，就可以看到最終圖像的大致輪廓，一定程度上可以提升用戶體驗(yàn)。
優(yōu)化前：打開網(wǎng)頁時(shí)，圖片是一條一條加載出來的，看不到圖片的全貌。
優(yōu)化后：打開網(wǎng)頁時(shí)，圖片可以全部展示出來，漸漸的從模糊到清晰，網(wǎng)站加載速度快時(shí)，根本察覺不到模糊的狀態(tài)。
當(dāng)用戶通過官網(wǎng)了解到品牌的信息和產(chǎn)品的信息，決定購買的時(shí)候，我們需要引導(dǎo)他們進(jìn)行購買，優(yōu)化購買體驗(yàn)，可以提高產(chǎn)品的購買轉(zhuǎn)化率。
有些國際品牌官網(wǎng)是具有電商購買功能的，有些沒有。建設(shè)和維護(hù)一套全球的電商系統(tǒng)的成本是十分高昂的，而且現(xiàn)在很多用戶習(xí)慣在亞馬遜、天貓之類的第三方平臺購買。
本文研究的是國際品牌不帶電商功能的情況下，如何引導(dǎo)用戶進(jìn)行線上和線下的購買。
導(dǎo)航上：
通過如何購買和購物車icon引導(dǎo)用戶進(jìn)入如何購買的網(wǎng)頁，網(wǎng)頁中展示品牌在該地區(qū)的所有線上店鋪的購買link，線下店鋪通過地圖功能引導(dǎo)。
商品詳情頁：
立即購買按鈕，可以鏈接到對應(yīng)的第三方店鋪，如該產(chǎn)品在亞馬遜的購買頁面。
售后頁面：
售后做的好，可以促進(jìn)用戶的產(chǎn)品復(fù)購率及分享率。一般官網(wǎng)可以提供售后電話、在線售后聊天軟件、售后郵箱、AI售后機(jī)器人、說明書、如何使用視頻、FAQ等功能。官網(wǎng)上自助的售后服務(wù)，可以幫助一大部分的用戶解決問題，節(jié)約了大量的人力成本。
搜索頁面：
有目的性的用戶一般會(huì)使用搜索功能，比如他想了解某型號的產(chǎn)品，在使用的過程中遇到了問題等等，這些都可以通過搜索功能得到答案。
在設(shè)計(jì)搜索功能之初，我們就需要制定好搜索規(guī)則：
全站的文字都是可以搜索的；
針對搜索結(jié)果進(jìn)行分類，可以分為產(chǎn)品類、資訊類、售后類等；
搜索框內(nèi)關(guān)鍵詞推薦；
搜索結(jié)果為0時(shí)，推薦項(xiàng)設(shè)置，預(yù)留聯(lián)系方式，方便進(jìn)一步解決用戶問題。
圖字分離& 語言包：
國際品牌官網(wǎng)的大部分是由圖片和文字組成的，建議圖片和文字分離，不要把文字做到圖片上，而是將文字放在代碼里。這樣不僅有利于SEO搜索引擎的爬取，也有利于語言包的制作。
作為專業(yè)的國際化網(wǎng)站，需要支持幾十種語言。我們的做法是，總部準(zhǔn)備標(biāo)準(zhǔn)版的英文文案，翻譯社統(tǒng)一翻譯成多國語言，然后由當(dāng)?shù)厥袌霾客逻M(jìn)行審核優(yōu)化，最后，將優(yōu)化好的多國語言包交由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è)國際品牌官網(wǎng)，官網(wǎng)上線前還需要進(jìn)行域名購買、服務(wù)器租用、前后端開發(fā)、SEO優(yōu)化、官網(wǎng)內(nèi)容上傳等事項(xiàng)，需要開發(fā)同事、SEO專業(yè)機(jī)構(gòu)以及各地區(qū)子公司官網(wǎng)運(yùn)營人員的大力的支持。這些不屬于本文的研究范疇。
至此，一個(gè)高端大氣上檔次的國際品牌官網(wǎng)完成。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com