可视化设计Apple Sports 交互拆解:如何用分段卡片做复杂的世界杯对阵图

产品: Apple Sport猎人: 龙爪槐守望者投稿: Hwang观众: 3.6k人 时间: 2026-06-28

Apple Sport

与「Apple Sport」有关的细节还有 1 篇 查看全部

我也有新发现 我要投稿
Apple Sports 交互拆解:如何用分段卡片做复杂的世界杯对阵图Apple Sports 交互拆解:如何用分段卡片做复杂的世界杯对阵图

细节描述

龙爪槐守望者: 传统的世界杯树状淘汰赛对阵图在横屏电脑上都显得局促,更别提在狭长的手机屏幕上展示了。Apple Sports 没有把传统的横向大图硬塞进来,而是用一套可以左右滑动的「分段卡片级联」把整个淘汰赛乃至小组赛的逻辑顺畅地缝合在了一起。当你左右滑动时,页面底部的卡片会根据当前的阶段,在列表形态和树状图形态之间做无缝的几何转场。没有生硬的刷新页面,更没有跳出感。

9.513人评分
收藏 1
分享细节海报

发表评论 为下方 1 条评论点赞,解锁好运彩蛋

{{ moreBtnTxt }}

你可能还爱看

厌倦了千篇一律的列表?看小宇宙如何用卡片交互拯救审美疲劳
小宇宙

手势交互厌倦了千篇一律的列表?看小宇宙如何用卡片交互拯救审美疲劳

猎人 - 张老三9.7

同样是展示「朋友在听什么」,为什么小宇宙能让你不自觉地多划好几下,而其他App的列表你看两条就腻了?这个看似简单的卡片交互,到底动了什么手脚?小宇宙的「朋友在听」模块采用了经...

查看详情

#卡片#手势交互#拟物化设计

滑动时图标跟着变,如何用细节让组件发光?
豆瓣

组件创新滑动时图标跟着变,如何用细节让组件发光?

猎人 - 龙爪槐守望者8.7

一个原本最普通不过的多页标签栏,豆瓣没有用常见的顶部 Tab 或普通圆点分页器,而是把它做成了一条带刻度的微型滑尺。手指拖动时,滑块手柄像老式调频收音机一样在刻度间游走,每滑...

查看详情

#Tab#分页#图标

滑块在手,腾讯地图缩放真的精准又直观吗?
腾讯地图

手势交互滑块在手,腾讯地图缩放真的精准又直观吗?

猎人 - 龙爪槐守望者8.0

以前缩放地图总是要用双指,单手操作起来很不方便。现在很多地图改成了长按后拖动,虽然方便了一些,却不直观也不精确。相比之下,腾讯地图的滑块设计更为贴心:只需按住滑块拖动即可缩放...

查看详情

#双指缩放#地图#手势交互