设计原则
在「学习 → 认证 → 接单 → 交付 → 结算」这条链路上，用户随时可能中断、随时要确认钱的去向。设计要让每一步都可信、可追、可退。
担保交易、资金托管、验收放款这类关键节点必须显性化：用时间轴、状态标签、金额明细把「钱在哪」讲清楚，而不是藏进二级页。
超级个体的核心动机是「我变强了、我赚到了」。学习进度、证书、接单量、收入必须持续可见，用进度条、等级、证书卡片做正反馈。
小程序端每个页面只解决一个任务：这一页是学课、是接单、还是验收。主按钮唯一，次要操作降级为文字按钮。
色彩体系
品牌主色取自「超级番茄」，用于主行动点（CTA）、选中态、关键数据强调。功能色仅用于语义表达，不用于装饰。
品牌与主色
功能色
中性色阶
端主题色分工
| 端 | 主色 | 色值 | 用意 |
|---|---|---|---|
| 小程序端（C 端 / 达人） | 番茄红 | #FF4D2E | 转化导向，CTA 强 |
| Web 官网 | 番茄红 | #FF4D2E | 与 C 端一致，品牌统一 |
| 平台运营后台 | 番茄红 | #FF4D2E | 平台侧统一标识 |
| 企业采购门户 | 企业蓝 | #2E7CF6 | B 端理性、稳重 |
| 园区方后台 | 园区绿 | #0FA968 | 空间 / 增长语义 |
| 讲师工作台 | 知识紫 | #7C5CE0 | 内容 / 创作语义 |
| 服务商工作台 | 专业金 | #C8912B | 专业服务 / 资质语义 |
字体与层级
中文优先使用系统字体：PingFang SC / Microsoft YaHei。数字与金额统一使用等宽或半等宽数字（font-variant-numeric: tabular-nums），便于纵向对齐比价。
小程序端层级
Web 端层级
间距、圆角与阴影
间距采用 4px 基准栅格，常用档位 4 / 8 / 12 / 16 / 20 / 24 / 32。圆角按容器层级递进，阴影保持克制（后台页面尽量用描边代替阴影）。
间距 Token
圆角与阴影
基础组件
组件按「主行动点唯一」原则使用：同一视觉区域内只允许一个主按钮，其余降级为次要按钮或文字按钮。
按钮
| 类型 | 用途 | 小程序端 | Web 端 |
|---|---|---|---|
| 主按钮 | 页面唯一主行动点 | 高 48px / 胶囊 24px 圆角 / 通栏 | 高 40px / 10px 圆角 / 自适应 |
| 次要按钮 | 备选路径（跳转、沟通） | 描边主色 / 高 44px | 描边或灰底 / 高 38px |
| 危险操作 | 退款 / 仲裁 / 冻结 | 不与主按钮同色系相邻，需二次确认弹窗 | |
标签与状态
表单
卡片与进度
表格（Web 后台）
状态设计与异常
原型常被忽略的部分，恰是开发最容易做错的地方。以下四种状态每个页面都必须有明确实现。
给出下一步动作按钮，而不是只写「暂无数据」
提供跳转认证或切换账号的入口
说明原因 + 重新支付入口，避免用户重下订单
关键流程必须有确认与回执
| 场景 | 必须的反馈 | 禁止 |
|---|---|---|
| 支付 / 充值 | 金额、档位、会员折扣叠加后的实付、支付渠道 | 只显示原价、不显示折后价 |
| 确认验收 | 二次确认弹窗 + 放款金额 + 达人实收 | 一键直接放款、无金额提示 |
| 确认考核 / 提交作业 | 提交次数、截止时间、评审周期 | 提交后无任何回执 |
| 退款 / 仲裁 | 受理时效、介入主体、可能结果 | 只给一个「申请成功」 |
| 冻结 / 驳回 | 具体原因 + 申诉入口 | 只显示「操作失败」 |
多端差异规范
同一个平台、七类界面。差异只体现在信息密度、导航形态与主色上，组件与状态语义必须完全一致。
| 维度 | 小程序端 | Web 官网 | 管理 / 角色后台 |
|---|---|---|---|
| 导航形态 | 底部 TabBar 5 项 + 二级页返回 | 顶部横向导航 + 锚点滚动 | 左侧分组菜单 + 顶部面包屑 |
| 栅格 / 宽度 | 375px 基准，单列为主 | 最大 1180px，2–4 列 | 内容区自适应，表格为主 |
| 信息密度 | 低，卡片化，一屏一事 | 中，图文混排 | 高，表格 + KPI + 筛选 |
| 主操作位置 | 页面底部固定 / 卡片右下 | 首屏 CTA / 模块底部 | 页头右侧（新建 / 导出） |
| 数据展示 | 进度条、标签、金额大字 | 对比表、价格卡 | KPI 卡 + 表格 + 分页 + 图表 |
| 典型页面 | 订单详情担保时间轴、验收评价 | 会员定价与权益对比 | 结算分账、风控预警、对账确认 |
可访问性与内容规范
面向的用户里包含大量待业转行、年龄跨度大的超级个体，可读性与容错要求比常规 C 端产品更高。
正文文字与背景对比度不低于 4.5:1；次要说明文字不低于 3:1。禁止纯灰 #C9CDD4 以下作为正文色。
小程序端可点区域不小于 44×44px；列表项整行可点；相邻可点元素间距不小于 8px，避免误触。
用「你能得到什么」而非功能名。示例：「学完可接海报单」优于「课程完成后解锁接单权限」。
金额与合规文案（不可省略）
| 位置 | 必须展示 |
|---|---|
| 所有价格展示位 | 标注「参考价 / 待确认」，避免被认定为最终报价 |
| 会员权益页 | 权益范围、有效期、不可退换说明 |
| 充值页 | 额度消耗规则、余量、退费规则、发票说明 |
| 分销相关页 | 佣金比例待合规确认、二级分销合规边界提示 |
| 担保交易页 | 资金托管主体、放款条件、仲裁时效 |
| 沟通场景 | 禁止脱离平台交易的提示 |