尧图网页设计 
做了不少智能硬件的前端界面后你会发现一个规律用户对设备“是否正常运行”的感知往往不是来自文字而是来自界面里那些细微的动态反馈。洗衣机就是这样一类典型产品——它本身没有屏幕或者屏幕很小用户在使用时经常离开现场。此时如果操作反馈、进度表达、异常提醒全靠静态图标和指示灯体验会非常单薄。本文会围绕“动态设计”这个主题以洗衣机交互界面为具体场景从设计思路讲到 Web 技术实现带你做一个可以直接在浏览器里运行的动效原型。先给结论洗衣机动效设计的关键不是“把界面做花”而是通过动态设计让用户对设备状态形成即时、准确的心智模型。状态连续、时间可预期、风险可感知这三件事是洗衣机动效的核心价值。如果你正在做智能家电的 H5 控制页、小程序或者只是想练习 UI 动效这篇文章给出的状态建模、CSS 动效和性能验证方法都可以直接复用。文章会这样展开先讲清楚动态设计在洗衣机产品中的角色和分类然后搭一个轻量环境接着设计洗衣流程的状态机再一步步实现水波、滚筒旋转、进度环等核心动效最后给出运行验证、常见问题排查和工程化建议。建议你先准备好浏览器和编辑器跟着把最小原型跑通再考虑如何迁移到自己的项目里。1. 动态设计在洗衣机产品中的角色很多人觉得动态设计就是“锦上添花”真正做产品时优先级很低。但放在洗衣机这类高频、长耗时、低关注度的设备上动态设计其实是功能的一部分。想象一个场景用户把衣服放进洗衣机按下启动键然后去做别的事。过了半小时他回来瞄一眼控制面板想知道“现在洗涤到哪一步了”“还要多久”“有没有出故障”。如果他看到的是静止图标只能靠猜如果看到的是一个一直在转的滚筒动效配合进度环上的剩余时间就能在 0.5 秒内完成判断。这就是动态设计解决的问题——它不是好看而是降低用户的认知成本。传统洗衣机面板存在两个典型的体验痛点。第一个是反馈链路长。实体面板上只有几个 LED 灯用户很难区分“当前是洗涤还是漂洗”更不知道每个阶段还需要多久。第二个是异常状态不直观。比如进水异常、门盖未关如果只有一个红灯闪烁用户经常忽略导致衣服泡在水里大半天。动态设计可以在这些环节提供更明确的视觉信号异常时用低频高对比的呼吸闪烁结束时用一段完整的完成动画运行时用连续但克制的水波与旋转动效。这里要特别澄清一个误区动态设计不等于大量动画。洗衣机的使用场景是“用户偶尔关注”动态效果应当作为状态表达的辅助线索而不是持续吸引注意力的装饰。如果你让水波无限高频地滚动、让颜色持续高饱和闪烁用户会产生视觉疲劳甚至误以为设备异常。真实项目中更稳妥的做法是把动效分成“常驻慢动效”和“触发型动效”两类前者负责状态展示后者负责行为反馈。从产品层面看洗衣机动效设计最应该关注的三个点状态连续从进水到洗涤再到脱水视觉上是一条连续的时间线而不是跳变的孤立页面。时间可预期用户能通过动效感知当前阶段和剩余时间。风险可感知异常、暂停、门锁等关键状态必须能与正常运行状态明显区分。2. 核心概念动态设计中的状态、动效与隐喻在动手写代码前需要先统一几个概念否则后面很容易把“设计词”和“代码词”混在一起。动态设计Motion Design在 UI 领域指的是界面中随时间变化的可视化反馈。它包含两个层面一是信息层面通过位置、大小、透明度、颜色、形状的变化表达状态二是物理层面通过时长、缓动、惯性等参数模拟现实世界的运动规律。对洗衣机界面来说动态设计的目标是让用户通过“运动的方式”读懂“机器在做什么”。缓动Easing是最容易被忽略但影响最大的参数。真实世界的物体运动几乎都不是匀速的滚筒启动时有加速停止时有减速水滴落下时有重力感。CSS 中常用的ease-in-out、cubic-bezier()就是用来模拟这些物理感的工具。如果全程使用linear匀速动画界面会显得生硬机械。隐喻Metaphor是洗衣机界面设计中的另一关键概念。我们用“涟漪”表达进水用“旋转滚筒”表达洗涤用“进度环”表达剩余时间这些都是用户心智中已经存在的模型。动态设计要做的是把这些模型翻译成视觉运动而不是发明一套全新的符号。在动手实现时建议把动效分为四类动效类型典型场景动态表现设计目标状态反馈启动、暂停、完成按钮点击反缩、状态图标切换让操作结果被明确感知流程引导进水、洗涤、漂洗、脱水水波、滚筒旋转、进度环让用户知道当前阶段环境模拟进水时水位上升波浪高度与速度变化降低阅读门槛异常提醒故障、未关门、超时低频闪烁、颜色告警提高风险注意度这个概念分类还有一个实际好处它是可测试的。状态反馈类动效应该有明确触发条件和完成状态流程引导类动效必须与设备状态数据保持一致异常提醒类动效必须在资源受限环境下依然可见。后面章节的状态机就是围绕这些类型来设计。3. 环境准备用原生 HTML/CSS/JS 搭建动效原型本教程不依赖重量级框架核心原因是动效原型阶段最重要的是快速验证设计想法而不是引入工程复杂度。我们直接用 HTML、CSS 和 JavaScript 就能实现洗衣机动效的完整闭环后续再迁移到 Vue、React 或小程序也相对容易。环境要求如下操作系统Windows、macOS、Linux 均可。浏览器推荐最新版 Chrome 或 Edge用于调试动效和查看性能。编辑器VS Code 或任意你习惯的编辑器。本地静态服务可选用于模拟真实访问环境也可以直接双击 HTML 文件运行。项目目录建议如下washing-machine-motion/ ├── index.html ├── styles/ │ └── main.css ├── scripts/ │ └── machine.js └── README.md如果你希望在本地通过服务方式运行可以用 Node.js 的工具也可以用 Python 自带的简易服务器。这里给出两种方式# 方式一使用 npx需要 Node.js 环境 npx serve . # 方式二使用 Python本机 Python 3 python3 -m http.server 8080启动后在浏览器访问http://localhost:8080即可看到页面。需要说明的是版本细节请以你本机的实际环境为准本文关注的是通用实现思路不绑定特定框架或工具链。4. 先建模再写动效洗衣流程状态机设计很多人在做动效时会先写 CSS再补 JS结果状态一多就乱。正确顺序应该是先建立状态模型再让动效作为状态的“可视化映射”。因为动效本身没有业务含义只有绑定到状态时它的语义才成立。洗衣机至少包含以下状态待机IDLE、进水FILLING、洗涤WASHING、漂洗RINSING、脱水SPINNING、暂停PAUSED、异常ERROR、完成DONE。从待机到完成是一条主流程异常和暂停则需要能随时中断并恢复。下面的状态机定义了基础转换逻辑// 文件路径scripts/machine.js const WASH_STATE { IDLE: IDLE, FILLING: FILLING, WASHING: WASHING, RINSING: RINSING, SPINNING: SPINNING, PAUSED: PAUSED, ERROR: ERROR, DONE: DONE };状态转换关系可以用一张表来表达当前状态触发条件下一状态界面动效IDLE用户点击“开始”FILLING启动涟漪、水位上升FILLING进水计时结束WASHING水波稳定、滚筒低速旋转WASHING洗涤计时结束RINSING水波重置、滚筒中速旋转RINSING漂洗计时结束SPINNING水波消失、滚筒高速旋转SPINNING脱水计时结束DONE滚筒减速停止、完成动画任意运行状态用户点击“暂停”PAUSED所有旋转缓慢停止、降低亮度PAUSED用户点击“继续”原状态从暂停处平滑恢复任意状态检测到异常信号ERROR高频告警动效在代码里状态机可以写成简单的转换函数。为了避免“魔法字符串”我们把状态定义和转换逻辑独立出来// 文件路径scripts/machine.js function getNextState(currentState, action) { switch (currentState) { case WASH_STATE.IDLE: if (action START) return WASH_STATE.FILLING; break; case WASH_STATE.FILLING: if (action FILL_DONE) return WASH_STATE.WASHING; if (action PAUSE) return WASH_STATE.PAUSED; break; case WASH_STATE.WASHING: if (action WASH_DONE) return WASH_STATE.RINSING; if (action PAUSE) return WASH_STATE.PAUSED; break; case WASH_STATE.RINSING: if (action RINSE_DONE) return WASH_STATE.SPINNING; if (action PAUSE) return WASH_STATE.PAUSED; break; case WASH_STATE.SPINNING: if (action SPIN_DONE) return WASH_STATE.DONE; if (action PAUSE) return WASH_STATE.PAUSED; break; case WASH_STATE.PAUSED: if (action RESUME) return WASH_STATE.WASHING; break; default: break; } return currentState; }为什么先把暂停恢复都指向 WASHING这是为了简化演示。真实项目中你应该在暂停时保存“上一个状态”恢复时回到原状态。这里用一个简化版本跑通流程后面可以自行扩展。有了状态机动效就变成了一个纯粹的“类名切换”问题每次状态变化时给界面容器设置对应的>!-- 文件路径index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title洗衣机动态设计原型/title link relstylesheet hrefstyles/main.css / /head body main classwashing-machine idmachine>/* 文件路径styles/main.css */ .washing-machine { width: 360px; margin: 40px auto; border-radius: 24px; background: #f5f7fb; padding: 24px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); text-align: center; } .drum { position: relative; width: 240px; height: 240px; margin: 20px auto; border-radius: 50%; overflow: hidden; background: #e8edf2; border: 6px solid #d6dee6; } .water-surface { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; transition: height 0.8s ease; } .wave { position: absolute; left: -50%; width: 200%; height: 100%; border-radius: 42%; } .wave-front { background: rgba(64, 156, 255, 0.45); animation: wave-move 4s linear infinite; } .wave-back { background: rgba(64, 156, 255, 0.25); animation: wave-move 6s linear infinite reverse; } keyframes wave-move { from { transform: rotate(0deg) translateX(0); } to { transform: rotate(10deg) translateX(-12px); } }这里用旋转加水位移的方式制造波浪流动感。如果不加overflow: hidden水波会溢出滚筒如果不加left: -50%旋转动画会让波浪露出边界。滚筒旋转动效则在状态切换时改变转速模拟不同洗涤阶段/* 文件路径styles/main.css */ .clothes { position: absolute; top: 30%; left: 50%; width: 90px; height: 90px; margin-left: -45px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff, #dbe4ea); transform-origin: center center; } /* 待机不旋转 */ .washing-machine[data-stateIDLE] .clothes { animation: none; } /* 洗涤低速旋转 */ .washing-machine[data-stateFILLING] .clothes, .washing-machine[data-stateWASHING] .clothes { animation: spin-drum 3s linear infinite; opacity: 0.7; } /* 脱水高速旋转 */ .washing-machine[data-stateSPINNING] .clothes { animation: spin-drum 0.8s linear infinite; opacity: 0.5; } /* 暂停缓慢减速停住 */ .washing-machine[data-statePAUSED] .clothes { animation: spin-drum 6s linear infinite; filter: brightness(0.85); } keyframes spin-drum { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }需要注意的是CSS 动画不能“从高速平滑减速到停止”除非用transition配合 JS 计算当前角度。在原型阶段直接用不同转速表达“高速”和“低速”是足够清晰的。要想做到真正的物理惯性可以引入 Web Animations API 或 CSSanimation-timing-function的复合曲线。5.3 SVG 进度环与状态类名切换进度环的核心思路是通过stroke-dasharray和stroke-dashoffset绘制弧线。我们把圆周长设为固定值2 * π * 52 ≈ 326.73然后根据进度百分比计算偏移量。/* 文件路径styles/main.css */ .progress-ring { width: 96px; height: 96px; transform: rotate(-90deg); } .progress-track { fill: none; stroke: #e1e6ec; stroke-width: 6; } .progress-value { fill: none; stroke: #2f8cff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset 0.4s ease; }当进度为 0% 时dashoffset等于周长弧线完全隐藏进度为 100% 时dashoffset为 0出现完整圆环。/* 文件路径styles/main.css */ .washing-machine[data-stateWASHING] .progress-value, .washing-machine[data-stateSPINNING] .progress-value, .washing-machine[data-stateDONE] .progress-value { stroke-dashoffset: 0; }在原型阶段可以直接用状态决定进度环但对于真实产品进度必须由设备上报的寄存器数据计算不能用固定样式。这一点在后面的最佳实践部分会再强调。5.4 JavaScript 驱动完整流程JS 部分负责三件事状态流转、时间推进、界面同步。我们先把状态文字、进度、按钮事件绑定好然后启动定时器模拟洗涤流程。// 文件路径scripts/machine.js (function () { const machine document.getElementById(machine); const stateText document.getElementById(stateText); const timeText document.getElementById(timeText); const progressValue document.getElementById(progressValue); const progressText document.getElementById(progressText); const startBtn document.getElementById(startBtn); const pauseBtn document.getElementById(pauseBtn); const resetBtn document.getElementById(resetBtn); const STATE_TEXT { IDLE: 待机, FILLING: 进水, WASHING: 洗涤, RINSING: 漂洗, SPINNING: 脱水, PAUSED: 暂停, ERROR: 异常, DONE: 完成 }; const STATE_DURATION { FILLING: 4000, WASHING: 6000, RINSING: 5000, SPINNING: 4000 }; let currentState WASH_STATE.IDLE; let previousState WASH_STATE.IDLE; let stateTimer null; let percentTimer null; let progress 0; function setState(nextState) { currentState nextState; machine.dataset.state currentState; stateText.textContent STATE_TEXT[currentState] || currentState; updateTimeText(); } function updateTimeText() { if (currentState WASH_STATE.IDLE || currentState WASH_STATE.DONE) { timeText.textContent --; return; } if (currentState WASH_STATE.PAUSED) { timeText.textContent 已暂停; return; } const remainMs Math.max(0, getRemainMs()); timeText.textContent Math.ceil(remainMs / 1000) s; } function getRemainMs() { const duration STATE_DURATION[currentState]; if (!duration) return 0; const elapsed progress / 100 * duration; return Math.max(0, duration - elapsed); } function startWashCycle() { setState(WASH_STATE.FILLING); progress 0; startStateTimer(); startPercentTimer(); } function startStateTimer() { stopStateTimer(); const duration STATE_DURATION[currentState]; if (!duration) return; stateTimer setTimeout(() { const nextActionMap { FILLING: FILL_DONE, WASHING: WASH_DONE, RINSING: RINSE_DONE, SPINNING: SPIN_DONE }; const next getNextState(currentState, nextActionMap[currentState]); setState(next); if (next WASH_STATE.DONE) { stopPercentTimer(); progressValue.style.strokeDashoffset 0; progressText.textContent 100%; } else { progress 0; startStateTimer(); } }, duration); } function startPercentTimer() { stopPercentTimer(); percentTimer setInterval(() { const duration STATE_DURATION[currentState]; if (!duration) return; progress Math.min(100, progress 0.5); const perimeter 326.73; const offset perimeter * (1 - progress / 100); progressValue.style.strokeDashoffset offset; progressText.textContent Math.floor(progress) %; updateTimeText(); }, 20); } function stopStateTimer() { if (stateTimer) { clearTimeout(stateTimer); stateTimer null; } } function stopPercentTimer() { if (percentTimer) { clearInterval(percentTimer); percentTimer null; } } function resetWashCycle() { stopStateTimer(); stopPercentTimer(); progress 0; progressValue.style.strokeDashoffset 326.73; progressText.textContent 0%; setState(WASH_STATE.IDLE); } startBtn.addEventListener(click, function () { if (currentState WASH_STATE.IDLE || currentState WASH_STATE.DONE) { startWashCycle(); } }); pauseBtn.addEventListener(click, function () { if (currentState WASH_STATE.PAUSED) { setState(previousState); previousState WASH_STATE.PAUSED; startStateTimer(); startPercentTimer(); return; } if (currentState WASH_STATE.FILLING || currentState WASH_STATE.WASHING || currentState WASH_STATE.RINSING || currentState WASH_STATE.SPINNING) { previousState currentState; stopStateTimer(); stopPercentTimer(); setState(WASH_STATE.PAUSED); } }); resetBtn.addEventListener(click, resetWashCycle); })();这段代码把状态机、计时器和界面同步串在了一起。实际项目中STATE_DURATION应该改成“设备状态上报”或“剩余时间接口”而不是前端写死的定时器。但在原型阶段用定时器模拟流程能快速验证交互和动效是否符合预期。6. 运行结果与动效验证完成以上代码后在浏览器中打开页面预期表现如下初始状态为“待机”滚筒静止进度环为 0%时间显示为--。点击“开始”状态切换为“进水”水波出现并缓慢流动衣服开始低速旋转进度环开始增长。4 秒后进入“洗涤”水波和滚筒继续保持低速旋转进度继续增长。6 秒后进入“漂洗”水波平稳转速不变或略微加速。5 秒后进入“脱水”水波高度降为 0滚筒进入高速旋转。4 秒后进入“完成”滚筒停止进度环到达 100%状态文字显示“完成”。如果点击“暂停”当前阶段的动效应当明显放缓界面亮度降低状态文字显示“已暂停”。再点击“继续”流程从暂停处恢复。运行验证时重点观察三个细节水波是否始终在滚筒内部没有溢出边界。从进水到洗涤的状态切换时转速是否有明显变化。进度环的弧线是否连贯增长没有跳变。除了视觉验证还需要用浏览器开发者工具做性能检查。打开 DevTools 的 Performance 面板录制一段运行过程观察是否有红色长任务。理想的动效应该让主线程任务保持短促动画不丢帧。这里补充一个实用技巧在 CSS 动效中优先使用transform和opacity避免频繁触发layout和paint。例如水波动画使用transform: rotate()而不是修改left或top进度环使用stroke-dashoffset虽然也能接受但更极客的做法是直接用 CSS 的conic-gradient不过 SVG 方案的可读性更好适合原型。7. 常见问题与排查方法动效原型在开发中常会遇到几个问题下面按现象整理成排查表问题现象可能原因排查方式解决方案水波不流动CSS 动画未绑定到元素或animation-name拼写错误在 DevTools Elements 中查看元素是否应用animation属性检查.wave-front的类名和 keyframes 名称是否一致滚筒转速突变未在状态切换时更新动画时长查看>:root { --motion-duration-slow: 6s; --motion-duration-normal: 3s; --motion-duration-fast: 0.8s; --motion-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --motion-ease-emphasized: cubic-bezier(0.2, 0.0, 0.1, 1); }这样当交互设计师调整动效节奏时前端只需要修改配置文件而不是逐一搜索 CSS 文件里的animation。第二动效不能成为唯一的反馈通道。洗衣机的异常状态必须同时提供文字、图标和必要的语音或蜂鸣提示。如果设备硬件不支持声音界面至少要有明显的颜色告警和高频闪烁并且不能因为用户切走页面而丢失。真实硬件中“门锁未关”“进水阀异常”这类风险必须做到多通道提醒。第三动效数据必须和真实设备状态同步。前端定时器只能用来做演示真实产品中洗衣机是通过 BLE、Wi-Fi 或网关上报状态的。设备上报的剩余时间、阶段编号、错误码才是动效的唯一数据源。前端要做的是把真实数据映射到动效上而不是自己预测“下一阶段”。第四注意低性能设备和资源受限场景。很多家电控制面板的屏幕是低刷新率 LCD甚至只有 30fps 的 MCU 驱动。在这种环境下高频水波动画会占用大量 CPU甚至导致触摸响应变慢。建议设置降级开关在性能不足时把水波动画替换为静态水位条只保留状态文字和进度环。第五无障碍设计。prefers-reduced-motion媒体查询应该作为动效设计的一部分而不是可选项。如果用户系统开启了减少动态效果界面应该自动降低动画频率只保留必要的状态信息。media (prefers-reduced-motion: reduce) { .wave-front, .wave-back, .clothes { animation: none !important; } }这一点不只是为了规范也是真实用户需求一些有前庭功能障碍的用户看到持续旋转动效会产生不适。第六动效需要被测试。建议把状态切换逻辑和动效渲染分离状态机可以单测动效做视觉回归。这样设计迭代时不会因为调整了一个动画时长而弄坏业务流程。9. 总结与后续学习方向这篇文章从洗衣机这个具体产品出发完成了动态设计的目标拆解、状态建模、动效实现和性能验证。真正关键的点在于动效不是事后装饰而是和状态机一样需要被设计的系统。把状态表达清楚比单纯追求动画流畅更重要。建议你下一步动手把原型跑通然后尝试两个方向。一是扩展给洗衣机加入更多真实状态比如水位传感器、门锁状态、洗涤剂余量提醒并思考每个状态需要什么动效来表达。二是移植把这个原型中“状态切换 class 驱动 进度更新”的模式迁移到小程序或 React 组件中体会跨端场景的差异。如果想继续深入可以研究 Web Animations APIWAAPI它比 CSS 动画更容易在 JS 中控制暂停、反转和播放进度也可以学习 Canvas 或 WebGL 做更真实的水流模拟但要注意性能开销还可以研究智能家电的 BLE 通信协议把前端动效和设备真实状态对接起来。这几个方向每一个都值得单独写一篇。 洗衣机界面动态设计实战：从状态建模到CSS动效实现
做了不少智能硬件的前端界面后你会发现一个规律用户对设备“是否正常运行”的感知往往不是来自文字而是来自界面里那些细微的动态反馈。洗衣机就是这样一类典型产品——它本身没有屏幕或者屏幕很小用户在使用时经常离开现场。此时如果操作反馈、进度表达、异常提醒全靠静态图标和指示灯体验会非常单薄。本文会围绕“动态设计”这个主题以洗衣机交互界面为具体场景从设计思路讲到 Web 技术实现带你做一个可以直接在浏览器里运行的动效原型。先给结论洗衣机动效设计的关键不是“把界面做花”而是通过动态设计让用户对设备状态形成即时、准确的心智模型。状态连续、时间可预期、风险可感知这三件事是洗衣机动效的核心价值。如果你正在做智能家电的 H5 控制页、小程序或者只是想练习 UI 动效这篇文章给出的状态建模、CSS 动效和性能验证方法都可以直接复用。文章会这样展开先讲清楚动态设计在洗衣机产品中的角色和分类然后搭一个轻量环境接着设计洗衣流程的状态机再一步步实现水波、滚筒旋转、进度环等核心动效最后给出运行验证、常见问题排查和工程化建议。建议你先准备好浏览器和编辑器跟着把最小原型跑通再考虑如何迁移到自己的项目里。1. 动态设计在洗衣机产品中的角色很多人觉得动态设计就是“锦上添花”真正做产品时优先级很低。但放在洗衣机这类高频、长耗时、低关注度的设备上动态设计其实是功能的一部分。想象一个场景用户把衣服放进洗衣机按下启动键然后去做别的事。过了半小时他回来瞄一眼控制面板想知道“现在洗涤到哪一步了”“还要多久”“有没有出故障”。如果他看到的是静止图标只能靠猜如果看到的是一个一直在转的滚筒动效配合进度环上的剩余时间就能在 0.5 秒内完成判断。这就是动态设计解决的问题——它不是好看而是降低用户的认知成本。传统洗衣机面板存在两个典型的体验痛点。第一个是反馈链路长。实体面板上只有几个 LED 灯用户很难区分“当前是洗涤还是漂洗”更不知道每个阶段还需要多久。第二个是异常状态不直观。比如进水异常、门盖未关如果只有一个红灯闪烁用户经常忽略导致衣服泡在水里大半天。动态设计可以在这些环节提供更明确的视觉信号异常时用低频高对比的呼吸闪烁结束时用一段完整的完成动画运行时用连续但克制的水波与旋转动效。这里要特别澄清一个误区动态设计不等于大量动画。洗衣机的使用场景是“用户偶尔关注”动态效果应当作为状态表达的辅助线索而不是持续吸引注意力的装饰。如果你让水波无限高频地滚动、让颜色持续高饱和闪烁用户会产生视觉疲劳甚至误以为设备异常。真实项目中更稳妥的做法是把动效分成“常驻慢动效”和“触发型动效”两类前者负责状态展示后者负责行为反馈。从产品层面看洗衣机动效设计最应该关注的三个点状态连续从进水到洗涤再到脱水视觉上是一条连续的时间线而不是跳变的孤立页面。时间可预期用户能通过动效感知当前阶段和剩余时间。风险可感知异常、暂停、门锁等关键状态必须能与正常运行状态明显区分。2. 核心概念动态设计中的状态、动效与隐喻在动手写代码前需要先统一几个概念否则后面很容易把“设计词”和“代码词”混在一起。动态设计Motion Design在 UI 领域指的是界面中随时间变化的可视化反馈。它包含两个层面一是信息层面通过位置、大小、透明度、颜色、形状的变化表达状态二是物理层面通过时长、缓动、惯性等参数模拟现实世界的运动规律。对洗衣机界面来说动态设计的目标是让用户通过“运动的方式”读懂“机器在做什么”。缓动Easing是最容易被忽略但影响最大的参数。真实世界的物体运动几乎都不是匀速的滚筒启动时有加速停止时有减速水滴落下时有重力感。CSS 中常用的ease-in-out、cubic-bezier()就是用来模拟这些物理感的工具。如果全程使用linear匀速动画界面会显得生硬机械。隐喻Metaphor是洗衣机界面设计中的另一关键概念。我们用“涟漪”表达进水用“旋转滚筒”表达洗涤用“进度环”表达剩余时间这些都是用户心智中已经存在的模型。动态设计要做的是把这些模型翻译成视觉运动而不是发明一套全新的符号。在动手实现时建议把动效分为四类动效类型典型场景动态表现设计目标状态反馈启动、暂停、完成按钮点击反缩、状态图标切换让操作结果被明确感知流程引导进水、洗涤、漂洗、脱水水波、滚筒旋转、进度环让用户知道当前阶段环境模拟进水时水位上升波浪高度与速度变化降低阅读门槛异常提醒故障、未关门、超时低频闪烁、颜色告警提高风险注意度这个概念分类还有一个实际好处它是可测试的。状态反馈类动效应该有明确触发条件和完成状态流程引导类动效必须与设备状态数据保持一致异常提醒类动效必须在资源受限环境下依然可见。后面章节的状态机就是围绕这些类型来设计。3. 环境准备用原生 HTML/CSS/JS 搭建动效原型本教程不依赖重量级框架核心原因是动效原型阶段最重要的是快速验证设计想法而不是引入工程复杂度。我们直接用 HTML、CSS 和 JavaScript 就能实现洗衣机动效的完整闭环后续再迁移到 Vue、React 或小程序也相对容易。环境要求如下操作系统Windows、macOS、Linux 均可。浏览器推荐最新版 Chrome 或 Edge用于调试动效和查看性能。编辑器VS Code 或任意你习惯的编辑器。本地静态服务可选用于模拟真实访问环境也可以直接双击 HTML 文件运行。项目目录建议如下washing-machine-motion/ ├── index.html ├── styles/ │ └── main.css ├── scripts/ │ └── machine.js └── README.md如果你希望在本地通过服务方式运行可以用 Node.js 的工具也可以用 Python 自带的简易服务器。这里给出两种方式# 方式一使用 npx需要 Node.js 环境 npx serve . # 方式二使用 Python本机 Python 3 python3 -m http.server 8080启动后在浏览器访问http://localhost:8080即可看到页面。需要说明的是版本细节请以你本机的实际环境为准本文关注的是通用实现思路不绑定特定框架或工具链。4. 先建模再写动效洗衣流程状态机设计很多人在做动效时会先写 CSS再补 JS结果状态一多就乱。正确顺序应该是先建立状态模型再让动效作为状态的“可视化映射”。因为动效本身没有业务含义只有绑定到状态时它的语义才成立。洗衣机至少包含以下状态待机IDLE、进水FILLING、洗涤WASHING、漂洗RINSING、脱水SPINNING、暂停PAUSED、异常ERROR、完成DONE。从待机到完成是一条主流程异常和暂停则需要能随时中断并恢复。下面的状态机定义了基础转换逻辑// 文件路径scripts/machine.js const WASH_STATE { IDLE: IDLE, FILLING: FILLING, WASHING: WASHING, RINSING: RINSING, SPINNING: SPINNING, PAUSED: PAUSED, ERROR: ERROR, DONE: DONE };状态转换关系可以用一张表来表达当前状态触发条件下一状态界面动效IDLE用户点击“开始”FILLING启动涟漪、水位上升FILLING进水计时结束WASHING水波稳定、滚筒低速旋转WASHING洗涤计时结束RINSING水波重置、滚筒中速旋转RINSING漂洗计时结束SPINNING水波消失、滚筒高速旋转SPINNING脱水计时结束DONE滚筒减速停止、完成动画任意运行状态用户点击“暂停”PAUSED所有旋转缓慢停止、降低亮度PAUSED用户点击“继续”原状态从暂停处平滑恢复任意状态检测到异常信号ERROR高频告警动效在代码里状态机可以写成简单的转换函数。为了避免“魔法字符串”我们把状态定义和转换逻辑独立出来// 文件路径scripts/machine.js function getNextState(currentState, action) { switch (currentState) { case WASH_STATE.IDLE: if (action START) return WASH_STATE.FILLING; break; case WASH_STATE.FILLING: if (action FILL_DONE) return WASH_STATE.WASHING; if (action PAUSE) return WASH_STATE.PAUSED; break; case WASH_STATE.WASHING: if (action WASH_DONE) return WASH_STATE.RINSING; if (action PAUSE) return WASH_STATE.PAUSED; break; case WASH_STATE.RINSING: if (action RINSE_DONE) return WASH_STATE.SPINNING; if (action PAUSE) return WASH_STATE.PAUSED; break; case WASH_STATE.SPINNING: if (action SPIN_DONE) return WASH_STATE.DONE; if (action PAUSE) return WASH_STATE.PAUSED; break; case WASH_STATE.PAUSED: if (action RESUME) return WASH_STATE.WASHING; break; default: break; } return currentState; }为什么先把暂停恢复都指向 WASHING这是为了简化演示。真实项目中你应该在暂停时保存“上一个状态”恢复时回到原状态。这里用一个简化版本跑通流程后面可以自行扩展。有了状态机动效就变成了一个纯粹的“类名切换”问题每次状态变化时给界面容器设置对应的>!-- 文件路径index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title洗衣机动态设计原型/title link relstylesheet hrefstyles/main.css / /head body main classwashing-machine idmachine>/* 文件路径styles/main.css */ .washing-machine { width: 360px; margin: 40px auto; border-radius: 24px; background: #f5f7fb; padding: 24px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); text-align: center; } .drum { position: relative; width: 240px; height: 240px; margin: 20px auto; border-radius: 50%; overflow: hidden; background: #e8edf2; border: 6px solid #d6dee6; } .water-surface { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; transition: height 0.8s ease; } .wave { position: absolute; left: -50%; width: 200%; height: 100%; border-radius: 42%; } .wave-front { background: rgba(64, 156, 255, 0.45); animation: wave-move 4s linear infinite; } .wave-back { background: rgba(64, 156, 255, 0.25); animation: wave-move 6s linear infinite reverse; } keyframes wave-move { from { transform: rotate(0deg) translateX(0); } to { transform: rotate(10deg) translateX(-12px); } }这里用旋转加水位移的方式制造波浪流动感。如果不加overflow: hidden水波会溢出滚筒如果不加left: -50%旋转动画会让波浪露出边界。滚筒旋转动效则在状态切换时改变转速模拟不同洗涤阶段/* 文件路径styles/main.css */ .clothes { position: absolute; top: 30%; left: 50%; width: 90px; height: 90px; margin-left: -45px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff, #dbe4ea); transform-origin: center center; } /* 待机不旋转 */ .washing-machine[data-stateIDLE] .clothes { animation: none; } /* 洗涤低速旋转 */ .washing-machine[data-stateFILLING] .clothes, .washing-machine[data-stateWASHING] .clothes { animation: spin-drum 3s linear infinite; opacity: 0.7; } /* 脱水高速旋转 */ .washing-machine[data-stateSPINNING] .clothes { animation: spin-drum 0.8s linear infinite; opacity: 0.5; } /* 暂停缓慢减速停住 */ .washing-machine[data-statePAUSED] .clothes { animation: spin-drum 6s linear infinite; filter: brightness(0.85); } keyframes spin-drum { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }需要注意的是CSS 动画不能“从高速平滑减速到停止”除非用transition配合 JS 计算当前角度。在原型阶段直接用不同转速表达“高速”和“低速”是足够清晰的。要想做到真正的物理惯性可以引入 Web Animations API 或 CSSanimation-timing-function的复合曲线。5.3 SVG 进度环与状态类名切换进度环的核心思路是通过stroke-dasharray和stroke-dashoffset绘制弧线。我们把圆周长设为固定值2 * π * 52 ≈ 326.73然后根据进度百分比计算偏移量。/* 文件路径styles/main.css */ .progress-ring { width: 96px; height: 96px; transform: rotate(-90deg); } .progress-track { fill: none; stroke: #e1e6ec; stroke-width: 6; } .progress-value { fill: none; stroke: #2f8cff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset 0.4s ease; }当进度为 0% 时dashoffset等于周长弧线完全隐藏进度为 100% 时dashoffset为 0出现完整圆环。/* 文件路径styles/main.css */ .washing-machine[data-stateWASHING] .progress-value, .washing-machine[data-stateSPINNING] .progress-value, .washing-machine[data-stateDONE] .progress-value { stroke-dashoffset: 0; }在原型阶段可以直接用状态决定进度环但对于真实产品进度必须由设备上报的寄存器数据计算不能用固定样式。这一点在后面的最佳实践部分会再强调。5.4 JavaScript 驱动完整流程JS 部分负责三件事状态流转、时间推进、界面同步。我们先把状态文字、进度、按钮事件绑定好然后启动定时器模拟洗涤流程。// 文件路径scripts/machine.js (function () { const machine document.getElementById(machine); const stateText document.getElementById(stateText); const timeText document.getElementById(timeText); const progressValue document.getElementById(progressValue); const progressText document.getElementById(progressText); const startBtn document.getElementById(startBtn); const pauseBtn document.getElementById(pauseBtn); const resetBtn document.getElementById(resetBtn); const STATE_TEXT { IDLE: 待机, FILLING: 进水, WASHING: 洗涤, RINSING: 漂洗, SPINNING: 脱水, PAUSED: 暂停, ERROR: 异常, DONE: 完成 }; const STATE_DURATION { FILLING: 4000, WASHING: 6000, RINSING: 5000, SPINNING: 4000 }; let currentState WASH_STATE.IDLE; let previousState WASH_STATE.IDLE; let stateTimer null; let percentTimer null; let progress 0; function setState(nextState) { currentState nextState; machine.dataset.state currentState; stateText.textContent STATE_TEXT[currentState] || currentState; updateTimeText(); } function updateTimeText() { if (currentState WASH_STATE.IDLE || currentState WASH_STATE.DONE) { timeText.textContent --; return; } if (currentState WASH_STATE.PAUSED) { timeText.textContent 已暂停; return; } const remainMs Math.max(0, getRemainMs()); timeText.textContent Math.ceil(remainMs / 1000) s; } function getRemainMs() { const duration STATE_DURATION[currentState]; if (!duration) return 0; const elapsed progress / 100 * duration; return Math.max(0, duration - elapsed); } function startWashCycle() { setState(WASH_STATE.FILLING); progress 0; startStateTimer(); startPercentTimer(); } function startStateTimer() { stopStateTimer(); const duration STATE_DURATION[currentState]; if (!duration) return; stateTimer setTimeout(() { const nextActionMap { FILLING: FILL_DONE, WASHING: WASH_DONE, RINSING: RINSE_DONE, SPINNING: SPIN_DONE }; const next getNextState(currentState, nextActionMap[currentState]); setState(next); if (next WASH_STATE.DONE) { stopPercentTimer(); progressValue.style.strokeDashoffset 0; progressText.textContent 100%; } else { progress 0; startStateTimer(); } }, duration); } function startPercentTimer() { stopPercentTimer(); percentTimer setInterval(() { const duration STATE_DURATION[currentState]; if (!duration) return; progress Math.min(100, progress 0.5); const perimeter 326.73; const offset perimeter * (1 - progress / 100); progressValue.style.strokeDashoffset offset; progressText.textContent Math.floor(progress) %; updateTimeText(); }, 20); } function stopStateTimer() { if (stateTimer) { clearTimeout(stateTimer); stateTimer null; } } function stopPercentTimer() { if (percentTimer) { clearInterval(percentTimer); percentTimer null; } } function resetWashCycle() { stopStateTimer(); stopPercentTimer(); progress 0; progressValue.style.strokeDashoffset 326.73; progressText.textContent 0%; setState(WASH_STATE.IDLE); } startBtn.addEventListener(click, function () { if (currentState WASH_STATE.IDLE || currentState WASH_STATE.DONE) { startWashCycle(); } }); pauseBtn.addEventListener(click, function () { if (currentState WASH_STATE.PAUSED) { setState(previousState); previousState WASH_STATE.PAUSED; startStateTimer(); startPercentTimer(); return; } if (currentState WASH_STATE.FILLING || currentState WASH_STATE.WASHING || currentState WASH_STATE.RINSING || currentState WASH_STATE.SPINNING) { previousState currentState; stopStateTimer(); stopPercentTimer(); setState(WASH_STATE.PAUSED); } }); resetBtn.addEventListener(click, resetWashCycle); })();这段代码把状态机、计时器和界面同步串在了一起。实际项目中STATE_DURATION应该改成“设备状态上报”或“剩余时间接口”而不是前端写死的定时器。但在原型阶段用定时器模拟流程能快速验证交互和动效是否符合预期。6. 运行结果与动效验证完成以上代码后在浏览器中打开页面预期表现如下初始状态为“待机”滚筒静止进度环为 0%时间显示为--。点击“开始”状态切换为“进水”水波出现并缓慢流动衣服开始低速旋转进度环开始增长。4 秒后进入“洗涤”水波和滚筒继续保持低速旋转进度继续增长。6 秒后进入“漂洗”水波平稳转速不变或略微加速。5 秒后进入“脱水”水波高度降为 0滚筒进入高速旋转。4 秒后进入“完成”滚筒停止进度环到达 100%状态文字显示“完成”。如果点击“暂停”当前阶段的动效应当明显放缓界面亮度降低状态文字显示“已暂停”。再点击“继续”流程从暂停处恢复。运行验证时重点观察三个细节水波是否始终在滚筒内部没有溢出边界。从进水到洗涤的状态切换时转速是否有明显变化。进度环的弧线是否连贯增长没有跳变。除了视觉验证还需要用浏览器开发者工具做性能检查。打开 DevTools 的 Performance 面板录制一段运行过程观察是否有红色长任务。理想的动效应该让主线程任务保持短促动画不丢帧。这里补充一个实用技巧在 CSS 动效中优先使用transform和opacity避免频繁触发layout和paint。例如水波动画使用transform: rotate()而不是修改left或top进度环使用stroke-dashoffset虽然也能接受但更极客的做法是直接用 CSS 的conic-gradient不过 SVG 方案的可读性更好适合原型。7. 常见问题与排查方法动效原型在开发中常会遇到几个问题下面按现象整理成排查表问题现象可能原因排查方式解决方案水波不流动CSS 动画未绑定到元素或animation-name拼写错误在 DevTools Elements 中查看元素是否应用animation属性检查.wave-front的类名和 keyframes 名称是否一致滚筒转速突变未在状态切换时更新动画时长查看>:root { --motion-duration-slow: 6s; --motion-duration-normal: 3s; --motion-duration-fast: 0.8s; --motion-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --motion-ease-emphasized: cubic-bezier(0.2, 0.0, 0.1, 1); }这样当交互设计师调整动效节奏时前端只需要修改配置文件而不是逐一搜索 CSS 文件里的animation。第二动效不能成为唯一的反馈通道。洗衣机的异常状态必须同时提供文字、图标和必要的语音或蜂鸣提示。如果设备硬件不支持声音界面至少要有明显的颜色告警和高频闪烁并且不能因为用户切走页面而丢失。真实硬件中“门锁未关”“进水阀异常”这类风险必须做到多通道提醒。第三动效数据必须和真实设备状态同步。前端定时器只能用来做演示真实产品中洗衣机是通过 BLE、Wi-Fi 或网关上报状态的。设备上报的剩余时间、阶段编号、错误码才是动效的唯一数据源。前端要做的是把真实数据映射到动效上而不是自己预测“下一阶段”。第四注意低性能设备和资源受限场景。很多家电控制面板的屏幕是低刷新率 LCD甚至只有 30fps 的 MCU 驱动。在这种环境下高频水波动画会占用大量 CPU甚至导致触摸响应变慢。建议设置降级开关在性能不足时把水波动画替换为静态水位条只保留状态文字和进度环。第五无障碍设计。prefers-reduced-motion媒体查询应该作为动效设计的一部分而不是可选项。如果用户系统开启了减少动态效果界面应该自动降低动画频率只保留必要的状态信息。media (prefers-reduced-motion: reduce) { .wave-front, .wave-back, .clothes { animation: none !important; } }这一点不只是为了规范也是真实用户需求一些有前庭功能障碍的用户看到持续旋转动效会产生不适。第六动效需要被测试。建议把状态切换逻辑和动效渲染分离状态机可以单测动效做视觉回归。这样设计迭代时不会因为调整了一个动画时长而弄坏业务流程。9. 总结与后续学习方向这篇文章从洗衣机这个具体产品出发完成了动态设计的目标拆解、状态建模、动效实现和性能验证。真正关键的点在于动效不是事后装饰而是和状态机一样需要被设计的系统。把状态表达清楚比单纯追求动画流畅更重要。建议你下一步动手把原型跑通然后尝试两个方向。一是扩展给洗衣机加入更多真实状态比如水位传感器、门锁状态、洗涤剂余量提醒并思考每个状态需要什么动效来表达。二是移植把这个原型中“状态切换 class 驱动 进度更新”的模式迁移到小程序或 React 组件中体会跨端场景的差异。如果想继续深入可以研究 Web Animations APIWAAPI它比 CSS 动画更容易在 JS 中控制暂停、反转和播放进度也可以学习 Canvas 或 WebGL 做更真实的水流模拟但要注意性能开销还可以研究智能家电的 BLE 通信协议把前端动效和设备真实状态对接起来。这几个方向每一个都值得单独写一篇。