DESIGN DOC · 11 发行与首页 · #s17
★ 首页风格样张 · 同一款游戏的两张脸
商店页 · 微信首屏 · 投放素材 — 《热血骑手·物语》设计案按节成页：一个 section 一个文件，左侧目录全站可跳。
17
★ 首页风格样张 · 同一款游戏的两张脸
微信小游戏竖屏标题页 + Steam 商店页
§15 定了"微信小游戏 + Steam 同日双端首发、共用一套关卡数据"，但两端玩家看到的门面必须是两套东西。原因不是审美偏好，是两条硬约束：① 微信端玩家在地铁里单手玩、会话只有 6~10 分钟（§13），首屏必须把"继续上次那一单"放在拇指够得到的位置；② Steam 端玩家是先读评测再决定花 ¥48 的人，首屏必须回答"这游戏值不值、有多长、有没有内容"。下面两个 mockup 由 design/homepages.js 运行时生成，角色全部复用 HB_SVG，无外部图片。
微信小游戏 · 标题页竖屏 360×640 · 单手可达区优先
Steam · 商店页桌面宽版 · 媒体区 + 购买框 + 评测
17.1 两套门面的差异是设计出来的，不是适配出来的
| 维度 | 微信小游戏首页 | Steam 商店页 | 为什么必须不同 |
|---|---|---|---|
| 首屏唯一目标 | 让玩家立刻点"继续 CH.07" | 让玩家相信这值 ¥48 | 小游戏靠留存与广告分成，多一跳就流失一层；Steam 靠一次性的购买决策，犹豫即流失 |
| 主 CTA | 「继续 · CH.07 高架桥洞」超大按钮，落在屏幕下 1/3 的拇指热区 | 「添加至购物车」在右侧栏固定可见，折扣角标用品牌红 | 触屏 vs 鼠标：热区逻辑完全不同 |
| 信息密度 | 极低：体力(章节票) / 签到 / 排行 / 三条每日任务，其余全收进底部四个 tab | 极高：五张截图、简介三段、标签、好评率、系统需求、DLC/合作说明 | Steam 用户会读，小游戏用户不会读 |
| 色调 | 暖、满、亮 —— 纸感底 + 热血红 + 黄蓝两兄弟，一眼"市井、有人味" | 冷、克制、留白 —— Steam 深色 chrome，让截图本身成为唯一的暖色来源 | Steam 的深色框架是平台惯例，硬套暖色会显得廉价 |
| 钱的表述 | 「通票 3/3 · 今日剩余」——不出现真实货币数字，规避审核与"付费感" | 「¥48 → ¥38.40 · -20% · 一次性买断 · 无内购无抽卡」——把"没有内购"当卖点写在脸上 | 这是 §15 商业模型的两面：小游戏免费+¥18通票，Steam 买断。文案策略必须相反 |
| 合规改写 | 「借款合约」「观众心意」、不见血、星星眼 KO、狗只打退 | 同样不见血，但可以直说"高利贷""地下拳馆"等剧情设定 | 小游戏内容审查更严，Steam 只是分级问题 |
| 暂停承诺 | 悬浮胶囊明示「任意时刻点击右上 ⊙ 挂起 · 进度自动保存」 | 强调手柄/控制器支持与"随时退出重连" | 同一个卖点，两端各自的痛点表达 |
微信端取舍
体力制 ≠ 抽卡
首页那个「通票 3/3」是章节票（每天送 3 张 / 分享得票），限制的是能推进几章剧情，不是能不能玩。跑单、图鉴、竞速这些日常玩法永远免费开放，否则"随时上线跑两单"的核心循环当场失效。这条边界已在 §15.3 写死，首页必须在视觉上体现它。
Steam 端取舍
主视觉该放谁
当前 mockup 用的是三主角并排 + 城南天际线。备选：① 主角单人正面特写（更像独立游戏）；② 横版战斗瞬间截图当 KV（更直给玩法）。"友情/爱情/热血"三个主题词只能靠一张图同时说完，这是我选三人并排的理由。已列入 §16 #34 待你拍板。
成本
mockup 直接就是生产素材
这两个页面全部由矢量与 CSS 渐变生成，不含任何位图。同一份 HB_SVG / HB_SCENE 输出可以直接栅格成 Steam 胶囊图（920×430）、头图（1920×1080）和小游戏分享卡。美术预算不需要为"商店页"单独开一项，这是矢量方案除 §04E 之外的第二个红利。
验收标准：① 两端首页不得出现两套不同的角色形象（同一 key 同一骨架，只允许裁切不同）；② 微信端首屏可点区域全部落在拇指热区或顶部胶囊，禁止中部小按钮；③ Steam 端首屏不滚动就必须看见价格与好评率；④ 两端文案里的金额、折扣、发售信息必须与 §15.3 / §15.4 完全一致，改一处要同步改两处 —— 建议后续把这些字段收敛成一份
storeCopy 常量。