EXP 大屏访问 2.0

把每一轮摊开,把每一次判罚看清

HTH 把赛程切成一层层可以点开的轮次抽屉,把红黄牌归到同一面数据墙里。首轮展开是当轮的全部对阵,往下一级一级收起,到决赛只剩一处焦点。下面这些模块就是电视、投影和拼接屏上实际看到的样子。

01 轮次折叠视图

从首轮到决赛,一层一层往下拆

轮次轴横贯整屏,每一个刻度对应一轮比赛。点开其中一轮,抽屉向下打开,当轮的对阵按顺序排在里面;再点一次收起,画面回到轮次总览。习惯大屏看赛事轮次安排的人,可以先抓住整体轮廓,再落到具体哪一场。

电视大屏上展开的轮次折叠界面,左侧是轮次列表,右侧是当轮对阵网格
首轮抽屉展开状态:左侧轮次列表常驻,右侧对阵网格随轮次整体替换。
R01 首轮 8 场对阵
  • 第 01 场
  • 第 02 场
  • 第 03 场
  • 第 04 场
  • 第 05 场
  • 第 06 场
  • 第 07 场
  • 第 08 场
R02 八强 4 场对阵
  • 第 01 场
  • 第 02 场
  • 第 03 场
  • 第 04 场
R03 半决赛 2 场对阵
  • 第 01 场
  • 第 02 场
R04 决赛 1 场对阵
  • 第 01 场

02 对阵网格

格子越往后越少,眼睛越容易定下来

首轮八格,八强四格,半决赛两格,决赛一格。每一格占据的屏幕面积随轮次放大,到半决赛之后,单场对阵的字体和间距都会再放宽一档。远距离观看时,格子的数量本身就是提示,不用数也能知道现在看到哪一轮。

投影幕布上显示的对阵网格,光线偏暗,画面边缘有轻微梯形校正痕迹
投影环境下的对阵网格,四格布局在半数亮度下依然保持可辨的对齐关系。
  • 首轮
    8 场
  • 八强
    4 场
  • 半决赛
    2 场
  • 决赛
    1 场

03 判罚记录墙

红与黄分墙上站,数字大到三米外能读

中国红黄牌记录归到同一面墙上,可以按场次、按轮次、按球队三种方式重新排列。红色与黄色各自占住一块高饱和区域,卡片底色、标签文字和数字同时表达判罚类型,色觉差异不影响判断。

裁判举牌动作的特写,红色光晕包围,背景是虚化的球场灯光
红牌的视觉权重来自色块面积与数字字号,而不是单靠颜色。
按场次 按轮次 按球队
红牌记录
  • 单场独立成组,一场一行
  • 整轮汇总合并成一列
  • 同一支球队跨轮纵向串起
黄牌记录
  • 同一场内的多张黄牌按分钟排列
  • 轮次视图下保留每场的小计
  • 球队视图下按累计张数排序

04 宽屏适配

16:9、21:9、4:3,三种画面的排法不一样

同一套数据在三种常见比例下有不同的排版策略。宽一点的屏把轮次轴和记录墙并排放,窄一点的屏把记录墙挪到轮次列表下方。视觉组维护的 21 组宽屏测试用例,覆盖了目前主流的电视与投影分辨率。

俯拍视角下电视、投影与拼接屏同时显示同一轮次视图
同一轮次视图在电视、投影与拼接屏上的横向铺展差异。
  • 16:9

    客厅电视与主流投影

    轮次列表留在左侧三分之一,右侧展开四列对阵网格。3 米观看距离下,对阵文字维持在 28px 以上,数字标记不小于 22px。

  • 21:9

    带鱼屏与横向拼接墙

    左右分栏同时铺开,轮次抽屉与记录墙并排显示,不需要滚动就能看到当轮全部内容。文字可以进一步收窄行距,换取更高的信息密度。

  • 4:3

    老款投影与教室屏幕

    对阵网格降为两列,记录墙整体移到轮次列表下方。上下结构换来更大的单格面积,远距离教室环境下依旧能看清每一场。

05 刷新节奏

终场哨响之后,十分钟内画面换一遍

每场比赛结束,当场的对阵结果与判罚记录开始汇总,十分钟之内落到页面上。数字变动的时候,对应的卡片底色会加深一次,让人即使没盯着看,也能察觉哪一格刚刚更新过。

由红色与黄色色块构成的抽象数据墙面,数字以等宽字体排布
刷新完成后的记录墙状态,红黄两块区域同时进入新的数值。
  1. 终场

    本场对阵结果与判罚条目开始汇总,页面保持上一轮的显示内容。

  2. 结果落地

    轮次抽屉里的当轮对阵先完成替换,胜负关系随之确定。

  3. 记录入墙

    红黄牌记录进入数据墙,按场次、轮次、球队三种归类同时生效。

  4. 十分钟内

    前端画面完成这一轮更新,卡片底色加深一次后恢复常态。

06 常用入口

把最常看的那一屏,放进随手能开的位置

轮次抽屉和记录墙都能直接固定成浏览器书签,下次打开就是当前画面。视图偏好保存在本机浏览器里,换台设备重开,按同样的步骤设一次就行。

  1. 01

    先调到想看的那一屏

    展开某个轮次的抽屉,或者切到记录墙的某一维度,把画面停在最常用的状态。

  2. 02

    按浏览器书签键存下来

    电视浏览器和电脑浏览器的快捷键不一样,标签名建议写成轮次或球队,方便一排书签里辨认。

  3. 03

    大屏上把它放到首屏

    电视与投影的浏览器一般支持把书签固定到起始页,开机后一次点击就能进到轮次视图。

  4. 04

    遇到显示问题按设备排查

    画面比例不对或者字体偏小,先在显示设置里确认分辨率,再对照教程里的设备条目处理。

07 版本变化

大屏访问 2.0 换掉了三样东西

近三个赛季里,站点一共走过 9 次版本迭代,平均每赛季 3 次。2.0 这一次动的地方最多,轮次结构、配色体系和画面比例都做了调整。

旧版

  • 对阵按月平铺成一长条列表,找某一轮要靠滚动
  • 判罚记录和赛程分在两处,切换时容易丢失当前轮次
  • 画面按 16:9 单套排布,投影上常出现两侧留白
  • 整体以灰色调为主,红黄信号不够跳

大屏访问 2.0

  • 轮次改成一轴多层,抽屉展开收起,当轮始终在视野里
  • 赛程与判罚记录放进同一屏,左右分栏各占一块
  • 16:9、21:9、4:3 各有独立排布,投影不再被裁切
  • 深色打底,红黄两块高饱和区域承担判罚信号
  • 新增宽屏夜间模式,环境光暗时降低亮度并提高文字对比

找到适合你观看环境的那一档

投影和电视的比例不一样,客厅和赛场的观看距离也不一样。按自己的设备挑一条入口继续往下看。