案例淺析：英選如何為知名展會(huì)品牌搭建優(yōu)秀官網(wǎng)

時(shí)間：2023-06-01 05:21:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-01 05:21:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

案例淺析：英選如何為知名展會(huì)品牌搭建優(yōu)秀官網(wǎng)：

官網(wǎng)搭建前的思考

官方網(wǎng)站作為承接一家企業(yè)門面的擔(dān)當(dāng)，精致的門面是吸引用戶的基礎(chǔ)，如果一個(gè)公司的官網(wǎng)結(jié)構(gòu)不清晰，圖片陳舊，布局雜亂，交互順暢性差，給用戶帶來(lái)的第一感受便容易懷疑這家公司的“正規(guī)性”及“實(shí)力”。簡(jiǎn)潔大方，符合品牌調(diào)性的視覺(jué)設(shè)計(jì)在提升品牌形象方面為一大影響因素。

大部分最終能成交的客戶都是一開始帶著目的而來(lái)，而能讓其在第一眼便能找到自己想要的信息尤為重要，交錯(cuò)復(fù)雜的官網(wǎng)結(jié)構(gòu)設(shè)計(jì)，信息分類設(shè)計(jì)，混亂的業(yè)務(wù)展示模塊劃分等等類似考驗(yàn)客戶耐心的設(shè)計(jì)，往往會(huì)成為流失客戶的所有環(huán)節(jié)中不可低估的一部分。

官網(wǎng)搭建的目的除了業(yè)務(wù)展示，便是獲客。合理運(yùn)用SEO對(duì)其進(jìn)行推廣，同時(shí)也可做競(jìng)價(jià)，增加搜索引擎中用戶看到企業(yè)官網(wǎng)的曝光率。一般做法是在完成官方網(wǎng)站建設(shè)后再考慮獲客方面的優(yōu)化，而更具經(jīng)驗(yàn)的做法便是網(wǎng)站搭建時(shí)便一并把獲客方案提前設(shè)想進(jìn)去，提高建站效率。

---

杭州時(shí)尚家居設(shè)計(jì)周官網(wǎng)簡(jiǎn)介

作為每年舉辦一屆的杭州時(shí)尚家居設(shè)計(jì)周，我們來(lái)看看英選團(tuán)隊(duì)幫助客戶解決了哪些問(wèn)題來(lái)實(shí)現(xiàn)業(yè)務(wù)展示及獲客的核心目標(biāo)。

• 杭州時(shí)尚家居設(shè)計(jì)周簡(jiǎn)介

“杭州時(shí)尚家居設(shè)計(jì)周暨杭州國(guó)際家具展覽會(huì)，是由杭州市工業(yè)和信息化局指導(dǎo)、杭州市家具行業(yè)協(xié)會(huì)和杭州時(shí)尚創(chuàng)意產(chǎn)業(yè)聯(lián)盟、杭州市德賽展覽有限公司承辦、杭州家具研究開發(fā)院作為產(chǎn)業(yè)技術(shù)支持單位、賽德檢測(cè)作為產(chǎn)品品質(zhì)監(jiān)控單位的中國(guó)家具業(yè)高品質(zhì)的商業(yè)設(shè)計(jì)展。

經(jīng)過(guò)26年、36屆的發(fā)展，今天的杭州時(shí)尚家居設(shè)計(jì)周已經(jīng)成為一個(gè)推動(dòng)產(chǎn)業(yè)多元化轉(zhuǎn)型升級(jí)的全球性設(shè)計(jì)盛會(huì)，聚焦全球住宅、建筑、內(nèi)裝、設(shè)計(jì)、家具、軟飾、家居用品及智能、辦公等領(lǐng)域，致力打造國(guó)際新消費(fèi)趨勢(shì)發(fā)布與產(chǎn)業(yè)創(chuàng)新教育平臺(tái)。

• 設(shè)計(jì)立意

網(wǎng)站功能主要集中在展館和主題介紹，引導(dǎo)觀眾和展商獲取期望的內(nèi)容。客戶團(tuán)隊(duì)有極高的視覺(jué)要求，需要在國(guó)際設(shè)計(jì)團(tuán)隊(duì)的配合下每年都完成一致的主視覺(jué)表現(xiàn)，同時(shí)為了配合線下各類宣傳視頻，主視覺(jué)也需要實(shí)現(xiàn)舒適的動(dòng)效。

如何從用戶體驗(yàn)五要素出發(fā)快速搭建官網(wǎng)

1. 戰(zhàn)略層設(shè)計(jì) —— 用戶需求與商業(yè)目標(biāo)
2. 范圍層設(shè)計(jì)—— 功能規(guī)格與內(nèi)容需求
3. 結(jié)構(gòu)層設(shè)計(jì) —— 信息結(jié)構(gòu)與交互設(shè)計(jì)
4. 框架層設(shè)計(jì) —— 界面設(shè)計(jì)/導(dǎo)航設(shè)計(jì)與信息設(shè)計(jì)
5. 表現(xiàn)層設(shè)計(jì) —— 感知設(shè)計(jì)

1. 戰(zhàn)略層設(shè)計(jì)

戰(zhàn)略層的2個(gè)關(guān)鍵詞——用戶需求及商業(yè)目標(biāo)，我們?cè)诮邮猪?xiàng)目之初便著重確認(rèn)這兩個(gè)關(guān)鍵詞的含義范圍作為網(wǎng)站搭建的最重要方向。

1.1 用戶需求

杭州時(shí)尚家具設(shè)計(jì)展覽面向的用戶是誰(shuí)？

作為展覽來(lái)說(shuō)，有軟裝需求的消費(fèi)者與各大家居制造商構(gòu)成了此次展覽的主體

我們能為用戶解決什么問(wèn)題？

作為策展方則是將消費(fèi)者與供應(yīng)商聯(lián)系起來(lái)的橋梁，集中為消費(fèi)提供多元化的家居產(chǎn)品選擇，更優(yōu)惠的價(jià)格，也為各大供應(yīng)商提供品牌宣傳，拓客渠道的挖掘。

1.2 商業(yè)目標(biāo)

搭建一個(gè)中國(guó)家具領(lǐng)域里的生態(tài)圈，鏈接有意向需求的客戶及供應(yīng)商。以設(shè)計(jì)為紐帶，與城市文化共融的杭州國(guó)際家具展，日益成為家具和設(shè)計(jì)界認(rèn)識(shí)杭州的窗口，也成為“國(guó)際設(shè)計(jì)資源與中國(guó)制造連接”及“中國(guó)制造尋找國(guó)際、國(guó)內(nèi)市場(chǎng)”的戰(zhàn)略平臺(tái)。

2.范圍層設(shè)計(jì)

作為有軟裝需求的消費(fèi)者，我們需要什么？除了一家家店鋪尋找自己想要的家具或擺件，或者就是去電商平臺(tái)一家家搜索自己想要的物品，除了主動(dòng)搜索還有沒(méi)有更全面的軟裝方案推薦？作為供應(yīng)商，如何知道這個(gè)展覽是否值得參加，可以給商家?guī)?lái)更多曝光機(jī)會(huì)。

功能范圍設(shè)計(jì)上我們考慮到了消費(fèi)者及供應(yīng)商這兩類人群的需求來(lái)進(jìn)行規(guī)劃。

2.1 功能規(guī)格

參展品/商了解：以展覽主題作為產(chǎn)品的信息架構(gòu)，消費(fèi)者/供應(yīng)商可從主題菜單導(dǎo)航欄清晰了解到此次展品分別服務(wù)于哪些生活場(chǎng)景，消費(fèi)者能快速找到適用于自己生活場(chǎng)景的展品介紹，供應(yīng)商可以快速找到自己提供的商品與服務(wù)適合在哪個(gè)主題下進(jìn)行展出，同時(shí)同個(gè)分類下的競(jìng)品商有哪些，方便其規(guī)劃自己產(chǎn)品的參展方案。

2.2 內(nèi)容需求

參展報(bào)名及其他參展信息規(guī)劃：參展商了解完展覽信息后，為方便其及時(shí)報(bào)名展會(huì)的需求，網(wǎng)站頭部模塊設(shè)計(jì)了參展報(bào)名入口，同時(shí)菜單內(nèi)容提供展會(huì)日程，展商手冊(cè)下載， 主場(chǎng)物料及其他服務(wù)等信息快捷查詢?nèi)肟?，更高效的服?wù)于參展商。

3. 結(jié)構(gòu)層設(shè)計(jì)

結(jié)構(gòu)層我們分2部分來(lái)分析：信息結(jié)構(gòu)與交互設(shè)計(jì)

3.1 信息結(jié)構(gòu)

網(wǎng)站整體采用了常見的頂部標(biāo)簽導(dǎo)航模式，按照消費(fèi)者/參展商信息瀏覽的過(guò)程，關(guān)注興趣點(diǎn)等，組合出頂部標(biāo)簽的排列順序，分別為：首頁(yè)，關(guān)于我們，我要觀展，參展服務(wù)，必看亮點(diǎn)，媒體，咨詢與幫助，中英文切換，搜索，我要參展，而在頂部欄視覺(jué)中心則用logo分隔開以上常用及非常用菜單，既突出了重點(diǎn)模塊，也符合用戶操作習(xí)慣。

3.2 交互設(shè)計(jì)

前端工程師針對(duì)網(wǎng)站的圖片逐一優(yōu)化了尺寸，并全站采用了對(duì)象存儲(chǔ) + CDN 加速，用來(lái)在全球范圍內(nèi)提升網(wǎng)站訪問(wèn)速度。盡量采用原生JS代碼，減少插件組件的使用，進(jìn)一步減少瀏覽時(shí)卡頓的可能，優(yōu)化網(wǎng)站加載速度。




4.框架層設(shè)計(jì)

我們來(lái)看看，設(shè)計(jì)師是怎么通過(guò)框架層來(lái)優(yōu)化設(shè)計(jì)布局的

4.1 導(dǎo)航設(shè)計(jì)

所有二級(jí)菜單的展開改為側(cè)邊滑出的方式進(jìn)行，這樣在不破壞主視覺(jué)完整性的情況下，菜單區(qū)域可以跟隨頁(yè)面的長(zhǎng)度而變化，為承載后期更多的菜單信息提供基礎(chǔ)。因設(shè)計(jì)展覽業(yè)務(wù)性質(zhì)的特點(diǎn)，主頁(yè)會(huì)搭建大量的圖片模塊進(jìn)行業(yè)務(wù)展示，因此保障視覺(jué)瀏覽的完整性尤為重要，在網(wǎng)頁(yè)拖動(dòng)至第二屏的時(shí)候，一級(jí)菜單收進(jìn)側(cè)邊欄，在不觸發(fā)的情況下，頁(yè)面頂部?jī)H保留一個(gè)簡(jiǎn)略的菜單入口icon。

4.2 界面設(shè)計(jì)

因?yàn)楹贾輹r(shí)尚家具設(shè)計(jì)周是一個(gè)國(guó)際化的展覽，而體現(xiàn)在官網(wǎng)的國(guó)際化上絕不是“支持英文”就足夠的，以英文版的首頁(yè)設(shè)計(jì)為例，英文版的設(shè)計(jì)在沿用中文版的信息架構(gòu)及交互框架的基礎(chǔ)上，把首頁(yè)的模塊布局做了調(diào)整，去掉了中文版的輪播展示模塊，代替的是靜態(tài)圖片模式，這種頁(yè)面設(shè)計(jì)方式，讓信息層級(jí)劃分比較明顯，主次分明，符合英文網(wǎng)站瀏覽習(xí)慣，用戶使用時(shí)也不會(huì)眼花繚亂。

5. 表現(xiàn)層設(shè)計(jì)

5.1 感知設(shè)計(jì)

采用曲線提升動(dòng)效絲滑度

因客戶團(tuán)隊(duì)有極高的視覺(jué)要求，需要在國(guó)際設(shè)計(jì)團(tuán)隊(duì)的配合下每年都完成一致的主視覺(jué)表現(xiàn)。英選在獨(dú)有一套細(xì)致的UI標(biāo)準(zhǔn)下，保障設(shè)計(jì)質(zhì)量。雙方經(jīng)過(guò)討論，確定為前端動(dòng)效采用貝塞爾曲線，最終實(shí)現(xiàn)如絲般順滑的動(dòng)畫體驗(yàn)。

網(wǎng)站排版

5.2 整體版式

網(wǎng)站整體采用了常見的頂部標(biāo)簽導(dǎo)航模式，按照消費(fèi)者/參展商信息瀏覽的過(guò)程，關(guān)注興趣點(diǎn)等，組合出頂部標(biāo)簽的排列順序，分別為：首頁(yè)，關(guān)于我們，我要觀展，參展服務(wù)，必看亮點(diǎn)，媒體，咨詢與幫助，中英文切換，搜索，我要參展，而在頂部欄視覺(jué)中心則用logo分隔開以上常用及非常用菜單。

首頁(yè)主要布局由海報(bào)大圖或視頻片段撐滿屏幕寬度作為每個(gè)主題的分隔，充分展示視覺(jué)的沖擊性及豐富性，在瀏覽的第一眼就能吸引住用戶的眼球。

5.3 頁(yè)面版式

頁(yè)面版式大概可分為這兩個(gè)部分：信息排布、留白藝術(shù)，以“必看亮點(diǎn)-展覽主題”頁(yè)面為例，本頁(yè)面采用了左右布局，右側(cè)主題詳情拖動(dòng)頁(yè)面時(shí)，左側(cè)的主題概況及海報(bào)固定不動(dòng)，它能讓用戶更直觀了解主題概況總結(jié)而不用費(fèi)時(shí)費(fèi)力上下拖動(dòng)頁(yè)面查看。

在左側(cè)的主題概況之外的區(qū)域，留白藝術(shù)則使用的較為到位，整個(gè)頁(yè)面除了主題概況及主題詳情外，幾乎看不到任何多余的東西，讓閱讀體驗(yàn)更加沉浸。

最后：SEO優(yōu)化

為了滿足流暢的交互，多圖加載等體驗(yàn)，前端工程師對(duì)頁(yè)面進(jìn)行了細(xì)小調(diào)整后，我們接著采用了docker 方案，僅花費(fèi)了 5 分鐘就快速搭建了開發(fā)環(huán)境，部署更新都非常簡(jiǎn)便。也因?yàn)檫@個(gè)技術(shù)方案的實(shí)現(xiàn)，使得我們?cè)诎俣群凸雀杷阉髦?，網(wǎng)站品牌詞中均快速排名第一。讓用戶在搜索關(guān)鍵詞時(shí)立馬找到企業(yè)網(wǎng)站，從而進(jìn)一步了解企業(yè)的產(chǎn)品或服務(wù)。

搭建官網(wǎng)做好以上幾步，基本上你的網(wǎng)站就能兼具性能，體驗(yàn)與美觀啦~