Initial release with production deploy config.
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>
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
# 直播饰品选品系统 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 和系统地址长期暴露在插件外层。
|
||||
- 不让移动端出现横向滚动或底部栏遮挡内容。
|
||||
Reference in New Issue
Block a user