设计复盘 | OneNET 5G版品牌升级和官网改版

摘要：去年下半年我们进行了OneNET品牌和体验设计升级，OneNET进入了全新的5G版本.
OneNET是由中国移动围绕物联网产业发展及5G专网生态建设需求自研推出的物联网数字感知能力中台。随着业务发展，产品服务和解决方案的数量迅速递增以及受众用户的转变，原有的品形象和官网已不能承载。因此去年下半年，我们进行了品牌和体验设计升级，OneNET进入了全新的5G版本。

其中OneNET的品牌形象和官网设计是OneNET的形象门面，也是各个功能的主要入口，是此次改版中的重点提升方向。但看得见的设计背后，更多的是看不见的设计思考，是我们对于用户体量、业务体系不断升级的回应，是对品牌的不断雕琢与受众的重新匹配。

01 项目背景

针对旧版官网的问题分析

我们首先通过用户反馈、数据埋点和竞品分析从旧版官网的可用性、易用性、有效性、容错性、吸引力5个纬度进行了分析。目前官网产品服务共有7个大类，34个产品服务，以及7类19个解决方案，随着近两年数量的不断增加，原有线上页面也存在展示过于单一、信息展示不合理、功能缺失、对用户的吸引力较差等问题。

业务策略和目标用户群分析

随着OneNET的业务线逐渐清晰，逐渐构建为面向企业客户，为企业服务的生态系统 。企业客户意味着是多成员多角色的群体组织，偏重流程、模块化，强调抽象和结构性，讲究整体的规划和体系设计，服务对象是组织和机构，更关注如何帮助企业提高效率效益，释放人力资源与成本。

在设计方案的初期，我们在目标群体中抽离出OneNET面向的不同角色，如决策者（企业负责人）、管理者（业务部门负责人）和执行者（内部员工和外部用户），关注不同客群以首页为起点，在整个网站内部的流转行为链路，从而分析每种角色希望从OneNET中获取的信息和价值等深层次诉求，以此为切入点提出设计目标。

02 设计目标

1.面向B端用户

通过对目标用户的梳理，我们初步模拟了B端用户的画像，从用户的角度去分析，在浏览页面时最渴望了解的问题就是“能不能对我有价值、能不能解决自己的问题”，带着这一目的重新设计了首页的叙述逻辑和布局，运用设计手段实现更有效的信息传达。

2.提升转化数据

门户首页是各个页面和功能的转化入口，我们分析了旧版门户的各项数据指标，着重希望在以下几个方面进行了优化：
（1）登录和注册流程：在登录界面中区分了不同的登录方式的重要级，主推OneNET账号和手机验证码登录，使登录更便捷。在注册流程中，简化了注册表单填写，降低了注册的难度。
（2）将页面中用户视觉焦点的位置进行视觉上的强化，比如原有的公告位置、banner的位置，以此来提升页面的转化率。
（3）对重点的产品服务在页面中不同屏中加入了多个入口，比如第一屏中的导航和benner位推荐导航，第三屏中的产品服务入口。以“方案可以带给用户什么价值”的角度重新设计了解决方案的展示方式。

3.视觉重塑

视觉重塑是本次改版的重点，前期我们对阿里云，华为云，百度云等相关竞品的官网设计进行了分析，对比分析不同的的设计风格和板块布局来梳理改版思路。
从竞品的官网设计中我们得到一些共同的设计趋势:
（1）色彩上从深色系界面风格转变为浅色系界面风格，浅色系能增强整体界面的呼吸感和留白效果，让用户浏览起来视觉上更舒适。
（2）设计趋势扁平化，减少大面积的重颜色使用，降低视觉层次，让整体界面的设计更加轻量化、扁平化，

我们总结出了OneNET此次改版方向的关键词：

03 设计方案

OneNET品牌升级

OneNET 上线至今，经历了5年的打磨和沉淀，我们更加清晰地认识到，OneNET作为物联网全生态链路的中间一环，我们的职责就是赋能物联网生态发展。本次品牌升级对于设计团队来说的挑战是如何通过品牌视觉的升级既能准确的反应现阶段OneNET新的品牌策略和定位，又能赋予品牌本身更多科技想象力，达到升级目标。

于是在多次头脑风暴后我们提出了此次品牌设计的关键词：连接、核心、服务
连接：我们强化了logo连接的概念，无穷大是一个常见的数学符号，象征着无限互联，正好契合我们万物智联的理念。
核心：我们将无穷大中间连接点的地方取出来，置于符号顶部，体现了OneNET作为物联网全生态链路的中间一环。
服务：新logo的图案正好对应了2个OK的手势，象征着OneNET能更好的服务于客户。

官网主视觉设计

本次首页焦点图与品牌形象结合设计了全新的动态3D的视觉风格；并从物联网相关的抽象的语义中提取出图形作为辅助的3D图形，材质的设定也围绕着轻盈与通透的方向进行了反复尝试，希望能更好的营造出来未来感和科技感。此外动画时间，在不同组件的运动缓冲速率的设定对于用户的视觉体验会产生微妙的体感差异。这些方面不仅帮助提升了视觉体验，也进一步提高了焦点区域的点击率。

在调研中会发现超过七成的工程师们都喜欢使用暗色的代码编辑器和工作台。所以我们在在studio的背景图中加入了3D元素的同时，采用了深色的配色在质感材质和灯光的表现上优化改进，为用户的视觉习惯服务。

图标设计

(1)毛玻璃材质
在此次设计中，我们对图标进行了全新的设计尝试，用科技蓝来呼应图标的品牌感，在UI设计中毛玻璃材质是一种轻量级的设计元素，可以快速创造出一种介于2D和3D之间的空间感，同时通过巧妙的色彩比例来突出图标的呼吸感，创建视觉层次。在图形设计上，运用基础图形和简洁的轮廓来让视觉上更简单易懂，统一的图标绘制尺寸来严格控制图标规范性。

(2)动效
在面向企业的设计中，自然，流畅，符合预期的动效不但可以提升产品的品质感，也可以很好地帮助用户理解信息。我们在图标设计中增加了鼠标交互微动效赋予图标趣味性，不仅为了吸引用户注意，更在于对相关的信息和品牌元素进行连接。

(3)辅助图标
在以前的产品服务页面中图标存在风格不统一、使用不规范等问题。此次改版我们对辅助图标进行了重新设计，色彩也更新为OneNET最新的品牌色系。

整体设计方案

（1）首屏
首页是用户浏览和使用OneNET的开始，起到传递品牌、产品价值的重要作用。
5G版方案：新版官网升级了全新的蓝白色系，强调品牌意识，顶部导航功能重新划分了层级，视觉焦点区域新增了推荐位并增加了图标和公告栏高度和图标设计，以增强视觉吸引力提高点击率。

（2）解决方案
旧版解决方案介绍通过大面积的视频作为背景，不仅影响网页加载速度，也对视频质量有着极高的要求，用户对网站的观感也会受视频品质的影响。原有视频播放时长有限且信息比较散乱，比较影响主体内容的可读性。
5G版方案：重点突出文案介绍，通过文字大小粗细变化区分文字信息的层级感，右侧配场景图片和视频介绍辅助，用户可选择的去点击观看视频，针对不同的解决方案新增了对应的真实案例介绍，通过真实案例来吸引客户了解方案的价值，提升可信度和吸引力。

（3）产品服务
旧版首页中产品服务空间占比较大，内容显得较为空洞，可读信息较少。
5G版方案：产品服务板块增加了studio介绍，并提取了Studio的产品特性通过色彩对比进行强调，根据用户浏览的视觉动线来设置按钮位置。产品服务选用了卡片式布局，图标微动效赋予了图标趣味性，也能带来不一样的鼠标互动体验。

（4）新增生态商城、合作流程、安全合规版块
新版新增了生态商城版块，背景用3D场景增强商城氛围感知，搭配卡片式布局，突出前后关系让层次更清晰，为企业客户提供了市场推广渠道；吸引更多用户成为合作伙伴，入驻生态商城。
合作板块，通过展示优势数据告诉用户我们能提高哪些效率，精简了合作流程，希望用简洁高效的流程吸引用户加入我们，最后安全合规的展示为企业用户提供安全性保证，彰显我们的专业性，这也是很多企业用户所看重的方面。

就整体而言，5G版的设计较之前的版本整体丰富很多，新增了产品推荐，客户案例，快速接入studio等多个模块，每个模块之间也进行了明确分区，首页视觉风格焕然一新，更灵动、更轻松。通过色彩来强化品牌意识，通过栅格系统、字体大小、固定色值、让界面的层级信息更加清晰，通过动态图标和交互效果，让页面感受更灵动。
可查看线上地址：https://open.iot.10086.cn/

04 总结

本次OneNET品牌升级突破了OneNET固有的“云”的概念，以“连接”为出发点体现出 OneNET 赋能万物智联的理念。
OneNET官网首页改版，通过对页面信息架构梳理，重新优化定义了叙事顺序，提高了用户阅读使用体验，并在视觉上通过4px 栅格定制了视觉体系的秩序，主视觉上尝试融入 3D 元素，并统一了官网视觉风格。
新版上线后我们也组织了设计团队的内部体验测评，并联合品质服务部进行较大范围的体验测评，多维度评估用户体验指数，收集意见反馈并监控埋点数据，在后续继续拓展提升产品体验。