2018 年上线 · 当前版本 V4

从第一版栏目表到米兰V4栏目中心导航速览

大屏上想把常看的米兰栏目一次铺满,通勤路上想把最新一轮战报翻完——这两个动作在这里都有固定去处。68 个二级栏目按赛事、窗口期、专栏、数据分好类,收藏位最多留住 24 个,小屏打开就能读。到今天,42 万中文用户已经习惯从这里进入米兰赛场。

看台剪影与球场灯光的抽象色块构图,红黑对撞,无人物面部与标识
2018第一版栏目导航上线
68二级栏目在线
42万+中文用户在用
9.6万日均访问次数
01

从看台到入口

2018 年上线第一版的时候,这里只有一张按顺序排好的栏目清单。目标很朴素:让中文球迷少绕几个弯,直接落到想看的位置。

栏目越挂越多之后,一张平铺的清单开始不够用。赛事之外的窗口期、专栏、数据各有各的更新节奏,于是分类标签、收藏位、手机上的战报订阅陆续补了进来。

走到今天,这里每天承接约 9.6 万次访问。有人把它当成大屏上那一排固定编号,也有人只在小屏上读完每轮战报,两种用法共用同一套栏目。

02

四个版本,四次取舍

每一版改动都源于一个具体的卡点:扫读变慢、入口藏得太深、手机上撑不开。看清卡在哪,才决定这一版动哪里。

横向时间轴示意图,四个等宽数字节点分布在红黑渐变色带上,节点用几何图标区分
V1

栏目清单

第一版把米兰相关的栏目和入口按顺序排成一张表。能一眼扫完,栏目一多就得一直往下拖,想对比两个分类还得来回翻。

起点 · 一张表
V2

导航矩阵

清单换成矩阵,赛事、窗口期、专栏、数据四类标签落到位。找栏目从「记得住名字」变成「选得对标签」,扫读速度快了一截。

分类落地
V3

双端并跑

小屏订阅工具上线,邮件战报和站内推送两条路都通,页面宽度收到 360px 仍然排得完整。大屏这边同时把收藏位固定下来。

手机也能用
V4

收藏上移

收藏入口从页面深处提到第二屏,1920×1080 及以上分辨率一次铺满。近 5 轮赛程排布加了进来,每轮标好轮次编号、主客与开球时段。

当前版本
03

栏目得是活的,才配当固定入口

每天过两遍

栏目导航每天校验两次。入口失效、分类错位、轮次标错,发现当轮就换掉,不会等你点进去才发现是空的。

68 个栏目归四类

赛事、窗口期、专栏、数据。想找哪一类,从对应标签进去就够,不用先记住栏目的完整名字。

排布跟着轮次走

赛程排布随每轮赛程更新,轮次编号、主客关系、开球时段一起换,省得自己对着赛历逐个对。

04

同一个入口,两种坐姿

左侧宽屏界面与右侧窄屏界面并排的抽象线框示意,中间由一条发光分割线分开

大屏 · 1920×1080 及以上

一次铺满,24 个位置记住你的常看

  • 收藏入口就挂在第二屏,打开页面第一眼看到的就是那排编号。
  • 赛事、窗口期、专栏、数据四类都能收进来,混着放也不打架。
  • 收藏位最多留 24 个,排列顺序和已读标记存在你自己的浏览器里。

小屏 · 360px–430px

揣兜里就走,路上把战报读完

  • 宽度覆盖 360px–430px,打开即用,不需要先注册账号。
  • 邮件战报和站内推送两条路都通,订阅动作三步走完。
  • 工作日早晚两班次更新,赛程密集的时候安排加更。
05

22 个人分三组,守着这排栏目

栏目每天要过两遍、大屏和小屏要分别跑通、合作方的互链要定期对一次。这些活由 16 名内容编辑和 6 名前端工程师分工承担,分成三组。

分组 01

内容校对

栏目名、分类标签、轮次编号是他们最常盯的三样东西。每天的两次校验里,一半工作量落在这组手上。

栏目名 分类标签 轮次编号
分组 02

栏目维护

68 个二级栏目的挂载状态、栏目上下线、分类调整和入口位置,都由这一组过一遍再放出去。

挂载状态 入口位置
分组 03

双端体验

从 1920×1080 到 360px,大屏收藏位和小屏订阅两条线都要在这组手里跑通,宽度变化不留下断行和错位。

大屏收藏 小屏订阅
16名内容编辑
6名前端工程师
9家中文体育内容合作方

9 家中文体育内容合作方与这里保持栏目互链,他们的入口在栏目中心里按同一套分类摆放,点进去还是你熟悉的阅读体验。

下一屏,从哪边进?

收藏、查询、订阅各有各的入口,哪个最贴近你现在要解决的事,就先从哪里开始。