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


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

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

- Posted in: Blog

- Tags:

0 条评论 ,533 次阅读

  1. 既然来了,说点什么?

发表评论

Top