# 直播饰品选品采购 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。 - 隐藏商品图或用说明文字代替真实控件。 - 风险和删除用同一个弱提示样式。