一、項目背景

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

更多極氪文章：

二、目標歸納

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

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

在此基礎上，我們從框架、內容、視覺三個維度制定設計目標和策略。重新制定清晰合理的框架結構，呈現直觀有效的信息傳達、探索一致新穎的設計語言。

三、框架制定

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

在與業(yè)務協(xié)調確認內容素材，同時結合核心用戶的訴需求，根據重要度、關系、次序進行信息的歸納與分析后，確認整個網站的信息架構。

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

四、內容設計

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

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

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

五、視覺表現

確定視覺風格之前，我們結合品牌調性、產品特色和用戶需求，整理情緒版，得到 2 個設計關鍵詞——秩序感、空間感。

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

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

六、秩序感

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

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

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

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

七、空間感

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

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

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

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

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

總結

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

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

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

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