符合当代用户预期的 UI 交互,速查表

164 阅读2分钟

* 打开迅速,不用白屏状态等待,能出来的部分就尽快先出来

* 显示加载中或者骨架屏,但不要显示一堆加载中

* 显示加载错误的区块,而不是整页都无法使用

* 不整页刷新的情况下显示我的操作之后的结果,同时保持页面上的其他未提交编辑状态

* 输入过程中就提示是否符合规则,省去点击

* 输入过程中提示搜索结果,省去点击

* 按钮点下去,如果不能立即有反馈,就显示处理中

* 服务端如果不能立即处理,客户端可以先本地搞个假的反馈,等服务端处理好了再显示真实结果

* 把表单错误显示在对应字段旁边

* 复杂数据收集不是分成多页来呈现,而是在一个简单表单的基础上根据用户选择逐步提示更多字段需要填写

* 用无尽滚动加载更多

* 用左右滑动代替分页点击切换

* 用滑动显示隐藏更多操作项

* 用拖拽来调整顺序

* 用半弹屏代替跳页,用原地编辑代替半弹屏,尽可能减少打断

* 用瀑布流在一个页面上展示两列而不是单列,减少无效留白

* 内容的隐藏和展开中间有过场动画,凸显变化的部分

* 下一页内容的提前加载,显示加载进度,减少切换后白屏等待时间

* 如果不需要加载,上一页和下一页同时出现,逐渐过度,弱化跳页的跳转感觉

* 快速回退之前的页面

每一种新的 UI 状态管理技术,例如 remix.run 都要对应上面这个速查表,给一份在这个技术下如何实现的案例。