
一直以来,GMV是每年电商大促最牵动人心的数字。其实在这背后,同时有大量的消费者在发起咨询、纠纷和投诉。今天,Alibaba Design 将从可视化视角的五个维度:项目分析、大屏环境考察、设计流程、验收注意事项和标准化,同大家分享一些基础体验心得,谈一谈如何做数据大屏的可视化设计。
动手做可视化之前,需要对项目有一个基础的了解。建议包括:业务背景、目的、产品、投放位置、适配、用户、行为路径、画像、数据来源、结构、数据极值、产出时效、质量等,再结合业务诉求和产品目标制定设计目标。

对大屏所处环境的调研,对整个设计流程至关重要。建议关注:设备、大屏位置、用户角色及座位分布。


通过调研了解,还原场地人员分布情况,确定核心用户。老板主要关注核心指标、用户声音;数仓、开发、技术、PM、产品同学关注大屏稳定性和显示情况,业务主要关注大屏数据的准确性。




当可视化工作量庞大时,建议从项目优先级进行,从最重要、最不重要、不确定性排序。



A. 基础图表
确定内容:明确要用图表传达的核心信息。例:体现2020、2019基于时间趋势的求助量对比。
判断关系:判断数据之间比较类型。例:折线图。
选择类型:选择对应含义的图表。例:折线图。
确定诉求:体现信息在多个图表里交互联动关系。例:体现多个问题在2020、2021的客诉量走势对比及相对应的用户声音。
选择类型:选择对应含义的图表。
制定方案:结合业务诉求、同技术制定交互方案。


例:突显从“量的发起”到“智能承载”到“人工接起”的数据流向。

美国学者诺阿·伊林斯基在《数据可视化之美》中,总结可视化审美的标准有四大要素 - 新颖、充实、高效和美观。可视化大屏如何通过颜色,既要美观又要突出重点。总结有以下几点:
配色易辨识与区分:采用色调、明度差异较大的颜色进行搭配组合。
冷暖色、互补色对比:在数据图表里,多采用冷暖色、互补色能产生强烈对比,突出重点信息。
案例:



视觉呈现(由于敏感性,数据已隐藏):







当大屏为单电脑分辨率时,设计稿可保持一致。例:1920*1080、1920*1200。
当大屏为超大分辨率时,使用等比例缩小分辨率。但需要现场测试大屏展示为正常。例:13440*3240,作图尺寸为4480*1080。
使用AE等软件制作动画,输出png序列帧。
导入“png序列帧”到iSparta(apng图片转换器)中,设置路径并输出。



通用的设计大屏的流程,建议可将方法文档沉淀(例:语雀),或同产品、PM同步设计流程。

在不同业务有相同诉求时,可将通用样式组件化。设计可提炼的有:字符数、轮播秒数、Tab样式、氛围图、动效等,最终横向复用多个业务。
赋能案例:

准确:这个产品很准确表达数据的特征信息,提供的数据准确对我有用。
清晰:这个产品能一目了然的表达故事,能一目了然的了解每块内容表达的含义。
有效:这个产品传递对我有用的信息并满足我的业务诉求。
美:这个产品设计风格美观。

以上总结的基本知识和事项,能帮助我们快速进入大屏设计及避免一些坑。但是可视化体验远远不止这些。欢迎大家提出更多意见和建议,我们一起前行。
全部评论()