今日头条
世界杯频道
作为该项目的交互设计师，我在前期深入用户场景洞察，重点参与了数据可视化和情感化设计，并灵活调用了字节内部的开源工具，推动它们高质量上线。
从历史经验看，重大热点事件能显著带动头条DAU的增长，但由于选题多样，往往需要短时间内深入用户洞察需求，并精细呈现内容；2022 卡塔尔世界杯期间，字节跳动购买了赛事在中国的独家版权，头条迎来了拉活的重要契机，而这对于不看球的设计师却是不小的挑战；
图文内容的
可视化和情感化设计
对于一群不看球的设计师
一切从零开始
密集补课
和球迷脑爆共创
推演页面结构
熟悉比赛规则和足球文化
分析不同赛事阶段的用户诉求
产品运营设计共创
约占70%
泛球迷
约占30%
深度球迷
作为图文为主的平台
头条的优势在深度分析和数据展示
充分发挥图文体裁在内容深度、数据可视化上的优势
视频直播体裁
强烈的视听效果，具体而直观，适合沉浸体验和烘托氛围，但信息密度低，长时间观看易疲劳，适用于世界杯的赛事直播、高光集锦。
从内容体裁和用户需求入手
定义设计目标
清晰，
看得懂。
深度，
看得爽。
生动，
有气氛。
清晰，
看得懂。
在交互框架和版式上直观清晰，保证泛球迷快速易懂。
因时制宜
随赛事阶段动态调整的频道
重要内容触手可及
独立的世界杯频道为用户提供便捷入口，从预热期、小组赛、淘汰赛到决赛，频道内容与布局根据赛事阶段动态调整，保证贴合用户需求
开门见山
在最显眼的头部，放用户最关心的内容
随赛事阶段，动态响应用户的核心诉求，缩短信息筛选成本
赛前预测
赛中看球
观赛指南
直播入口+精彩集锦
比赛战报+比赛集锦
赛后回顾
简明入口
最浅显易懂的一句话解说
在观赛指南的海报入口，由运营精挑细选出最简明易懂的一句话解说，让泛球迷能够轻松掌握比赛重点。
以阅读专家赛前解说的路径为例
由浅入深
优先满足泛球迷需求
递进展示专业内容
针对泛球迷为主的用户群体，专业内容相对曲高和寡，因而优先展示浅显易懂的内容，专业赛事数据和分析则相对靠后，放在更深的页面层级。
点击海报
进入观赛指南详情页
核心观点摘录，快速纵览
摘录三位资深媒体人的核心观点，概述并配以简练的标题，帮助用户快速纵览赛事关键解读，为深入了解比赛提供清晰的框架。
展示所有媒体人的完整解说内容，用户通过深度阅读，获取更多的专业分析与见解，满足对深度球迷的阅读诉求
全部解说原文，深度阅读
点击查看全部
进入赛事热议详情页
循序渐进
提供不同梯度的看球方式
在赛后战报页面，考虑到大部分泛球迷不会完整观看整场比赛，除了提供直播回放，我们为用户打造了多种梯度的看球方式，顺应用户习惯
用最短的时间，让用户看懂一场比赛
一句话解说
最受球迷欢迎的回顾方式，快速呈现比赛高光片段
视频集锦
图文并茂的分析，深入解析双方战术
图文战报
清晰呈现比赛进程，理清赛事关键脉络
赛况时间轴
小组赛阶段，32支球队两两对决，共进行48场比赛。我们从纷繁复杂的赛事信息中挑选热门比赛，并着重展示比赛看点，缩短用户的筛选成本。
化繁为简
帮用户挑重点
用具体的人
牵引用户关注赛事
考虑到泛球迷对热门球星的关注，和球星相关的关键比赛节点，我们在头部强化展示，以此牵引用户关注
强化内容的优质属性，满足深度球迷。
深度，
看得爽。
解说员的创作是平台有差异性的内容资源。头条运营团队邀请了20位风格各异的专业解说员入驻，满足多样的用户诉求。我们通过品牌化的视觉设计，强化解说内容的专业性与权威性，提升用户的信任感
解说内容的专业呈现
强化权威感
打造权威解说团队认知
统一呈现形象与内容
统一半身像和背景处理，解决了原生样式强头像风格各异、认证信息不统一的问题，强化了品牌认知。
深度球迷对解说员有明显的风格偏好，大头像设计方便快速用户定位自己喜好的解说员。
相较于原来冗长的全文，优化后的版式提供了简练的标题，能快速纵览各解说员的核心观点
原生展示形式
品牌化呈现
锋芒尽显
潜移默化打造专业认知
详细介绍评论团阵容的独立页面
每个观点均标记对应解说员
分享的海报突出专家阵容
观赛指南页头部外显专家阵容
对称版式的妙用
既强化了对抗氛围，又保证了信息的全面客观
镜像的半身侧脸照
模拟面对面对谈场景，强化对抗感
面向观众的解说员
观感上平铺直叙向用户陈述内容
侧身面向对方的解说员
红蓝背景色块相向形成对抗感
处处可见的对称版式
确保信息中立客观
作为中立的信息平台，今日头条只聚合信息而不提供立场，对称的版式设计保证了不同阵营的内容都能获得同等权重的展示，确保了信息的中立的客观。
可视化的数据呈现
简化和精炼的数据呈现，帮助深度球迷深入分析
提炼核心信息
使用更直观的图形语言
再现球场空间
常规处理
对阵双方数据对比
球队射门坐标
球队阵型位置
球员跑动热区
球队历史战绩对比
通过进度条呈现抽象数据，提升可读性，帮助用户轻松对比。
和球场空间相关的信息，结合球场图形直观展示，提供更清晰的战术解读。
帮助用户快速筛选密集信息，关键信息一目了然
可视化处理
弥补图文体裁在情绪渲染上的不足，烘托比赛氛围。
生动，
有气氛。
球迷集体记忆的延续
还原纸媒杂志的观看体验
通过用研发现, 纸质杂志陪伴了一代球迷的成长，大块的版面，富有冲击力的平面设计既是他们的集体记忆，也承载了他们的怀旧情结，我们试图以此为灵感定义视觉风格
从拟物到扁平的探索
更贴合头条风格的视觉语言
我们根据球队的球衣颜色划分了用色标准，保证每场战报
交互探索方案
部分拟物细节点缀
最终视觉方案
拟物化能最大化还原纸质杂志的观看体验，但同时也和头条整体的扁平视觉风格冲突，同时过多的质感和投影细节会喧宾夺主，影响信息直观呈现，最终我们敲定了扁平的视觉风格，通过图形和颜色来构建冲击感，在不影响核心内容呈现的前提下，保留了部分拟物细节作为点缀
张弛有度的视觉设计
在用户场景中平衡秩序与冲击
检索和查阅场景，采用秩序化的布局，突出有效信息，帮助用户快速定位所需内容，减少视觉负担，让阅读更加高效轻松。
页面头部等定调场景，通过色彩与图片的强烈对比，打造视觉冲击，渲染比赛氛围，激发用户的情感共鸣与参与感。
冲击感
冲击感
冲击感
秩序感
秩序感
秩序感
在世界杯摄影中，引入眼帘的常常是球队颜色各异的队服，为了增加赛场氛围，我们从球衣颜色中获取灵感，分类各个球队的球衣色系，并提取了五种典型的色彩作为点缀，赋予画面更多活力。
赛场上的一抹亮色
源于球衣的色彩灵感
形色各异的战报
色彩碰撞渲染激烈氛围
在战报的封面，我们用明亮的渐变色铺盖在大幅的世界杯现场摄影图，力图将激烈的赛况氛围第一时间传递给用户，丰富的点缀色为每场比赛注入独特风格，既区分赛事，又为用户带来视觉上的新鲜感。
在实现该页面的头部海报效果时，将定制的字体包写入客户端会导致体积过大，而让运营在作图软件手动修改并导出，则流程冗长，容易出错，最终我们调用了内部的智能海报生成工具，运营只需上传标题和封面图，即可快速生成写入客户端的高质量海报，节约人力并确保内容及时触达用户
将内部海报生成工具写入运营后台
兼顾运营人效，保证设计效果
原流程
将封面图导入到 Photoshop
根据球队选择对应颜色模版
输入标题
从 Photoshop 导出海报
将海报上传到运营后台，完成
将海报工具写入运营后台后
上传封面图到运营后台
输入标题
自动匹配颜色并生成海报，完成
幕后故事
首页Doodle-决赛
频道头部：开赛
频道头部：明星球员出场
频道头部：夺冠
首页Doodle-开赛
频道入口
频道头部：强强对决
频道头部：重要比赛
通过动效语言，弥补图文体裁在情绪渲染上的短板，每逢重要比赛节点，从各处入口刺激用户关注赛事
全端各处的动态语言
营造赛事气氛
四套基础头部动效模版
覆盖完整赛事阶段，密集渲染用户情绪
我们根据赛事节点提前预判用户情绪，并设计了涵盖大多数比赛场景的动效模板，通过简单替换图片素材即可适配不同赛事。极大减少了设计和开发的人力，还确保动效内容紧贴赛事节奏，及时带动用户情绪。
11.20
11.22
11.23
11.27
12.15
12.17
12.18
12.19
12.14
12.10
12.09
12.01
11.28
顺应场景的投票设计
合规形式延续竞猜乐趣
赛前选择支持的球队
赛后给最佳球员投票
考虑到泛球迷对竞猜的热衷，我们在赛前赛后的设计了投票互动，通过合规方式代替传统竞猜，延续竞猜乐趣，这不但贴紧了比赛进程，还提升了用户的参与感。
定制化的表情贴图
激发互动，丰富内容
结合足球社群评论和内部球迷的投票，我们定制了一系列的表情包，从泛用的庆祝表情到深度球迷的专属梗，力图增添评论趣味性，丰富讨论氛围
Ⓒ Qichenghsu 2024 All Right Reserved
围绕“清晰、深度、生动”的设计目标，通过和产品、运营和研发的紧密合作，世界杯频道以高质量上线。在留存、拉新、拉活等数据上表现出色，并且收获了较高的用户满意度，为后续重大赛事设计积累了宝贵经验。