写在开头
本文并非系统化的方法论总结，也没有严谨的推导过程。更多是记录我在 Tomoro 项目中的设计思考与实践，分享一些有趣的过程和意料之外的成果。希望某个想法创意、视觉表现、细节处理、能对你有启发或帮助。
1. Tomoro 是一款什么产品？
在深入设计细节之前，我先简单介绍下这款产品。如果用一句话定义，Tomoro 是由 腾讯灯塔 团队推出的，面向下沉市场的 AI 超级表格。目标是做 AI Native 的下一代通用分析生产力工具。它比传统 BI 工具更易用 (表格式交互)，比传统 Excel 工具更强大 (亿级数据云端处理)，也有更易用的 AI 加持。
上述仅仅是设计师对产品的部分理解，一个复杂产品的背后也不止一面。我们也为 Tomoro 设计了一个特别的官网，欢迎大家前往 beacon.qq.com/tomoro/ 了解更多。
2. 产品设计风格的确立
在产品风格定调上，我们从三方面入手。一是延续灯塔产品家族 DataInsight、DataTalk、大数据套件的设计理念和思路；二是基于近两年在新产品 DataLink、Fabric 的创新探索经验；三是融入近几年主流的设计风格。通过上述手段，来探索并定义下一代灯塔产品独特的视觉表现风格。
DataInsight 是腾讯灯塔团队研发的用户行为分析工具，DataTalk 是腾讯灯塔团队研发的数据可视化 BI 工具，DataLink 是腾讯灯塔团队研发的精细化闭环营销工具，Fabric 是腾讯灯塔团队研发的全自然语言数据分析笔记本。更多产品详情可前往 beacon.qq.com 了解更多。
设计风格的定义是由无数细节的精巧堆叠。受限篇幅没法一一展开，在此精选两处比较有趣的部分分享。
2.1 主色调选择及使用
在设计之初，我们致力于让 Tomoro 在视觉层面和其他表格/ 分析产品形成区分。除了丰富的色彩层次、更圆润的容器圆角、纤细圆润的 icon 等“基本操作”外。我们尝试将灯塔的品牌蓝色融入到产品的全流程中。
为避免高饱和度色彩带来的视觉疲劳，我们通过降低灯塔品牌蓝的饱和度，在确保可读性的同时加入由 Lumos AI 紫色和灯塔品牌色蓝色构成的动态弥散色彩，来为界面增添层次感。通过灵活的流动效果，在界面元素间形成独特的韵律与呼吸感，从而强化品牌的风格化、差异性与识别性。
2.2 布局及结构
相较于灯塔之前产品的平铺结构，Tomoro 增加了纵向堆叠的结构设计。在 X、Y 轴上，我们精简了原有的界面元素，将部分功能区分配至 Z 轴。从底层的数据源，到中层的数据生产，再到上层的数据消费，让各功能模块获得清晰的空间区隔。
当用户与界面互动时，Z 轴各层级容器的弥散和模糊效果相互叠加，不同层级的色彩将会互相映射，动态响应。在保证信息清晰呈现的基础上，强化了操作感知，让不同板块之间产生连接，形成有机统一。
3. 主要模块建设
在确立产品的基础框架后，我们围绕产品几大核心板块进行“大基建”。在此部分，设计选择三个比较喜爱 & 与众不同的功能来分享。
3.1 列特征
在 Tomoro 的数据表中，每一列都有个特殊表头，用来展示基础统计值（平均数、中位数、众数等）。在设计上我们尝试将数据可视化，以近似 WatchOS 中 Complications 呈现，让用户轻扫一眼，就能直观呈现数据分布特征，还能快速感知列数据规律。
3.2 一键生成报告
Tomoro 的报告模块支持将数据表生成的动态可视化图表插入，配合块结构 (Block) 的灵活排版，可以快速制作个人周报、数据小结、产品月报等专业分析报告。
通过 Lumos AI，可以自动分析数据表，生成图表并提炼结论，一键自动生成报告。我们基于后端处理步骤和平均耗时“预制”了一个动画，让用户感觉快速且自然，如同魔法一般。
3.3 支持多轴图表的仪表盘
完成数据处理后，Tomoro 支持在栅格画布自由拖拽、快速布局各类图表，构建仪表盘。相较表格类产品，Tomoro 支持多轴复合图表。在可视化展示上，我们结合 DataTalk 产品的历史用户反馈、可视化经验、Tech 图表库，优化了大数据量场景下的展示效果，确保即使在数据极限情况下也能清晰呈现。
在 Tomoro 生产的报告，也支持移动端预览，数据洞察随时可得。
4. Lumos AI 模块
Lumos AI 是 Tomoro 中的智能分析助手，名字来源于《哈利波特》中的照明咒语，寓意帮助用户看清数据的关键。
J.K.罗琳在《哈利·波特》系列中将“Lumos”设计为照明咒语，巫师通过念咒点亮魔杖尖端，用于黑暗环境照明，与熄灭咒“Nox”（拉丁语“nox”意为“夜晚”）形成对照，体现光明与黑暗的对立。 ——Google 搜索
在产品迭代过程中，我们探索了多种 Lumos AI 交互形态。最后我们从科幻电影和魔法题材作品中获得启发，将 AI 与大家普世接受的魔法咒语产生关联。当用户开启 Lumos AI 时，伴随蓝紫色弥散光效，分析指南会从页面下方展开，这个形态借鉴了《哈利波特》中活点地图的展现方式。魔杖轻挥，地图映射下的真实世界中人物动向依次呈现，Lumos AI 将数据表背后亿级数据精炼成一段通俗的结论、一些分析建议问题、几张可视化图表、报告等，为用户指明数据分析的路径和可能性。
5. 让产品呼吸的亿点小动效
在过往的灯塔产品中，我们更注重静态 UI 和交互的精细打磨。而 Tomoro 作为新一代产品，尝试通过微动效来实践“B 端 C 化”的理念，在保持专业性的同时，让产品体验更上一层楼。
这些动效加强了产品复杂版块间的联系（指引更明确，过渡更流畅），我们也在特定交互加入了恰到好处的动画，既降低了用户的理解成本，又为严肃的数据分析过程增添了一丝灵动的趣味，让工具不再冰冷，充满惊喜。
5. UI 设计 + Coding 的更多可能
前文分享了设计前期的思考，在设计落地过程中则充满着变数与惊喜。在各功能版块实现落地的过程中，发现许多有趣的细节，可能在开发眼中只是简单的代码组合，却为设计落地提供了更多可能。
5.1 APNG 格式图片妙用及优化建议
5.2 通过现成的案例与教程，为沟通提效
在实际开发过程中，高保真动画 Demo 是确认效果的最佳方式。受限于排期，并非所有需求都能提供动效演示。这时我们会尝试用动画组件库、代码教程、Dribbble 飞机稿等形式，帮助开发快速对齐设计意图。
也能有效避免开发因排期、优先级等原因说不方便、不容易、不会实现等各种问题。🐶
5.3 一些有趣的代码
在设计落地过程中，我们也尝试加入一些非常规的 css 样式。一些看似简单的代码片段，能为产品带来意想不到的视觉提升。
前文分享了设计前期的思考，在设计落地过程中则充满着变数与惊喜。在各功能版块实现落地的过程中，发现许多有趣的细节，可能在开发眼中只是简单的代码组合，却为设计落地提供了更多可能。
最后
以上就是过去一年半，我在 Tomoro 产品设计的思考与实践。 作为单兵作战的设计师，设计过程和细节肯定不如大团队来的系统专业。过程更多是结合能看到听到想到的、历史摸爬滚打的经验与用户反馈逐步拼凑起来的。若有不足之处，还请各位大佬多指教。
若想进一步了解 Tomoro 产品的完整功能及最新动态，可在 微信公众号、视频号、小红书搜索 Tomoro 获取更多。同时也欢迎访问 Tomoro 的产品官网：beacon.woa.com/tomoro 。 🆃