郑州 vs 洛阳
郑州市体育中心
郑州 · 看台 30000 座
01 / 目录结构
大项下面挂联赛,联赛下面挂赛程卡,场馆信息栏跟着每一场走。
足球、篮球、排球、乒乓这类最上层的分类,一共 9 个。先在这一层选方向,后面的列表才有意义。
一个联赛就是一串连续的赛程。76 项联赛分布在 9 个大项底下,点进去直接落到最近几轮。
每场比赛一张卡,开赛时间、主客队、场馆都在正面。展开以后还能读到交通提示和当天天气。
02 / 大项索引
每个格子右上角写着它收了多少项联赛,点一下就是这个大项下的完整列表。
03 / 赛程条带
左右拖动看相邻场次,手指松开自动吸附到最近一张卡。
郑州市体育中心
郑州 · 看台 30000 座
河南省体育馆
郑州 · 看台 12000 座
洛阳市新区体育馆
洛阳 · 看台 8000 座
新乡市体育中心
新乡 · 看台 15000 座
郑州市奥体中心
郑州 · 看台 45000 座
焦作市太极体育中心
焦作 · 看台 9000 座
04 / 卡片字段
时间摆在最左边,用等宽数字排,上下几张卡扫过去就能对齐比较。
24 小时制精确到分钟,同一列卡片的分钟位对齐,方便快速跳读。
主队写在前面,客队写在后面,一眼分清谁在自家场地打。
填正式名称,跟票面一致,避免同城两座馆看串。
连同看台容量一起显示,异地出行前先把城市和场地规模对一遍。
待开赛、进行中、已结束三档,用琥珀黄、橙红和荧光青区分。
可以给自己记一个开赛前 2 小时的提醒,提前量随时能改。
05 / 场馆信息栏
场馆信息栏固定在赛程页顶部,从上到下的顺序一直不变。
06 / 筛选组合
先定大项,再收城市,最后卡日期。顺序换一下也行,结果一样。
先在城市里选郑州,再把日期压到周六,同城的两场比赛会挨在一起出现,中间留出的通勤时间一眼能算出来。
大项选足球,再进具体联赛,看到的就只有这一项。每天更新 3 次,刷一遍就知道下一轮排在什么时候。
城市定成要去的地方,日期压到本周,落地的几天里有哪些场次、场馆离得远不远,一屏就清楚。
07 / 小屏适配
小屏查赛程是这个目录最常被用到的入口,所以竖屏下的排布单独做了一套。
横向条带退化成单列,一张卡占一行,不用眯着眼看缩小的卡片。
时间靠左对齐,等宽数字从上到下排成一条线,扫一眼就能比出先后。
相邻场次往右滑就能看到,手指松开自动吸附,不会停在两张卡的中间。
首屏资源控制在 180KB 以内,家用宽带下 1.2 秒内看到赛程列表,3G 弱网下也在 2 秒内出现。
首屏用内联 SVG 与 CSS 动效顶替大图,图片请求比原来少约六成。