为加载注入朋友间的竞赛感
accuracy 是一款为社交与竞赛场景设计的加载等待动效，通过深蓝与橙色双色圆环、男女头像对比以及百分比数值飙涨，将枯燥的等待转化为一场微型对决。它解决的是用户在面对加载时注意力流失的问题，尤其适合有好友比拼、数据对比功能的 App 或 H5 页面。画面中央「Rahul V/S Priya」的标识直接点明比较主题，让等待不再苍白。这种带有人物关系和明确数值结果的动画，比单纯转圈更能留住用户视线，也天然具备分享传播的潜力。在好友运动步数比拼、答题竞赛、购物车价格对决等界面，accuracy 能立刻传递出「正在比较中」的信号，有效降低等待导致的跳出。
Lottie 矢量方案，比 GIF 更适合频繁循环
accuracy 以 Lottie 和 JSON 格式提供，天生具备矢量缩放、透明背景与代码可控三大优势。文件总体积仅 55 KB，在首屏加载中几乎不构成压力，却能得到 1080×1920 的锐利画质。与同等画质的 GIF 或 MP4 视频相比，Lottie 动画可以在任意尺寸下保持边缘清晰，并且通过前端或移动端 SDK 轻松控制播放、暂停、循环次数，甚至动态修改百分比数值。对于需要持续循环展示的加载等待场景，Lottie 不会像视频那样在循环处出现短暂停顿或闪烁，保证了体验的连贯。设计师还能在 JSON 中微调缓动曲线或颜色变量，迅速适配不同品牌主色，而无需重新导出。
告别无意义旋转，让等待自带剧情
市面上加载等待动效大多集中在转圈、进度条、骨架屏等抽象形式，虽然能传递「正在处理」的信号，却缺乏情感与叙事性。accuracy 引入了具体的人物关系和比分变化，用弧线箭头和数值增长演示了一场微型竞赛过程。另一种常见做法是极简的点状呼吸动画，虽能适配多数界面，但无法在品牌化体验中留下记忆点。accuracy 的独特之处在于它既能完成加载状态的功能性提示，又像一则轻量的品牌短片，让「Comparison with Friends」的主题从等待的第一秒就进入用户认知。适合强调社交、竞争或数据对比的产品，比抽象加载更能激发用户好奇心。
从好友步数到答题排行，五大实战场景
1. 社交 App 好友比拼加载页：在用户点击查看步数或游戏分数对比时，accuracy 直接播放比分增长动画，强化竞技氛围。2. 在线答题对战等待：匹配对手后的加载间隙，用百分比对比展现即将到来的智力对抗，吊起参与感。3. 电商价格对比弹窗：购物车或比价页面，展现两款商品价格评分对比，将数据视觉化。4. 健身挑战结果页：完成运动目标后，加载同伴数据时播放 accuracy，让结果展示更具仪式感。5. 活动竞赛进度查询：在活动页点击「查看排名」，以 accuracy 替代生硬加载，暗示实时数据更新。这些场景都能将等待的碎片时间转化为品牌互动机会。
设计师速查手册：何时选 accuracy
适合项目：社交类、竞赛类、数据对比类产品的加载或过渡页；需要轻量品牌叙事的 H5 活动页；深色或高饱和界面更易凸显橙蓝对比，建议搭配简短挑衅式文案如「谁更快？」。不适合场景：极简留白设计或严肃医疗金融界面，可能因过于活泼而破坏信任感；极小尺寸下人物头像与文字可能难以辨认，此时可考虑只保留圆环动画部分。搭配技巧：可在动画结束后定格最终百分比，用作结果卡片背景，无缝衔接内容区。调整循环速度建议保持 2s 左右的节奏，过快会显仓促，过慢则拖沓。整体而言，accuracy 是一款以小博大的动效，值得放入加载素材库。
