product-sourcing-capture/直播饰品选品系统_Design_System.md

直播饰品选品采购 SaaS Design System

系统名：Buyer Atelier DS
主原型：Expert Workbench
副原型：Product Story
设计目标：让直播饰品买手在高频筛选、对比、拿样和采购判断中建立速度、信任和掌控感。

Product DNA

• Purpose: 帮助直播饰品团队在开店前完成竞品采集、价格判断、1688 货源匹配、利润测算和拿样决策。
• Primary users: 内部买手、店主、直播运营。
• Frequency: 开店筹备期和上新期高频使用。
• Pressure: 中等偏高，需要快速判断款式是否值得拿样。
• Density: 中高密度，图片、价格、平台、赛道、风险、供应商、状态必须同屏可扫。
• Risk: 中等，误判会带来库存、话术、质量和资金风险。
• Core actions: 采集、搜索、筛选、比较、批量处理、标状态、配置规则、导出。
• Content types: 商品图片、链接、价格、供应商、热度线索、标签、状态、利润数字、风险提醒。
• Device context: 桌面负责批量筛选和配置，手机负责直播现场快速查看与标记。
• Emotional job: 从凭感觉找货，变成知道为什么这个款值得拿样。
• Differentiator: 饰品直播买手采购判断系统，不是收藏夹，也不是泛后台。

Product Archetype

• Primary: Expert Workbench。登录后界面必须优先服务重复操作、密集信息、稳定布局和快速决策。
• Secondary: Product Story。未登录首页和关键空状态需要讲清楚产品价值，并显示饰品行业视觉。
• Density rule: 首页中等密度，工作台中高密度，手机端保留关键信号但减少配置噪音。
• Risk rule: 删除、风险词、功效话术、供应商不确定性必须有显式状态和恢复路径。

Reference Board

1. Shopify Polaris: 商家工作流、资源列表、批量操作、设置页、空状态。
2. Elastic UI: 搜索、过滤、标签、状态、结果列表密度。
3. Apple HIG: 空间克制、移动端触控目标、材质层级。
4. Mobbin: 真实产品登录、移动筛选、设置、账号和采集流程。
5. Tremor: KPI、指标和轻量数据表达。

Art Direction

• Personality: 专业买手、轻奢材质、行动明确、风险克制、直播生意感。
• Layout language: 左侧流程导航，顶部决策条，中部筛选台，主体样品卡/决策表，配置区作为工作室面板。
• Palette: jade 主操作，turquoise 匹配识别，brass 利润机会，cinnabar 风险，paper 工作台底色。
• Materials: 宣纸网格、玉石高光、旧金票据、样品板、细边框和浅阴影。
• Motion: 只用于状态反馈、选择、打开弹窗和批量栏浮出。
• Voice: 短句、业务动词、明确后果，例如“问供应商”“已拿样”“高风险话术”。

Design Principles

1. 先让买手看到款、价、风险和下一步动作。
2. 让筛选和批量操作像工作台，不像后台表单。
3. 风险、利润、拿样状态必须有稳定语义，不只靠颜色。
4. 手机端保留判断能力，减少配置噪音。
5. 视觉要有饰品行业信号，但不能影响高频扫读。

Tokens

• Color: jade 主操作，turquoise 匹配/识别，brass 利润/采购机会，cinnabar 风险，paper 工作台底色。
• Typography: display 使用中文宋体气质，body 使用中文无衬线，number 使用 serif。
• Spacing: 4px base，常用 8/12/16/24/32。
• Radius: 卡片和控件 8px 内，状态 pill 可用胶囊。
• Elevation: 工作卡轻阴影，模态强阴影，不用深色玻璃。
• Motion: 控件反馈 120-180ms，页面/卡片轻入场 220ms，支持 reduced motion。

State Tokens

• Default: paper surface + jade text hierarchy.
• Hover: 轻微上移或边线加强，不改变布局尺寸。
• Focus: turquoise 外描边，必须键盘可见。
• Selected: jade 边线 + 浅青底 + 勾选控件。
• Success: 可跑量、低风险、已完成。
• Warning: 可测试、继续观察、信息待补。
• Danger: 高风险、删除、放弃。
• Empty: 给下一步动作，优先指向采集、插件或规则。
• Loading: 保持原布局尺寸，不闪动工作台。

Layout

• Landing: Product Story，首屏包含产品名、核心动作、饰品视觉和工作台预览。
• Desktop App: 左流程导航、顶部决策栏、KPI、筛选台、样品卡列表。
• Mobile App: 顶部搜索、关键动作、底部流程导航，配置入口下沉。

Components

• BuyerHero: 首页主视觉与产品预览。
• SourcingNav: 业务流程导航。
• SignalKPI: 线索、拿样、货源、匹配组等状态指标。
• FilterBench: 关键词、平台、赛道、动作、状态、标签、价格、货源、风险筛选。
• SampleCard: 商品图片、平台、决策、风险、利润、状态和操作。
• RiskSignal: 低风险/有风险/高风险。
• ProfitSignal: 可跑量/可测试/暂不做。
• BulkActionBar: 多选后浮出批量处理。
• AuthDialog: 单模式登录/注册弹窗。
• RuleEditor: 赛道关键词、风险词、利润模型配置。
• PluginTokenPanel: 插件服务地址与 Token 管理。

Patterns

• Search/filter: 关键词优先，平台/赛道/状态/价格/风险随后。
• Bulk actions: 选择后出现批量栏，删除二次确认。
• Empty state: 给下一步操作，不只显示暂无数据。
• Risk control: 红色只用于风险和破坏性操作。
• Auth: 登录和注册单模式切换，不双表单同屏。
• Mobile: 先看判断信息，再进入配置。

Workbench Patterns

• Decision first: 顶部先回答今天该做什么，再显示统计。
• Filter bench: 筛选台必须有标题和当前语境，不能只是表单堆叠。
• Sample card: 图片、平台、赛道、价格、利润、风险、状态、打开原页必须同卡可见。
• Bulk action: 选择后批量栏浮出；危险操作必须二次确认。
• Config studio: 插件和规则配置使用工作室面板，不使用灰色后台表单。
• Mobile review: 移动端只保留搜索、筛选、状态标记、详情，不放复杂规则编辑在首屏。

QA Criteria

• 首屏 3 秒内能看出这是饰品直播选品采购系统。
• 登录后第一屏必须像买手工作台，不像营销页或通用后台。
• 桌面 1280px 下顶部、导航、KPI、筛选和第一组内容不重叠。
• 手机 390px 下按钮文字不溢出，底部导航不遮住关键操作。
• 风险、利润、选中、空状态不只靠颜色表达。
• 控制台无错误，基础测试通过。

Anti-Patterns

• 灰暗后台模板。
• 紫蓝渐变和深色玻璃。
• 每个 section 都做浮卡或卡片套卡片。
• 满屏等权重 KPI。
• 隐藏商品图或用说明文字代替真实控件。
• 风险和删除用同一个弱提示样式。