组件创新B站把进度条装进按钮，列表页瞬间清爽

细节描述

龙爪槐守望者: 如何在列表页优雅地展示「观看进度」，既不干扰封面，又足够清晰？ B 站（哔哩哔哩）番剧列表页。设计师做了一个极其聪明的减法。播放按钮本身变成了一个进度容器，半透明的灰白色背景作为底槽，而淡白色的填充色块则充当了进度的实体。对于没过的剧，按钮安安静静地显示为「看正片」，已经看过的剧，按钮内部的色块像水位一样上涨，并显示观看进度百分比。 将「CTA（行动号召）按钮」与「Progress Bar（进度条）」合体，消除了列表页常见的视觉噪音。在有限的卡片高度内，既保证了封面的完整展示，又提供了关键决策信息。