product-sourcing-capture/直播饰品选品系统_UIUX_Pro_Max_设计系统.md

直播饰品选品系统 UI/UX Pro Max 设计系统

Product DNA

本系统不是通用后台，而是直播饰品买手的 SaaS 工作台。核心任务是把淘宝、小红书竞品线索和 1688 货源放到同一张决策画布里，帮助内部或付费买手快速判断“能不能直播卖、值不值得拿样、供应商是否可靠、利润是否可跑”。

产品气质：精明、明亮、带一点东方饰品感、信息密度高、操作直接。界面要像买手工作室的选品台，而不是灰暗开发后台。

Reference Match

• Airtable：结构化表格、批量选择、视图切换。
• Shopify Admin：商品和订单式运营节奏，操作清楚。
• Notion Database：轻量数据卡片、筛选和状态管理。
• Linear：清晰任务流、紧凑列表和高对比状态。
• Apple Store Online：克制的高级感、图片优先、留白有节奏。

Tokens

Color

• bg: 纸白到浅玉绿，承载长时间工作。
• surface: 温润白、浅米白，用于面板和卡片。
• primary: 翡翠绿，用于主操作、当前状态、关键路径。
• accent: 黄铜金，用于利润、跑量、积分和高价值提示。
• danger: 朱砂红，用于风险、删除、停用。
• info: 松石青，用于采集、插件、链接状态。
• text: 墨黑棕，避免冷灰后台感。
• muted: 低饱和绿灰，用于辅助文字。

Typography

• 标题：系统中文宋体序列，形成饰品/买手感。
• 正文：系统中文黑体序列，保证密集数据可读。
• 数字：衬线数字，用于价格、积分、评分和 KPI。
• 字号：12 / 13 / 14 / 16 / 20 / 28 / 36，按钮和表单最低 14。

Layout

• 桌面：左侧固定业务流程导航，右侧为顶部任务状态、KPI、工作台、筛选台、数据列表。
• 移动端：顶部轻量搜索和操作，底部 6 个一级入口，筛选进入底部弹层。
• 页面宽度：桌面内容保持可扫描，不做满屏灰表格；列表卡片使用稳定网格。
• 间距：4/8px 节奏，核心面板 12-20px，触控目标不小于 44px。

Components

• Sidebar：以业务流程分组，不以技术模块分组。当前项要有清楚指示。
• Topbar：展示当前账号、导出、刷新和产品定位，不抢主任务。
• Module Hero：每个核心模块第一屏说明此页的决策用途和主动作。
• Filter Bench：筛选状态必须可见，包括当前结果数量和已启用筛选。
• Item Card：图片优先，价格、利润、风险、赛道和状态必须同屏可见。
• Bulk Toolbar：只在已选中时出现，批量清理和改状态要比普通操作更醒目。
• Admin Center：管理员统计、兑换码、用户管理分区清楚，危险动作空间隔离。
• Plugin Settings：服务地址、Token 列表、复制配置和积分说明统一放在插件页。

Motion And States

• Hover/pressed：轻微上移或色层变化，150-220ms。
• Focus：保留 3px 高可见 focus ring。
• Disabled：降低透明度并禁用鼠标手势。
• Dialog：使用强遮罩和清晰关闭入口。
• Reduced motion：禁用非必要动画和 transform。

Anti Patterns

• 不做灰暗后台模板。
• 不用一整套单色绿色。
• 不用大面积紫蓝渐变。
• 不让首页第一屏空旷。
• 不用 emoji 作为结构图标。
• 不让登录和注册同时出现。
• 不把插件 Token 和系统地址长期暴露在插件外层。
• 不让移动端出现横向滚动或底部栏遮挡内容。