鎂伽生物是一家獨(dú)角獸科技公司，官網(wǎng)設(shè)計(jì)開(kāi)發(fā)之初，根據(jù)行業(yè)屬性和品牌調(diào)性。幾輪討論下來(lái)，我們確定下來(lái)要解決的問(wèn)題是

“如何增加用戶(hù)在網(wǎng)站上的停留時(shí)間”

網(wǎng)站做得好不好，效果怎么樣，不是我們自己評(píng)判的，而是用戶(hù)的反應(yīng)、用戶(hù)的真實(shí)訪(fǎng)問(wèn)情況來(lái)評(píng)定的。

為什么我們拋開(kāi)標(biāo)新立異、差異化、高大上這些大詞，而要選擇“停留時(shí)間”看起來(lái)這么通俗的詞？

大詞往往給人一種正確的錯(cuò)覺(jué)，讓人無(wú)法反駁。然而大詞也因?yàn)樗螅鋵?shí)往往不是一個(gè)好的抓手，我們要有一個(gè)抓手貫穿建站過(guò)程，這個(gè)詞必須是有客觀(guān)標(biāo)準(zhǔn)、能量化、能衡量的詞。

每個(gè)流程的執(zhí)行人員看到這句話(huà)都能具體落地到執(zhí)行過(guò)程。而不是一個(gè)詞，每個(gè)人看到后都有自己的理解的，如果都有自己的理解，那執(zhí)行就會(huì)有偏差。

定調(diào)之后，我們?cè)偃プ龈?jìng)爭(zhēng)對(duì)手的分析，這樣會(huì)更加有的放矢，知道需要分析對(duì)手的哪些方面。

據(jù)統(tǒng)計(jì)，對(duì)于生物科技行業(yè)企業(yè)官網(wǎng)，用戶(hù)的平均停留時(shí)長(zhǎng)通常在2-3分鐘。影響的因素包含內(nèi)容的專(zhuān)業(yè)性、設(shè)計(jì)與用戶(hù)體驗(yàn)、用戶(hù)群體等多種因素。

我們先來(lái)看看同行網(wǎng)站都是怎么做的：

經(jīng)過(guò)參考幾十個(gè)同行網(wǎng)站以及結(jié)合我們自己的經(jīng)驗(yàn)，我們發(fā)現(xiàn)大部分同行網(wǎng)站普遍存在以下問(wèn)題：

1、用戶(hù)體驗(yàn)不佳

2、信息雜亂，重點(diǎn)信息不突出，內(nèi)容不夠?qū)I(yè)

3、設(shè)計(jì)千篇一律

圍繞“如何增加用戶(hù)在網(wǎng)站上的停留時(shí)間”，以及規(guī)避同行網(wǎng)站的問(wèn)題確定以下5步執(zhí)行思路：

第一步：簡(jiǎn)化設(shè)計(jì)；

第二步：內(nèi)容提煉；

第三步：素材升級(jí)。

第四步：留白與輔助圖形貫穿始終。

第五步：用戶(hù)行為分析與轉(zhuǎn)化跟蹤。

第一步：簡(jiǎn)化設(shè)計(jì)

鎂伽產(chǎn)品非常豐富，且交叉分類(lèi)，按產(chǎn)品分以及按解決方案分。我們把產(chǎn)品和解決方案集合成一個(gè)欄目，但是又很清晰地做了區(qū)分，對(duì)整體框架做了極致地簡(jiǎn)化。讓幾百個(gè)產(chǎn)品邏輯架構(gòu)導(dǎo)航清晰展現(xiàn)，不顯雜亂、臃腫，且訪(fǎng)客可以很清晰快速地定位到自己想看的內(nèi)容。

針對(duì)具體產(chǎn)品又采用鼠標(biāo)移動(dòng)切換的方式，看起來(lái)簡(jiǎn)潔明了。考慮了用戶(hù)的視覺(jué)層次，有重點(diǎn)有突出。

產(chǎn)品作為重點(diǎn)展示內(nèi)容從產(chǎn)品名稱(chēng)到描述實(shí)現(xiàn)了折疊即能直觀(guān)明了，縮短了用戶(hù)的訪(fǎng)問(wèn)路徑。實(shí)現(xiàn)了不點(diǎn)擊就能了解系列下所有產(chǎn)品的信息。

網(wǎng)站在展現(xiàn)足夠信息量的情況下，做到了簡(jiǎn)潔舒展。

第二步：內(nèi)容提煉

鎂伽每個(gè)頁(yè)面針對(duì)文案都做了提煉，展現(xiàn)重點(diǎn)信息，文案寫(xiě)成小塊、易讀的段落。

用戶(hù)的專(zhuān)注力與時(shí)間是有限的，訪(fǎng)客需要閱讀、點(diǎn)擊或記憶的內(nèi)容越少，他們就越能夠理解與吸收你的內(nèi)容。因此，提煉內(nèi)容做到了文案的有效傳播。加上跟文案內(nèi)容涵義相關(guān)的圖標(biāo)以及恰到好處的留白，給用戶(hù)帶來(lái)更寬敞、平衡的感覺(jué)。

增加訪(fǎng)客的閱讀有效率與耐心時(shí)長(zhǎng)。

第三步：素材升級(jí)

站內(nèi)的每一張圖片，每一個(gè)視頻，每一個(gè)gif，甚至到每一個(gè)圖標(biāo)我們都做了精心地策劃，不放過(guò)每一處細(xì)節(jié)。產(chǎn)品圖片以高質(zhì)量的三維渲染或矢量圖為主，視頻以精美的三維動(dòng)畫(huà)制作為主。

網(wǎng)站整體素材的提升讓訪(fǎng)客對(duì)鎂伽的專(zhuān)業(yè)度有了初步的認(rèn)可。

通過(guò)上面的視頻也能看出來(lái)產(chǎn)品素材的精美與用心，以此來(lái)吸引用戶(hù)訪(fǎng)問(wèn)的興趣。

第四步：留白與輔助圖形貫穿始終

網(wǎng)站整體留白較多，特別是內(nèi)頁(yè)，給人視覺(jué)留有放松的空間，創(chuàng)造視覺(jué)層次，使設(shè)計(jì)更加有序和結(jié)構(gòu)，讓人訪(fǎng)問(wèn)起來(lái)舒適。足夠的空白區(qū)域使得文本不顯得擁擠，從而提高內(nèi)容的可讀性和信息的傳達(dá)效率。

適當(dāng)?shù)牧舭滓部梢詭椭龑?dǎo)用戶(hù)的注意力，突出重要信息或元素。幫助用戶(hù)區(qū)分不同的內(nèi)容塊和信息層級(jí)。

留白同時(shí)也營(yíng)造一種簡(jiǎn)約、雅致的氛圍，提升品牌認(rèn)知度。

為了提升效果，在留白的同時(shí)我們搭配了不易察覺(jué)的輔助圖形，也不會(huì)造成視覺(jué)干擾，如果我不說(shuō)可能您訪(fǎng)問(wèn)完整個(gè)網(wǎng)站都沒(méi)有發(fā)現(xiàn)輔助圖形。讓訪(fǎng)問(wèn)瀏覽器里感官舒適，毫不費(fèi)力，在無(wú)形中提升整體訪(fǎng)問(wèn)體驗(yàn)，提升訪(fǎng)問(wèn)時(shí)長(zhǎng)。

第五步：用戶(hù)行為分析與轉(zhuǎn)化跟蹤

網(wǎng)站的每個(gè)產(chǎn)品頁(yè)面以及下載資料文檔都有用戶(hù)留資，后臺(tái)能獲取到用戶(hù)的訪(fǎng)問(wèn)行為路徑，了解到用戶(hù)是對(duì)哪個(gè)產(chǎn)品感興趣。

用戶(hù)的留資第一時(shí)間同步到鎂伽內(nèi)部的CRM系統(tǒng)，由于鎂伽產(chǎn)品業(yè)務(wù)板塊眾多，針對(duì)此實(shí)現(xiàn)了自動(dòng)分配至負(fù)責(zé)對(duì)應(yīng)業(yè)務(wù)板塊的銷(xiāo)售專(zhuān)員。

提高了效率，實(shí)現(xiàn)了業(yè)務(wù)員第一時(shí)間獲取到潛在客戶(hù)的聯(lián)系方式，并與客戶(hù)進(jìn)行洽談，從線(xiàn)上營(yíng)銷(xiāo)方面最大程度上留住了客戶(hù)。

最后：

一個(gè)出色的網(wǎng)站一定是確保用戶(hù)體驗(yàn)和功能性兼?zhèn)?。?dāng)然，也要保持移動(dòng)設(shè)備友好性。

鎂伽官網(wǎng)上線(xiàn)兩年，我們收到不下于20個(gè)訪(fǎng)客對(duì)這個(gè)網(wǎng)站的贊美，并要求參考它來(lái)做。也佐證了網(wǎng)站獲得了大家的廣泛認(rèn)可。博敏一直追求設(shè)計(jì)與技術(shù)的進(jìn)步，歡迎大家的品鑒交流。