名創(chuàng)優(yōu)品
官網(wǎng)品牌視覺形象全新升級
已上線,網(wǎng)址在文章底部

- 行業(yè):日化
- 服務(wù)類別:網(wǎng)頁設(shè)計開發(fā)
項(xiàng)目背景
名創(chuàng)優(yōu)品,“以IP設(shè)計為特色的生活好物品牌”。發(fā)展遍布全球超105個國家和地區(qū),在全球范圍內(nèi)擁有超5400家門店。2020年正式登陸紐交所,股票代碼“MNSO”。2022年正式在香港交易所掛牌上市,股份代號:“9896.HK”。2022年,名創(chuàng)優(yōu)品正式啟動品牌升級戰(zhàn)略,推出全新品牌口號“點(diǎn)亮全球美好生活”。為了匹配新的品牌形象,體現(xiàn)全球化、時尚的元素,展現(xiàn)國際品牌定位,需升級官網(wǎng),從以前的傳統(tǒng)產(chǎn)品展示型網(wǎng)站轉(zhuǎn)換為品牌官網(wǎng),突出品牌文化、IP特色、設(shè)計實(shí)力。
舊版官網(wǎng)問題
分析調(diào)研
-
01傳統(tǒng)的產(chǎn)品羅列展示型網(wǎng)站,不匹配品牌現(xiàn)階段的發(fā)展?fàn)顩r;x
-
02網(wǎng)站內(nèi)容架構(gòu)復(fù)雜,內(nèi)容瑣碎,難以凸出重點(diǎn);x
-
03頁面風(fēng)格風(fēng)格不夠大氣、時尚,缺乏品牌特色;x
-
04交互效果傳統(tǒng),用戶體驗(yàn)平淡無奇x

舊版官網(wǎng)截圖
新版官網(wǎng)建站目標(biāo)
在與客戶進(jìn)行詳細(xì)的需求探討后,我們重新梳理了網(wǎng)站內(nèi)容邏輯、功能訴求、視覺風(fēng)格,明確了此次項(xiàng)目的目標(biāo) :
-
01視覺美觀美觀、大氣、個性、時尚
-
02突出品牌符號突出品牌超級符號(笑臉符號)、使用“中國名創(chuàng)·點(diǎn)亮全球”的廣告語
-
03體現(xiàn)全球化重點(diǎn)突出全球化。展現(xiàn)國際品牌定位、進(jìn)駐全球頂級地標(biāo)商圈之勢能
-
04展示產(chǎn)品特色體現(xiàn)“好看、好玩、好用”、“以IP設(shè)計為特色的生活好物品牌”
-
05更好的交互體驗(yàn)高效、快捷、靈動的操作體驗(yàn)
-
06便捷維護(hù)支持靈活更新廣告語、形象宣傳圖、IP產(chǎn)品、全球門店、品牌資訊等內(nèi)容
結(jié)構(gòu)化思路
我們運(yùn)用“庖丁解牛”思維模式將網(wǎng)站建設(shè)分解為五大層,掌控全局、思路更清晰、執(zhí)行更高效:
-
架構(gòu)層整體的欄目框架——就像人的骨架輪廓
1、根據(jù)重點(diǎn)受眾人群梳理欄目架構(gòu);
2、頁面內(nèi)容排版布局:也就是內(nèi)容的邏輯,主要是順序和比例。
想突出哪塊內(nèi)容、占多大比例、以及順序主次 -
內(nèi)容層內(nèi)容展示的豐富度和細(xì)節(jié)——就像人的思想、文化、談吐
圖,文,視頻,不同展現(xiàn)形式的結(jié)合,內(nèi)容細(xì)節(jié)體現(xiàn)專業(yè),素材來源解決方案,版權(quán)問題等...
-
視覺層網(wǎng)站的風(fēng)格和調(diào)性——就像人的衣著打扮、外貌
1、品牌調(diào)性:網(wǎng)站的圖形、色彩、字體、圖片符合品牌形象;
2、網(wǎng)站版式風(fēng)格符合品牌個性和氣質(zhì)
3、體現(xiàn)行業(yè)特征,迎合受眾群體 -
營銷層網(wǎng)站是溝通的窗口
1、設(shè)定好符合用戶體驗(yàn)溝通順序,優(yōu)化訪問路徑,讓用戶能自然的按圖索驥
2、友好的交互效果,提升閱讀的舒適度,增添瀏覽過程中的樂趣性。 -
技術(shù)層兼容、速度、安全、易用
匹配不同設(shè)備,兼容各大主流機(jī)型,使用戶體驗(yàn)感更佳;
速度、靜態(tài)化、安全、穩(wěn)定、好用;SEO設(shè)置、后臺方便宜用。
首頁設(shè)計

基本規(guī)范
字體規(guī)范體系
Font

色彩規(guī)范體系
Color
-
主色
名創(chuàng)紅 -
背景色
簡約灰 -
背景色
極致白
設(shè)計展示
01
品牌符號
突出名創(chuàng)紅、笑臉符號
02
時尚、潮流、設(shè)計
好看、好玩、又好用
IP
product
IP產(chǎn)品



Design
strength
設(shè)計實(shí)力
03
全球化
風(fēng)靡全球111國、全球門店


自適應(yīng)移動端
這個案例還不錯?您也有此需求?