BFM Pay

Appearance

第十七章：交互规范 ​

定义组件的交互行为、动效和可访问性规范

17.1 触摸交互规范 ​

触摸目标 ​

规范要求
最小尺寸44 × 44 px（iOS）/ 48 × 48 dp（Android）
间距相邻可触摸元素间距 ≥ 8 px
热区扩展视觉元素小于最小尺寸时，扩展触摸热区

触摸反馈 ​

事件反馈时机
touch start视觉变化（透明度/缩放/颜色）立即
touch end恢复原状立即
long press振动 + 上下文菜单500ms 后

按压态规范：

Button：
  - 背景色变深 10% 或
  - 透明度降至 0.7 或
  - 缩放至 0.98

Card (pressable)：
  - 缩放至 0.98 或
  - 阴影增强

17.2 手势规范 ​

滑动手势 ​

手势方向应用场景
滑动水平列表项滑动删除/操作
滑动垂直页面滚动、Sheet 关闭
下拉垂直向下刷新内容

Sheet 关闭手势：

下滑距离 < 30% 高度 → 弹回打开状态
下滑距离 ≥ 30% 高度 → 关闭 Sheet
下滑速度 > 阈值 → 无论距离，直接关闭

缩放/旋转 ​

  • MAY 图片查看器支持双指缩放
  • MUST NOT 在普通页面拦截系统缩放

17.3 动效规范 ​

时间曲线 ​

动效类型持续时间缓动函数
微交互（按钮反馈）100-150msease-out
页面切换250-350msease-in-out
Sheet 展开/收起300-400msspring (damping: 0.8)
加载骨架闪烁1500mslinear (循环)

页面转场 ​

Push 进入：

新页面：从右侧 100% 滑入，透明度 1
旧页面：向左偏移 30%，透明度降至 0.3

Pop 返回：

当前页面：向右滑出 100%，透明度 1
上一页面：从左侧 30% 偏移恢复，透明度恢复至 1

减少动效模式 ​

  • MUST 检测系统"减少动效"设置
  • MUST 减少动效模式下：
    • 禁用弹簧动画
    • 使用淡入淡出替代滑动
    • 缩短动画时间至最小

17.4 加载状态规范 ​

骨架屏 ​

适用场景形态
文本圆角矩形，高度与文字行高一致
头像圆形
卡片与实际卡片尺寸一致的圆角矩形
列表重复 3-5 个骨架项

动画：

  • 渐变色从左向右扫过
  • 周期：1.5-2s
  • 不透明度：0.1 → 0.3 → 0.1

加载指示器 ​

类型适用场景
Spinner按钮内、小区域加载
Skeleton页面/组件首次加载
Progress已知进度的操作

空状态 ​

结构：

┌─────────────────────────────────┐
│          [插图/图标]             │
│                                 │
│         主标题                   │
│         副标题（可选）           │
│                                 │
│         [操作按钮]               │
└─────────────────────────────────┘

文案规范：

  • 主标题：描述当前状态（如"暂无交易记录"）
  • 副标题：说明原因或引导操作（如"完成首笔转账后将在此显示"）

17.5 错误状态规范 ​

网络错误 ​

┌─────────────────────────────────┐
│         [断网图标]               │
│                                 │
│         网络连接失败             │
│         请检查网络设置           │
│                                 │
│         [重试]                   │
└─────────────────────────────────┘

服务器错误 ​

┌─────────────────────────────────┐
│         [错误图标]               │
│                                 │
│         服务暂时不可用           │
│         请稍后再试               │
│                                 │
│         [重试]                   │
└─────────────────────────────────┘

操作失败 ​

使用 Toast 或 Alert：

  • Toast：轻量提示，3-5 秒自动消失
  • Alert：需要用户确认的重要错误

17.6 反馈规范 ​

Toast 消息 ​

类型图标持续时间
success✓2s
error✗3s
warning⚠3s
infoℹ2s

位置：屏幕顶部或底部居中

行为：

  • 可堆叠显示
  • 向上/向下滑动可提前关闭
  • 同时最多显示 3 个

振动反馈 ​

场景振动类型
按钮点击轻触（light）
操作成功成功（success）
操作失败错误（error）
危险操作确认警告（warning）

规范：

  • MUST 检测系统振动设置
  • MUST NOT 在静音模式下振动（除非用户明确开启）

17.7 可访问性规范 ​

语义结构 ​

元素语义角色
导航栏role="navigation"
主内容role="main"
对话框role="dialog"
列表role="list" + role="listitem"
按钮role="button"

焦点管理 ​

焦点顺序：

  • MUST 遵循视觉阅读顺序（从上到下，从左到右）
  • MUST 可通过键盘 Tab 遍历所有可交互元素

焦点陷阱：

  • MUST 模态对话框内焦点循环
  • MUST 关闭对话框时焦点返回触发元素

屏幕阅读器 ​

必需的 accessible name：

  • 所有按钮
  • 所有输入框
  • 所有图标按钮（使用 aria-label）

动态内容：

  • 使用 aria-live 通知重要变化
  • polite：非紧急更新
  • assertive：错误信息

对比度 ​

元素最小对比度
正文文本4.5:1
大文本（≥18px）3:1
图标3:1
禁用状态无要求

17.8 响应式规范 ​

断点 ​

断点宽度范围典型设备
xs< 360px小屏手机
sm360-428px普通手机（设计基准）
md428-768px大屏手机/小平板
lg≥ 768px平板（可选支持）

适配策略 ​

文字：

  • 使用相对单位（rem/em）
  • 标题：1.25-1.5rem
  • 正文：1rem
  • 辅助文字：0.875rem

布局：

  • 使用弹性布局（flexbox）
  • 卡片网格：1 列（sm） / 2 列（md+）
  • 水平间距：16-24px
  • 垂直间距：8-16px

本章小结 ​

  • 触摸目标最小 44×44px，有明确触摸反馈
  • 手势行为遵循平台规范
  • 动效时间和曲线有统一标准
  • 加载、空、错误状态都有规范模板
  • 可访问性是必需项，不是可选项

下一篇 ​

完成组件篇后，继续阅读 第六篇：安全篇。

Released under the MIT License.

Copyright © 2025 BioforestChain