83 lines
3.1 KiB
Markdown
83 lines
3.1 KiB
Markdown
|
# Design System
|
||
|
|
|
||
|
|
## Overview
|
||
|
|
|
||
|
|
HashMall 客服前台采用轻量、克制的移动产品界面。用户在商城浏览或订单处理过程中进入，因此页面应像商城内部的原生工具，而不是独立活动页。默认使用浅色主题，消息阅读区保持低干扰。
|
||
|
|
|
||
|
|
## Color
|
||
|
|
|
||
|
|
- Brand primary: `#7934F6`
|
||
|
|
- Brand pressed: `#6426D8`
|
||
|
|
- Brand soft: `#F2EBFF`
|
||
|
|
- Page background: `#F5F5F7`
|
||
|
|
- Surface: `#FFFFFF`
|
||
|
|
- Primary text: `#1A1A1D`
|
||
|
|
- Secondary text: `#5F6068`
|
||
|
|
- Muted text: `#777983`
|
||
|
|
- Divider: `#E7E7EC`
|
||
|
|
- Success: `#168A5B`
|
||
|
|
- Warning: `#A45A00`
|
||
|
|
- Error: `#C93636`
|
||
|
|
|
||
|
|
品牌色只用于主按钮、本人消息气泡、焦点和少量状态标识。客服消息使用白色表面和清晰正文色。
|
||
|
|
|
||
|
|
## Typography
|
||
|
|
|
||
|
|
使用平台系统无衬线字体。H5 优先 `-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`，小程序沿用系统字体。
|
||
|
|
|
||
|
|
- Page title: 17px / 600
|
||
|
|
- Section or state title: 16px / 600
|
||
|
|
- Message body: 15px / 400, line-height 1.55
|
||
|
|
- Supporting text: 13px / 400
|
||
|
|
- Caption and timestamp: 12px / 400
|
||
|
|
|
||
|
|
消息正文允许换行和长字符串断行，不使用装饰性字体。
|
||
|
|
|
||
|
|
## Layout
|
||
|
|
|
||
|
|
- 页面采用纵向三段结构：状态/导航、可滚动消息区、固定输入区。
|
||
|
|
- 内容宽度在桌面 H5 最大 720px，移动端占满视口。
|
||
|
|
- 页面横向安全间距 16px，气泡最大宽度约 76%。
|
||
|
|
- 使用 4、8、12、16、24px 的间距节奏。
|
||
|
|
- 输入区适配底部安全区和软键盘，不用固定像素高度锁死页面。
|
||
|
|
|
||
|
|
## Components
|
||
|
|
|
||
|
|
### Message bubble
|
||
|
|
|
||
|
|
- 本人消息：紫色实底、白字，圆角 14px，右上角保留较小圆角以区分方向。
|
||
|
|
- 客服消息：白色实底、深色文字，可使用 1px 中性边界，不叠加宽阴影。
|
||
|
|
- 气泡内文本可选中；URL、图片、卡片按明确组件渲染。
|
||
|
|
|
||
|
|
### Composer
|
||
|
|
|
||
|
|
- 白色表面与顶部细分隔线。
|
||
|
|
- 文本输入框使用中性浅灰背景，圆角 12px。
|
||
|
|
- 图片与更多操作使用至少 44px 的触控区。
|
||
|
|
- 发送按钮使用品牌色；空文本时为明确禁用状态。
|
||
|
|
|
||
|
|
### Context card
|
||
|
|
|
||
|
|
- 商品或订单上下文在输入区上方单层展示。
|
||
|
|
- 使用缩略图、两行标题和一组关键元数据，不嵌套卡片。
|
||
|
|
- 提供“发送”与“移除”两个清晰动作。
|
||
|
|
|
||
|
|
### Status feedback
|
||
|
|
|
||
|
|
- 连接中、离线、轮询中显示在顶部状态条，状态文字与图标同时变化。
|
||
|
|
- 发送失败在对应消息旁展示“重新发送”，不使用全屏弹窗。
|
||
|
|
- 首屏使用消息骨架，空状态提供简短欢迎语和可执行提示。
|
||
|
|
|
||
|
|
## Motion
|
||
|
|
|
||
|
|
- 状态切换和新消息定位使用 150 至 220ms 的 ease-out。
|
||
|
|
- 不做页面入场编排或弹跳动画。
|
||
|
|
- 系统启用减少动态效果时取消非必要过渡。
|
||
|
|
|
||
|
|
## Responsive and platform behavior
|
||
|
|
|
||
|
|
- H5 与微信小程序均使用 uni-app 原生组件。
|
||
|
|
- Socket 使用 `uni.connectSocket`，图片使用 `uni.chooseMedia`/兼容接口和 `uni.previewImage`。
|
||
|
|
- H5 处理 `100dvh` 与 iOS 软键盘；小程序处理 `safe-area-inset-bottom`、导航栏和 `cursor-spacing`。
|
||
|
|
- 不使用浏览器全局 `WebSocket`、DOM 文件选择器或 iframe 作为核心能力。
|