曼城vs 皇马
UI Handoff Preview
把切片先组合成一个可浏览的本地前端演示
这里展示首页、比分、直播间、主播中心、个人中心五个移动端视图，以及拆分后的组件零部件。下一步开发时可以按组件名和切片路径直接引用。
5核心页面
28组件切片
26真实图标
5Logo 版本
Real Size Spec
开发真实尺寸样板
Header 52px / Logo 32px
湖人vs 勇士
LIVE8.65万
西甲 皇家贝蒂斯 vs 塞维利亚
球球小将
LIVE6.21万
NBA 湖人 vs 勇士 全场解说
老鱼解说
为什么之前看起来不是真实尺寸？
切片来自“高保真展示板”，展示板里的页面和组件本身已经被缩放排版；演示页为了平铺查看，又把切片放进响应式卡片里二次缩放。
所以那些 PNG 更适合看视觉风格、结构、阴影和状态，不适合作为 CSS px 的唯一依据。
下一步开发应以这里为基准
- 移动端页面宽度按 390px 基准，最大宽度 430px。
- 顶部 logo 区 52px，logo 高度 32px。
- 分类 tab 52px，active 蓝字和短下划线。
- Banner 约 158px，高度紧凑，不挤压首屏信息密度。
- 预约卡 160 x 128px 横向滑动。
- 直播卡两列布局，封面固定 16:9。
- 底部导航 68px，加安全区时使用 padding-bottom。
True Icon Assets
真实尺寸图标资产
Mobile Views
五个移动端页面视图
Component Library
组件零部件平铺
Icon Tiles
图标与操作按钮 tile
Brand Assets