mosen
e9939ef9dc
Add GitAtlas deploy assets, DATA_FILE support for isolated server data, and port documentation for sourcing.simosen.cn. Co-authored-by: Cursor <cursoragent@cursor.com>
130 lines
6.7 KiB
Markdown
130 lines
6.7 KiB
Markdown
# 直播饰品选品采购 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。
|
|
- 隐藏商品图或用说明文字代替真实控件。
|
|
- 风险和删除用同一个弱提示样式。
|