前端小程序 #5

已关闭
cz2026-05-20 15:46:04 +08:00创建 · 0 评论
协作者

模块:小程序 → 产品详情页 →「出行备品」组件
类型:体验优化(UI / 交互)
优先级:低 - 中

一、现象描述
「出行备品」模块当前一屏仅展示 3 个 SKU(如截图:晕车贴 / 创口贴 / 一次性牙线),实际数据可能多于 3 个,需要横向滑动才能查看后续内容。但当前 UI 无任何可滑动提示(无渐隐遮罩、无指示器、无引导文案),用户无法感知右侧还有更多内容,存在严重的信息隐藏问题。

二、期望行为
当「出行备品」列表项数量 > 一屏可展示数量(>3 个)时,需提供明确的横滑可视化提示,引导用户左滑查看全部。

三、建议方案(任选其一或组合)
右侧渐隐遮罩(推荐):列表右侧叠加一层从透明到白色的渐变蒙层,露出第 4 个 SKU 的"半张卡片",视觉上自然暗示"右侧还有内容"。
底部滑动指示器:列表下方增加滚动条 / 分页圆点 / 进度条,实时反映滑动位置。
文案 + 图标提示:模块右上角或底部增加「左滑查看更多 →」的文案与箭头图标,首次进入可加轻量动效引导。
首次进入轻微抖动:页面首次曝光该模块时,自动做一次小幅度的位移动画(右移再回弹),提示"此处可滑动"。
优先级排序:1 > 2 > 4 > 3

四、影响范围
仅前端(小程序)改动,无需后端接口调整。
排查:其他存在横向滚动的模块(如温馨提示横滑标签、推荐产品横滑卡片等)建议一并核查,统一交互规范。

五、验收标准
「出行备品」数量 ≤ 3 个时:不展示任何滑动提示
「出行备品」数量 > 3 个时:出现渐隐遮罩 / 指示器,用户可清晰感知存在更多内容
滑动到最右侧时:提示自动消失(代表已查看完毕)

模块:小程序 → 产品详情页 →「出行备品」组件 类型:体验优化(UI / 交互) 优先级:低 - 中 一、现象描述 「出行备品」模块当前一屏仅展示 3 个 SKU(如截图:晕车贴 / 创口贴 / 一次性牙线),实际数据可能多于 3 个,需要横向滑动才能查看后续内容。但当前 UI 无任何可滑动提示(无渐隐遮罩、无指示器、无引导文案),用户无法感知右侧还有更多内容,存在严重的信息隐藏问题。 二、期望行为 当「出行备品」列表项数量 > 一屏可展示数量(>3 个)时,需提供明确的横滑可视化提示,引导用户左滑查看全部。 三、建议方案(任选其一或组合) 右侧渐隐遮罩(推荐):列表右侧叠加一层从透明到白色的渐变蒙层,露出第 4 个 SKU 的"半张卡片",视觉上自然暗示"右侧还有内容"。 底部滑动指示器:列表下方增加滚动条 / 分页圆点 / 进度条,实时反映滑动位置。 文案 + 图标提示:模块右上角或底部增加「左滑查看更多 →」的文案与箭头图标,首次进入可加轻量动效引导。 首次进入轻微抖动:页面首次曝光该模块时,自动做一次小幅度的位移动画(右移再回弹),提示"此处可滑动"。 优先级排序:1 > 2 > 4 > 3 四、影响范围 仅前端(小程序)改动,无需后端接口调整。 排查:其他存在横向滚动的模块(如温馨提示横滑标签、推荐产品横滑卡片等)建议一并核查,统一交互规范。 五、验收标准 「出行备品」数量 ≤ 3 个时:不展示任何滑动提示 「出行备品」数量 > 3 个时:出现渐隐遮罩 / 指示器,用户可清晰感知存在更多内容 滑动到最右侧时:提示自动消失(代表已查看完毕)
mmg2026-05-20 15:46:04 +08:00cz 指派
mmg2026-05-21 15:55:43 +08:00 关闭此工单
登录 并参与到对话中。
未选择标签
1 名参与者
通知
到期时间
未设置到期时间。
依赖工单

没有设置依赖项。

参考:wx/hl-api-changelog#5
没有提供说明。