SuperAPI AI 工具集

travel-hospitality

设计与创作

查看项目

更新于 10-15 16:28

技能介绍

用途

该技能面向旅行预订、酒店与民宿、旅游平台以及度假规划类产品的动画设计。它把迪士尼十二动画原则应用到旅行与酒店场景中,帮助设计出既令人向往、又让人对预订流程有信心的动效体验。其核心理念是:旅行关乎梦想与体验,动画应当先让用户在心理上“抵达”目的地,再完成实际出行。

主要能力

技能将十二原则逐一对应到旅行与酒店场景:

  • 挤压与拉伸:预订按钮按压时轻微挤压,地图图钉落到位置时弹跳,飞机图标在飞行动画中轻微拉伸。
  • 预备动作:搜索按钮在结果出现前有蓄势,预订确认前有戏剧性停顿,目的地揭晓前制造悬念。
  • 舞台调度:目的地图片采用全出血主视觉,价格清晰但次于体验,预订流程中当前步骤明确聚焦。
  • 逐帧与关键帧:地图探索采用平滑平移缩放(逐帧),预订流程采用清晰分步(关键帧),行程构建器按顺序规划活动。
  • 跟随与重叠动作:搜索结果卡片错落级联进入,图片画廊照片带跟随感落定,地图标记图标落地后信息弹窗再出现。
  • 缓入缓出:梦幻过渡采用平滑舒缓节奏,图片轮播优雅滑动,模态框打开约350–400ms。
  • 弧线:地图上飞行路径为曲线,照片滑动采用自然弧线手势,目的地之间以弧线过渡。
  • 次级动作:预订成功时飞机起飞、彩带飘落,价格更新时优惠出现带闪光,加载状态使用地点主题动画。
  • 时间节奏:向往时刻用较慢的400–500ms营造梦幻感,预订操作用自信的250–350ms,搜索反馈用快速的150ms。
  • 夸张:预订确认值得庆祝式渲染,梦想目的地放大向往感,优惠显著突出节省金额。
  • 扎实构图:以摄影为先,使用惊艳的目的地影像;地图保持地理准确;图标风格统一。
  • 吸引力:动效应激发旅行欲望,营造高端服务感与奢侈品牌联想,并注意文化表达的尊重。

使用方式

该技能以原则清单与行业时间标准的形式提供指导。行业时间标准包括:图片过渡400ms、ease-in-out;地图动画500ms、ease-out;预订步骤300ms、ease-in-out;搜索结果250ms、ease-out;确认600ms、custom-bounce。设计时可按上述对应关系选择原则与时长、缓动参数。

适用场景

适用于旅行预订流程、酒店与民宿应用、旅游平台、度假规划体验中的动效设计,尤其是需要兼顾“向往感”与“预订信心”的界面。

限制

资料未提供具体实现代码、组件库、平台支持范围或安装方式,暂未提供。