嬰貝兒于2021年提出了“成為科技驅(qū)動的平臺型零售商”的戰(zhàn)略,標梵互動受邀基于此對官網(wǎng)做升級優(yōu)化。經(jīng)過專業(yè)分析和綜合研判,最終確定了“數(shù)據(jù)時代,嬰貝兒高價值品牌營銷門戶”的全新品牌戰(zhàn)略,使新官網(wǎng)達成了對于戰(zhàn)略中科技更高、服務(wù)價值更高、營銷價值更高的全新訴求,得到了品牌方的一致認可。
嬰貝兒全新網(wǎng)站
標梵的品牌視覺設(shè)計師經(jīng)反復(fù)調(diào)研,發(fā)現(xiàn)了舊官網(wǎng)的諸多問題,品牌內(nèi)核和外延均表現(xiàn)力不足,譬如對“專注陪伴·倍加關(guān)愛”這一品牌定位的視覺詮釋不夠;對Logo的延展性不夠、視覺規(guī)范性不足;視覺細節(jié)較粗糙,較少使用高精度照片、圖形、視覺引導(dǎo)賦予品牌生命力。
嬰貝兒舊官網(wǎng)
品牌化,是給予網(wǎng)站以風(fēng)格上的統(tǒng)一,能為集團的多元化拓展和特色服務(wù)的打造提供良好的呈現(xiàn)。
嬰貝兒新官網(wǎng)
標梵互動為嬰貝兒打造的新版官網(wǎng),經(jīng)品牌化的包裝,展現(xiàn)出了諸多內(nèi)核優(yōu)勢,以首頁為例:主色統(tǒng)一為橙色,搭配寶藍色,營造出了親和、專業(yè)的品牌感;整體采用圓形和圓線作為Logo元素的延展,填充到頁面的空白,并賦予其立體質(zhì)感,凸顯科技性;網(wǎng)頁的照片用色細膩柔和,給用戶第一眼信賴感,詮釋了用戶對品質(zhì)的高要求。
從適讀性上來說,標梵的品牌設(shè)計師苛求頁面上的每一種視覺表達,從用色來說,細化到每種色的色相、飽和度,是否更適合用戶的生理習(xí)慣。乳白色、淡藍色對孕婦更為友好,低飽和度用色更為解壓,緩解了后疫情時代母嬰群體的焦慮。
給予網(wǎng)站視覺上的高價值感,與嬰貝兒“數(shù)據(jù)時代,嬰貝兒高價值品牌營銷門戶”的新定位高度匹配。高級感的視覺品質(zhì)也便于人們轉(zhuǎn)發(fā)、分享,從而進一步強化嬰貝兒官網(wǎng)的強營銷屬性。
為加深用戶后續(xù)對網(wǎng)站的使用頻次,增加網(wǎng)頁的服務(wù)價值,標梵做了三個工作。
一是對網(wǎng)站“脈絡(luò)”進行優(yōu)化,使新網(wǎng)站的架構(gòu)更合理、具備營銷實效。標梵通過對嬰貝兒的業(yè)務(wù)和戰(zhàn)略進行研究,在官網(wǎng)上新增了兩個版塊,一個是高品牌價值版塊(品牌&生態(tài))、一個是高市場價值版塊(合伙人),得出了現(xiàn)有的網(wǎng)站欄目架構(gòu),主要包含四塊內(nèi)容,分別是公司概況——品牌&生態(tài)——合伙人——會員服務(wù)。
“品牌&生態(tài)”版塊動效
如果不能帶來信息價值,那用戶再次訪問網(wǎng)站的機率將大大降低,如果沒有情感認同,用戶也會因缺乏情感認同而對品牌產(chǎn)生一些隔閡。
標梵的第二個工作是梳理嬰貝兒的品牌信息和新聞信息,讓官網(wǎng)持續(xù)沉淀高價值信息。作為品牌發(fā)聲的主陣地,官網(wǎng)的公信力高,載客量大,因此需要及時更新信息以便同用戶有效溝通。
標梵的第三項工作是在嬰貝兒官網(wǎng)的運營推廣上發(fā)力,基于標梵SESMO解決方案為基礎(chǔ),讓官網(wǎng)透過“搜索引擎、公眾號、自媒體分享、新媒體推廣”等多渠道有效觸達客戶。未來為嬰貝兒營造數(shù)字資產(chǎn)建設(shè)在官網(wǎng)環(huán)節(jié)奠定優(yōu)質(zhì)基礎(chǔ)。
為了讓網(wǎng)頁高價值信息、圖形更快速的加載、以更符合閱讀邏輯的方式呈現(xiàn),標梵在技術(shù)上給予其支持。官網(wǎng)定制的各個環(huán)節(jié)連動發(fā)力,除了原型策劃、設(shè)計推廣外,標梵還提供專業(yè)的前端制作、程序開發(fā)、功能測試服務(wù)。
在技術(shù)上,標梵互動的前端技術(shù)工程師助力前、中、后期開發(fā),最終使嬰貝兒官網(wǎng)完美呈現(xiàn)。前期,重新架構(gòu)網(wǎng)站底層系統(tǒng)代碼,讓運行更穩(wěn),操作更快,搜索引擎的收錄更快;中期,以VUE技術(shù)框架做支撐,使官網(wǎng)信息跨平臺展現(xiàn),用戶用手機端瀏覽網(wǎng)頁更便捷;后期,通過A/B測試方法測試使用效果,找到了最佳的網(wǎng)站優(yōu)化方案。
而在交互呈現(xiàn)技術(shù)上,技術(shù)工程師對高價值設(shè)計、文字信息進行了有效地呈現(xiàn)。嬰貝兒網(wǎng)站主要的交互技術(shù)有以下三個。
SVG前端矢量圖形語言
嬰貝兒官網(wǎng)中應(yīng)用的SVG矢量圖,使的質(zhì)量更佳、文件的容量更小,瀏覽網(wǎng)頁過程中的加載速度較快,用戶因此獲得了流暢的閱讀體驗,提升了用戶瀏覽網(wǎng)頁的品質(zhì)。
矢量圖形語言由標梵自主研發(fā),通過代碼來描繪高質(zhì)量的圖像,使網(wǎng)站在視覺呈現(xiàn)上更具有品質(zhì)。
CSS支撐圖形運動軌跡、
JS支撐信息多位層次展示
在嬰貝兒網(wǎng)頁信息的呈現(xiàn)上,標梵的藝術(shù)設(shè)計師和技術(shù)工程師運用圖形和線條動效的先后出現(xiàn),引導(dǎo)用戶先獲取到網(wǎng)頁重點信息,從而幫助理解文意。這樣的頁面更為靈動,圓圈和線條帶來旋轉(zhuǎn)的有品質(zhì)的科技感。這種特效即為CSS支撐的圖形和線條的運動軌跡編寫,以及JS支撐的信息的多位層次展示,是兩者合力作用的成果。
技術(shù)支撐的線性引導(dǎo),帶來的是沉浸式的動態(tài)展示,讓大母嬰品牌的故事性、利益點躍然眼前。
原生Lazy loading
應(yīng)用該技術(shù)的網(wǎng)頁,會產(chǎn)生延遲加載的效果,在嬰貝兒官網(wǎng)中,延遲加載技術(shù)主要指,當用戶用鼠標向下滑動頁面時,會自動延遲加載更多的新數(shù)據(jù),新加載的數(shù)據(jù)不會影響原有數(shù)據(jù)的顯示。
這一技術(shù)的主要優(yōu)勢是,用戶閱讀網(wǎng)頁時沒有信息量過度、網(wǎng)頁擁擠的感覺,而是信息一層層展現(xiàn)在面前,信息呈現(xiàn)更有層次感,技術(shù)層面上的延遲加載,也能減少服務(wù)器端的資源耗用。
目前標梵互動使用的操作軟件均實現(xiàn)了正版化,提高了服務(wù)企業(yè)信息系統(tǒng)的安全性,響應(yīng)了國家保護知識產(chǎn)權(quán)的號召。在標梵互動的視覺藝術(shù)設(shè)計師同前端的技術(shù)工程師的共同配合下,成功搭建出了嬰貝兒強營銷屬性的、高價值感的門戶網(wǎng)站建設(shè)。
嬰貝兒官網(wǎng)的全新定位和展示,能夠讓品牌戰(zhàn)略定位最大化地呈現(xiàn),也降低了品牌傳播的成本,這與嬰貝兒作為母嬰零售頭部企業(yè)、長期積累的好口碑不謀而合。
標梵互動現(xiàn)在已有服務(wù)300家客戶的經(jīng)驗沉淀,在官網(wǎng)定制上,標梵的內(nèi)核優(yōu)勢是,獨立的知識產(chǎn)權(quán),量身定制需求,品牌化的視覺表現(xiàn),敏銳捕捉企業(yè)核心競爭力,內(nèi)外分離的底層架構(gòu)等。尋得觀點相同的企業(yè)是樂趣,聯(lián)手有視野的企業(yè)是幸事,標梵期待與您同行。