SuperAPI AI 工具集

delight

设计与创作

查看项目

更新于 10-14 17:39

技能介绍

用途

delight 用于发掘并实现界面中的“愉悦时刻”,把仅满足功能的界面提升为令人难忘、乐于使用的体验。它在增强可用性的前提下加入个性、惊喜与细节润色,而不是用花哨效果掩盖可用性问题。

使用前提

该技能要求先调用 /impeccable,其中包含设计原则、反模式与上下文收集协议,并按该协议执行;如果尚不存在设计上下文,必须先运行 /impeccable teach。此外还需收集:当前领域适合什么风格(俏皮、专业、古怪还是优雅)。若从代码库无法判断,应直接向用户询问澄清。

主要能力

  • 识别愉悦机会:成功状态(保存、发送、发布)、空状态(首次体验、引导)、加载状态、成就(里程碑、连续记录、完成)、交互(悬停、点击、拖拽)、错误(缓和挫败感)、彩蛋(供好奇用户发现)。
  • 判断语境:品牌个性(俏皮/专业/古怪/优雅)、受众(技术型/创意型/企业型)、情感语境(成就/探索/挫败)、场景是否合适(银行应用不同于游戏应用)。
  • 定义愉悦策略:含蓄精致(精炼的微交互,适合奢侈品牌)、活泼个性(异想天开的插画与文案,适合消费类应用)、贴心惊喜(在用户开口前预判需求,适合生产力工具)、感官丰富(悦耳音效、流畅动画,适合创意工具)。

设计原则

  • 愉悦只做增强、绝不阻塞:愉悦时刻应短于 1 秒;绝不因愉悦延迟核心功能;愉悦应可跳过或保持含蓄;尊重用户的时间与任务专注。
  • 惊喜与发现:把愉悦细节藏起来供用户发现;奖励探索与好奇;不要宣告每个愉悦时刻;让用户能与人分享发现。
  • 贴合语境:让愉悦匹配情感时刻(庆祝成功、共情错误);尊重用户状态(严重错误时不应俏皮);匹配品牌个性与受众预期;注意文化差异。
  • 随使用累积:愉悦应在重复使用后仍保持新鲜;变化回应(不是每次都同一动画);随持续使用揭示更深层内容;通过模式建立期待。

实现手法

  • 微交互与动画:按钮按压位移与阴影、点击涟漪、悬停上浮、活泼的加载动画、带个性的加载文案、进度提示与鼓励语、骨架屏微动画、对勾绘制动画、重要成就的彩带效果、确认时的轻缩放淡入、含蓄音效、悬停惊喜(图标动画、色彩/辉光变化、带个性的工具提示、自定义光标)。
  • 文案个性:俏皮的错误提示、鼓励性的空状态文案、俏皮的标签与提示。重要:文案个性需匹配品牌——银行不该滑稽,但可以温暖。
  • 插画与视觉个性:自定义空状态/错误状态/加载状态/成功状态插画、有性格的图标(自定义图标集、带动画、更具插画感、风格一致)、背景效果(细微粒子、渐变网格、几何图案、视差层次、昼夜主题)。
  • 令人满意的交互:拖放的提起效果、吸附动画、放置音效、撤销提示;开关的弹簧滑动、颜色过渡、移动端触觉反馈、可选音效;进度与成就(带里程碑庆祝的连续计数、在 100% 庆祝的进度条、带动画的徽章解锁、俏皮统计);表单交互(聚焦动画、勾选时的缩放脉冲、成功状态、自动增高的文本域)。
  • 声音设计:通知音、成功音、错误音、聊天打字音、极轻微的环境音。需尊重系统声音设置、提供静音选项、保持低音量、不要每次交互都播放(声音疲劳真实存在)。
  • 彩蛋与隐藏惊喜:科乐美代码解锁特殊主题、隐藏快捷键、Logo 或插画上的悬停揭示、图片替代文本中的玩笑(也面向屏幕阅读器用户)、面向开发者的控制台消息、节日与季节主题、天气与时段变化、基于上下文的个性(按时段给出不同消息、随机变化、随使用渐进揭示)。
  • 加载与等待状态:轮换的有趣加载文案、带个性的进度条、长加载时的小游戏、等待时的趣闻或提示、带鼓励消息的倒计时。注意:避免“放牧像素”“教机器人跳舞”这类一眼是机器生成的陈词滥调,应写与产品实际功能相关的文案。
  • 庆祝时刻:重大里程碑的彩带、完成时的动画对勾、100% 的进度庆祝、“成就解锁”式通知、个性化消息(“你发布了第 10 篇文章!”)、首次操作的特殊对待、连续记录庆祝、目标进度、周年纪念。

实现参考

  • 动画库:Framer Motion(React)、GSAP(通用)、Lottie(After Effects 动画)、Canvas confetti(派对效果)。
  • 声音库:Howler.js(音频管理)、use-sound(React hook)。
  • 物理库:React Spring(弹簧物理)、Popmotion(动画原语)。

注意文件体积:压缩图片、优化动画、对愉悦功能做懒加载。

禁止事项

  • 不为愉悦延迟核心功能;不强迫用户经历愉悦时刻(应可跳过);不用愉悦掩盖糟糕的 UX;不过度(少即是多);不忽视无障碍(负责任地做动画并提供替代方案);不让每次交互都愉悦(特殊时刻才应特别);不为愉悦牺牲性能;不脱离语境(看场合)。

验证

测试愉悦是否真的令人愉悦:用户反应(会不会微笑、分享截图)、是否烦人(第 100 次是否仍愉悦)、是否造成阻塞(能否退出或跳过)、性能是否流畅、是否贴合品牌与语境、是否可访问(支持减少动态、屏幕阅读器)。