面向互动网站的创意开发工作室

创意开发是一类前端工作,它让动效、滚动与指针交互以及 WebGL 成为网站讲述品牌或产品故事的一部分。Dardo 为产品发布、产品故事和品牌官网打造这类体验,并在设计特效的同时,一并设计移动端、键盘操作和减少动态效果的版本。最终成果独具特色,同时依然方便用户阅读、浏览和联系你。

通过 WhatsApp 联系我们
Dardo / 编辑插画
本页内容

什么是创意开发?

创意开发介于设计与前端工程之间。常规开发只关心页面能否正常运行、加载是否够快。创意开发还要追问:交互本身是否在传达信息,比如用一个过渡展示两种状态之间的关系,用一段滚动序列按恰当的顺序呈现产品,或者用一个着色器赋予品牌专属的质感。

它靠代码编写,而不是用预设拼装:包括动画时间轴、滚动与指针逻辑、Three.js 或自定义 WebGL 场景,以及让这些效果在普通手机上也稳定运行的降级方案。如果你想要 Awwwards 风格的网站,这项服务正合适,不过我们是为你的访客而设计,而不是为评委,也从不承诺获奖。

创意开发项目包含哪些内容

方案会列明以下哪些交付物在服务范围内、每项输入由谁提供,以及每项如何验收。你可以带来自己的设计师或其他工作室已确认的设计稿,也可以请 Dardo 一并完成设计与开发。

  • 互动概念与原型,在全面开发前先解决高风险问题
  • 滚动与指针交互,并提供对应的触控和键盘操作方式
  • 动效系统:时间、缓动与过渡在全站复用,而不是一次性的零散特效
  • 性能预算,以及针对减少动态效果、慢速网络和不支持 WebGL 的设备的降级方案
  • 响应式实现,并在你的受众实际使用的手机和浏览器上测试

何时适合用动效,何时另一项服务更合适

当交互能让产品更清晰、能演示一套系统,或能赋予品牌令人难忘的节奏时,创意开发才有价值。我们会先明确这项任务,并把序列绘制成静态分镜。如果没有动效故事就讲不通,动画也救不了它。

如果访客需要旋转物体或在空间中穿行,我们的互动 3D 网站服务更合适。如果你需要一个清晰、扎实、动效克制的网站,请从定制网页设计开始。单一的活动优惠通常更适合做成落地页。

项目如何推进:先做一个可运行的切片

在估算整体体验之前,我们先做一个有代表性的切片:一个使用真实内容的真实场景、它的静态降级版本和主要操作,并按目标屏幕尺寸呈现。它能尽早回答代价高昂的问题。没有说明,创意是否一目了然?在手机上能否正常运行?素材加载缓慢时会怎样?用户不看完整个效果,也能完成主要操作吗?

切片会附带一份书面验收记录,涵盖约定的设备、素材大小、键盘与触控状态、减少动态效果时的表现以及尚存的风险。随后的完整方案会把素材制作、开发实现、集成、兼容性检查和支持分项报价,方便你逐项比较。

性能、无障碍与减少动态效果

我们会为初始素材、渲染工作和交互延迟设定预算,并在有代表性的设备上,而不是桌面演示环境中,以 Google 的 Core Web Vitals 阈值为目标(最大内容绘制在 2.5 秒内,下次绘制交互在 200 毫秒内,布局偏移不超过 0.1)。标题、文案和链接优先以 HTML 输出,因此内容绝不依赖特效能否运行。

开启减少动态效果后,访客会看到同一个故事的完整版本:视差和镜头运动会变成由用户控制的切换或分步。悬停效果都有对应的触控和键盘操作,焦点始终可见。数据分析可以显示用户是否完成了关键操作,但无法证明某个动画促成了一笔销售。

看得见的作品:Hyper 与 Janus Observatory

Hyper 是 Dardo 为一个 AI 客户洞察概念设计的产品故事。动效把客户信号与统一画像相连,再把画像与推荐的优惠相连,每次过渡都在解释含义的变化。它只是一个概念:其互动原型是由 Python FastAPI 原型支撑的 Next.js 界面,使用模拟示例运行,我们不宣称任何转化或客户成果。

Janus Observatory 是与 Blue Marble Space 合作开发的研究体验:包括电影感的开场、展示十种可能未来的图集,以及用于对比它们的观测台。标签和说明位于 3D 图层之外,项目遵循包体积预算,并通过浏览器 QA 和发布检查来排查视觉回归。它展示的是互动内容的交付能力,而非客户的商业成果。

哪些因素会影响创意网站的成本?

创意项目的报价取决于独立场景和序列的数量、是否需要制作插画、3D 或视频素材、设计是否已经确认、需要支持的设备、CMS 与集成工作,以及上线后的支持。咨询表单会询问预算区间,从低于 5,000 美元到 60,000 美元及以上,以便方案据此匹配工作范围。

位于波哥大的资深工作室,采用美国工作时间

Dardo 是一支位于哥伦比亚波哥大的三人团队,由创始人 Nicolás Cerón 领导,可使用英语或西班牙语协作。波哥大使用 UTC−5 时区,与美国东部和中部时间的工作时间一致,因此美国团队得到的是一个能实时评审、而不是隔夜才回复的近岸合作伙伴。我们既与设计工作室合作,也与企业内部的发布团队合作,方案会写明评审负责人、会议重叠时段、交接使用的语言以及代码仓库的归属。

选择之前的常见疑问

创意开发工程师是做什么的?

创意开发工程师是专注于网站体验层的前端工程师,负责动效、滚动与指针交互、WebGL 和着色器。他们的工作是让这些效果真正传达信息,同时确保页面加载迅速、在手机上运行良好,并遵循无障碍设置。在 Dardo,设计和开发由同一支小团队完成,因此创意和实现会一起评审。

动画或交互式网站的费用是多少?

这取决于具体工作:不同场景的数量、需要制作的插画、3D 或视频素材、是否已有设计稿,以及需要支持的设备。我们会在评估一个有代表性的片段后再报价,因此价格反映的是您的需求,而不是固定套餐。

动画会影响 SEO 或页面速度吗?

动画本身不会,加载不当才会。搜索引擎读取的是 HTML,因此标题、文案和链接必须在任何 canvas 或动画脚本运行之前就已存在。大型代码应在首屏内容出现后再加载,布局应预留空间以避免页面跳动,动画也不应阻塞输入。上线前,我们会在有代表性的手机上检查 Core Web Vitals,但不保证排名。

动画网站能符合无障碍标准吗?

可以,前提是把无障碍与动效一同设计,而不是事后补救。WCAG 要求为自动运动超过五秒的内容提供暂停、停止或隐藏的方式,并建议允许用户关闭由交互触发的动效。我们会遵循减少动态效果的设置,保持焦点可见,并确保没有任何内容依赖动画播放完毕。

一个创意开发项目需要多长时间?

没有标准工期,这取决于场景数量、素材制作和评审轮次。我们会在评估第一个可运行的片段后,在方案中确定日期,这也能提前暴露容易拖延进度的风险,例如体积较大的素材,或需要针对触屏重新设计的交互。如有固定的上线日期,请在一开始告诉我们。

我应该选择创意开发还是交互式 3D 网站?

如果在一个整体较为常规的页面上,由动效、滚动和转场来讲述故事,请选择创意开发。如果访客需要以三维方式探索某个物体、场所或系统,请选择交互式 3D 网站。许多项目会将两者结合。关键在于:访客的操作是否会改变他们所了解的内容,还是一段节奏得当的演示就能解释得更好。

相关作品与案例

Janus Observatory:已发布项目的界面已落地的研究体验 / 互动图形Janus Observatory探索与 Blue Marble Space 合作开发的这个项目的入口、图集和观测站,再阅读实施依据和研究局限。该项目用于展示交互式交付能力,并不代表任何客户转化成果。查看项目

让交互为故事服务

在评估完整体验之前,先确定一个有代表性的交互、素材方案和降级方案。同时将实时图形与更简单的制作形式进行比较。