19 KiB
19 KiB
铜壶管理系统前端页面 UI 方案
1. 设计定位
本系统虽然是后台管理端，但不建议做成普通灰白色表格后台。UI 视觉建议围绕“铜器仓储 + 茶纸账册”展开，整体风格稳重、清晰、带一点材质感，既符合铜壶业务，也能让商品图片和订单信息更有辨识度。
设计关键词：
- 铜色质感
- 纸感底色
- 深青色信息层
- 大块留白与清晰分区
- 商品图优先、数据次级、操作明确
适用目标：
- 管理员快速维护商品、订单和用户权限
- 客户用户清楚浏览商品详情，不误触编辑功能
- 打包工用户专注查看和完成订单，减少无关干扰
2. 视觉风格建议
2.1 整体风格方向
建议采用“暖铜主色 + 米白背景 + 深青辅助色”的组合：
- 页面大背景使用偏米白、纸张感的浅暖色，不要纯白。
- 核心按钮和高亮区域使用铜棕色，形成品牌识别。
- 目录栏、头部栏和统计图表辅助色使用深青灰，增强层次和稳定感。
- 卡片边框与分割线使用浅铜灰色，避免机械式的纯灰边框。
2.2 字体建议
- 页面标题：Source Han Serif SC
- 正文与表单：Source Han Sans SC
- 数字和价格：IBM Plex Sans
建议规则：
- 页面一级标题偏稳重，使用衬线字体提升识别度。
- 表格、表单、按钮和筛选区域统一使用无衬线字体，保证后台信息密度下的可读性。
2.3 颜色系统
建议使用以下色板：
主背景色 #F4EFE8 米白纸感
面板背景色 #FBF8F3 温和浅底
主标题文字 #2F2923 深墨褐
常规正文 #5B544D 暖灰褐
主品牌色 #A66536 铜棕色
主品牌悬停色 #8F552C 深铜色
辅助深色 #24353A 深青灰
边框颜色 #D9CABB 浅铜灰
成功状态 #56735D 茶绿色
警告状态 #C68A35 琥珀色
危险状态 #B5533D 砖红色
信息状态 #4F6D7A 蓝灰色
2.4 背景与材质建议
- 登录页和系统首页可使用轻微的铜色渐变背景，叠加低透明度斜向纹理。
- 主工作区不建议大面积重纹理，避免影响表格和商品图片识别。
- 卡片和弹层可加入非常轻的毛玻璃感或半透明浅底，但透明度应克制。
2.5 动效建议
- 页面切换：150ms 到 220ms 的淡入上移。
- 卡片 hover：图片轻微放大 1.02 倍，边框从浅铜灰过渡到铜棕色。
- 订单入口：待处理订单数变化时可有一次短促脉冲效果。
- 权限切换或按钮禁用：避免突然消失，使用淡出或骨架切换。
3. 全局布局方案
3.1 整体框架
系统主框架建议保持固定左侧导航，不使用遮挡式弹窗作为主编辑方式。
推荐尺寸：
- 左侧目录栏宽度：260px 到 280px
- 顶部功能栏高度：68px 到 72px
- 主内容区左右内边距：24px 到 32px
- 主卡片圆角：16px 到 20px
布局结构如下：
+-----------------------------------------------------------------------------------+
| 顶部功能栏：面包屑 | 全局搜索 | 待处理订单胶囊 | 当前用户 | 退出登录 |
+---------------------------+-------------------------------------------------------+
| 左侧目录树 | 右侧主内容区 |
| 型号 / 类目 / 款式 | 根据路由显示：商品墙 / 商品详情 / 订单 / 统计 / 用户 |
| 可折叠、可滚动 | 内容区以卡片分块，保留统一标题与操作区 |
+---------------------------+-------------------------------------------------------+
3.2 顶部功能栏设计
顶部栏不只承担导航作用，还承担身份与任务提示：
- 左侧：页面标题、面包屑、当前模块说明
- 中间：全局搜索，可快速搜索 SKU、商品名、订单号
- 右侧：订单胶囊、通知预留位、当前用户头像和用户名、退出登录
- 管理员额外显示“用户管理”快捷入口
3.3 左侧目录栏设计
目录栏建议采用深青灰背景，内容区域使用浅色节点卡片：
- 顶部显示系统 Logo 与“铜壶管理系统”名称
- 中部为树形目录
- 当前选中型号或款式采用铜棕色高亮边条
- 子节点悬停时显示淡铜背景
- 非商品类目使用独立图标，避免和商品类目混淆
4. 关键页面 UI 图方案
4.1 登录页
登录页采用左右分栏，不做普通表单居中页。左侧负责品牌表达，右侧负责登录操作。
页面线框：
+-----------------------------------------------------------------------------------+
| 左侧品牌视觉区 | 右侧登录区 |
| 铜色渐变背景 + 铜壶主视觉 | 标题：欢迎进入铜壶管理系统 |
| 文案：商品、订单、标签、权限统一管理 | 账号输入框 |
| 小字：内部业务系统 | 密码输入框 |
| | 记住登录状态 |
| | 登录按钮 |
| | 底部：系统版本 / 技术支持 |
+-----------------------------------------------------------------------------------+
设计要点：
- 左侧可放置半透明铜壶轮廓图、铜纹理和一句品牌文案。
- 右侧登录卡片宽度建议 420px 左右，表单区上紧下松，减少压迫感。
- 登录按钮使用铜棕色实底，按钮宽度铺满表单区。
4.2 商品中心页
这是系统访问频率最高的页面，视觉重点应放在“筛选效率”和“商品图浏览效率”上。
页面线框：
+-----------------------------------------------------------------------------------+
| 顶部功能栏 |
+---------------------------+-------------------------------------------------------+
| 左侧目录树 | 页面标题：商品中心 [新增商品] [批量导入] |
| 1号普通壶 +-------------------------------------------------------+
| |- 花纹A | 筛选栏：关键词 | 状态 | 类目 | 价格区间 | 重置 |
| |- 花纹B +-------------------------------------------------------+
| 2号锤纹壶 | 商品卡片网格 |
| 宣传物料 | +-----------+ +-----------+ +-----------+ |
| | | 缩略图 | | 缩略图 | | 缩略图 | |
| | | 名称 SKU | | 名称 SKU | | 名称 SKU | |
| | | 价格 库存 | | 价格 库存 | | 价格 库存 | |
| | | 状态 +加购 | | 状态 +加购 | | 状态 +加购 | |
| | +-----------+ +-----------+ +-----------+ |
| | 分页 / 懒加载区 |
+---------------------------+-------------------------------------------------------+
设计要点：
- 卡片图片区域占比高于文字区，建议图片区高度 170px 到 190px。
- 卡片底部操作固定，避免每张卡片按钮高度不一致。
- 状态标签使用实色小胶囊，不要做成大面积色块。
- “加入订单”按钮建议做成圆角小按钮，使用铜色描边或实底。
4.3 商品详情页
商品详情页是管理员维护商品的核心区域，同时也是客户用户查看商品的只读页面，因此必须兼顾编辑态和只读态。
页面线框：
+-----------------------------------------------------------------------------------+
| 顶部功能栏 |
+---------------------------+-------------------------------------------------------+
| 左侧目录树 | 返回商品中心 / 商品详情 |
| +-------------------------------------------------------+
| | 标题：1号普通壶 - 花纹A 状态标签 只读/可编辑 |
| +---------------------------+---------------------------+
| | 基础资料卡 | 图片管理卡 |
| | SKU | 主图预览 |
| | 名称 | 原图上传 |
| | 价格 | 详情图列表 |
| | 库存 | 主图设置 / 排序 / 删除 |
| | 状态 | |
| +---------------------------+---------------------------+
| | 标签文件卡 | 操作卡 |
| | 已上传模板 | 保存 |
| | 下载模板 | 返回 |
| | 重新上传 | 加入订单 |
+---------------------------+-------------------------------------------------------+
设计要点：
- 页面使用双列卡片布局，左侧偏业务字段，右侧偏图片和附件。
- 管理员模式显示完整表单和上传按钮。
- 客户用户进入时，右上角显示“只读查看”标签，页面切换为单列图片画廊，不展示基础资料、标签文件和下载按钮。
- 管理员与可编辑用户的商品图片区支持主图大图预览，下方横向缩略图切换，并可直接拖动缩略图调整多图顺序。
4.4 订单列表页
订单列表页以效率为主，避免过多视觉装饰，但需要通过卡片统计和状态标签增强可读性。
页面线框：
+-----------------------------------------------------------------------------------+
| 顶部功能栏 |
+-----------------------------------------------------------------------------------+
| 页面标题：订单中心 [全部订单] [未完成] [已完成] [月度统计] [年度统计] |
+-----------------------------------------------------------------------------------+
| 汇总卡片：未完成订单数 | 今日出货数 | 本月订单金额 | 待下载标签订单数 |
+-----------------------------------------------------------------------------------+
| 筛选栏：订单号 | 快递单号 | 日期范围 | 状态 | 关键字 | 搜索 | 重置 |
+-----------------------------------------------------------------------------------+
| 订单表格 |
| 订单号 | 创建时间 | 款式数 | 总数量 | 总价 | 状态 | 快递单号 | 操作 |
| 查看详情 | 编辑 | 删除 | 完成订单 |
+-----------------------------------------------------------------------------------+
设计要点：
- 未完成订单使用浅琥珀标签，已完成订单使用茶绿色标签。
- 打包工用户登录后，页面只保留与订单处理相关的操作按钮。
- 管理员可见全部订单操作与统计入口。
4.5 订单详情页
订单详情页建议做成“上摘要、下明细、右操作”的三段结构，但在窄屏下改为纵向堆叠。
页面线框：
+-----------------------------------------------------------------------------------+
| 返回订单列表 / 订单详情 |
+-----------------------------------------------------------------------------------+
| 订单摘要卡：订单号 | 状态 | 创建时间 | 快递单号 | 完成时间 | 总金额 |
+-----------------------------------------------+-----------------------------------+
| 商品明细表 | 订单操作卡 |
| 型号 | 款式 | SKU | 单价 | 数量 | 小计 | 标签下载 |
| ... | 填写快递单号 |
| ... | 完成订单 |
| ... | 删除订单（管理员可删已完成订单） |
+-----------------------------------------------+-----------------------------------+
| 操作时间线：创建订单 -> 修改订单 -> 完成订单 |
+-----------------------------------------------------------------------------------+
设计要点：
- 右侧操作卡做成固定吸附区，方便打包工在查看商品明细时直接完成操作。
- 标签下载按钮放在操作卡顶部，突出业务关键性。
- 已完成订单时，普通用户的编辑类按钮禁用并替换为灰色只读提示；管理员保留删除按钮。
4.6 用户管理页
用户管理页仅管理员可见，界面需要更偏“系统管理”，减少商品图和装饰性内容。
页面线框：
+-----------------------------------------------------------------------------------+
| 页面标题：用户与权限管理 [新增普通用户] |
+-----------------------------------------------------------------------------------+
| 筛选栏：用户名 | 用户类型 | 状态 | 权限关键词 | 搜索 | 重置 |
+-----------------------------------------------------------------------------------+
| 用户表格 |
| 用户名 | 显示名 | 用户类型 | 状态 | 最近登录时间 | 权限摘要 | 操作 |
| 编辑 | 重置密码 | 启停 | 分配权限 |
+-----------------------------------------------------------------------------------+
| 权限分配抽屉 / 侧栏 |
| [商品查看] [商品编辑] [附件上传] [订单查看] [订单处理] [订单完成] [统计查看] |
| [用户管理] |
+-----------------------------------------------------------------------------------+
设计要点：
- 权限分配不要用过深层级树，建议使用分组复选框，更适合当前两类用户体系。
- 管理员账号默认不可删除，只可重置密码或停用普通用户。
4.7 统计页面
统计页面建议比订单页更“看板化”，但仍需保留数据明细表。
页面线框：
+-----------------------------------------------------------------------------------+
| 页面标题：经营统计 [月度] [年度] 年份选择 / 月份选择 / 类目筛选 |
+-----------------------------------------------------------------------------------+
| 指标卡：总销量 | 总销售额 | 销量最高款式 | 平均客单价 |
+-----------------------------------------------------------------------------------+
| 左侧图表：销量趋势 / 类目占比 | 右侧图表：款式销量排行 |
+-----------------------------------------------------------------------------------+
| 明细表：款式 | 数量 | 单价 | 小计 | 占比 |
+-----------------------------------------------------------------------------------+
设计要点：
- KPI 卡片用浅铜色与浅青色交错，不建议使用高饱和商务蓝。
- 图表建议用铜棕、茶绿、蓝灰三组主色，保证风格统一。
5. 不同用户的 UI 差异方案
5.1 管理员用户
管理员显示全部导航与全部操作：
- 商品中心
- 订单中心
- 统计页面
- 用户管理
- 商品编辑、图片上传、标签上传、删除操作全部可见
5.2 客户用户
客户用户建议采用明显的只读体验：
- 仅显示商品中心及被授权的只读页面
- 顶部显示“只读访问”小标签
- 商品详情中隐藏保存、上传、删除、加入订单等编辑按钮
- 页面风格仍保持完整，不要因为只读而显得残缺
5.3 打包工用户
打包工用户应减少商品管理干扰，只保留订单处理主路径：
- 左侧导航重点显示订单中心
- 商品相关页面如被授权访问，默认为只读
- 订单列表和订单详情中的“完成订单”按钮突出显示
- 快递单号输入框与标签下载区在视觉上应优先于次级信息
6. 组件级设计建议
6.1 卡片组件
- 使用 16px 到 20px 圆角
- 卡片头部与内容区之间留足 16px 到 20px 间距
- 卡片阴影不宜过深，建议采用浅阴影加浅边框
6.2 按钮体系
建议至少区分四类按钮：
- 主按钮：铜棕实底，用于保存、登录、完成订单
- 次按钮：白底铜边，用于返回、重置、重新上传
- 危险按钮：砖红色，用于删除
- 幽灵按钮：透明底，用于轻量级辅助操作
6.3 状态标签
- 可售：茶绿色
- 停产：深灰褐
- 库存多：蓝灰色
- 库存少：琥珀色
- 已完成订单：茶绿色
- 未完成订单：琥珀色
- 只读用户：浅蓝灰标签
6.4 表格设计
- 表头采用浅铜灰底色，不用纯灰。
- 行 hover 背景使用极浅米色。
- 金额字段右对齐，数量字段居中，文本字段左对齐。
7. 响应式与适配建议
虽然系统主要面向桌面端，但仍建议兼容常见笔记本与平板宽度：
- 1440px 以上：双列卡片与完整右侧操作区
- 1200px 到 1439px：商品详情页仍可双列，但图片区缩小
- 992px 到 1199px：订单详情页改为上下布局，右侧操作卡下沉到底部
- 768px 到 991px：左侧目录改为抽屉式切换，顶部功能区保留核心入口
移动端不建议作为一期重点，但登录页和订单详情页应避免完全不可用。
8. 推荐前端实现方式
为了让设计落地更顺畅，建议前端实现时先建立统一设计变量：
颜色变量：背景色、品牌色、状态色、边框色、文字色
尺寸变量：顶部栏高度、侧栏宽度、卡片圆角、间距、阴影
权限变量：只读态、可编辑态、禁用态按钮样式
建议将以下部分优先组件化：
- 顶部功能栏
- 左侧树形导航
- 商品卡片
- 状态标签
- 订单状态栏
- 权限按钮包装组件
- 用户权限分配面板
9. 最终建议方案
如果只做一版第一期 UI，建议优先采用以下组合：
- 登录页使用“品牌视觉区 + 登录卡片”的双栏布局。
- 主系统采用“深色左侧栏 + 浅色内容区 + 铜色主按钮”的稳定结构。
- 商品中心强调图片与筛选效率。
- 商品详情页采用双列卡片结构，同时支持编辑态与只读态。
- 订单详情页突出“标签下载”和“完成订单”两个核心操作。
- 用户管理页采用清晰表格加权限抽屉，不做复杂权限树。
这套方案适合当前的业务复杂度，也方便后续直接落地到 Vue 组件开发。