产品规范文档

概述：

通用交互规范目的是保证整站的交互体验的一致性。并且保证一些体验较好的交互方式能在各个模块中得以使用，从而保证产品设计的一致性，提升整体产品质量，减少返工成本。

弹窗

分类

• 提示弹窗
• 确认弹窗
• 操作弹窗

提示弹窗

• 按钮表现：
  • 确认按钮：主题色
  • 取消按钮：白色
  • 关闭按钮：可点击

确认弹窗

修改确认弹窗

• 文案：默认为【您的修改尚未保存，确定要离开吗?】，可根据实际情况定制

• 按钮表现：

  • 确认按钮：主题色
  • 取消按钮：白色
  • 关闭按钮：可点击

• 取消/关闭时，前置界面状态不变更

• 确定时：继续下一个流程

操作弹窗

打开时

• 按钮表现：
  • 确认按钮：置灰禁用
  • 取消按钮：白色
  • 关闭按钮：可点击

保存时

• 按钮表现：
  • 确认按钮：
    • 任务耗时：
      • 文案：保存中...
      • 图标：loading
      • 样式：置灰禁用
    • 任务不耗时：
      • 主题色
  • 取消按钮：置灰禁用
  • 关闭按钮：不可点击

保存结束

• 关闭弹窗
• 信息回显：
  • 当修改产品、订单等列表时，若弹窗修改的内容包含列表字段，则需要回填修改内容。

点击关闭/取消时

• 按钮表现：
  • 确认按钮：主题色
  • 取消按钮：
    • 样式：白色
    • 点击：调用【修改确认弹窗】，沿用其规范
  • 关闭按钮：
    • 样式：可点击
    • 点击：调用【修改确认弹窗】，沿用其规范
• 信息回显
  • 当修改弹窗内容修改操作，可以直接生效而不需要点击保存按钮时，对应信息需要回填到前一个界面。

数值类

对于销量，库存这类整数型数据： 加减：只能整数，最小值1，调整单位1 乘除：允许小数，最小值1，调整单位0.01

对于商城价，市场价这类允许小数类型的数据 加减：允许小数，最小值0.01，调整单位0.01 乘除：允许小数，最小值1，调整单位0.01

信息展示类

时间

默认YYYY-MM-DD hh:mm:ss的格式展示，即2024-08-15 19:00:00的方式

价格

默认带货币符号，且保留2位小数，超过2位则四舍五入，例如：$12.33

数值

• 简化形式:
  • 10
  • 100
  • 1k: 1000
  • 2M: 200W
• 普通形式：默认保留2位小数，且抹零处理，例如：11111.22

大小

一般用于文件大小展示，如果文本，常见于如下：

• 0.5kb
• 500kb
• 5.33MB
• 5.34GB
• 55.22TB

列表类

状态

• 展示态：初始加载的状态
• 搜索态：通过搜索进行展示的状态

交互规范

状态	展示	搜索
初始化	拉取初始数据	拉取搜索后的数据
新增	新增结束后，保持当前状态，重新拉取搜索的数据	新增结束后，保持当前状态，重新拉取搜索的数据
修改	修改后，同新增逻辑一致	同左
删除	删除后，同新增逻辑一致	同左

属性顺序

默认按照定义的某个维度进行排序，常见的指标有单不限于：

类型	排序逻辑
数值	根据实际场景选择asc还是desc，默认为asc，例如从上到下为1，2，3...之类的
时间	默认是最新在最前面，推荐按时间维度做排序
文本名称	中文名称拼音排名的性能不好，默认按照ASCII即可

选中时的交互

操作	是否保持选中状态	理由
排序	取消	排序后，原先选中的项可能分散在不同的位置。不利于理解
切换视图类型	保持	因为此时列表项内容不变，只是展示形式变，比如从列表变成表格
搜索	输入框获取焦点时，保持。回车进行搜索后，取消选中	搜索结果集不确定会展示之前勾选过的选项

文件管理类

实体

• 文件：普通文件
• 目录：包含目录和文件的目录

交互规范

名称	目录	文件
展示	当前目录展示目录和文件两种示例，子目录在前，子文件在后	文件预览图，文件名称，文件后缀
删除	删除后，连同其下的子目录和文件都删除	单纯删除文件即可
回收站	默认保留7-30天的删除记录	同左
修改名称	修改后静默同步数据，再更新界面名称	同左
移动	修改后静默同步数据，再更新界面。	同左

排序

字段	目录	文件
名称	按照ascii	同左
大小	默认最大	按照数值顺序
时间	默认最新最前面	同左
类型	都是目录类型，按照其他维度排序	按照类型名称的ASCII

分页类

分页应当包含如下信息：

name	desc	404的场景
页码	从1开始	1
页数	从1开始	1
一页的尺寸	默认25	同左
本页数量	从0开始，<=一页的尺寸	0
共多少项	从0开始	0
对于404的另一种处理：隐藏掉分页

1、场景

（1）  新增

管理后台新增采用【弹窗】形式

● 提交时需对必填字段进行【空值】（空格）判断

● 提交时需对主要字段进行【重复值】判断，如：会员手机号码、产品名称

● 新增内容提交失败后，须【保留用户修改的内容】，以便再次修改提交

● 新增内容提交成功返回到主页面时，主页面需【刷新】

● 遵循表单规范（即第5点）

（2）修改

● 修改完成后须【回到原记录所在位置】，且刷新显示修改后的值

● 修改内容提交失败后，须【保留用户修改的内容】，以便再次修改提交

● 在查询条件下修改后返回，如【不满足查询条件则不显示】

● 需对主标识字段进行【重复值】、【空值】（空格）判断

● 遵循表单规范（即第5点）

（3）删除

当删除一条或多条记录，要求：

● 必须有【确认删除】的提示信息

● 删除成功后刷新，【不显示删除的记录】

● 删除成功后，返回【原记录所在页面】，如果原记录所在页不存在时，则返回【上一页】

● 当被删除的记录与其他记录存在关联时，请示需求界面给予【不允许删除】、跟【关联提示】等信息，如以下存在有关联的删除：

i. 会员等级：关联有会员、关联用户权限，不允许删除

ii. 预约记录：未开单的预约支付订单，不允许删除

iii.订单记录：未收款、未发货、已发货的订单，不允许删除

iv.会员标签：关联用户权限，不允许删除

（4）查询

当按照条件查询时，要求：

● 每次查询后【保留当前查询条件】

● 通过查询条件筛选出的结果，通过结果进入到详情页，再返回时【需保留筛选条件以及筛选结果】，返回至前一结果页

● 当未查询到任何记录时，需给予未查找到相关记录的提示信息

● 除了PM明确要求不需要外，列表都需提供【模糊查询】及【组合查询】功能

● 注意：目前会员端查询已接入中台，之后会员端新加查询功能也需【接入中台查询组件】

（5）表单

● 及时提示：需对文本输入框字段格式、长度、必填等进行校验，给予【及时提示】

（ PM无明确要求，则不做自动纠正）

i. 必填字段：输入框不能为空提示，如“产品名称不能为空”

选择器/单选/多选不能为空提示，如“请选择员工职务”

ii. 字符长度：超出长度范围提示，如“产品名称最多可输入30个字”

iii. 数值范围：超出数值范围提示，如“库存不能小于0”或“库存不能大于9999999”

iv. 特定格式：特定格式（手机号、身份证等）校验，如“请输入正确的手机号码”

● 提交后提示：需对主标识字段、下拉框/上传字段必填等进行校验，给予【提交后提示】

i. 重复值：唯一性校验提示，如“产品名称已存在”

ii. 必填字段：图片、视频上传不能为空提示，如“请上传视频”

● 长表单页，提交校验表单后，需要【定位到出错的表单项】

（6）跳转

用于规范页面链接是采用新窗口打开还是本窗口打开。

● 本窗口打开：查询结果、上下翻页、内容保存、详情页面等操作在本窗口打开

● 新窗口打开： 开单页、操作引导跳转，需中断当前操作时的跳转项在新窗口打开

（7）图片上传

● 图片上传限制：需限制可上传张数、图片格式jpg/bmp/png/gif，图片大小统一不超过10M

（注意：jpeg格式也要支持上传，gif为新增支持格式）

● 图片支持上传多张时，上传图片需支持单次可【多选图片进行上传】（PC和小程序同理）

● 图片上传后缩略图【等比例显示】，支持【预览】图片

● 商品类图片上传（如服务、产品、积分商品）为非必填，不填时可显示替代图片【LOGO图】，当未上传LOGO图时，显示【默认替代图】。优惠券积分商品除外，优惠券积分商品未上传时显示默认替代图

（8）视频上传

● 视频上传限制：需限制上传数量、视频格式mp4，视频大小不超过300M

● 视频上传后支持【预览】视频

（9）列表排序

后台列表的排序多数按照某个时间的顺序或者倒序进行排列；当然也不排除需要有其他排序条件，例如有特殊说明的数据需要置顶等

● 新增产品/服务/卡项/活动等，默认排序是按【创建时间由近到远】的顺序进行排列

● 订单/预约记录/退款记录等，默认排序按记录【生成时间由近到远】进行排列

（10）导出

导出按钮位置统一放在列表右上角

● 导出字段，视具体需求要求而定

注意：列表字段受高级配置影响时，当字段隐藏，导出时也需去除字段

如预约记录中“服务场地”，在服务场地关闭时，列表显示和导出同步隐藏字段

● 未筛选时默认【导出全部】，筛选后导出为【筛选内容】

（11）上下架

● 服务/商品/卡项等支持上下架的数据

在新增时可以选择【保存】或【保存并上架】，修改时只保留【保存】 ● 未上架时【上架】按钮放在第一位置；上架后【下架】按钮放至更多，hover时颜色为红色

（12）选择数据

● 下拉框选择数据：获取数据需支持【滚动加载】

● 列表选择数据

i. 【分页】形式展示 （PM有明确要求时除外）

ii. 不可选数据需【置灰】处理，hover提示不可选理由

iii.选择数据为多选时，需支持【跨页勾选】

（13）批量操作

● 主列表的批量操作在勾选【复选框】或【批量操作】按钮时唤醒底部操作栏

● 复选框数据选择需支持【跨页勾选】，全选时可选择【全选全部】或【全选当页】

● 底部批量操作按钮需选中数据可操作时，对应按钮才显示为可用状态，操作后【只对满足操作条件的数据生效】

（PM有明确要求时除外）

（14）装修-穿梭框

● 未达数量限制时，新增后数据保留为【已选数据】（即右侧）

● 达限制数量时，新增后保存提示内增加说明，且新添加数据保留到【可选数据第一条】（即左侧）

（15）小程序版本兼容

新功能需发布新版本才可使用时，需做兼容处理；兼容方式分为两种，【限制功能启用】和【增加引导提示，但不限制功能启用】

● 对不涉及太多试用流程的功能，采用【限制功能启用】方式兼容，如“服务规格”

● 对高价值及会影响试用体验的功能，采用【增加引导提示，但不限制功能启用】方式兼容，如“扫码点餐”

（16）直分销

● 分销链接：注意【分销教程链接等转换】

获取oem链接接口：OemPortalWebApp.getOemViewUrl(xxxx)

代理商客户-未接域名：https://adm.webportal.top/sys/view.jsp?id=

代理商客户-已接域名：https://~/sys/view.jsp?id=

● 分销逻辑：没有勾选账户服务时，不能出现【升级】按钮

2. 文本格式

用于规范整个产品中所有不同层级不同功能的页面应该使用的标题和文字格式

● 标题名称/关键文字：超出显示范围时采用省略号显示，hover需可查看全称

● 手机号码：统一为手机号标准格式138 0000 0000，如图所示

● 日期格式：统一为2020-01-01 18:00

● 金钱格式：PC端统一为￥0.00；会员端统一为￥0，去小数点后末尾的0

3. 输入限制

（1）数值输入限制

● 金额类数字输入（如服务价格、推广员余额奖励）范围为【0.01~9999999.99】

会员端充值除外，按档位储值规则和会员端小程序充值金额限制范围为【0.01~5000】

● 数值类（如积分获取比例、虚拟成团数）数字输入范围为【1~99999】

（2）文本输入限制

文本输入限制交互统一规范：超出字数范围可继续输入，同时出相应提示。

除PM要求，遵循以下限制规则：

● 富文本输入限制20000字

● 多行文本输入（除PM要求）限制120字

● 单行文本

i. 产品/服务/卡项等商品名称输入限制30字

ii. 进店有礼、拼团等活动名称输入限制20字

iii. 表单项单行文本输入限制10字

4. 交互组件

（1）提示组件类

● hover提示：pc 可点击，hover有反馈的鼠标要变成手

● Tooltip文字提示：用于简短的文字提示

● Popover气泡卡片：用于较复杂或重要的进一步描述和操作

（2）表单组件类

● 输入框：统一加上字数限制的显示；超过字数可继续输入，但输入框需有超过字数的提示

● 输入框自动去掉前后空格

● 只能填整数的输入框键盘不允许输入小数点，像库存、预约人数这种输入框

（3）弹窗

● 弹窗类型目前分为：①操作类的弹窗 ② 查看类的弹窗

● 弹窗遮罩：

① 操作类的弹窗遮罩：点击黑色遮罩不可关闭

② 查看类的弹窗遮罩：点击黑色遮罩可关闭

③ 其他遮罩：如 新手指引，示需求而定