品牌也有自己的“动作语言”：独立站动效应该怎样设计？

有的网站一打开，文字、图片和背景都在动。第一眼很抓人，但看了一会儿，还是不知道应该把注意力放在哪里。

也有一些页面，动作并不多，却让人觉得每次切换都顺理成章。产品从缩略图进入详情、菜单展开、内容渐渐出现，这些变化有相近的节奏，整个网站像同一个品牌在说话。

动效设计值得讨论的，正是这种连续的感受。品牌可以通过动作表达性格，也必须让人明白刚刚发生了什么。前者建立印象，后者让网站能够被安心地使用。

先决定品牌怎样行动，再挑效果

如果把一个品牌想象成一个人，它会怎样递给你一件东西？是迅速、明确，还是轻柔、从容？会保留材料的重量感，还是表现得轻盈、灵活？这样的提问，比直接寻找一个“好看的滚动动画”更容易形成方向。

这里的比喻需要继续变成设计判断。一个强调精密的器材品牌，可以让状态切换干净、收束明确；一个以柔软织物为主题的品牌，也许适合温和的展开与连续变化。它们都是可能的方向，仍要由具体内容和使用场景决定。

不能把“从容”简单写成所有动画都很慢。品牌故事可以留一点观看的时间，顾客点开尺码表时却需要马上得到回应。同一个品牌在不同任务里，也有不同的表达强度。

因此，先选少量动作原则，并同时写明不用什么。例如，选择连续的显隐和柔和过渡，就要解释何时不使用弹跳或猛烈缩放。方向清楚以后，具体效果才有取舍的依据。

fromanother的启发：让概念约束整个动作系统

fromanother在Awwwards的案例说明中，用“光”作为核心视觉概念，让背景、文字显现和页面过渡延续流动、扩散的感觉。设计团队也解释了不同效果采取的不同实现方式，而不是把技术复杂度本身当成目标。原设计团队说明

我们看到的实际官网画面里，清楚的文字与柔化的光色形成对照。静态截图只能保留某一瞬间，不能证明完整的运动节奏；本文对动作构思的介绍来自团队公开说明，不把截图当成完整播放或性能测试。

对品牌free-standing station而言，这个案例更值得借鉴的是约束关系。一个概念能同时指导“怎样出现、怎样切换、怎样结束”，网站就更容易形成自己的语法。把几个获奖网站的动画分别借过来，未必能拼出这种一致性。

这个项目也不能直接当作商城实施模板。作品展示型网站允许更自由的探索，购物场景还要处理规格、价格、数量与订单状态。品牌动作需要适应这些任务，而不是让任务迁就一段表演。

三种动作，承担三种不同的责任

具体设计时，可以先把动作按任务分开讨论。这样既能保留品牌表达，也不会让每个按钮都承担讲故事的任务。

• 表达气质。 品牌片、主视觉和专题叙事可以建立氛围。但它们应该有明确的观看价值，并允许读者继续往下看，而不是把一段等待当作进入网站的门票。
• 说明关系。 图片进入详情、菜单展开、内容分组切换，可以通过连续变化帮助人理解位置与层级。动作应让人更清楚“这个东西去了哪里”。
• 反馈结果。 选中规格、提交表单、加入购物车等操作，需要让人及时知道当前状态。处理中的反馈和真正成功的反馈必须能够区分，不能用一个完成动画掩盖尚未确定的结果。

分清这三层以后，就能回答一个常见问题：为什么首页可以表现得很有性格，购买区域却应该更加克制？因为用户此时的注意力，从感受品牌转向了完成一件具体的事。

以商品颜色切换为例，设计可以让照片柔和地过渡，但颜色名称、选中标记和价格应当准确对应当前选项。用户快速连续切换时，上一段动画也不能把旧画面覆盖回来。否则动作越流畅，错误的对应关系反而越不容易被察觉。

这类设计的专业性，往往藏在不显眼的状态里：请求尚未完成、图片没有加载好、用户中途返回，或者一次动作被新的操作打断。只展示鼠标按预定路线走完的录屏，不足以说明实际体验已经成立。

建立动作语言，需要写清哪些规则

一句“参考这个网站的感觉”，留给设计和开发的解释空间太大。可以把它拆成更明确的几项：哪些元素移动，移动代表什么；动作从哪里开始；怎样逐渐加速和收住；什么内容先出现；什么时候可以被打断。

不必一开始就写厚厚的规范。先挑三个关键场景：进入品牌页面、从列表看具体内容、完成一次重要操作。用同一种动作原则制作小范围原型，再看它们是否像同一个系统。

时间长度和移动距离需要一起看。一个小图标的轻微变化，与全屏图像的移动，对观看的影响完全不同。没有一组毫秒数能自动适合所有品牌、所有设备，也不能用固定时长替代实际感受与可用性检查。

原型还应当包含“没有这些动作时，内容怎样成立”。例如，去掉位移以后仍能通过排版和状态文字理解层级，说明信息有自己的结构；若停止动画以后，标题永远不出现，信息就被绑在了效果上。

设计的分寸，也包括允许用户少看一些动作

有些人会对大幅缩放、平移或视差产生不适。对这些用户，减少运动本身就是更合适的体验，而不是品牌表达打了折扣。

W3C的WCAG 2.2中，2.3.3“交互引发的动画”为AAA级要求，涉及非必要运动动画的可关闭性；2.2.2“暂停、停止、隐藏”为A级要求，对符合条件的自动开始、持续超过五秒并与其他内容并列呈现的移动信息提出控制要求。两者适用情形不同，不能概括成“所有五秒以上的动画都违规”。交互动画说明、自动运动内容说明

实现中可以响应系统的prefers-reduced-motion偏好，减少或替换非必要运动；仍然保留当前选中项、操作结果和阅读顺序。仅把全部动画时长改为零，还需要检查是否影响事件触发、内容显示或状态同步。MDN说明

评审时也要走出设计师的电脑。在真实手机上连续切换、返回、重复操作，并用键盘检查重要入口；记录内容何时可见、操作何时有回应。这里讨论的是设计与工程验收方法，不声称这些检查就能单独证明网站全面符合某一标准。

WESWOO希望在独立站里做出的动作，是有品牌依据、也有状态依据的动作。它可以让第一次接触品牌的人感到新鲜，也应当让第二次、第三次来购买的人依然轻松。到了这一步，动效才从一段展示，变成了品牌长期可以使用的表达方式。