Hello, I'm QI XIN

Motion Designer

交互动效设计师

专注 UI 动效、交互动效、Onboarding 与产品体验动画

View My Work →

01 趣加游戏

视频广告设计师

2019–2021

02 抖音

动效设计师

2021–2022

03 OKX

动效设计师

2022–2026

PORTFOLIO

UX MINDED
MOTION DRIVEN
DETAIL OBSESSED

BEIJING, CHINA
AVAILABLE FOR FREELANCE

Selected Work精选项目

精选部分项目,探索动效如何驱动更好的体验

04 / 06

Security Center

安全中心状态动效

Category
Security Center
Type
State Motion
Year
—

通过盾牌状态变化建立“风险—处理—安全”的清晰认知与操作反馈。

Read Case Study ↓

Context项目背景

安全中心需要将账户当前的安全状态、待处理风险以及优化后的结果清晰传达给用户。相比单纯使用文字和数值提示,核心视觉需要承担更直接的状态表达,让用户快速建立对“风险—处理—安全”的认知。

Role我的角色

负责安全中心核心视觉的动效设计,包括盾牌状态动画、视觉反馈节奏以及不同安全状态之间的动态过渡,使动效能够与页面中的风险信息和操作流程保持一致。

Motion Design · Interaction Motion · Animation Prototype产品、UI 及视觉设计由原项目团队共同完成;本人主要负责产品动效、交互动画及动画原型。

Challenge设计挑战

安全类产品需要同时传递“风险感”和“可信感”。动效不能过度娱乐化,也不能只是装饰性的循环动画,需要让用户明确感知当前状态以及完成安全优化后的变化。

Motion Approach动效策略

以盾牌作为核心视觉锚点,通过材质、光效和形态变化表现安全状态。动画从未完成状态逐步过渡至确认状态,并以 Check 标识完成收束,使视觉变化与“一键处理”的操作结果形成明确因果关系。

Final Motion最终动效

最终形成一段围绕安全状态变化展开的短循环动画,在不改变页面信息结构的情况下强化风险提示和处理反馈,使核心安全状态更直观、更容易被用户理解。