改版实战！5个步骤复盘威睿能源官网升级过程

一、项目背景

威睿能源是吉利旗下，一家专业从事新能源汽车动力电池、电机电控驱动系统、充电系统、储能系统的研发、制造、销售与售后服务的新能源科技公司。旧版威睿官网存在框架不合理、内容混乱、无法实时维护和品牌感弱等问题。威睿能源希望与极氪用户体验中心（ZED）合作对其官网改版，让用户更加全面了解的公司的品牌和产品。

更多极氪文章：

未来趋势！如何用数字孪生打造汽车工厂大屏？

今年上半年我国新能源汽车销量达到乘用车总销量 25 %，同比增长 1.2 倍。

二、目标归纳

经过与业务方的多次讨论和分析，我们对威睿官网的改版诉求达成共识：

1. 建立信赖。搭建全新的官网框架内容和设计，让用户更全面的了解公司向用户传递专业、安全、可信赖的感知；提供用户和企业的沟通渠道，减少获客成本，提高潜在客户的留存和转化；
2. 高效曝光。使品牌产品能够快速在线上曝光与迭代，提高公司产品热度，减少广告营销成本；建立可及时维护更新内容的管理后台，方便高效的自主操作即时发布；
3. 理念透传。提高威睿的品牌辨识度，传递高技术/高品质/高安全的品牌理念及价值观；建立品牌影响力，感知客户，服务客户，成就客户；

在此基础上，我们从框架、内容、视觉三个维度制定设计目标和策略。重新制定清晰合理的框架结构，呈现直观有效的信息传达、探索一致新颖的设计语言。

三、框架制定

要让网站框架清晰合理就必须对用户的诉求进行分析，经过体量和角色两个维度研究，我们确定框架主要服务于寻找和决策长期合作为目的的大企业客户决策者。

在与业务协调确认内容素材，同时结合核心用户的诉需求，根据重要度、关系、次序进行信息的归纳与分析后，确认整个网站的信息架构。

对于核心的首页，我们依据营销中的引入、成长、成熟、转化模型。首屏通过企业品牌理念对用户视觉进行冲击，吸引用户继续浏览。再通过产品矩阵、技术实力、成功案例和行业背书让用户对威睿的能力实力全面了解产生信任。通过前三步层层递进的宣导使潜在客户产生初步合作意向后，最后自然给出联系方式完成转化。

四、内容设计

新能源工业产品技术规格复杂，如果按产品资料直接平铺，大量文字无处安放，用户阅读费力。所以搭建一个高效，可扩展的内容结构尤为重要。

为此我们对内容进行排序，精简、合并产品页模块，减少因内容迭代导致的楼层堆栈。提升高价值信息的展示优先级，让用户更容易发现有利于转化的内容。通过小标签、数值的提炼等方式，为大量内容划分层次，提升用户获取或理解业务关键内容的效率。并且用规则的阵列布局，营造有序严谨的官网形象，同时也满足平台和各业务的发展和扩展需求。

增加更丰富的信息纬度，过去以表格、图文呈现的技术信息，现在以图文视频动效等方式展示信息，提升用户对内容的视觉聚焦。

五、视觉表现

确定视觉风格之前，我们结合品牌调性、产品特色和用户需求，整理情绪版，得到 2 个设计关键词——秩序感、空间感。

秩序感充满规律和条理，新能源工业产品属于高科技行业，而科技正是人类从自然中发现和研究出的规律秩序。界面的秩序感能带来视觉冲击和人们对科技产品实用美的欣赏。

网页设计呈现用户的屏幕上是二维平面，如果能创作中具有立体感和深度感的视觉空间，突破平面信息传递的限制，更能从多维度体现威睿的品牌和产品实力。空间感正是塑造意境氛围强化呈现效果的关键。

六、秩序感

为了让使用不同屏幕的用户访问网站时都有舒适的界面效果，我们通过对不同断点下栅格的宽度、模块、元素进行调整，保证页面布局的一致性，以达到最佳的页面展示效果。

框架布局是体系化视觉设计的起点，我们受包豪斯无装饰和极简理念的启发，采用模块化结构去排布图文信息，统一规整理性。

字体板式可以帮助创建清晰的层级结构，组织信息，高效清晰的呈现设计和内容。形成一套规范体系，沿用与其他门户网站项目中，在视觉上达到统一和整体。

色彩体系按照品牌书中的颜色指导进行的设计，主要使用了白色和浅灰作为主色调，运用在页面背景中，电光绿作为主识别色，沙黄作为点缀色。强调品牌特性，增强用户记忆。

七、空间感

采用精致极简、有层次和空间感的三维图形为主视觉元素，契合威睿电力技术研发制造公司高科技、品质强、可靠安全的特性，给用户传递科技感、未来感。从品牌 logo 中提取元素创造代表电力的能量魔方，加上 VRMET 的基座，表达威睿公司电池、电机、电控系统强有力的研发制造能力。

以核心主图为视觉聚焦点，辅助代表能量传输的绿色输送轨道向其他代表电力系统的的模块连接，底部用错落有致的图形代表平台，包罗整个威睿生态产品。统一的材质刻画极简纯粹、轻盈剔透的视觉效果。

我们制定出统一有序的 3D 模型栅格、空间角度、长宽比例，快速搭建简化的几何图形，通过对图形的有机组合形成新的图形元素。提升风格一致性和搭建效率。

设计可复用的通用场景底座，在核心区域搭建代表模块语义的核心图形，快速形成主页面 banner。以此标准化的分层组合手法，可快速搭建多个子页面，高效且体系化。

结合实际的场景和概念语意，快速创造对应的虚实结合的图形主体物，搭建丰富的 3D 素材库，复用性强、延展性强、提升设计效能。

总结

此次威睿官网升级不仅搭建了全新的网站，更是建立了全新的科技感强、高品质、安全稳定的品牌形象，助力威睿品牌行业影响力的提升。

强大的三维动效能力，可搭建空间感强且可交互工厂实景，应用于官网、数字可视化大屏、线下空间场景等，共同助力威睿品牌成为行业标杆。

欢迎访问全新改版后的威睿官网：https://www.vremt.com/

关注极氪 ZED 公众号，了解新能源汽车行业的体验设计干货。

本篇来源：优设网

原文地址：https://www.uisdc.com/vremt-website-design