My Secret Rainbow

教你把设计稿做成大片特效

随着数据智能时代到来，数据可视化的价值不言而喻，可视化大屏作为其典型的载体也越来越常见。拥有亿级用户量的淘宝，面对如此庞大的数据， 该如何有效利用并展现呢？让我们一起看看淘宝设计师如何玩转数据可视化大屏。

01

智能UI&数据可视化

2020年双十一期间，智能UI赋能线上近百个大促会场，为用户提供个性化的定制购物浏览体验，带来千万级的点击提升，会场组合方案达到千万种，服务了亿级的用户。这是继商品个性化推荐之后，通过界面方案的个性表达，为用户带来的再一次体验升级。

由于智能UI的设计模式已经不同于通常意义的界面设计，业务数据不仅用来反馈结果的，数据分析结论还可以在应用中为设计师提供客观的设计参考，为算法工程师训练集提供更多样本，可以说数据本身是驱动智能UI本身的重要资源。让这些数据的价值最大化，正是数据可视化的拿手好戏。

▲ 电影「The Fate of the Furious」大屏指挥室

数据可视化大屏已经慢慢成为了数字化项目的标配，越来越多的设计师开始关注大屏设计这个新兴领域。

对于设计有明确具象实体的大屏项目，一般的做法是借助具象事物本身去着手设计，思考如何把数据结合到具象事物当中。

但是当设计师面对没有具体实物的界面设计数据，面对抽象算法主题，该如何进行设计呢？

02

大促场景下的智能UI可视化探索

A.设计策略 

和常见的数据后台产品不同，大屏会受到时间空间的限制，往往需要在短时间内容高效传递信息，有策略有目标的筛选内容非常重要。

本次方案明确了以体现业务特色、高度聚合信息、贴合大促心智为设计目标，展示的指标框架需要围绕三个目标展开，删除大量低相关性的内容。

方案采用(电影)故事化框架，将电影四大构成要素运用在大屏设计当中。将角色比做数据，而各色各样的图表类型就好比不同的情节。电影中脚本串联情节安排在不同时间线出现，就如同不同的信息图表出现在大屏的不同的版面空间，不同的安排，会产生不同的结果。

B.微观到宏观-阐述因果

大屏从微观和宏观两个观察角度拆成两个屏，宏观角度透出价值主体，实时展示上百个大促会场的调控效能数据，微观主要透出关系规律，展示业务的底层原理结构，探索人群和设计元素之间的关系规律。

C.核心视觉剖析

方案主视觉由两部分结构组成，以因果关系串联两个结构，山脉星环注重商业价值数据的传递，而另一结构引擎核心表达底层人群设计要素之间的匹配原理，最终表达通过千人千面带来了更多点击转化，从而带来更多商业价值。

两部分结构的设计灵感都来源于业务或者数据的特性，并且画面中视觉元素样式本身也是由数据驱动的，可以说主视觉本身也是数据传递核心组成部分。

宏观屏 – 应用数据监控

宏观屏使用的主视觉为“群山星云图”，由山脉和星云构成，主要展示业务态势数据以及商业价值结果，用户可以在宏观的视角下去观察所有应用会场的数据变化情况。

「群山星云图-群山」随着时间，起伏变化的山峦，表达的是不同行业会场的应用态势数据。对于了解三维知识的同学来说，无论多复杂的模型，构成他的基础都是点线面，多个点可以形成线，多条线最终形成面。

这里三维山峦也是如此，某一个会场在某一个时间点的业务数据构成了山体中的一个点，点的高度（Z轴方向）编码为数据大小，而一段时间内的业务数据就可以在让点形成线，最后聚合几百个行业会场形成面，也就是我们最后看到层层叠叠的山体了。

「群山星云图-星云」山外环绕的粒子小球，表达的是不同行业会场的应用结果，通过粒子的大小来编码不同会场的提升效果，可以发现不同会场对于智能UI的敏感度。

这里使用颜色通道来进行榜单展示及预警，高亮蓝色表示提升效能最好的几个会场，而红色表示低效甚至负影响的会场，帮助业务人员及时发现问题，对有问题的方案进行排查调整

微观屏 – 底层算法规律

微观屏部分表达是业务的能力底层——人群和海量界面的智能化匹配能力。利用具象化的人、界面视觉元素以及中心不断旋转拧动的魔方动画，来体现出平台对人群和设计元素的实时匹配能力，并且人群和设计数据的关联分析图表也嵌入到主视觉当中，进一步说明主题。

「算法引擎-魔方核心」其中魔方也做了针对性修改，魔方视觉本意是突出算法在针对不同人进行界面匹配生成的过程，千人千面界面生成的基础是多样化的设计要素，魔方雷同的小方块结构并不能表达清楚多样化设计要素这层意思，所以这次优化也做了修改，除了让组成魔方的小元素都变得不同之外，动画上也突出了打散重构的动作，让整体效果有了进一步提升同时也更加符合业务的特性。

「串联线索-DNA链条」细心的同学也许会发现，宏观微观的两个结构，主视觉当中都有一个相同的视觉元素——DNA状链条。DNA链条由两条颜色不同的单链缠绕构成，两条单链分别表示人群特征和设计要素，它一 一对应的关系正好可以表达智能UI精准匹配两者的能力，寓意智能化匹配模型。

这里将DNA状链条作为串联线索，将两部分结构进行了巧妙串联，表达了从分桶训练模型、模型成熟、大范围应用到最终带来商业价值结果的完整过程。

原文：https://mp.weixin.qq.com/s/FEkggdWIExKkyskMa6lQxg