# 设计语言

[English](DESIGN.md) · [当前组件](../design-system.html?lang=zh-CN) · [视觉识别](https://lucienzhu.github.io/3card-royale/brand.html?lang=zh-CN)

一张牌、一朵花、两个人；底是深圳的绿，花是深圳的红。三角梅牌花把深圳意象和一副普通扑克连在一起：三片同形、各转 120 度的苞片，每片一枚小金蕊。标志是一张平涂的金牌——没有金属光、没有纹理——牌背就是这张牌，花牌也是这张牌加一个角标。

品牌源文件是 `brand-mark.svg`。2026-10-30 定稿：原版花瓣轮廓，整花缩至 80%，金花心保持原版 130% 的实际大小。牌框和全部配色不变。花心在 0.8 倍整花组内局部放大 1.625 倍，不再将 130% 花心缩小一次。

修改源文件后运行 `node scripts/sync-brand.cjs`，同步公共导航、牌桌花形、视觉页示例、单色与暗色下载件、PNG 内嵌资源；`node scripts/check.cjs` 检查一致性。实验矩阵保留冻结的原版参考。

| 名字 | 用途 | 色值 |
| --- | --- | --- |
| 红花 | 花、你的身份、主要按钮、选中态 | `#C5416B`（小字：昼 `#B2365A`、夜 `#E38BA6`） |
| 绿牌 | 昼的底：新能源车牌那种淡绿——页面 `#EDF4EF`、牌桌 `#E2ECE5`、浮层 `#F7FBF8` | `#EDF4EF` |
| 主板 | 夜的底：主板阻焊层那种深绿——页面 `#0C2118`、牌桌 `#112A1F`、浮层 `#152E23`；字：昼 `#10231B`、夜 `#EAF3EE` | `#0C2118` |
| 金牌 | 标志、牌背、花牌：金底 `#ECCE80`、金边 `#A17C35`、金蕊 `#F2CD5D` | `#ECCE80` |
| 对手金 | 对手的花、苞片和藤上的标记；写字用 `#866300`（昼）／`#E4C46A`（夜） | `#D6A41C` |
| 电路板绿 | 电路板的饱和绿：品牌页，以及电路板彩蛋的阻焊色（夜里 `#0F5546`）；牌桌上的绿牌与主板是它最浅与最深的两端 | `#16765F` |

红花和金牌在明暗两个主题里完全相同；只有绿底的深浅和功能文字按对比度切换。它们是设计意象，不是官方城市色或人群调研结论。

牌是一个组件：白纸面、墨色或红花色的角标。牌值用 Archivo 800 的十三字形子集（OFL），花色是写进牌里的内联 SVG，宽度是牌值的 0.66，和牌值排成一列；"10" 单独收窄。落在牌桌上的牌（进攻、防守、伤牌）同一个尺寸、平贴无影；手里的牌更大，并带一层投影。花牌的花是右下角的半透明水印，和其他牌的花色水印同一个角。

界面用系统黑体；字标用思源黑体 Bold（中文）与 Archivo（英文），已描边为 SVG。基础圆角为 4、8、16 px；紧凑牌面和牌签按比例使用 5–6 px。共用抽屉与分享预览在桌面用 18 px 圆角，手机端四边铺满。主按钮红色填充，次按钮描边，文字链接下划线。菜单的当前项只靠墨色和字重区分，不加下划线。换牌目标每个区域一个红色 ⇄ 圆标。伤势用名字旁的五片苞片表示，以身份色填充；数字保留给辅助技术读取。状态不能只靠颜色区分。

标准 1.0 的共用花牌只需一个集中提示：「你」那一行右侧一枚金色小牌签，2 和 ♥ 并排（`2♥`），不把这一行撑高；历史版本仍保留各人的花牌。明确当前主要动作，完整规则按需展开，打开帮助不能丢选牌。简中用深圳花牌，英文用 3Card Royale，别名为 Shenzhen Flower Cards。别名用于介绍，导航和字标保持简短主名。翻译要区分小局与整场升级。

手机竖屏时，牌桌把高度让给你出牌的手牌：菜单 44 px，升级轨道 32 px，对手只有牌背、缩小一档；你的手牌随屏幕高度放大，580 px 以下 52 × 74，667 px 左右 70 × 98，800 px 起 84 × 118。伤牌区位置保留，第一张伤牌落下时整桌不跳。

**首次引导。** 先完成两次可操作的练习：从 8 张手牌选三个 A 进攻（三炸 5 分对同花 3 分，造成 2 伤），再从剩余手牌选 ♦4、♦8、♦Q 防守（同花 3 分对同花顺 4 分，受到 1 伤）。初始练习只介绍出牌和 5 伤输局，不引入伤牌区；使用真实牌型计分，并与正式对局、发牌随机数和 AI 隔离。手机使用共用抽屉，桌面使用共用浮层，打开时暂停牌桌。

完成或退出练习后，只在随后这一个正式小局按需提示伤牌、换牌、花牌和轮末补牌。伤牌提示说明可与手牌合用，出牌后原位补回、不回血；换牌提示保留每次跳过的选择。提示可关闭，操作相关牌也会确认对应提示。`sz-onboarding-v1` 保留 `seen` / `enabled`，增加首局身份 `hintGame` 和已确认 `hints`；旧用户不重新弹出。第二次进入不再自动练习，设置 → 偏好可关闭引导或手动再练。手动再练不会重置首局提示。存储不可用时退回会话或当前页面记忆。

**滑选与回合节奏。** 手牌和可出的公开伤牌均支持横向划选：经过的牌依次抬起，同一张不重复切换，仍需点击进攻／防守确认。保留点选、键盘操作与纵向滚动；取消手势恢复原选牌。无选择的攻防交换、轮末补牌在结算动画结束后保留约 1.1 秒阅读时间再自动进行。换牌、跳过、翻牌和开始下一局仍是主动选择。打开抽屉／回放、切后台、替换对局时取消待执行转换；恢复后重新检查当前对局和事件。

**整场结束：开花**。赢下自己的 A 之后，整屏是一段约六秒的开花。从最后一次攻防记录读取赢家实际打出的牌；四张、五张时按出牌顺序取前三张，保留花牌的真实点数与花色。你赢时从下方升起，对手赢时从上方落下：牌面在飞行中逐张翻到统一的金底红花金蕊牌背，翻面与收拢重叠，顺势合成一朵三苞片的花，全程不停住。旧记录缺少出牌数据时只显示牌背，不虚构牌面。花按黄金角向四周开满一屏，随后散成轻轻翻转的苞片，随风沿不同弧线飘向城市各处；落点沿用原有花位，到达时间由距离和风决定，花随落点渐显，不按从左到右的顺序铺开。保留一片由原绽放花朵组成、大小错落的花群，范围延伸到城市上空；靠近城市底部的花逐渐收小，让建筑轮廓透出来；其余苞片错开脱落，后段落英沿用同一批花瓣，落到城市边缘渐隐，不另起一阵从屏幕顶端落下的花雨。两只白鹭顺着同一阵风进入，以短暂振翅和较长滑翔交替穿过。单局仍保留较小的庆祝，只有赢下整场才满屏绽放、落城。花的颜色跟赢家：你红花金蕊，对手金花红蕊。落英时，上方花瓣随风淡出、天空空出来，「你，开花了。」便柔和浮现，局数与胜负稍后跟上；落英进行时，下方花朵消散后，藤便从左向右画出，级数和双方花标随线依次出现，最后亮出终点。随后是「再玩一场」和「分享卡片」。点屏幕任意处直接到终态；系统设了「减少动态效果」时直接显示终态。天际线沿用已认可的 layer19，不改动。

**分享卡片**。整场的 1080 × 1440 PNG 是开花的一张定格：精简标题在上，赢家的大花与动画同源的丰盈花群在中间，靠近城市的花变小，再接白鹭、开满花的天际线、藤，最后是标志、「一副牌，两个人，三张牌，打出花。」、网址和二维码。单局分享提供等高的三种页签。“本局回顾”按发生顺序列出全部已记录攻防，包括未造成伤害的防守；内容向下延长为一张完整 PNG，预览在等高面板内按可读宽度滚动。“决胜现场”展示最后双方出牌与公开伤牌，用一句话说明最后一击及决定升级的终局伤牌差。“高光一手”可切换最大伤害与最大牌型，从本局双方的公开攻防中筛选；相同则依次比较另一指标与发生时间，本局回顾每次攻防一行两列，左进攻、右防守，姓名旁的金花／红花跟随实际玩家身份。决胜现场与高光一手固定金花对手在上、红花玩家在下；突出牌型时原位放大，不交换位置。标清牌的主人和攻防身份。三、四、五张都完整展示，不叠压。标注伤牌来源，花牌保留真实牌面并注明替代；同分获胜说明比点数。花保留在玩家身份与小型品牌标志中，不放装饰花丛或天际线。旧记录缺少最后攻防时仅展示结果，不虚构牌面。剩余手牌、牌堆与原始补牌记录不进入分享，历史版本的扣牌只画牌背；缺少历史时只显示确有记录的最后一手。预览、下载、复制与系统分享都对应当前选择，切换会使旧的异步生成失效。页签切换不改变面板高度，小屏的定长海报可点图放大。超长记录按比例缩放到 1200 万像素、单边 16384 像素的栅格预算内，不删减攻防。明暗、中英各一套。

**电路板（彩蛋）**。默认关闭，在「设置 › 偏好」里一个开关打开，牌桌变成一块会动的电路板：阻焊是板绿，阻焊下的铜是浅一档的绿，焊盘沉金，丝印白色；板上的字变浅，操作面板变成深色模块。每个牌区是一颗芯片，走线跟着出牌：每家手牌接自己的伤牌区，伤牌区接进攻区，进攻区接防守区；牌堆和弃牌不进电路。进攻、防守牌区左上角各一颗长方形贴片指示灯，连同驱动它的那组走线，按该谁出手亮起：你是红，对手是金。亮点沿总线跑动；系统设了「减少动态效果」时停住。

原创素材沿用 MIT。自定义 emoji PNG 供支持上传的平台使用，不是通用 Unicode 字符；极简标志不构成唯一性或植物写实声明。

单局结算保持轻量面板：标题用红花／金花标明胜者，升级箭头末端复用牌桌的金底红桃花牌，显示下一局花牌点数；只有整场结束使用覆盖可视窗口的全屏结算，无抽屉圆角和底部滑入。旧内嵌浏览器的对话框回退也保持全屏，窄屏和短屏在结算内部滚动。

分享图中的花牌替代说明独占一行，位于出牌下方、伤牌上方；与牌底、伤牌和页脚均留出间距。

界面文案以一句当前动作或结果为主。删去重复说明和界面解说；教程保留因果、合法目标与必要规则。完整规则集中在规则书，官网只作三句概览。五种语言同步，辅助技术标签保留完整语义。

## 当前组件 · 2026-10-28

**页面分区。** 相邻主要章节交替使用页面底色与轻微绿色色带，以标题和留白分区，不加装饰性横线。共用 `app/section-surfaces.css`，在隔一个的主要章节上显式添加 `.section-band`：日间 `#EDF4EF` / `#E2ECE5`，夜间 `#0C2118` / `#112A1F`。底色延伸至视口两侧，内容保持统一对齐、阅读宽度与响应式间距。介绍、品牌、规则、牌型研究、Arena 与组件展示页统一遵循，五种语言、桌面和手机一致。嵌套卡片与表格保留自身边框，不逐层交替底色，也不裁切吸顶内容。

**文案与细节。** 每区只讲一件事：短标题、必要事实和直接操作，删除重复说明。介绍与视觉页每个重点区域保留一句解释：玩法的趣味、选择的意义或视觉的来源，不只剩标签。视觉页同时保留名字由来，首屏复用首页的深圳天际线作为轻量装饰背景。视觉页别名居中对齐标题，Shenzhen 用花红色强调；标语与首页共用响应式字号。名字故事连接三瓣花形、电路板绿与伙伴间的15分钟闲暇。完整规则章节、研究方法和 Arena 编码交互按需展开，标题明确，支持键盘；深链接自动展开对应内容，打印保留全文。规则、统计口径与无障碍标签保持完整，五种语言使用同一层级。共用 `app/site-disclosures.js`。

**对外呈现。** 首页、视觉与竞技场共用 `.site-product` 的阅读尺度：桌面主要分区间距 80 px，手机 48 px；正文清晰，每区一个主要标题。产品文案讲体验与选择，删除开发旁白、实现进度和重复操作提示。视觉页直接呈现名字与城市故事，保留已确认的天际线、标志和配色。竞技场区分研究结论与产品承诺，写明观察边界、评估单位、对手、种子配对和测速环境，并链接依据；实验 checkpoint 不等于更强策略。

**观察与动作图示。** 进攻、防守、换牌三个等宽 Tab 对应完整预设示例。左侧同一局面吸顶，右侧观察空间在上、动作空间在下。两者采用同一开放式外层、标题尺度和间距，内部数据使用相同底色、边框与圆角。局面元数据与条件动作掩码共用折叠样式。维度、实体牌 ID、序列补位与合法性标签准确；API 细节放在对应图示旁，不进入产品首屏介绍。

[组件展示页](../design-system.html?lang=zh-CN)直接加载正式牌面样式、现用花形与唯一主标；三种分享由正式 PNG 渲染器按种子生成的真实牌局绘制。当前规范以此页为入口，带日期的 design-lab 页面保留为历史参考。

组件页语言与主题选择器统一为44px高，使用令牌表面、前置图标和焦点环，保留原生键盘与手机选项交互。第四节集中展示结算约定与分享预览。

- **设置**：一个连续滚动页，依次是偏好、开局、记录，无分区 tab。统一字段、开关、操作按钮和展开项；桌面标签与控件分列，手机上下排列。开局先选条件再开始，种子与历史研究按需展开。顶部语言切换与返回固定，存档和偏好沿用原有行为。
- **导航与帮助**：对局、牌型、规则、设置使用相同间距，回放收在设置里。规则、牌型、设置、回放共用等高容器：手机从右侧进出，桌面居中 modal；语言切换在右上角。
- **回放动画**：连续播放和下一步在回放容器内展示牌的移动；回放中的公开手牌保持正面，实际对局的对手手牌仍保密。后退和跨步跳转直接恢复选定画面；关闭、滚动或改变视口时清理未完成动画。遵循减少动态效果的偏好。
- **换牌选择**：每次机会均可换牌或「跳过这次」。选中的交出牌弹起；仅合法目标区域显示一个 ⇄ 圆标，来源区域不显示目标标识。
- **单局分享**：本局回顾、决胜现场、高光一手。右上角统一主标加名称，中英都紧凑成组。本局回顾列出全部攻防，一行两列，每条结果后留出间距。决胜现场与高光一手的中间区域只留一句结果，不叠算式、徽章或重复升级箭头。
- **整场结算**：全屏开花，和单局轻量面板分开；PNG 使用配套终局构图。

`app/tokens.css` 是实际组件层，`app/theme-tokens.js`、`site.css` 与 PNG 色板保持同值。`node scripts/check.cjs` 检查色板、主标副本、VI 版本文案、嵌入规则与内联脚本语法；修改组件时同步更新这些内容。历史方案不作为运行时依赖。

PNG 牌面通过 `app/bloom-assets.js` 使用正式花色路径、花形和牌面令牌的同步副本。修改来源后运行 `node scripts/sync-brand.cjs`；`--check` 会拒绝过期副本。花牌与牌桌一致，使用平涂金底和花形水印，移除旧星标。

首页复用 layer19 天际线作为柔和裁切的背景。原稿等比放大到文字后方，阅读区域与底缘淡出，不额外占高或形成插图行。手机端适当缩小天际线，露出更多建筑，同时不增加页面高度；按钮及焦点轮廓保持清晰，装饰不阻挡操作。

**Godlike 难度。** 保留简单、中等、困难，新增主动选择的超凡档。选项及状态明确提示“可看你的手牌 · 不记牌”，牌桌仍隐藏对手手牌。复用现有设置抽屉 / 浮层与下拉组件；搜索失败时明确提示回退困难档。

### 下拉与展开 · 2026-10-27

`app/controls.css` 为官网导航、抽屉、设置、回放、概率研究和组件页提供原生 `select.sz-select-control`。表单下拉最小高度 44 px、文字 16 px、左留白 14 px，右侧为 20 px 箭头留出 48 px。导航用紧凑样式，高度相同，为最长语言名预留宽度；小屏或触屏用 16 px 文字。官网导航收起时，语言仍直接可选，外观移入菜单。

底色、边框和箭头随明暗主题变化。悬停加深表单边框或为紧凑控件加底色；键盘聚焦显示红色轮廓和柔和外环；禁用态减弱。兼容减少动态效果和系统高对比模式。折叠项共用箭头，展开时旋转。组件页展示两种下拉样式、默认、悬停、聚焦、禁用四种状态，以及可操作的折叠项。

设置开关与标题、说明行右侧对齐。“再练一次”等次要操作使用描边按钮，放在说明下方并左对齐；共用浮层、边框和圆角 token，最小高度 44 px，去掉链接下划线。桌面与手机一致，避免与开关挤在一起。

**AI 对手。** 同一个入口选择内置难度或 Arena AI；仅选 Arena 时，在同一设置项内展开策略选择与“查看天梯”。共用 `.sz-control-child`：透明底、24 px 缩进、短折线连接；标题与 Elo 用 14 px 深色文字，标题、选择器、说明与链接行之间留 10 px。桌面和手机都放在主选择器下方，不增加独立设置分隔线。切回内置对手时隐藏整个子选项，保留此前选中的策略。

策略选项与选中策略标题旁显示当前天梯 Elo，下方标明固定基准或暂定状态。读取已发布榜单并匹配策略声明；版本变化或未评分时显示待评估。榜单不可用不影响策略选择和对战。

### 官网共用导航与研究页

首页、视觉、竞技场、规则和牌型研究统一复用 `app/site-header.js`，样式集中在 `site.css`。导航使用公共文案：中文“竞技场”、英文“Arena”，各页均为同一个“开始玩”入口。语言、主题与手机菜单保持一致。

牌型研究使用官网无衬线字体、等宽数字、主题色、交替分区背景及 `app/controls.css` 的原生下拉控件。保留辅助读数的图表边界，章节不加分割线；历史数据与计算口径不变。

## 多语言

共用语言选择器以本地名称显示：简体中文、English、日本語、한국어、Español。触控区域至少 44 px，沿用正式控件样式。切换语言保留对局与选牌；日、韩文字使用系统字体回退，较长的西班牙语标签可以换行。动作 token、实体牌 ID、GitHub handle 和玩家名字保持原值。中文主名为深圳花牌，其余语言保留 3Card Royale。维护方式见 [I18N](I18N.md)。