交互与状态
手势
遵循系统标准手势;不要重新定义它们的含义。手势需要可见的提示,并且始终保留一条等效的可见操作路径。
- 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。