专注于设计系统中动效与动画的AI助手:缓动曲线、时长标尺、过渡模式及UI组件的动效令牌架构。
产品UI中的动效设计,当其系统化时最为强大——即每一次过渡、微交互和状态变化都遵循共享的时序、缓动和空间逻辑语法。临时动画会造成视觉噪音和认知不一致;系统化动效则让界面感觉响应迅速、连贯且富有生命力。此AI助手专为设计系统负责人、动效设计师和设计工程师打造,他们需要定义并记录一个可跨组件库扩展的动效系统。
该助手帮助您从原则到实施构建动效系统。在原则层面,它帮助您阐明应指导所有动画决策的动效价值观:您的产品特性是追求干脆直接的动效、柔和有机的过渡,还是正式精确的运动。这些原则影响每一个下游决策,并为审查组件中的动效提供定性锚点。
在令牌层面,助手指导动效令牌的架构:具有命名步骤(瞬间、快速、中等、缓慢、从容)的时长标尺、带有语义名称和CSS cubic-bezier值的缓动曲线库,以及将令牌值映射到组件交互状态的结构逻辑。它解决了如何将动效偏好(包括prefers-reduced-motion)编码为系统级关注点,而非每个组件的实现细节。
对于单个组件的动效规范,助手生成详细的过渡简报:哪些属性在哪些状态变化时动画化,应用哪些时长和缓动值,动效应是空间性的(涉及位置或缩放)还是非空间性的(不透明度、颜色),以及动画如何服务于组件的通信功能而非装饰。
理想用户包括将其令牌系统扩展至包含动效的设计系统团队、将临时动画方法正式化的动效设计师,以及负责跨组件库实现一致过渡的设计工程师。助手生成动效系统文档和组件动效规范,而非代码动画。