SuperAPI AI 工具集

progress-indicator-patterns

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:这是一份关于进度指示器(Progress Indicator)设计模式的参考指南,用于帮助设计者在界面中正确选择和使用加载反馈组件。

主要能力:

  1. 模式选择规则:根据是否已知百分比和操作时长决定使用哪种模式。已知百分比时使用确定型进度条(Determinate progress bar);未知百分比且时长小于3秒时使用加载动画(Spinner);3至10秒时使用加载动画加提示文字;超过10秒时使用骨架屏(Skeleton)或带步骤的进度。
  2. 进度条规则:进度不得倒退,若进度重新计算应在当前位置暂停;进度条旁需显示百分比或“X of Y”;不确定进度使用条纹或脉冲动画;完成时改变颜色(品牌色变为绿色)。
  3. 加载动画规则:仅在操作超过300毫秒时显示;不要用加载动画加载内容,应使用骨架屏;加载动画应在其所加载容器的中央;超过3秒的操作需附带文字,例如“Loading your dashboard...”。
  4. 反模式:永远旋转且无超时或错误状态的加载动画;从10%跳到90%后停在99%的进度条;同时显示多个加载动画。

使用方式:作为设计参考,在构建加载反馈界面时对照上述规则选择组件并规避反模式。

适用场景:Web或应用界面中的加载、提交、上传、数据获取等需要反馈进度的交互设计。

限制:资料未提供具体代码实现、安装命令、平台支持或收费信息。