​可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设...

​

可视化图表 是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设计过程有所帮助。

往期干货：

如何做好视觉可视化设计？我总结了这72种图表类型 视觉学习者（Visual learner）是那些用图像进行思考的人[1]，这些人将脑中的画面转述成词语去与他人进行沟通。

阅读文章 >

一、为什么要数据可视化 数据可视化就是用图表来表示数据信息，它所传达的信息包括你所拿到的数据源和你分析后的结果，再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息，是我们可视化的最终目的。

举个例子，同样一组数据，用表格的形式呈现是很难有所洞察的；如果将各个地区维度的数据聚合以柱图形式呈现，很容易就能看出各个地区间数据的差异，并从中洞察规律。

关于如何设计好数据可视化图表，这边总结了三个步骤：选择适合的图表，强化视觉层次，图表响应式适配。

1. 选择适合的图表 数据可视化的图表种类繁多，当我们真的开始作图，往往会遇到一个困境：有这么多类型，要如何选择正确的图表呢？首要依据是考虑所要传达的信息意图，即所要制作的图表它的任务是什么，再通过分析数据关系来选择表达方式；第二层意图是图表传达内容，这时候我们就需要根据数据的特征去突出和强化。

① 分析数据关系

根据数据分析的方式来看，每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构，再结合数据关系作出选择。了解图表的可能知道，一般图表的数据关系有构成、比较、分布，以商业数据为例，常见的还有流转关系。

构成关系

构成关系的图表表达的是部分和整体的关系，用于分析总体和各部分的占比比例，构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小，也可以使用比较关系的图表。

常用图表：饼/环图、堆叠图、面积图等，如涉及到层级结构，还会用矩形树图或旭日图等特殊结构图表。

关键词：“占比、比例、百分比”

比较关系

比较关系是基础分析中常用的一种图表类型。在一定的取值范围内，通过对两个或两个以上的指标分析，可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式，趋势对比用于表示一段时间内数据的变化，分类对比用于比较数据规模。

常用图表：趋势对比常用图表有折线图、散点图等；分类对比常用条形图、柱状图、气泡图等。

关键词：“增减、升降、涨跌、波动”

分布关系

利用空间分区来展示数据之间的分布关系，常用于体现两个或以上数据的相关性。

常用图表：散点图、热力图、雷达图等

关键词：“随着……而变化、A/B之间的相关性、交/并集”等

关联与流转

流转关系是 B 端数据常用的一种关系，它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等，以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。

常用图表：关系图、桑基图、漏斗图、进度图等

关键词：“流程步骤、留存、转化、关系”

② 分析数据特征

按数据关系和分析目的选择好图表类型后，第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有：变量特征、维度特征、层级特征、流程特征。

变量特征

分辨一个指标通常有两类特征，按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势，离散数据通常统计各分类下数量的变化。

连续型数据：指在一定区间内可以任意取值的数据叫连续数据，其数值是连续不断的。如身高、体重等带有时间因素变量的数据等，通常用折线图体现变化趋势。

离散型数据：指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据，用柱图表现更加体现变量的特征。

维度特征

多维度分析需要将多个变量在同一平面上直观的表示，可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据，可使用不同颜色进行分类

根据分析视角选择图表：对于多维度变量的数据我们需要明确分析的视角，去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据，如需要全局视角查看个班的综合素质，推荐使用雷达图；对比单科成绩的变化分布，则推荐使用堆积图。

层级特征

多层级数据由多个部分构成一个整体，又称树形结构数据。除了用结构树图表表现以外，还可以考虑以下两种图表类型：

矩形树图：突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小，它以面积的形式突出展现各个子层级节点的占比，可帮助用户看到数据的层次结构以及各层级之间的关系。

例如：上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额，通过色调来区分不同类型，颜色的深浅代表分类下的子集，面积体现销售占比。对比一般结构树图表，它的优势在于可以有效利用空间。

旭日图：突出细分层级关系。由多个圆环图嵌套而成，也称为径向树图，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。常用于细分分析方法，将事物从大到小进行拆解。每个级别的数据通过 1 个圆环表示，离原点越近代表圆环级别越高。 旭日图在显示一个环如何被划分为多个层级时最有效，而矩形树图适合比较相对大小。

流程特征

流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径；其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。

2. 强化视觉层次 选择合适的图表后，在信息传达上也需要正确的表达，展示形式美观的同时能够清晰的体现数据特点。

① 强化数据特性

使用图表正确的表达信息，需要设计师在强化数据特性的同时避免偏差

趋势易感知：折线图数值如过于平均导致趋势平缓，有时候无法体现偏差；在强调数据趋势的场景下，推荐用动态取值范围让波动保持在一定范围内，放大波动占比更突出趋势。

展示更准确：柱状图依靠柱体面积体现最终数值，使用动态范围截断将会导致数据解读不完整；始终将 y 轴从 0 开始，才能更准确的反映柱图中的值。

② 色彩视觉传达

除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一。

我们在之前的文章里有介绍过图表的取色模型，通过调整颜色 HSL 值的区间，可以得到以下三种意图色板：

定性型-分类色板：用于区分不同的类型，又称为无序色板。适合区分没有内在顺序的类别

定量分歧型-发散色板：通过两边互补色来体现，具有明亮的中间值，然后以不同的色调在刻度的两端变暗。通常用于可视化负值和正值

定量顺序型-顺序色板：从亮到暗或相反的渐变。适合可视化从低到高的数字。

那么我们要怎么样去使用这些色板呢？下面几个案例将带你了解其中的差异。

定性型：使用色调来进行分类

数据内在没有顺序差别时，建议使用色调值（H）进行区分；如定义国家、行业等类型。如果希望图表看起来更加专业，以下有几项分类色板的小建议：

选取尽量少的色调：取色时无需使用整个色环，使用邻近色或互补色的取色方式显得更加专业。

色板适度明暗交替：一些视障人士无法区分色相，主要靠颜色的明暗差异来识别，通过饱和度和暗度的调整，创造明暗交替的色板。

定量型：使用深浅色板强调内在顺序

如果在同一个分类下包含子类别，或者数据本身具有排名属性，那么建议使用连续色板来突出他们内在的顺序，使图表更加易读。

顺序色板-选择合适的插值：根据数据的分布情况选择不同的的插值断点，突出数据的差异。如以下案例中，根据统计学概念设定不同的取值区间，左侧示例使用的是平均线性差值，反映的是数据的集中趋势；右侧示例使用的是中位数插值，能更好的体现数据分布的形态。

发散色板-关注对比色的识别性：尽量避免红绿配色，如需使用绿色，偏黄或偏蓝的绿色更易分辨，对视障人士也更加友好。

3. 图表中的响应式设计 B 端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的环境，根据不同端去适配显示效果，以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。

① 布局框架适配

在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间；元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。

如案例中的图表，在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。

② 图表元素适配

要适配移动端，网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外，还需要考虑手机屏幕的尺寸和图表元素的适配性，去兼容相关的交互操作。

信息浮层：在图表中，信息卡元素是传达信息内容的重要组件，在网页端中悬浮展示，通常会占据很大空间；图表适配移动端后，信息浮层改动到图表上方常驻显示，并跟随手指的滑动变化响应数值，完整展示信息的同时也避免了页面抖动。

坐标轴标签：过长的坐标标签在适配过程中会产生重叠，而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配，避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配，精简空间避免堆叠。

③ 极值适配

因 B 端平台的特性，我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。

缩放和平移：在数据范围过多时增加取值范围的缩略轴组件，通过限制展示范围让数据量显示可控。

互动切换视图：如果折线的类别过多且无法省略的，建议分组查看。默认状态仅当前组折线高亮，其他数据以浅色显示，通过切换的方式查看其他组别的信息。

悬浮鼠标高亮：在分类过多不好分辨时，可使用悬浮高亮的交互方式突出相关联的数据组。

还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因，在这篇文章就不做深入讲解了，以后可独立介绍。

结语 数据可视化在 B 端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确，才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据，确保用户能够更好的接收信息，才是可视化的关键。

* 以上图表中均为虚拟数据，仅作为案例参考

8000 字深度长文！B端数据可视化设计指南（信息图表篇） 在如今的工作中（尤其是 B 端）越来越多的会开始出现数据可视化的身影，对于一部分小伙伴来说这个概念是较为陌生的，面对这道无形之中提升的“门槛”我们常常会表现的手足无措。

阅读文章 >

想做好数据可视化？先掌握常见 5 类图表的特点和设计细节 “数据可视化的目的，是要对数据进行可视化处理，以能够明确地、有效地传递信息。

阅读文章 >

欢迎关注作者的微信公众号：「百度MEUX」

前言表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。

前言

表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。

生活中，大多数人都不喜欢表单，比如前段时间有一些许久没有联系过的朋友让我帮忙填写一下调查问卷，作为一个热心市民的我，自然是选择点开链接帮忙填写；一鼓作气填了一段时间后，看着剩下的问题，我不耐烦的放弃了填写这个调查问卷。所以作为设计师，我们应该“由内而外”而不是“由外而内”的去设计表单，如何让表单变得更容易让人接受也是设计师应该考虑的问题。

更多兆日UCD的干货：

6000字干货！3个优秀交互设计师应该具备的边界感 引言 售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。

阅读文章 >

一、什么是表单 表单是一种用于信息添加、录入的页面类型。是连接用户与数据库的桥梁，通过引导用户进行信息的填写，从而提交数据给后台。在用户填写提交时，还需要对用户输入内容进行校验与反馈，保证用户信息填写的完整度。

填写表单是一件麻烦事，当我们想做的是投票、网上购物或者添加好友之前，总是会有表单防碍着我们。正因为多数人不喜欢填写表单，所以在做 表单设计 时，我们的首要目标是让人们迅速轻松的完成填写，同时获得系统和用户想要的东西。

二、如何进行表单设计 1. 表单拆分

基础表单中会有以下六个元素：

1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。

2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。

3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等

4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……

5. 提示：描述该输入项需要的输入类型，如：上传的文件类型

6. 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，建议将按钮悬浮固定在底部。

当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：

这个元素是什么类型的？ 如何处理其他这类东西？ 元素之间有什么关系？ 通过合并相同类别元素或者扩展该元素和其他元素之间的关系，能否简化设计？ 2. 表单录入模式

表单根据录入模式可以分为：单步表单、分步表单和高级表单

① 单步表单：

单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。

② 分步表单：

内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。

③ 高级表单（分组表单）：

高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。

3. 表单的页面框架

表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。

整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。

弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。

侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。

我们在选择页面框架时通常需要综合以下三个因素去考虑：

内容数量 ：内容如果较多不适合使用弹窗式 与原页面关联程度 ：需与原页面关联强建议使用弹窗式、侧边栏式 表单的复杂程度： 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。 4. 表单的排列方式

① 布局方式

在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：

1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。

2. 多列布局的表单会导致用户的视觉路径变长，用户需以 “Z” 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。

但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。

单列布局

优势：视觉路径清晰，填写效率高，体验好；

劣势：垂直空间占用率高。

建议使用场景：表单内容较少的情况下使用单列布局

多列布局

优势：省空间，能够放置更多的控件；

劣势：视觉路径模糊，填写成本高，填写易出错。

建议使用场景：关联性强的填写项横向排放，且将该列中最重要填写项的放于最左侧。

② 标签对齐方式

标签的对齐方式有：左对齐、右对齐和顶对齐，除了需要考虑单列式布局还是多列式布局，还有我们也需要考虑标签的对齐方式。

马泰奥·彭佐在 2006 年 7 月对表单的每种对齐方式做过眼动测试研究，根据研究结论做出以下分析：

顶对齐标签：

研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。

优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。

劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）

建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。

右对齐标签：

如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。研究中，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在 170 毫秒和 240 毫秒，而填写完成时间比左对齐快 2 倍。

优势：标签和输入框位置紧密，更方便填写

劣势：右对齐的布局会造成标签的左侧不齐，影响快速阅读表单的效率问题；如果增加填写项标题字数过多，整体的表单页都需要修改，右对齐灵活性低。 建议使用场景：适用于需要填写效率但受到屏幕垂直面积限制的页面。更适用于整页式布局。

左对齐标签：

在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。

优势：易浏览标签；占用纵向空间较少

劣势：标签和输入框距离较大，表单填写效率低

建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局

输入字段上方的粗体标签

在顶对齐的情况下，设计师可能会想：如果我们将标签进行加重，这增加了它们的视觉重量，并将它们带到了布局的最前面，这样说是不是可以让用户更好的去完成表单的填写呢？但事实却和设想相反：粗体标签反而增加了用户填写的负担。

粗体标签导致从标签移动到输入字段的扫视时间增加了近 60% ，从没有粗体标签的 50 毫秒到有粗体标签的 80 毫秒，更突出的标签没有明显优势。粗体标签更难让用户阅读和感知——可能是因为粗体文本和输入字段的相邻粗边框之间存在更多的视觉混淆。

小结

标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。

粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。

三、表单校验形式 1. 什么是表单的校验

为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的“反馈提示“，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。

① 前端校验：

主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。

② 后端校验：

与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。

③ 校验触发条件：

用户输入时进行校验（例如：注册输入密码时，实时显示密码强度） 用户输入完成失去焦点时进行校验（例如：注册重复输入密码时，密码与前一次输入的是否一致） 用户输入完成点击操作按钮时进行校验（例如：注册点击提交时进行校验，手机号已被注册所以未通过注册） ④ 报错方式：

即时报错 输入完成后点击 提交/下一步/保存 等操作后报错 2. 校验形式

根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：

① 输入时即时验证，即时报错

用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。

优点：可以实时告知用户表单的填写时候符合规范

缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感

使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码

② 失去焦点后即时报错

用户在输入完成后进行验证，输入框失去聚焦后（即用户点击输入框以外的位置后）与用户进行反馈。例如在注册网易邮箱时，填写完毕后即时报错。

优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。

缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改。

使用场景：注册用户名时，取消聚焦后会反馈用户名是否可用，不可用的情况下是被注册还是格式有问题。

③ 操作后（保存/提交/下一步）后全部报错

用户完成表单填写后，点击操作按钮（保存/提交/下一步），系统将表单统一上传到后端数据库中进行对比后集中与用户进行反馈。

优点：减少对用户的打扰，减少后端服务器压力，提高效率

缺点：用户只能点击按钮后才可以得到反馈，不能及时修改；若表单过长，用户返回修改的路径也将增加。

使用场景：登录账号是判断密码是否正确

最后说说 表单是后台最常见的场景之一，所以表单设计是 B 端产品最重要的部分之一。表单的设计是需要产品经理和设计师共同解决的难题。表单需要注意的点还有很多，我们在设计表单的同时，不仅要考虑上述的这些问题，还得“由内而外”的考虑表单为什么这么做，在用户录入信息时能降本提效才是我们应该做的。

更多表单设计干货：

想把表单的用户体验做到极致？我总结了这5个细节！ Hi，我是彩云。

阅读文章 >

把表单体验做到极致！11个表单设计的高效技巧 大家好，这里是设计夹，今天为大家分享的是「表单设计」。

阅读文章 >

欢迎关注团队微信公众号：兆日 UCD

​可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设...

​

可视化图表 是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设计过程有所帮助。

往期干货：

如何做好视觉可视化设计？我总结了这72种图表类型 视觉学习者（Visual learner）是那些用图像进行思考的人[1]，这些人将脑中的画面转述成词语去与他人进行沟通。

阅读文章 >

一、为什么要数据可视化 数据可视化就是用图表来表示数据信息，它所传达的信息包括你所拿到的数据源和你分析后的结果，再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息，是我们可视化的最终目的。

举个例子，同样一组数据，用表格的形式呈现是很难有所洞察的；如果将各个地区维度的数据聚合以柱图形式呈现，很容易就能看出各个地区间数据的差异，并从中洞察规律。

关于如何设计好数据可视化图表，这边总结了三个步骤：选择适合的图表，强化视觉层次，图表响应式适配。

1. 选择适合的图表 数据可视化的图表种类繁多，当我们真的开始作图，往往会遇到一个困境：有这么多类型，要如何选择正确的图表呢？首要依据是考虑所要传达的信息意图，即所要制作的图表它的任务是什么，再通过分析数据关系来选择表达方式；第二层意图是图表传达内容，这时候我们就需要根据数据的特征去突出和强化。

① 分析数据关系

根据数据分析的方式来看，每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构，再结合数据关系作出选择。了解图表的可能知道，一般图表的数据关系有构成、比较、分布，以商业数据为例，常见的还有流转关系。

构成关系

构成关系的图表表达的是部分和整体的关系，用于分析总体和各部分的占比比例，构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小，也可以使用比较关系的图表。

常用图表：饼/环图、堆叠图、面积图等，如涉及到层级结构，还会用矩形树图或旭日图等特殊结构图表。

关键词：“占比、比例、百分比”

比较关系

比较关系是基础分析中常用的一种图表类型。在一定的取值范围内，通过对两个或两个以上的指标分析，可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式，趋势对比用于表示一段时间内数据的变化，分类对比用于比较数据规模。

常用图表：趋势对比常用图表有折线图、散点图等；分类对比常用条形图、柱状图、气泡图等。

关键词：“增减、升降、涨跌、波动”

分布关系

利用空间分区来展示数据之间的分布关系，常用于体现两个或以上数据的相关性。

常用图表：散点图、热力图、雷达图等

关键词：“随着……而变化、A/B之间的相关性、交/并集”等

关联与流转

流转关系是 B 端数据常用的一种关系，它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等，以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。

常用图表：关系图、桑基图、漏斗图、进度图等

关键词：“流程步骤、留存、转化、关系”

② 分析数据特征

按数据关系和分析目的选择好图表类型后，第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有：变量特征、维度特征、层级特征、流程特征。

变量特征

分辨一个指标通常有两类特征，按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势，离散数据通常统计各分类下数量的变化。

连续型数据：指在一定区间内可以任意取值的数据叫连续数据，其数值是连续不断的。如身高、体重等带有时间因素变量的数据等，通常用折线图体现变化趋势。

离散型数据：指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据，用柱图表现更加体现变量的特征。

维度特征

多维度分析需要将多个变量在同一平面上直观的表示，可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据，可使用不同颜色进行分类

根据分析视角选择图表：对于多维度变量的数据我们需要明确分析的视角，去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据，如需要全局视角查看个班的综合素质，推荐使用雷达图；对比单科成绩的变化分布，则推荐使用堆积图。

层级特征

多层级数据由多个部分构成一个整体，又称树形结构数据。除了用结构树图表表现以外，还可以考虑以下两种图表类型：

矩形树图：突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小，它以面积的形式突出展现各个子层级节点的占比，可帮助用户看到数据的层次结构以及各层级之间的关系。

例如：上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额，通过色调来区分不同类型，颜色的深浅代表分类下的子集，面积体现销售占比。对比一般结构树图表，它的优势在于可以有效利用空间。

旭日图：突出细分层级关系。由多个圆环图嵌套而成，也称为径向树图，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。常用于细分分析方法，将事物从大到小进行拆解。每个级别的数据通过 1 个圆环表示，离原点越近代表圆环级别越高。 旭日图在显示一个环如何被划分为多个层级时最有效，而矩形树图适合比较相对大小。

流程特征

流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径；其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。

2. 强化视觉层次 选择合适的图表后，在信息传达上也需要正确的表达，展示形式美观的同时能够清晰的体现数据特点。

① 强化数据特性

使用图表正确的表达信息，需要设计师在强化数据特性的同时避免偏差

趋势易感知：折线图数值如过于平均导致趋势平缓，有时候无法体现偏差；在强调数据趋势的场景下，推荐用动态取值范围让波动保持在一定范围内，放大波动占比更突出趋势。

展示更准确：柱状图依靠柱体面积体现最终数值，使用动态范围截断将会导致数据解读不完整；始终将 y 轴从 0 开始，才能更准确的反映柱图中的值。

② 色彩视觉传达

除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一。

我们在之前的文章里有介绍过图表的取色模型，通过调整颜色 HSL 值的区间，可以得到以下三种意图色板：

定性型-分类色板：用于区分不同的类型，又称为无序色板。适合区分没有内在顺序的类别

定量分歧型-发散色板：通过两边互补色来体现，具有明亮的中间值，然后以不同的色调在刻度的两端变暗。通常用于可视化负值和正值

定量顺序型-顺序色板：从亮到暗或相反的渐变。适合可视化从低到高的数字。

那么我们要怎么样去使用这些色板呢？下面几个案例将带你了解其中的差异。

定性型：使用色调来进行分类

数据内在没有顺序差别时，建议使用色调值（H）进行区分；如定义国家、行业等类型。如果希望图表看起来更加专业，以下有几项分类色板的小建议：

选取尽量少的色调：取色时无需使用整个色环，使用邻近色或互补色的取色方式显得更加专业。

色板适度明暗交替：一些视障人士无法区分色相，主要靠颜色的明暗差异来识别，通过饱和度和暗度的调整，创造明暗交替的色板。

定量型：使用深浅色板强调内在顺序

如果在同一个分类下包含子类别，或者数据本身具有排名属性，那么建议使用连续色板来突出他们内在的顺序，使图表更加易读。

顺序色板-选择合适的插值：根据数据的分布情况选择不同的的插值断点，突出数据的差异。如以下案例中，根据统计学概念设定不同的取值区间，左侧示例使用的是平均线性差值，反映的是数据的集中趋势；右侧示例使用的是中位数插值，能更好的体现数据分布的形态。

发散色板-关注对比色的识别性：尽量避免红绿配色，如需使用绿色，偏黄或偏蓝的绿色更易分辨，对视障人士也更加友好。

3. 图表中的响应式设计 B 端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的环境，根据不同端去适配显示效果，以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。

① 布局框架适配

在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间；元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。

如案例中的图表，在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。

② 图表元素适配

要适配移动端，网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外，还需要考虑手机屏幕的尺寸和图表元素的适配性，去兼容相关的交互操作。

信息浮层：在图表中，信息卡元素是传达信息内容的重要组件，在网页端中悬浮展示，通常会占据很大空间；图表适配移动端后，信息浮层改动到图表上方常驻显示，并跟随手指的滑动变化响应数值，完整展示信息的同时也避免了页面抖动。

坐标轴标签：过长的坐标标签在适配过程中会产生重叠，而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配，避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配，精简空间避免堆叠。

③ 极值适配

因 B 端平台的特性，我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。

缩放和平移：在数据范围过多时增加取值范围的缩略轴组件，通过限制展示范围让数据量显示可控。

互动切换视图：如果折线的类别过多且无法省略的，建议分组查看。默认状态仅当前组折线高亮，其他数据以浅色显示，通过切换的方式查看其他组别的信息。

悬浮鼠标高亮：在分类过多不好分辨时，可使用悬浮高亮的交互方式突出相关联的数据组。

还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因，在这篇文章就不做深入讲解了，以后可独立介绍。

结语 数据可视化在 B 端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确，才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据，确保用户能够更好的接收信息，才是可视化的关键。

* 以上图表中均为虚拟数据，仅作为案例参考

8000 字深度长文！B端数据可视化设计指南（信息图表篇） 在如今的工作中（尤其是 B 端）越来越多的会开始出现数据可视化的身影，对于一部分小伙伴来说这个概念是较为陌生的，面对这道无形之中提升的“门槛”我们常常会表现的手足无措。

阅读文章 >

想做好数据可视化？先掌握常见 5 类图表的特点和设计细节 “数据可视化的目的，是要对数据进行可视化处理，以能够明确地、有效地传递信息。

阅读文章 >

欢迎关注作者的微信公众号：「百度MEUX」

不管是对于品牌，还是个人而言，我们都能真切地感受到2022年商业环境中不确定性带来的市场变量之大；互联网产品、运营人的边界不断拓展，行业人群的价值评估体系也在不断地调整。 在产品赋能企业，商业与产品融合的可能性探索上，人人都是产品经理一直在寻找与我们理念一致的

不管是对于品牌，还是个人而言，我们都能真切地感受到2022年商业环境中不确定性带来的市场变量之大；互联网产品、运营人的边界不断拓展，行业人群的价值评估体系也在不断地调整。

在产品赋能企业，商业与产品融合的可能性探索上，人人都是产品经理一直在寻找与我们理念一致的合作品牌，认可产品经理、运营人的价值，并能在达成商业成功的目标时充分地尊重，不通过打扰，恶意的信息刷屏来谋求结果，重视内容价值，追求品牌形象的塑造，而是通过优质的内容，传递有价值的信息来助力产品经理、运营人职业发展，推动企业重视从业者的专业价值，最终成就公司业务破局，商业成功。

通过一年的合作，我们评选出了六大在传递内容商业力量上做出努力的品牌，他们都是行业赋能的参与者、见证者、共创者。在此，我们诚挚地感谢这些获奖者，期待有更多愿意以优质内容，赋能行业发展，带来更多优质内容的品牌加入进来，一起让产品经理、运营人的价值被看见。

现在，就来为大家一一揭晓本次评选的年度影响力品牌榜单！

2022年度影响力品牌奖

2022年度影响力品牌——穿山甲

随着移动互联网入局者越来越多，市场对产品经理的要求越来越高，商业产品经理的价值也愈发突显，所以无论是小白还是资深商业产品经理，在职业发展过程中，都要不断进行业务深入，挖掘更多产品的“潜在机会点”。

作为巨量引擎旗下的全球开发者成长平台，穿山甲依托巨量引擎的技术和产品能力，已经持续为 10W+ 开发者提供了高效的用户增长、流量变现、LTV等全生命周期的服务和成长方案。因此在流量变现与商业化价值挖掘上，除了专业先进的产品技术和行业性解决方案，穿山甲也积累了丰富经验和案例方法论。

2022年，人人都是产品经理与穿山甲强强联合，推出App 商业化操盘手训练营、App商业化实战指南专栏等系列内容，从认知、方法论，到案例实操，助推产品经理、或者商业化业务从业人群获得全方位的能力成长。

2022年度影响力品牌——摹客

每位产品经理都是体验逻辑的高手，但是很少有时间能够系统学习原型工具，只能边摸索边学习，工具的体验好坏也就没有那么强感知了。但原型工具对于产品经理来说，是一个生产力工具，工欲善其事必先利其器，一个好的工具确实能提升产品经理的效率。

本着助力产品经理更高效工作的初衷，2022年，人人都是产品经理携手摹客发起原型工具评测大赛，面向全网招募对产品有极致体验追求的小伙伴，一起来打磨真正满足国内产品经理需求的原型工具，让更多的产品经理在输出产品原型时，不会因工具而限制了创意。

摹客专注于一站式的产品设计及协作，依托摹客“1+2+1”（1个平台+2个工具+1个设计系统）的产品矩阵，为产品开发团队提供全流程协作、原型设计、UI设计和设计规范管理支持，致力于为全球互联网团队和软件企业以及产品经理、设计师、开发工程师提供“更快更简单”的设计解决方案，为企业提供私有部署和定制化服务，以“快和简单”的产品特性，帮助企业提升设计效能、降低成本，为企业软件设计产品创造持续增长价值。

2022年度影响力品牌——声网

2022年，AI、5G和物联网技术的发展愈发成熟，这也使得互联网上的众多产品实现了技术性的创新突破，出现了许多新兴的产品/功能，市场上对于这一领域产品经理的需求量也因此激增。

作为全球实时互动云行业的开创者与引领者，自 2014 年成立以来，声网不断实现实时互动技术和服务创新，在诸多核心技术上形成专业壁垒，帮助开发者与客户提供更契合市场发展，更稳定、更高质的实时互动解决方案，共同探索和挖掘出更多具有潜力的实时互动创新场景。目前声网已服务泛娱乐、IoT、教育、金融、医疗、企业协作等 20+ 行业赛道，200+ 场景。

在这一年里，声网多次与人人都是产品经理联手，为大家开展行业技术创新类知识的公益性科普活动，例如「开播了·星期二」知识分享栏目，从沉浸式技术创新、loT物联网、技术团队远程协作、虚拟社交背后的RTC应用、开源技术、数字化转型等六大主题内容，为各位产品运营人士普及热点知识，带给大家不同行业视角、干货满满的深度分享，启发大家对于产品未来创新发展的思考。

2022年度影响力品牌——腾讯设计云

当今，降本增效成为企业运营的核心举措。在产品经理的日常工作中，由于一个项目从立项到上线的整个流程参与的角色众多，在项目研发流程经常会遇到效率低、成本高、管理难等问题。

腾讯设计云是一套汇集多款产设研协同提效工具的解决方案，基于腾讯多年设计研发实践，具有用户研究、智能设计、设计协同、快速研发等多项能力，解决调研-产品-设计-开发各环节中的团队协作痛点，从而助力企业实现高效协同，提升设计研发效率。

为了帮助各团队提升设计协作效率，人人都是产品经理联合腾讯设计云，与产品运营人群分享在产品设计过程中的高效协同产品方法论与应用案例，并展开产品创新实验调研，致力于探索互联网生态体验创新。

2022年度影响力品牌——网易智企

一直以来，泛娱乐社交都是互联网业内的一大热门风口。随着5G技术应用的落地，更多新场景的出现为行业提出新的需求，让整个行业的成长与发展空间都处于良好态势。但越来越多人的涌入，流量被分散、竞争激烈、获客难、变现难等问题成为企业发展瓶颈，企业急需新的多样化玩法来刺激增长，这也对这一领域的产品经理提出了更高的能力要求。

作为网易旗下一站式企业服务提供商，网易智企依托网易 24 年 AI、大数据、即时通讯、音视频等技术积累，提供智能化、数据化、场景化的企业服务解决方案。

2022年，人人都是产品经理联合网易智企推出了以线上直播、线下沙龙、线上直播+线下分享会等系列泛娱乐社交行业活动，聚集垂类人群，共同探索产品、技术、运营、出海、商业化的更多可能。未来，网易智企将会持续探索，充分利用旗下产品的技术优势、融合价值以及实践经验，积极赋能客户增收，推进行业创新，助推产业升级，发挥行业标杆的表率作用。

2022年度影响力品牌——亚马逊云科技

随着技术的不断进步，企业数字化转型成为大势所趋，应用现代化也成为企业转型成功的关键步骤之一。此时，站在技术前沿的团队们逐渐承担起了推动企业成功转型的“职责”，这对各位产品经理来说无疑也是一次巨大的挑战。

基于此，2022年人人都是产品经理与亚马逊云科技多次联手，共同发起智能数据分析产品测评大赛、产品架构师培养计划等公益活动，目的也是为了向大家普及互联网行业的前沿讯息，传递极客探索精神，向行业输送高阶人才，助力大家找到云时代下的转型机遇。

亚马逊云科技(Amazon Web Services）是全球云计算的开创者和引领者，提供全球覆盖广泛、服务深入的云平台，从全球数据中心提供超过 200 项功能齐全的服务，连续 11 年被 Gartner 评为“全球云计算领导者”，15年来一直以不断创新、技术领先、服务丰富、应用广泛而享誉业界。

2022年度优秀出版社

人人都是产品经理作为内容学习平台，作者持续在平台写文，分享经验与知识。 为助力作者将知识价值最大化，影响到更多期待成长的小伙伴，人人都是产品经理与电子工业出版社深度合作，从内容输出—内容出版—内容发行—到推广，帮助每一位原创作者打造个人IP，提升影响力，共同推动行业优质内容及变革的健康生态。 所有坚持输出的创作者，都有机会联合权威出版社共创，出版各大领域畅销书。

电子工业出版社成立于1982年10月，是工业和信息化部直属的科技与教育出版社，是中共中央宣传部和国家新闻出版总署授予的“全国优秀出版社”，在新闻出版总署组织的社、店互评活动中，连年被评为“重服务、讲信誉”的优秀出版社，获得了“全国版权贸易先进单位”、“中央国家机关文明单位”等荣誉。博文视点（Broadview）是电子工业出版社下属旗舰级子公司。多年来，博文视点深耕专业出版，以敏锐眼光、独特视角密切关注技术发展趋势及变化，致力于将技术大师之优秀思想、一线专家之一流经验集结成书。历经近20年不懈努力，汇集了众多优秀专家作者，沉淀下一大批经久不衰的经典著作。

2023金融科技行业有哪些值得关注的前沿技术？1月5日，北大光华度小满金融科技实验室联合《麻省理工科技评论》中国研究团队发布了《2023年金融科技趋势展望》，提出了生成式人工智能、因果推断、图计算、科技伦理治理、链上分布式金融应用、隐私计算、图计算、虚拟数字技

2023金融科技行业有哪些值得关注的前沿技术？本篇文章，提出了生成式人工智能、因果推断、图计算、科技伦理治理、链上分布式金融应用、隐私计算、图计算、虚拟数字技术、自动机器学习和云上能力升级等十大技术趋势。欢迎阅读~

2023金融科技行业有哪些值得关注的前沿技术？1月5日，北大光华度小满金融科技实验室联合《麻省理工科技评论》中国研究团队发布了《2023年金融科技趋势展望》，提出了生成式人工智能、因果推断、图计算、科技伦理治理、链上分布式金融应用、隐私计算、图计算、虚拟数字技术、自动机器学习和云上能力升级等十大技术趋势。

报告研究团队访谈了多位金融科技行业的技术专家、关注人工智能技术应用的科研学者，以及相关企业。

“大模型是数字经济时代智能信息处理的基础设施”,清华大学人工智能研究院常务副院长孙茂松认为，“如果将它的能力放在金融行业中去处理原有的任务，性能和效果将会有显著的提升。如果把各类金融大数据注进大模型去做经济形势的预测，与现有的主流经典分析方法论将会有质的区别，国际上如果因此出了一个诺贝尔经济学奖（将人工智能用于金融研究或预测），我一点都不感到惊奇，甚至是可期待的。”

香港理工大学计算机系教授、IEEE Fellow郭嵩认为，“对于金融行业来说，数据的使用和安全更加重要。「隐私、安全和公平性」是最需要关注的三个话题。隐私计算、联邦学习、数据的选择和算法改进，分别能够一定程度上解决上述三个问题。此外，从治理角度来看，区块链作为一种基础设施，也是数据治理的重要技术手段，目的是对数据和其他资源进行分布式的自治化治理。”

度小满CTO许冬亮表示，“当前，金融行业数字化、智能化转型正在加速，数据和人工智能技术是关键驱动要素，人工智能技术在金融行业的应用必将革新金融行业的现有服务模式。基于图计算、多模态等技术对于大数据的深入理解和洞察，降低了金融机构风险管理的成本，扩大了服务人群的边界；因果推断、AutoML（自动化机器学习）等技术让业务决策更智能，RPA、情感计算、数字人等技术让金融服务更有温度，提升了用户的服务体验”。他认为人工智能在金融行业的应用潜力目前可能只发挥了不到1%，随着技术商业应用成熟度的不断提升，人工智能技术将改变金融行业价值链的每一环节。”

技术趋势一：生成式人工智能 本报告认为生成式人工智能是新一代生产力工具。

在金融领域中，通过指令，生成不同风格的文字、语音、视频，以及生成一种类似于金融资产标的内容，是它最基本的应用。生成式人工智 能在金融业务落地层面有一定的辅助价值，从生成过程和结果角度来讲，带有创造性质。

技术趋势二：因果推断 近两年，关于因果发现，或称作因果表征学习（Causal Representation Learning）的研究和应用逐渐变得更加活跃。

本报告认为在金融行业中，因果模型是智能营销的关键手段，能促成最大化全局营销效率。但但金融数据是非常复杂的，一定需要对金融数据的性质有一个很深入的认识。再将目前的分析方法做一定的调试修改，才可以把系统把背后的因果性找出来。

技术趋势三：多模态情感计算 本报告认为在金融场景中，情感计算有助于了解客户的真实情感表达，可以收集客户情感信息、识别客户情感变化，并作出相应的决策指导，对于提升金融企业的服务质量和效率，起到了重要的辅助作用，长期应用在客户服务、催收等场景中。

技术趋势四：图计算 本报告认为，在金融行业的实战应用：图计算技术最清晰的应用效果是智能信审、资金流向查询和金融数据可视化。金融行业每天都有海量的、关联的、动态时序数据产生，利用图技术业务人员可以毫秒级得到查询结果。

利用图计算技术，可以在金融场景中实现实时地找到最完整的路径。

技术趋势五：自动机器学习 在金融领域，自动机器学习（AutoML） 技术，极大的简化了从数据到模型的过程，提高了模型产出的效率和质量，同时也降低了机器学习的门槛，让没有该领域专业知识的人员也可以使用机器学习来完成相关工作。

技术趋势六：科技伦理治理 近两年，中国对于AI伦理、安全、 法律法规方面高度重视，将科技伦理治理提到新高度。数据治理和AI伦理规范将被提到新高度，同时法规与行业呼吁金融机构要做科技伦理建设的第一责任人。

技术趋势七：链上分布式金融应用 分布式金融技术，以及基于区块链上的应用，核心价值在于这套应用的可编程性。

无论是资产、标的、价值传递、操作流程、后续服务，全部都尝试通过数字世界可编程的方式或者软件形式来实现，成本极低、通用性强。

完全基于链上编程的金融业务或许存在漏洞、或许遇到数字货币、金融危机等相关的挑战，但这并不影响中国金融机构，甚至非金融机构，在技术方向与业务应用价值上的探索。

技术趋势八：隐私保护计算 未来，隐私保护计算的技术演进方向为综合考虑安全性和效率，打造通用统一性——密码技术学者开发设计更加高效、实用和更“通用”的算法，工程师加速实现方案和协议在实现层面的优化和硬件加速。

技术趋势九：数字虚拟技术 虚拟数字人，无疑是当前虚拟数字技术最清晰的一个产品路径。在金融场景中，为迎合新时代年轻人的数字世界玩法、创造更有活力的品牌形象，诸多金融机构近一年纷纷推出数字品牌代言人，引领场景营销新方式。

利用物联网、移动通信技术突破物理网点限制，建立人与人、人与物、物与物之间智慧互联的服务渠道，打造“无边界”的全渠道金融服务能力。

技术趋势十：云上能力升级 金融机构在过去几年已经充分体会到了云计算带来的业务增益效果，云计算切实解决了算力需求、真正帮金融机构将算力成本降下来。

未来几年，云计算能力在金融机构内部的底层基础设施地位不动摇，也是其数字化转型的基础保障能力之一。

作者：奇偶派

来源公众号：奇偶派（ID：jioupai），讲述商业故事，厘清商业逻辑，探索商业模式

本文由人人都是产品经理合作媒体 @奇偶派 授权发布，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

马化腾沙场点将，明示微信视频号商业化必须提速。而抖音快手的先发优势，意味着视频号无法按部就班，亟需出奇制胜。2023年，谁来为视频号踩下这至关重要的一脚油门？在字母榜看来，答案已经浮现在张小龙眼前，既出乎意料又显而易见，就看视频号能不能抓住机会——刚刚走出纠纷

2023年，视频号如果想找到可长久发展的路径、并加快自身商业化的步伐，可以尝试寻求什么样的合作或运营路径、以增强运营能力？本篇文章里，作者便发表了他关于视频号2023年的发展猜想，不妨来看一下。

马化腾沙场点将，明示微信视频号商业化必须提速。而抖音快手的先发优势，意味着视频号无法按部就班，亟需出奇制胜。2023年，谁来为视频号踩下这至关重要的一脚油门？在字母榜看来，答案已经浮现在张小龙眼前，既出乎意料又显而易见，就看视频号能不能抓住机会——刚刚走出纠纷泥潭的李子柒。

去年12月底，腾讯CEO马化腾在一场内部会议上盛赞视频号，称其为微信事业群最亮眼业务，“基本上是全厂的希望”。他还表示，腾讯做了很多短视频与电商的结合尝试，视频号走出第一步、已经立住了；后面希望更贴近交易、把电商闭环做好。

这意味着，视频号需要在2023年背负更多KPI，而 加速变现 又是重中之重。

自2020年1月上线以来，视频号得到微信和整个腾讯的倾力支持，发展很快。腾讯财报显示，2022年第二季度，视频号月活跃创作者和日均视频上传量均同比增长100%，总视频播放量同比增长200%，视频号总用户时长超过朋友圈80%。

根据市场研究公司QuestMobile的监测，2022年6月视频号MAU（月活跃用户）达到8.13亿，超过抖音的6.8亿，成为第一大短视频平台。

另一方面，视频号半年前加速商业化，7月下旬首次接入信息流广告。在第三季度财报中，腾讯多次强调视频号对于广告收入的拉动，称其与现有广告形成互补，并带来增量收入。

电商方面，视频号2021年7月成立电商团队，当年直播带货GMV（商品交易总额）增长15倍；2022年7月，又上线视频号小店，朝着马化腾期待的电商闭环迈出一大步。

但局部的亮眼成绩，并不代表视频号已经取得全面成功。与最大对手抖音相比， 在用户黏性、内容厚度和商业化等维度上，视频号仍然存在不小差距。

用户方面，视频号MAU反超抖音，但 用户使用时长依然远远落后。 QuestMobile去年1月的一份报告显示，视频号单用户日均使用时长为35分钟，仅为抖音（118分钟）和快手（119分钟）的1/3。

再看内容，尽管视频号创作者增速很快，但过去三年并未跑出顶级红人，也没有产出令人印象深刻的作品。相比之下，抖音前有罗永浩，后有东方甄选，其间穿插张同学、刘畊宏等，他们创作的不少内容也实现了病毒式传播。

最后看商业化。视频号目前的变现方式主要是广告和直播带货。但考虑到用户体验，信息流及其他形态广告的密度不可能无限增加，收入规模天花板明显；另据Tech星球等媒体报道，视频号2022年直播带货GMV仅为400~500亿元，与抖音的万亿级相去甚远，平台能够从中抽取的收入并不多。

在这种情况下，如何满足马化腾的超高期待，是视频号不得不直面的挑战，亟需找到突破口。而 李子柒的归来，对视频号来说，不啻一个天赐良机。

李子柒12月底与微念和解，复出在即。对于视频号而言，如果能及时签下李子柒，收获的不仅是受到全球肯定的优质内容和亿级高忠诚度用户，更重要的是，视频号还能以此为契机，增强运营能力，并将其融入基因，为更高效的流量分发和变现奠定基础。

当然，李子柒的选项不止视频号。和竞争对手相比，视频号并不占优势，甚至可以说处于劣势：在内容和运营能力上弱于抖快，在变现效率上远不及淘宝直播，比竞争对手优胜的，只有虚位以待的王座，毕竟抖音群星灿烂，淘宝直播有李佳琦，快手有辛巴，李子柒若想当“一姐”，只有视频号可以满足；除此之外，就看马化腾的决心有多大了，毕竟腾讯不差钱，Pony谢绝买量，省下的钱正好可以用来买人。

另一方面，如何弥补失去的500多天、在新人辈出的短视频赛道重拾昔日荣光，是李子柒的首要挑战；而与视频号结盟，不仅能将眼下的流量最大化变现，识于微末、折节下嫁，或许能让合作之路更加长坡厚雪。

字母榜认为，视频号在2023年牵手李子柒，将是符合双方利益的最佳选择，恰如金风逢玉露，未必成真，但理应发生。

01 视频号被老板钦定为“全场的希望”，既是赞扬和肯定，也包含委婉的鞭策和催促。视频号在2023年需要拿出更具说服力的成绩，而且必须多赚钱；但自上线以来， 视频号一直在戴着镣铐跳舞， 而这一矛盾在创作者方面格外凸显。

为了构建生态、增加内容，视频号一直在大力招揽创作者，以弥补后发劣势。它推出“北极星计划”，对各领域优质创作者进行现金和流量补贴，并在2021年6月搭建互选平台，撮合创作者与品牌主之间的商单合作。

此外，视频号尝试从抖音、快手等平台挖角头部红人。去年7月的一份文件显示，视频号增设了A+级创作者的入驻补贴，抖快、微博粉丝超500万的创作者入驻后，可得到10000点流量券，据称可兑换至少30万播放量。

然而，这一系列举动的效果并不令人满意。迄今为止，视频号尚未找到自己的头牌，而创作社区的规模和活跃度也与抖快相去甚远。

视频号造不出、撬不动顶级红人，根本原因还是流量分发机制的天然短板。

按照张小龙的设想，视频号的流量将来自关注、好友推荐和机器推荐三个维度，三者比例应当达到1:2:10。表面上看，机器推荐——亦即平台掌控的算法分发——占据大头；但在作品刚刚发布的初始阶段，社交分发是主要因子。

然而，头部创作者往往倾向于钻研平台算法，从而“击败”算法、获得更多公域流量；他们并不习惯依靠账号私域社交关系对作品进行冷启动，自然对视频号兴趣寥寥。

视频号与东方甄选的董宇辉擦肩而过，或许和这一因素有关。 今年6月，东方甄选的直播视频切片在微信朋友圈疯传，董宇辉们一夜之间从乏人问津成为抖音门面。尽管坚称从不买量，但显而易见，倘若没有抖音暗中助力，东方甄选想要在罗永浩退网后闪电接班，难度要大得多。

由于腾讯是东方甄选背后公司新东方在线的大股东，再加上依靠微信出圈，很快有传言称董宇辉将“转会”视频号。但一段时间后，靴子并未落地。腾讯内部人士向自媒体“文娱价值官”回应称，视频号从未挖角董宇辉；但如果董宇辉选择视频号作为未来的发展平台，视频号自然热烈欢迎。

不过，对于顶流的全方位带动效应，视频号并不陌生。2021年底至今，视频号邀请西城男孩、五月天、崔健等歌手举行线上音乐会，成为为数不多的破圈事件。虽然演唱会带来的用户和声量很难长期留存，但也充分显示了重量级外援的功用。

如今， 在错过董宇辉后，视频号不应当继续错过李子柒。 如果将她招致麾下，视频号将迎来一位真正的顶级内容创作者，并给整个创作者社区树立新的标杆。

李子柒的最大优势在于，她属于广义上的农业农村领域创作者，用户接受门槛很低；但她的风格独树一帜，与抖音的张同学等截然不同，作品更契合城市人对于田园牧歌生活的想象，而非对于农村现实生活的白描。

在文化心理传播中，带有所谓“高级感”的内容能够自上而下触及更多人群，由中心城市向低线城市、城镇乡村扩散；相比之下，主打写实和猎奇的农村主题创作能够吸引许多受众，但并不容易溯流而上，引起北上广深白领共鸣。

牵手李子柒这样的创作者，视频号将有望第一次建立内容护城河。此外，李子柒的人气虽然有所下滑，但全网粉丝依然超过1亿。这些忠实拥趸倘若追随李子柒来到视频号，将给整个平台注入强劲活力。

02 视频号需要一个标杆级的人物撑场面；恰在此时，李子柒了结与微念的纷争，正式回归只是时间问题。面对新的形势，她也 需要改变“不结盟”的玩法，找到足够强大的靠山。

在停更之前，李子柒试图在各大互联网平台之间保持中立，避免与某一方绑定过深。在抖快、B站、微博、视频号等平台上，李子柒均设有账号；同时，李子柒并没有因为某一平台粉丝更多而重点经营，而是大体上坚持同一条视频全平台通发。

以抖音为例，李子柒在这里的粉丝接近5500万，为第一大拥趸聚集地。但无论是抖音还是李子柒自己，都从来没有公开打出“抖音一姐”的旗号，双方并不算亲密。即便是李子柒时隔近两年后回归，抖音似乎也并没有特别关照。抖音最近的红人当属张兰、向太，而东方甄选的热度也依然居高不下，李子柒并不是全平台瞩目的焦点。

这种不偏不倚的发展策略，让李子柒至少在表面上并未得到平台额外扶持。但这也让她获得了更大的自由度，能够更好地把控内容品质和商业化节奏。

这种谨慎不难理解：经历了与微念的漫长纠葛后，李子柒势必对于个人IP权益格外警惕；面对处于强势地位的平台，保持若即若离的合作似乎是最佳选择。

不过， 在长达531天的隐退后，李子柒所处的短视频江湖早已风云巨变。

在2021年之前，农村生活主题的短视频创作并非主流，大多数此类作品带有猎奇甚至审丑趣味。但随着李子柒影响力的不断扩大，这条赛道的参与者快速增多。追随者们先是试图“复刻”李子柒，一时间各种“XX李子柒”粉墨登场；跟风浪潮退去后，一些优质创作者逐渐形成自己的风格，拥有了一些忠实粉丝。

到了2021年7月，李子柒官宣停更，与微念的矛盾逐渐公开化。在双方舆论交锋、法庭相见的同时，抖快等平台出于多种考虑，纷纷加码涉农内容，让赛道内的创作者迎来了一波宝贵的发展红利。

以抖音为例，三农赛道的佼佼者包括张同学、蜀中桃子姐、康仔农人、潘姥姥等，粉丝量高达2000~3000万，其中不少创作者正是在李子柒停更后开始起飞。此外，冠以“新农人”头衔的中腰部创作者数量也不少，各自拥有三五十万粉丝。

与此同时，李子柒的粉丝迟迟看不到新内容，开始自然蒸发。李子柒停更的一年多里，抖音粉丝从5500万跌至5100万，快手、B站和微博分别掉粉100多万，损失惨重。

除了粉丝流失外，李子柒面临的更大问题是， 短视频的商业化潜力正在被直播带货侵蚀。

抖快等平台的直播脱胎于短视频，但变现能力远胜于后者。东方甄选凭借短视频切片赢得全网关注，但赚钱还是要靠董宇辉们的知识带货；张同学的土味作品号称直击现代人的心灵，但最终还是走进了直播间。

相比之下，李子柒倘若只做短视频，变现难免乏力。根据海豚智库的数据，李子柒品牌2020年销售额约为16亿元；而有媒体爆料，淘宝直播“一哥”李佳琦今年双11预售首日的GMV高达215亿元，相当于李子柒全年的13倍。美腕后来否认了这一数据。

这也意味着，如果李子柒想要实现利益最大化，走进直播间势在必行， 且需要一个愿意力挺她的大平台。 放眼望去，抖快、淘宝直播都有自己的头牌，李子柒就算加盟也只是锦上添花；反而是视频号，李子柒入驻即王者，对于平台相当于雪中送炭，双方皆大欢喜。

03 视频号牵手李子柒，除了业务层面的帮助外，更深层的影响是 在社交基因之外，增强内容厚度，加速 从非中心化、弱运营到中心化、强运营的基因调整。

视频号在微信生态内孵化，两者产品形态不同，但底色都是社交。在诞生之初，视频号设计了一套“中心化+去中心化”的混合流量分发模型，试图在公域和私域之间保持平衡并搭建桥梁。这套方案希望加大算法推荐和公域流量池的权重，但实际仍将熟人社交关系网络作为起点和底座。

自媒体“节点财经”援引渠道调研信息称，今年第四季度，视频号来自“关注”的流量占比7%，“好友点赞”占比53%，而“机器推荐”只占40%。这与理想中的1:2:10相去甚远。

过高的社交流量占比是一把双刃剑。 它有助于草根创作者获得更多曝光机会，但也意味着用户在观看好友推荐的内容后，并不习惯看更多系统推荐的内容。反映到运营指标上，视频号拥有比抖音更多的活跃用户，用户时长却差了一大截，进而导致直播带货等高注意力消耗场景缺乏流量、GMV上不去。

这也从反面佐证，中心化、强运营是目前效率最高的短视频平台经营范式。它不利于新人冷启动，却可以把流量用到刀刃上，加速优质内容的引爆和创作者的脱颖而出，并让他们获得丰厚回报。

但想要将这一方法论落地， 视频号首先需要一个繁荣的内容生态作为根基。 否则，平台纵使手握流量和资源，也难以找到足够多的承接场景。而做内容的捷径之一，就是引入重量级创作者。

在内容产出能力和IP号召力上，李子柒的价值毋庸置疑。此外，视频号倘若请到了李子柒，相当于树立起了一面“加码内容”的大旗，更多顶尖创作者就有望纷纷来投，推动平台内容生态迈上新的台阶。

但请动李子柒只是第一步。双方牵手之后如何开花结果，同样颇费思量。

李子柒此前没有带过货，而她的视频以画面美感取胜，并不以语言见长。再加上略显清冷的出世调性，李子柒能否驾驭直播带货的表演风格是个未知数。更何况，看惯了李子柒的老粉丝，也未必能够接受她在直播间里吆喝叫卖。

另一方面，视频号引入李子柒不难，难的是改变自己。它需要向抖音学习如何更高效地掌控阀门、分发流量，也需要向淘宝直播学习如何将内容与交易密切衔接。对于视频号乃至整个腾讯而言，这些都属于此前涉足不多的新领域，需要较长时间的摸索和试错，才能让 内容与社交融合，增强运营能力， 并最终探索出新的增长范式。这或许是李子柒能够给视频号和腾讯带来的长期价值。

参考资料：

每日经济新闻，《腾讯“全场的希望”视频号 何时担起赚钱重任？》 Tech星球，《视频号商业化提速，明年1月1日起向商家收1%-5%技术服务费》 澎湃新闻，《李子柒近期有望复出？短期内可能不考虑，MCN看好重返顶流》 北京商报，《奖励1万点流量券、挖抖音等达人 微信视频号急变现》 节点财经，《对于视频号，腾讯可能多想了》 作者：彦飞；编辑：马钺

来源公众号：字母榜（ID：wujicaijing），让未来不止于大。

本文由人人都是产品经理合作媒体@字母榜 授权发布，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

年末大家都会做同样的事，追忆过去一年的成就和遗憾，展望美好未来，以及感谢那些在成长道路上给予帮助的人。 作为一个内容平台，人人都是产品经理陪伴大家又走过了一年。这一年，有超过15000+名作者在平台分享他们的知识与见解，这些文章被传播到今日头条、虎嗅、36氪等

年末大家都会做同样的事，追忆过去一年的成就和遗憾，展望美好未来，以及感谢那些在成长道路上给予帮助的人。

作为一个内容平台，人人都是产品经理陪伴大家又走过了一年。这一年，有超过15000+名作者在平台分享他们的知识与见解，这些文章被传播到今日头条、虎嗅、36氪等第三方平台，全网传播量过亿。

他们从产品、设计、运营、行业等多个角度为我们分享真知灼见；从理论到案例，为我们梳理职场的进阶之术。

这些作者成为引路人，通过这些系统全面、深度专业、观点独特的文章指引互联网人不断前行，以沧海一粟，组成了行业连绵不断的薪火。

为了感谢每一位内容创作者的辛苦付出，人人都是产品经理举办了2022年度作者评选，向这些优秀的引路人致敬！

历时10天，跨越产品/运营/交互体验/品牌营销/行业观察五大领域，80位参选作者的评选结果火热出炉啦！

在公布结果之前，先让我们回顾一下评选中的精彩瞬间吧~

评选概况 为了获得读者的更多助力，作者们使出了浑身解数。

有的作者在朋友圈积极拉票，用各种福利换取大家的投票：

有的作者在自己的公众号上发布推文，让粉丝朋友为自己打call：

即使是在紧张的评选期间，依旧有作者笔耕不辍，在平台产出文章号召读者投票：

回顾完本次评选的精彩瞬间，到了激动人心的公布环节了！

评选结果 1. 年度作者榜单 本次评选，由读者投票、专家评分、官方团队评分三部分组成。

官方在投票结束后对整体数据进行核查，清除异常和无效投票，保证评选活动的公平公正。

专家评审团队由产品、运营、设计、自媒体等领域的专业人士组成，对每一位参选作者的作品进行专业评分。

官方评分由人人都是产品经理媒体团队，根据内容深度和广度、主题立意、写作手法等多个维度对文章进行评分。

通过官方核算所有参选作家的综合得分，本次评选结果新鲜出炉了：

点击链接，即可查看全部名单与获奖详情： https://996.pm/Yoaww

再次恭喜所有获奖作者，希望新的一年里能够继续创作好作品，和大家一起成长！

注：参选作者奖品将于活动结束后15个工作日内统一发放，详情留意短信通知。

2. 年度影响力品牌 不管是对于品牌，还是个人而言，我们都能真切地感受到2022年商业环境中不确定性带来的市场变量之大；互联网产品、运营人的边界不断拓展，行业人群的价值评估体系也在不断地调整。

人人都是产品经理一直在寻找与我们理念一致的合作品牌，通过优质的内容，传递有价值的信息来助力产品经理、运营人职业发展，推动企业重视从业者的专业价值，最终成就公司业务破局，商业成功。

通过一年的合作，我们评选出了六大在传递内容商业力量上做出努力的品牌，他们都是行业赋能的参与者、见证者、共创者。

在此，我们诚挚地感谢这些获奖者，期待有更多愿意以优质内容，赋能行业发展，带来更多优质内容的品牌加入进来，一起让产品经理、运营人的价值被看见。

现在，就来为大家揭晓本次评选的年度影响力品牌榜单！

3. 年度出版社 为助力作者将知识价值最大化，影响到更多期待成长的小伙伴，人人都是产品经理与电子工业出版社深度合作，从内容输出—内容出版—内容发行—到推广，帮助每一位原创作者打造个人IP，提升影响力，共同推动行业优质内容及变革的健康生态。

2022年度优秀出版社，电子工业出版社实至名归！

抽奖结果 除了笔耕不辍的作者们，我们也要感谢积极参与、为作者打call的你，特意准备了惊喜好礼：

包括人人都是产品经理珍藏版周边、起点课堂课程代金券、起点课堂VIP会员、精品专题课程等奖品在内的百万好礼。

虚拟奖品获奖 部分名单 如下：

Jessica小意、珍珍小姐、小蝎zhi、Cora、产品经理P仔、放肆的笑、西蒙书策、好好学习吧、冰莹、不语

实体奖品获奖 部分名单 如下：

阿童、小肉丸子、彭大仙、莫歌拿、Shell.Xie、冰雨幻天、野望、叮叮当、xml、可乐三块冰

所有中奖用户均会收到短信通知，请按照短信指引进行兑换。或可通过微信访问年度作者评选页面，在抽奖处点击【我的奖品】可以查看获奖信息。

若对奖品部分有疑问，请联系工作人员微信：

PS：由于疫情管控，部分地区的快递可能会出现延迟状况，敬请谅解。

结语 2022年已经结束，我们感谢这一年里作者们不满足于表象、不随波逐流、不断思考和输出，为我们带来一篇篇精彩的文章。

这些优秀作品，引领更多人前行，实现成长升值。

2023年，我们将和你们继续在互联网世界乘风破浪。

如何成为作者？ 在 人人都是产品经理社区 注册账号，点击官网首页右上角【投稿】按钮即可投递作品，作品成功发布后即成为社区作者。

关于投稿要求及常见问题，可参考「 人人都是产品经理网站投稿指南 」。

如何成为专栏作家？ 人人都是产品经理专栏作家拥有独立的作者介绍页面并拥有专属认证，同时优秀的作品还会推荐到36氪、电子期刊等渠道独家宣传。

每月编辑都会根据文章数据，主动邀请一批作者成为专栏作家。当作者满足以下条件时，就可以加入专栏作家团队啦：

以个人作者身份，在人人都是产品经理平台发布原创文章10篇及以上；若文章为翻译稿件，则需要15篇以上。 发布的第一篇文章和最近一篇文章间隔时间30天以上。 所有文章数据，平均阅读在5K以上，平均收藏量30以上。 个人页面订阅量（粉丝数）超过500人次。 作品有在官方微信公众号、知识图谱、电子期刊、首页推荐等渠道/方式获得3次推荐及以上。 如有疑问，请参阅 【2023作者成长计划】 ，或联系平台主编（微信：419297645）

如何加入原创激励计划 人人都是产品经理原创激励计划，是人人都是产品经理推出的，旨在扶持平台优秀作者的一项计划。

创作者发挥才华和能力，产出高质量原创文章。我们来为你做好内容把关，并负责让更多读者阅读到你的优质稿件。还能根据文章质量获得对应稿费，不再“为爱发电”。

点击链接，了解详情： 【原创激励计划】。

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

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

更多极氪文章：

未来趋势！如何用数字孪生打造汽车工厂大屏？ 今年上半年我国新能源汽车销量达到乘用车总销量 25 %，同比增长 1.2 倍。

阅读文章 >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

更多极氪文章：

未来趋势！如何用数字孪生打造汽车工厂大屏？ 今年上半年我国新能源汽车销量达到乘用车总销量 25 %，同比增长 1.2 倍。

阅读文章 >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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