今日头条
世界杯频道
将二十位解说员的内容以品牌化视觉形式呈现，打造解说团队的专业认知
镜像半身像，模拟面对面辩论场景，强化解说内容的对抗感
深度呈现解说内容
将二十位解说员的内容以品牌化视觉形式呈现，打造解说团队的专业认知
结合具体内容，以更具对抗感的形式呈现，丰富解说内容的观感
可视化展示专业数据
延续球迷对纸媒杂志的怀旧情结，分类球衣颜色并以背景色点缀，区分赛事同时，还原了球场的激烈氛围，通过调用内部海报工具，推动设计方案高质量上线
有张力的视觉设计
贯穿完整赛事阶段的动效，渲染赛事氛围
四套基础动效模版（开赛，强强对决，明星球员，夺冠），通过简单替换图片素材即可快速上线，有效弥补图文体裁在情绪渲染上的短板
根据不同的赛事阶段，灵活调整设计思路
用稳定的页面框架，可变的内容模块顺序
预热与余热期内容少、深度球迷为主，适度外露引导阅读；比赛期信息多、泛球迷为主，压缩呈现强化筛选；头部稳定的框架兼容各体裁和内容，培养稳定的用户心智，在不同阶段都能快速找到重要内容
先看关键亮点
将二十位解说员的内容以品牌化视觉形式呈现，打造解说团队的专业认知
镜像半身像，模拟面对面辩论场景，强化解说内容的对抗感
深度呈现解说内容
提炼核心信息，关键内容一目了然
使用具体的图形语言，直观对比优劣
可视化展示专业数据
延续球迷对纸媒杂志的怀旧情结，分类球衣颜色并以背景色点缀，区分赛事同时，还原了球场的激烈氛围，通过调用内部海报工具，推动设计方案高质量上线
有张力的视觉设计
根据不同的赛事阶段，灵活调整设计思路
稳定的页面框架，可变的内容模块顺序
预热与余热期内容少、深度球迷为主，适度外露引导阅读；比赛期信息多、泛球迷为主，压缩呈现强化筛选；头部稳定的框架兼容各体裁和内容，培养稳定的用户心智，在不同阶段都能快速找到重要内容
贯穿完整赛事阶段的动效，渲染赛事氛围
频道头部：重要比赛
频道头部：夺冠
四套基础动效模版，通过简单替换图片素材即可快速上线，有效弥补图文体裁在情绪渲染上的短板
频道头部：开赛
频道头部：明星球员出场
重大热点事件是增长机会也是挑战
深入选题是关键
密集补课
和球迷脑爆共创
推演页面结构
熟悉比赛规则和足球文化
分析不同赛事阶段的用户诉求
产品运营设计共创
重大热点事件能显著带动头条DAU的增长，但事件选题多样，并需要短时间内洞察用户和内容；此次世界杯，对于不看球的设计师而言更是不小的挑战，为此我们通过密集的补课和共创，快速补齐了在足球领域上的短板
定义设计目标
什么是好的世界杯消费体验
清晰，
看得懂。
深度，
看得爽。
生动，
有气氛。
清晰，
看得懂。
在交互框架和版式上直观清晰，保证泛球迷快速易懂。
因时制宜
频道设计思路随赛事阶段灵活调整
适应不同的用户和内容状况
预热期和余热期，侧重消费：该阶段的内容相对少，用户以深度球迷为主，整体阅读兴致相对弱，优质内容适当外露到频道，减少跳转以引导进一步阅读
比赛期，侧重筛选：赛事密集，信息多且繁杂，用户以泛球迷为主，整体阅读兴致较高，压缩外露内容，帮助用户找到关键内容
以不变应万变
稳定的头部框架
承载各个阶段最核心的内容
头部形态统一兼容不同体裁，各阶段核心内容如比赛、解说、节目、专题等均能突出呈现，帮助用户快速找到关键内容，培养稳固的用户心智
赛前预测
赛中看球
观赛指南
直播入口+精彩集锦
比赛战报+比赛集锦
赛后回顾
简明入口
最浅显易懂的一句话解说
在观赛指南的海报入口，由运营精挑细选出最简明易懂的一句话解说，让泛球迷能够轻松掌握比赛重点。
以阅读专家赛前解说的路径为例
由浅入深
优先满足泛球迷需求
递进展示专业内容
针对泛球迷为主的用户群体，专业内容相对曲高和寡，因而优先展示浅显易懂的内容，专业赛事数据和分析则相对靠后，放在更深的页面层级。
点击海报
进入观赛指南详情页
核心观点摘录，快速纵览
摘录三位资深媒体人的核心观点，概述并配以简练的标题，帮助用户快速纵览赛事关键解读，为深入了解比赛提供清晰的框架。
展示所有媒体人的完整解说内容，用户通过深度阅读，获取更多的专业分析与见解，满足对深度球迷的阅读诉求
全部解说原文，深度阅读
点击查看全部
进入赛事热议详情页
循序渐进
提供不同梯度的看球方式
在赛后战报页面，考虑到大部分泛球迷不会完整观看整场比赛，除了提供直播回放，我们为用户打造了多种梯度的看球方式，顺应用户习惯
用最短的时间，让用户看懂一场比赛
一句话解说
最受球迷欢迎的回顾方式，快速呈现比赛高光片段
视频集锦
图文并茂的分析，深入解析双方战术
图文战报
清晰呈现比赛进程，理清赛事关键脉络
赛况时间轴
小组赛阶段，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