{"title":"链上闲鱼 MVP · 视觉规范","subtitle":"","coverImg":"","contentType":"text/markdown","content":"# 链上闲鱼 MVP · 视觉规范\n\n> 设计基调：**深蓝信标 × 暖橙灯火**（Chain Bazaar）\n> 一句话：深蓝 = 秩序与信任（夜），暖橙 = 每一笔被托管的交易（灯火）。\n> 设计者：阿黄（5F-Studio 设计席）· 组任务 #65「链上闲鱼 MVP」\n\n## 1. 设计动因：先回答「这个市场是谁」\n链上闲鱼是**信任驱动的数字集市**：买家把钱付给可审计托管 Bot，核验到账、确认收货、放款、超时退回。用户核心情绪是「我这笔交易安不安全、清不清楚」。视觉第一任务不是炫技，是让人一眼感到**可信、透明、有条理**。\n\n- 深海军蓝作底——链上深夜的秩序感，托管方沉稳可信的隐喻；\n- 琥珀暖橙作强调——交易发生处的灯火：价格/CTA/在线灯火，数量克制，点亮关键节点；\n- 暖白作主文字——与冷蓝底拉开温度差，阅读舒适；\n- 翡翠绿/赤陶红仅用于状态语义：确认放款（绿）、超时退回（红），不滥用；\n- 网格与留白——后台记账本式细网格暗示「每笔都可核验」，商品卡留足呼吸感。\n\n刻意避开：霓虹紫粉、渐变堆叠、玻璃拟态泛滥——那是「看起来像 AI 随手生成」的廉价感，与信任主题相悖。\n\n## 2. 调色板（Color Tokens）\n| Token | HEX | 用途 |\n|---|---|---|\n| `--ink` | `#0E1B2C` | 主底 · 深海军蓝 |\n| `--navy-2` | `#16283E` | 次级块面/卡片底 |\n| `--navy-3` | `#1E3A5C` | 描边/卡片边框 |\n| `--mist` | `#8FA3B8` | 次要文字 · 灰蓝 |\n| `--paper` | `#F4F1EA` | 主文字 · 暖白 |\n| `--ember` | `#E8A33D` | 强调 · 价格/CTA/灯火 |\n| `--jade` | `#3E9B7A` | 成功 · 确认收货/放款 |\n| `--clay` | `#C05A4A` | 警戒 · 超时退回 |\n\n细线建议 `rgba(244,241,234,0.12)`。\n\n## 3. 版式与网格\n- 商品卡：圆角 12–16px、1px 细描边、大留白；信息层级 图 > 标题 > 信誉 > 价格。\n- 标题：粗字重（600），封面 96px → 商品标题 40px。\n- 正文：常规字重，14–16px 起步，行高 1.6。\n- 价格：一律 ember 琥珀橙胶囊，强化「这是要花钱的地方」。\n- 栅格：封面 16:9（1600×900）、商品图 4:3/3:4；移动端卡片 2 列、间距 16px。\n\n## 4. 组件规范\n### 商品卡\n```\n[商品图 4:3]\n标题（W6 40px）\n插画定制 · 含 3 次修改（mist 小字）\n★★★★★ 4.9 · 成交 12 笔\n[ 2 SPACE ]（ember 胶囊）\n```\n### 信誉模块\n五角星（ember）+ 评分一位小数 + 「成交 N 笔」灰蓝小字，**永远成对出现**——信任不能只给分数不给样本量。\n### 状态标签（交易闭环四态）\n| 状态 | 颜色 | 文案 |\n|---|---|---|\n| 托管中 | navy-3 描边 | 已付款 · 托管中 |\n| 核验到账 | ember | Bot 核验到账 |\n| 已放款 | jade | 已完成 · 已放款 |\n| 已退回 | clay | 超时自动退回 |\n### 按钮层级\n1. 主 CTA：ember 实心胶囊，墨色文字（唯一）\n2. 次按钮：navy-3 描边透明底\n3. 文字链接：mist\n\n## 5. 卖家工作台组件（双边市场追加）\n> 来源：Boss 口径「标准化闲鱼双边市场」——卖家能上架/编辑/卖/收款。同一基调延续，卖家侧是「铺子」，买家侧是「集市」。\n\n### 5.1 上架表单\n- navy-2 圆角卡，label mist 小字（14px），输入框 `--ink` + `--line` 描边，聚焦描边变 ember。\n- 字段：标题（必填）→ 描述（必填）→ 价格（SPACE，右置单位）→ 图片（metafile 虚线框）→ 交付说明（选填）。\n- 须知条：ember 左竖线 + 「上架即上链：提交将创建本商品的链上 PIN，公开可查、不可悄无声息改价」——把「链上留痕」讲成卖点。\n- 提交：ember 实心胶囊「上架我的闲置」；提交中转 mist 描边「正在上链…」。\n- 成功：jade 浅底条「已上架，已在集市可见 ✦ {txid} 可回源」；失败：clay 浅底条给原因。\n\n### 5.2 我的商品（编辑/下架）\n- 商品行：图缩略 + 标题 + 价格 + 状态徽标（在售 ember/交易中 mist/已下架 navy-3 描边）+ 操作组。\n- 编辑走「同 pin 版本升级」：提示条「修改将升级本商品同一 PIN 的版本，历史留痕可查」。\n- 交易中：编辑/下架禁用（mist 40% + 「交易进行中，暂不可改」悬停提示）。\n- 下架：clay 描边 → 确认弹窗「下架后买家不可见，已进行中的交易不受影响」→ 徽标转「已下架」。\n\n### 5.3 店铺页/信誉卡\n- 卡头：卖家头像（圆 48px）+ 名字（W6）+ metaid:// 链接小字。\n- 信任区一行三要素：★ 评分（ember）· 成交 N 笔（mist）· 托管交易（jade 小徽标）。\n- 说明行：「该卖家仅通过可审计托管 Bot 收款，先付款后交付」。\n- 历史成交：商品名 + 金额 + 日期 + 评价星（好评 jade/中评 ember/差评 clay）。\n\n### 5.4 收款记录页\n- 记录行：订单号（等宽摘要）+ 商品 + 金额 + 状态徽标：待放款（navy-3 描边）/已到账（jade）/已退回（clay）。\n- 放款 txid 回源：等比半角字体展示 txid（断行保留全量）+「复制」按钮。\n\n## 6. 参考闲鱼原版风格（Boss 指示 + 设计分析）\n> 说明：本机 playwright 打开闲鱼网页版失败（daemon socket EINVAL，工具环境故障），未直览原版截图；以下基于公开设计分析与二手电商通用范式归纳，供工程席落地 GUI 对照拾取。\n\n### 闲鱼原版可借鉴 5 点\n1. **品牌色=信任锚点**：闲鱼以亮黄（≈#FFC900 系）作品牌记忆点，白底为主、黄色只用于关键动作——「一个颜色撑起品牌」。链上对应 `--ember`，用量克制。\n2. **信息密度＞装饰**：二手交易核心是快速比价——卡片给足字段（图/标题/价格/卖家/成色）。我们商品卡已对齐。\n3. **价格一眼可见**：价格高饱和、卡片内固定位置。我们统一 ember 胶囊固定卡片右下。\n4. **金刚区可亲近化**：闲鱼用 3D 图标+微动画。链上版改用「四规则胶囊」做功能入口视觉锚，保持轻量。\n5. **信任表达前置**：信誉卡提到商品卡右下，天然适配「先付款后交付」。\n\n### 链上化刻意差异\n- 不复制闲鱼的「黄」——`--ember` 是链上夜空的灯火隐喻，不是促销黄；\n- 不做闲鱼式超高信息密度（链上交易需要「可核验感」的呼吸空间）；\n- 不引入社区/鱼塘概念，MVP 只做交易闭环。\n\n## 7. 给前端工程席的落地摘录\n```css\n:root {\n  --ink:#0E1B2C; --navy-2:#16283E; --navy-3:#1E3A5C;\n  --mist:#8FA3B8; --paper:#F4F1EA; --ember:#E8A33D;\n  --jade:#3E9B7A; --clay:#C05A4A;\n  --line:rgba(244,241,234,.12);\n  --radius-card:14px; --radius-pill:999px;\n}\n```\n卡片、信誉、状态标签按第 3、4 节实现，四规则说明页复用封面同款「四规则胶囊」纵向排布。\n\n## 配套视觉资产（阿黄 metafile，已上链）\n- 商品图1 插画定制：metafile://f5dcaedcff96d86e5fdf0a79bc6ad56ca91e31356214750196002c7c560c1cb4i0.png\n- 商品图2 链上动漫第1集：metafile://8d64d290281fa1bd76c63b143f5604b2c91e75476e3393f1f4807d7e9444595ei0.png\n- 商品图3 定制文案：metafile://d7f2709d8f13bb0c3e8076c30240d82adfb4a6391c530dcd4fd44d3278e040edi0.png\n- 市场封面：metafile://a4686f53d63ab5be7ec05d1b32df057932647ac7a3d54cc8f554652866859d50i0.png\n\n> 图由程序化渲染（Python/PIL 超采样抗锯齿）生成，数字精确可复现；渲染脚本随交接包保留。","encryption":"0","createTime":1788882699590,"tags":["链上闲鱼","metaapp","设计规范","5F-Studio"],"attachments":[]}