资格赛是整棵树里唯一不固定长度的部分。节点数量随参赛规模变化,但每一格保留同样的字段:场次编号、状态色边、晋级标记。展开后只显示当前这一层,其余分支保持收起状态,避免长签表一次铺满屏幕。
签表结构 · 赛程顺序 · 赛季区间
把一届杯赛摊成树与轴
LEYU赛程用两种排布说同一件事:树状签表回答「谁和谁落在同一分支」,横向时间轴回答「哪一轮先发生」。角球与净胜球不单独开页,挂在赛季区间上,滑动范围就能看到聚合读数跟着换。
01 签表读法
树状签表:从资格赛长出决赛
签表把轮次排成一列一列,同一分支的两条连线最终汇进同一个节点。读到哪一列,就知道这一轮还剩几个对阵格。
一个节点由三样东西构成:1px 的节点边框、一个等宽的场次编号、以及贴在左边的状态色边。色边说明这一格归谁,编号说明它在整棵树里的位置。树枝的连线默认是网格灰蓝,路径被选中后才整段换成状态色。
- 节点直角方块配 8px 圆角,悬停时在下方展开一条信息条,写明轮次、场次数与状态标记。
- 连线相邻两列之间走一次折线,同一条路径上的颜色始终一致,便于顺着分支往回找。
- 晋级线用香槟金单独标出,只落在关键对阵的取值范围上,不与状态色混用。
从这一轮起,签表的列宽固定下来,16 场对阵在纵向上等距排布。主客场状态色在抽签结果确认后写入节点左侧边,路径高亮也以这一列为起点向后延伸。
列数收缩一半,节点之间的纵向间距随之放大,这一列适合查看分支走向:上半区与下半区各自的路径在这一轮基本能看出轮廓。
香槟金的晋级线从这一列开始出现,标在关键对阵上,同时这一轮的净胜球读数也进入区间的聚合范围,可在下方的滑块里一并查看。
两场对阵共用同一列刻度,分支在这一轮收束成两条路径。主客场色边在这里最容易被逐条比对,因为对照的样本只有两组。
整棵树在这里收成一个终点。决赛节点不带后续连线,只保留场次编号与状态色边,作为该届签表的收口位置。
02 赛程轴
横向时间轴:轮次对齐,轮换信息贴着刻度走
同一轮的场次压在同一个刻度上,伤停与首发轮换作为附注挂在对应刻度旁边,不单独开一条信息流。
-
资格赛
对阵确认后写入签表节点,轮数按赛事规模伸缩,刻度不固定。
-
1/16 决赛
16 场对阵同刻度展开,主客场状态色随对阵确认落到节点左侧。
-
1/8 决赛
伤停与首发轮换在官方公布后 15 分钟内同步到对应刻度,不另做汇总。
-
1/4 决赛
香槟金的晋级线开始出现,与净胜球读数在同一区间口径下显示。
-
半决赛
两场对阵共用刻度,分支收束成两条路径,便于逐条比对状态色。
-
决赛
单场刻度,签表树在此收口,时间轴到此结束。
赛事日历每日核对两轮;抽签结果确认后 10 分钟内重建签表,时间轴上的刻度顺序随之调整。
03 区间读数
赛季区间滑块:角球与净胜球共用一把尺
刻度分成十段,对应近十个赛季。拖动范围时,角球与净胜球同时按新范围重新聚合,不会只更新其中一个。
单场口径不与赛季口径混用。同一项统计在站内只保留一种说法,口径调整即整体替换。
04 状态色标
主场与客场,两种颜色贯穿所有视图
荧光青与珊瑚橙的位置固定:签表节点的左边框、统计图里的柱形与折线、以及列表中的状态点,都遵循同一套映射。
荧光青 · 主队 / 主场
出现在节点左侧边、路径高亮的起始段与图例的左半区。悬停签表节点时,同一条主队路径一次性整段亮起。
珊瑚橙 · 客队 / 客场
与荧光青镜像使用。差异标记与订正提示也借用同一色相,但只出现在文字说明旁,不占用节点色边。
05 手机端
手机上怎么读一整套签表
窄屏不做等比缩放,而是把轮次收成折叠条、把赛季选择器收成横向滑动条,让同一屏里只保留一条主线。
六条轮次折叠条自上而下排列,一次只展开一层。展开时右侧的签表分支同步高亮,收起的轮次只保留标题与等宽场次计数。
赛季选择器放在页面右侧的胶囊里,手感上像一条可横向拖动的带子。滚动条隐藏,但键盘左右键仍可逐段移动,焦点环用香槟金 2px 实线。
轻触或悬停节点时,信息条贴着节点下沿出现,写明轮次、场次数与状态标记。离开后收回,不遮挡相邻分支。
页面下半部的统计模块不再是窄卡片,而是横跨整屏的一行,区间读数、色标图例与滑块依次排开,纵向滚动长度因此缩短。
06 更新与订正
数字对不上时,从哪一步开始核
签表与统计各有一条核对路径。先确认轮次与区间口径,再确认节点位置,最后才判断是数据本身需要订正。
更新节奏
- 每日两轮赛事日历按固定节奏核对,签表节点与赛程刻度同步检查。
- 15 分钟伤停与首发轮换在官方公布后同步,贴在对应轮的刻度旁。
- 10 分钟抽签结果确认后重建签表,分支与连线的位置重新计算。