My Secret Rainbow

瑶台官网2.0设计——品牌提升与设计推动

改版动机‍

对于平台界面设计来说，不论是审美和功能都需要不断地进行更新迭代，满足业务需求同时在竞争激烈的互联网+时代站稳脚跟。本次2.0瑶台官网的迭代与以往不同的是，本次除了对平台框架进行了调整以外，品牌的设计语言也进行了重新定义。

一、业务需要

1、瑶台发展阶段

随着瑶台平台能力不断丰富，各种类型的商业活动举办获得了客户良好的评价，用户量递增，需要运营和更多维度内容展示，承接流量。

2、瑶台商业模式的扩增

1.0版本的瑶台官网获得客户，主要以提供联系方式等待客户主动联系的方式，另有限的人力进行推广和客户对接，随着瑶台流量的不断涌入，开放入口让更多合作伙伴加入瑶台，在一定程度上能够帮助瑶台未来的推广和产能；2.0的瑶台不仅仅需要体现平台功能定位和硬实力，更大的责任是链接客户和帮助客户顺利进行参会。

二、设计推动

官网的价值除了直接的转化目标之外，还有打造专业性，树立品牌形象，影响用户对企业/产品的认知和感受，为此我们主要从以下两个方面进行设计推动：
1、建立全新的品牌形象、重新定义

品牌升级是平台在建立和维护自己品牌资产时所使用的重要战略手段，瑶台从游戏化到应用化的战略转变，在设计入手需要重新建立用户的认识和品牌忠诚度，通过丰富的视觉和概念引导树立品牌个性以及和其他产品的区别度。瑶台需要有自己的“气质”，这个“气质”需要通过设计赋予，设计的前提是需要忠于产品目标和方向。由于产品的更新换代，对品牌形象是有拉动力的，所以我们需要在官网的品牌宣传中，更新全新的界面。
2、设计语言的变化

新品牌具有足够包容度去适配瑶台产品的气质、让受众能感受到品牌的温润、包容、沉稳，所以官网设计语言需要和新品牌所承载的精神气质相契合，体现科技和包容度。

改版过程和思考

一、方向探索（发现问题）

在我们着手改版前，对当前线上官网问题进行梳理，确定目前存在的问题，才可以知道如何针对性的去改版优化。
主要存在以下问题：
1、框架传统、信息承载量少

官网的框架结构，板块布局就是给用户讲故事，用户进入官网，让用户从初步了解到产生兴趣、价值认同最后成为付费用户，这是官网该有的叙事逻辑。1.0官网在页面结构叙事上相对简单、缺少完整的叙事，随着产品2.0功能的发展新场景、新业务不断拓展落地，需要更多的功能点展示以及业务露出。

2、视觉陈旧、缺乏品牌调性
官网设计语言构建，品牌定位、风格是用户对企业、产品最直接的印象，老版官网构架常规，缺少业务场景的呈现和认知。因此我们需要建立新的叙事逻辑，在视觉风格上去古风，贴靠新品牌精神。

二、结构设计（页面结构、视觉层级优化）

官网的首页至关重要，是访客进入的第一个页面，内容上信息精准并高效传达给用户，需要理清放什么和怎么放，要有清晰的叙事逻辑，这里我们借助营销中的AIDA模型，构建官网的页面版块搭建：

优秀TOB官网首页信息内容基本会包含：首焦——通常展示企业产品/服务，给用户一个初步印象；核心业务——展示企业的核心价值，差异化的竞争优势，同下一板块的产品介绍，给用户一个深刻的印象；产品的详细功能、应用场景的展示让用户更加了解产品，做出心理预期，是否满足了用户的诉求。通过对产品的功能介绍，优势显现，让客户对产品的服务产生认知和认可，进而完成申请使用，从而也完成企业品牌价值的传递。得出叙述路径：产品初识→加深了解→强化认知→打消疑虑→转化等针对瑶台产品特性和内部同学整理出信息结构：首页的内容往简洁精准打造，开门见山且吸睛，所以只保留介绍/功能入口+技术案例展示+转化主要模块，把长逻辑叙事的基本内容放在了数字活动页里进行完整展示。

【首页】最终信息结构：

【数字活动】最终信息结构：

其他页面：

三、品牌记忆点

瑶台产品和功能有着明显的行业特征，就必须在视觉品牌上创造记忆点，与同行业拉开差距，让产品的购买者更关注品牌的权威性、可信度以及带来的价值。官网的整个设计语言系统这次从品牌基因、品牌延展、多场景应用、交互体验来叙述。

1、品牌基因
产品意识：以科技为表层、古风文化为内核
色彩偏向：中性、均衡
2.0调整方向：由原本的古风设计变为现在的流体概念设计，体现传承共融，更包容，更丰富，更广大深远
由此重新定义官网风格，从整体的改版方向和布局调整使其更符合设计目标，锁定几个衍生关键词：大气、共融、科技
结合logo颜色色域，以及瑶台品牌的定位，尝试了多个颜色进行对比，最终确定使用#7566F5 作为主色，镭射绿色-蓝色-紫色作为可提取的主色色域

图标设计：采用品牌色紫色以及同类色渐变作为重点色，结合毛玻璃材质设计增加透气性

2、品牌延展
在优势、性能等内容呈现上使用统一的icon+文字内容进行组合，保持在1200px宽度下，进行自适应布局；根据内容信息复杂程度的不同，这边选择合适的容器组件/模板来呈现信息，内页涉及解决方案、场景应用、体系说明、流程等。本次官网升级除去以上的几个模块之外，解决方案采用模板复用方式，设计师要考虑的是如何将每个页面做出有序、有节奏的排版的同时，保证风格统一。

3、场景应用
刚讲到首焦大图成了用户进来看到的第一印象，它决定了宝贵的第一屏，可以辅助产品slogan来传达产品价值，构造出官网的整体气质。

结合之前对瑶台产品的气质的提炼（温润、包容、沉稳）
包容——使用宽广场景对场景丰富的提炼
温润——景物元素上多处使用柔软的线条和形体来体现
沉稳——大面积使用白模素体，仅在核心和点缀元素上来体现品牌色，做到克制有度，大气沉稳

秉着对瑶台产品核心的提炼，开始构思完整的三维场景和色调氛围，对场景的构建思路是由繁到简的过程

加深品牌记忆：「官网首页」是承接流量的门户页面，「关于我们」是主瑶台平台介绍页，为了加深用户对瑶台品牌的记忆，都选择用瑶台logo作为banner的主体呈现

本次从三个方面进行定位实现场景统一
1、大背景整体的搭建上需要简洁，使用大块面的几何和层叠效果进行表现
2、在主体元素设计上保持统一的繁简层度，另外主体元素需要精准表达
3、材质质感表现上需要有渐变、毛玻璃、透感等三个方面的表现，整体使用70-80%的白模+20%左右特殊材质进行表现，由于整体画面淡色，所以特殊材质在画面分布需要严格的考虑视觉平衡

4、交互体验
为了提升信息呈现和触达的效率，使用更加丰富的交互信息维度来呈现，比如视频、动图、让用户能在单位时间里获取更多的信息，也更容易理解，加深对产品的记忆。
例如：我们在数字活动页在技术案例展示这块使用多图轮播的形式进行，最后一屏“开启”元宇宙营销新方向，在表现方式上从大图收缩到文字里剪影进行交互展示

改版结果 

一、埋点与数据分析

对布局在官网中的各个转化入口进行埋点，以便后续的数据追踪，数据分析，推进优化。对常规页面跳转按钮，其他常规按钮等进行埋点，了解用户信息浏览中关注重点，对用户的浏览路径进一步分析，改进设计方案最近30天，以及再上一个30天的官网人数对比数据：

二、未来展望

瑶台官网品牌升级的背后，是我们对客户体量、业务体系不断升级的回应，是对品牌的精细化雕琢与受众的精细化匹配的反馈。其实无论什么类型的官网，用户的体验是首要的，而我们尽量做的就是不管在内容表达还是价值传递，使用合适的品牌语言让每一个用户有所触动。另一方面思考角度是多维的，我们可以分析用户的场景目标去触达用户的想法，通过不断打磨，改进设计方案得到用户的认同。
官网体验地址：https://yaotai.163.com/

原文：https://mp.weixin.qq.com/s/0nixwxzjnbwW_IWJ15KX-Q