Skip to content

交互与状态 ​

手势 ​

遵循系统标准手势;不要重新定义它们的含义。手势需要可见的提示,并且始终保留一条等效的可见操作路径。

  • Swipe(滑动) — 左滑列表行可显示删除 / 归档。
  • Pull to refresh(下拉刷新) — 在列表顶部下拉以刷新。
  • Long press(长按) — 长按召出上下文菜单。
  • Edge back(边缘返回) — 从屏幕左边缘向右滑动以返回。
  • ✓ DO — 使用系统惯例手势;提供可见的替代方式;为危险手势加确认。
  • ✕ DON'T — 不要把关键操作只藏在隐晦的手势后;不要覆盖系统边缘手势。

触觉与声音 ​

触觉强化关键时刻,与视觉和声音协同工作(而非取而代之)。要克制——过多震动会变成噪声。尊重系统的静音和触觉开关。

类型触发
Light选择变化、滑过一个刻度
Medium切换开关、按钮确认
Heavy拖拽吸附、长按触发
Success任务完成、支付成功
Error操作失败、校验失败

触觉始终伴随清晰的视觉变化;绝不让触觉成为唯一的反馈渠道。Web:navigator.vibrate?.(10)。

页面状态 ​

每个加载数据的界面都要设计四种状态:空、加载中、错误、成功。它们最常被遗忘,却最影响一致性与信任。

  • Empty(空) — 说明缺少什么并提供首个操作(例如"还没有项目 · 新建项目")。
  • Loading(加载中) — 在布局已知处使用骨架占位(Skeleton),而非裸的加载指示器。
  • Error(错误) — 说明失败原因并提供重试("加载失败 · 请检查网络后重试 · 重试")。
  • Success(成功) — 确认完成("提交完成 · 我们会尽快与你联系")。

骨架:脉冲动画 opacity 1 → .45 → 1,周期约 1.4s。

基于 MIT 许可发布。