一、項目背景

威睿能源是吉利旗下，一家專業(yè)從事新能源汽車動力電池、電機電控驅(qū)動系統(tǒng)、充電系統(tǒng)、儲能系統(tǒng)的研發(fā)、制造、銷售與售后服務(wù)的新能源科技公司。舊版威睿官網(wǎng)存在框架不合理、內(nèi)容混亂、無法實時維護和品牌感弱等問題。威睿能源希望與極氪用戶體驗中心（ZED）合作對其官網(wǎng)改版，讓用戶更加全面了解的公司的品牌和產(chǎn)品。

更多極氪文章：

二、目標歸納

經(jīng)過與業(yè)務(wù)方的多次討論和分析，我們對威睿官網(wǎng)的改版訴求達成共識：

1. 建立信賴。搭建全新的官網(wǎng)框架內(nèi)容和設(shè)計，讓用戶更全面的了解公司向用戶傳遞專業(yè)、安全、可信賴的感知；提供用戶和企業(yè)的溝通渠道，減少獲客成本，提高潛在客戶的留存和轉(zhuǎn)化；
2. 高效曝光。使品牌產(chǎn)品能夠快速在線上曝光與迭代，提高公司產(chǎn)品熱度，減少廣告營銷成本；建立可及時維護更新內(nèi)容的管理后臺，方便高效的自主操作即時發(fā)布；
3. 理念透傳。提高威睿的品牌辨識度，傳遞高技術(shù)/高品質(zhì)/高安全的品牌理念及價值觀；建立品牌影響力，感知客戶，服務(wù)客戶，成就客戶；

在此基礎(chǔ)上，我們從框架、內(nèi)容、視覺三個維度制定設(shè)計目標和策略。重新制定清晰合理的框架結(jié)構(gòu)，呈現(xiàn)直觀有效的信息傳達、探索一致新穎的設(shè)計語言。

三、框架制定

要讓網(wǎng)站框架清晰合理就必須對用戶的訴求進行分析，經(jīng)過體量和角色兩個維度研究，我們確定框架主要服務(wù)于尋找和決策長期合作為目的的大企業(yè)客戶決策者。

在與業(yè)務(wù)協(xié)調(diào)確認內(nèi)容素材，同時結(jié)合核心用戶的訴需求，根據(jù)重要度、關(guān)系、次序進行信息的歸納與分析后，確認整個網(wǎng)站的信息架構(gòu)。

對于核心的首頁，我們依據(jù)營銷中的引入、成長、成熟、轉(zhuǎn)化模型。首屏通過企業(yè)品牌理念對用戶視覺進行沖擊，吸引用戶繼續(xù)瀏覽。再通過產(chǎn)品矩陣、技術(shù)實力、成功案例和行業(yè)背書讓用戶對威睿的能力實力全面了解產(chǎn)生信任。通過前三步層層遞進的宣導(dǎo)使?jié)撛诳蛻舢a(chǎn)生初步合作意向后，最后自然給出聯(lián)系方式完成轉(zhuǎn)化。

四、內(nèi)容設(shè)計

新能源工業(yè)產(chǎn)品技術(shù)規(guī)格復(fù)雜，如果按產(chǎn)品資料直接平鋪，大量文字無處安放，用戶閱讀費力。所以搭建一個高效，可擴展的內(nèi)容結(jié)構(gòu)尤為重要。

為此我們對內(nèi)容進行排序，精簡、合并產(chǎn)品頁模塊，減少因內(nèi)容迭代導(dǎo)致的樓層堆棧。提升高價值信息的展示優(yōu)先級，讓用戶更容易發(fā)現(xiàn)有利于轉(zhuǎn)化的內(nèi)容。通過小標簽、數(shù)值的提煉等方式，為大量內(nèi)容劃分層次，提升用戶獲取或理解業(yè)務(wù)關(guān)鍵內(nèi)容的效率。并且用規(guī)則的陣列布局，營造有序嚴謹?shù)墓倬W(wǎng)形象，同時也滿足平臺和各業(yè)務(wù)的發(fā)展和擴展需求。

增加更豐富的信息緯度，過去以表格、圖文呈現(xiàn)的技術(shù)信息，現(xiàn)在以圖文視頻動效等方式展示信息，提升用戶對內(nèi)容的視覺聚焦。

五、視覺表現(xiàn)

確定視覺風(fēng)格之前，我們結(jié)合品牌調(diào)性、產(chǎn)品特色和用戶需求，整理情緒版，得到 2 個設(shè)計關(guān)鍵詞——秩序感、空間感。

秩序感充滿規(guī)律和條理，新能源工業(yè)產(chǎn)品屬于高科技行業(yè)，而科技正是人類從自然中發(fā)現(xiàn)和研究出的規(guī)律秩序。界面的秩序感能帶來視覺沖擊和人們對科技產(chǎn)品實用美的欣賞。

網(wǎng)頁設(shè)計呈現(xiàn)用戶的屏幕上是二維平面，如果能創(chuàng)作中具有立體感和深度感的視覺空間，突破平面信息傳遞的限制，更能從多維度體現(xiàn)威睿的品牌和產(chǎn)品實力?？臻g感正是塑造意境氛圍強化呈現(xiàn)效果的關(guān)鍵。

六、秩序感

為了讓使用不同屏幕的用戶訪問網(wǎng)站時都有舒適的界面效果，我們通過對不同斷點下柵格的寬度、模塊、元素進行調(diào)整，保證頁面布局的一致性，以達到最佳的頁面展示效果。

框架布局是體系化視覺設(shè)計的起點，我們受包豪斯無裝飾和極簡理念的啟發(fā)，采用模塊化結(jié)構(gòu)去排布圖文信息，統(tǒng)一規(guī)整理性。

字體板式可以幫助創(chuàng)建清晰的層級結(jié)構(gòu)，組織信息，高效清晰的呈現(xiàn)設(shè)計和內(nèi)容。形成一套規(guī)范體系，沿用與其他門戶網(wǎng)站項目中，在視覺上達到統(tǒng)一和整體。

色彩體系按照品牌書中的顏色指導(dǎo)進行的設(shè)計，主要使用了白色和淺灰作為主色調(diào)，運用在頁面背景中，電光綠作為主識別色，沙黃作為點綴色。強調(diào)品牌特性，增強用戶記憶。

七、空間感

采用精致極簡、有層次和空間感的三維圖形為主視覺元素，契合威睿電力技術(shù)研發(fā)制造公司高科技、品質(zhì)強、可靠安全的特性，給用戶傳遞科技感、未來感。從品牌 logo 中提取元素創(chuàng)造代表電力的能量魔方，加上 VRMET 的基座，表達威睿公司電池、電機、電控系統(tǒng)強有力的研發(fā)制造能力。

以核心主圖為視覺聚焦點，輔助代表能量傳輸?shù)木G色輸送軌道向其他代表電力系統(tǒng)的的模塊連接，底部用錯落有致的圖形代表平臺，包羅整個威睿生態(tài)產(chǎn)品。統(tǒng)一的材質(zhì)刻畫極簡純粹、輕盈剔透的視覺效果。

我們制定出統(tǒng)一有序的 3D 模型柵格、空間角度、長寬比例，快速搭建簡化的幾何圖形，通過對圖形的有機組合形成新的圖形元素。提升風(fēng)格一致性和搭建效率。

設(shè)計可復(fù)用的通用場景底座，在核心區(qū)域搭建代表模塊語義的核心圖形，快速形成主頁面 banner。以此標準化的分層組合手法，可快速搭建多個子頁面，高效且體系化。

結(jié)合實際的場景和概念語意，快速創(chuàng)造對應(yīng)的虛實結(jié)合的圖形主體物，搭建豐富的 3D 素材庫，復(fù)用性強、延展性強、提升設(shè)計效能。

總結(jié)

此次威睿官網(wǎng)升級不僅搭建了全新的網(wǎng)站，更是建立了全新的科技感強、高品質(zhì)、安全穩(wěn)定的品牌形象，助力威睿品牌行業(yè)影響力的提升。

強大的三維動效能力，可搭建空間感強且可交互工廠實景，應(yīng)用于官網(wǎng)、數(shù)字可視化大屏、線下空間場景等，共同助力威睿品牌成為行業(yè)標桿。

歡迎訪問全新改版后的威睿官網(wǎng)：https://www.vremt.com/

關(guān)注極氪 ZED 公眾號，了解新能源汽車行業(yè)的體驗設(shè)計干貨。