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