米家分区洗烘一体机这样的产品最难的其实不是硬件本身而是怎么让用户在三秒钟之内看懂“分区”和“洗烘一体”到底意味着什么。动态设计在这里要做的不是把洗衣机拍一圈再放两行说明而是把复杂的家务流程压缩成一段一眼就能看懂的视觉叙事。如果你正在做家电类产品动画、电商详情页动效或者要给米家分区洗烘一体机这类产品做介绍内容这篇文章会把我的完整工作流、参数设置和避坑清单拆给你。我接过不少家电类动态设计需求包括空气净化器、扫地机器人也包括分区洗烘一体机。做过几轮之后最大的感受是这类产品真正考验动效设计师的不是渲染多精致、光效多漂亮而是信息能不能传达准。尤其“分区洗烘”四个字背后涉及双筒结构、独立程序、洗烘联动、智能控制每一块都要用动态语言讲清楚。下面按我从接到需求到最终交付的顺序把整个思考过程写出来。1. 米家分区洗烘一体机的动态设计到底在解决什么问题1.1 先搞懂产品的核心表达分区、洗烘、智能动态设计一开始最容易犯的错就是只看产品外观不看产品逻辑。米家分区洗烘一体机这类产品外观上通常是一个整体机身但内部有不止一个洗涤空间。动态设计要做的第一件事就是把“一个整体”拆成“多个独立单元”再重新组装成用户能理解的使用流程。我一般会先看三组信息分区结构上下两个洗涤区域分别是什么形态是滚筒还是波轮是等容量还是子母容量。洗烘功能洗涤、脱水、烘干是同一个内筒完成还是独立模块协作。智能交互机身按键之外是否支持 App 远程控制、小爱同学语音控制、智能投放等。这三组信息决定动态设计的叙事主轴。如果分区是主打卖点镜头重心就要放在两个内筒的独立工作状态上。如果洗烘一体是主打卖点就要重点表达“一次放入洗烘完成”的连续流程。如果智能交互是主打卖点就要把 App 界面、设备联动、状态反馈做成有信息感的视觉闭环。我不是从一开始就决定用什么转场、什么色调而是先把产品资料里出现的所有功能点列出来按“对用户决策最重要”排序。排序逻辑通常很简单用户在购买页面前三秒最关心什么动态设计就在前五秒内讲什么。1.2 动态设计与平面图的本质差异很多人觉得动态设计就是“让静态图动起来”实际不是。静态图可以通过版式、透视、标注把功能讲清楚动态设计则多了一条时间轴。时间轴既是优势也是风险。优势在于动态设计可以把“洗涤过程”这个原本看不见的流程可视化。用户可以看着水流从进水阀进入内筒看着滚筒旋转带动衣物看着温度变化从冷水到热水看着烘干气流循环带走湿气。这些过程用静态图只能分段表达用动态设计可以连成一条完整故事线。风险在于一旦加上运动用户注意力会跟随画面里的运动元素移动。如果一条动态设计里同时有三个地方在动用户根本不知道看哪里。所以我在做这类项目时有一条原则同一时间只有一个视觉焦点。这个原则听起来简单实际执行时很容易被“丰富画面”的想法带偏。动态设计还要考虑循环播放、静音播放、小屏播放三个场景。同一个成片在电商详情页、短视频、楼宇屏幕、线下大屏里的观看条件完全不一样。详情页可以接受细密文字短视频必须把关键信息用大字号压在画面中央楼宇大屏则更看重整体色调和节奏感。1.3 开机动效前先写“一句话视觉提案”接到米家分区洗烘一体机这类项目时我不会先打开 AE 或 Blender而是先写一句话视觉提案。这句话要能回答三个问题这个产品最值得看的地方是什么用户看完之后应该记住什么用什么视觉元素来承载这个记忆点举个例子如果最值得看的是“分区洗”一句话视觉提案可以是两个独立内筒像两个小型洗衣机一样并行运行衣物互不接触程序互不干扰。如果最值得看的是“洗烘一体”提案可以是一件刚从水中捞出的衣物在旋转中逐渐变成干燥蓬松的状态全程没有用户手动转移。这句话不需要很文学但要足够明确。它决定后面每个镜头怎么来。比如分区洗的提案画面结构就会强调左右或上下对比洗烘一体的提案画面结构就会强调时间递进和状态转化。我建议拿到产品需求后先花半天时间做这个提炼动作而不是急着找素材。很多动态设计最终显得“空”不是技术不够而是没有一个清晰的视觉立意。2. 我用的动态设计工作流从产品资料到动效草稿2.1 第一步整理和校验产品信息动态设计师不是文案但一定要能发现产品资料里的信息缺口。米家分区洗烘一体机这类产品不同型号可能有不同配置。有的主打分区容量有的主打高温除菌有的主打智能投放有的主打洗烘联动。做动态设计前必须确认当前要表现的是哪个具体型号不能把品牌所有型号的功能堆在一支动画里。我会做一个信息清单产品型号和外观配色尺寸、开门方式、滚筒位置洗涤容量和烘干容量主推功能点按优先级排序机身按键和 App 界面截图产品渲染图、白底图、结构图这些资料不一定全都有但至少要确认产品外观和功能点。没有可靠资料时宁可采用相对抽象的表达方式也不要画出错误的结构。比如不确定是滚筒加波轮还是双滚筒就不要在动画里画出内筒提升筋的具体结构否则用户一对比实物图就会觉得不对。信息校验完成后我会把功能点整理成一张优先级表。优先级高的功能必须出现优先级低的功能可以放进细节镜头或字幕里保证主线不散。2.2 第二步按“三段式”搭叙事框架家电类动态设计我基本都用三段式结构场景引入、功能展开、价值收尾。第一段是场景引入。先让用户知道这款洗衣机放在什么环境里解决什么现实问题。常见的表达是家庭阳台、卫生间、洗衣房配上一筐待洗衣物。这一段不需要出现大量功能标注关键是建立代入感用户洗完澡把一大一小两个洗衣篮里的衣物分别放进两个分区一键启动。第二段是功能展开。这是整支动态设计的核心要把分区结构、洗涤过程、烘干过程、智能交互这些卖点逐个讲清楚。这一段不能求快一个卖点一个镜头每个镜头信息量不要过多。第三段是价值收尾。把产品放回家居环境配上“一台机器两种洗涤烘干完直接穿”这类文案让用户形成整体印象。三段式的好处是稳妥。不管产品多复杂用户都能顺着“场景—功能—结果”的路径理解。如果不加叙事框架直接进入功能介绍用户会看得很累。2.3 第三步用分镜表把信息转成画面分镜表不是给客户看的过程文件它更是给自己理清思路的工具。我常用的一份分镜表包含这些列时间码、画面内容、运镜方式、动效参数、字幕文案、音效备注。拿米家分区洗烘一体机的动态设计举例初版分镜表可能长这样时间画面内容运镜方式动效说明字幕文案0s-3s产品正面全景白底镜头缓慢推进机身上下轻微悬浮产品入场阴影由浅到深分区洗烘一体机3s-7s机身上下方分别高亮中间隔断出现固定镜头上下区域依次发光上方高亮时下方压暗下方高亮时上方压暗上下独立分区7s-14s洗涤过程衣物在两个内筒旋转镜头切入内筒视角内筒旋转速度先快后稳水滴粒子沿筒壁运动洗涤节奏自主设定14s-22s烘干过程湿热空气变成干燥气流镜头拉远气流线条从下往上循环颜色由蓝变暖粒子密度逐渐下降洗烘一体一次完成22s-30sApp 控制界面与机身灯光联动手机屏幕慢慢放大按钮点击后机身亮灯按钮点击时有一个小的弹性反馈米家 App 智能控制分镜表里的时间码不用写得非常精确但要让每个镜头的时长加起来等于成片总时长。通常一支家电产品动态设计控制在 30 到 60 秒。低于 20 秒很难把功能讲透超过 90 秒则容易损耗观看耐心。2.4 第四步设定技术参数避免后期反复改很多动态设计做到一半出问题是因为前期没有定好技术参数。这类项目我一般先定以下参数画幅1920 x 1080如果是竖屏信息流则用 1080 x 1920。帧率30fps。国内电商和短视频平台普遍兼容动作观感比 24fps 更顺滑一点。成片时长30 秒到 60 秒重点是单个卖点镜头至少 3 秒。输出格式H.264 编码的 MP4 是通用方案如果网页需要透明背景再单独导出 WebM 或 PNG 序列。字幕字体至少 36px 以上不然手机端小屏看不清。帧率不建议一上来就 60fps。60fps 会显著增加渲染时间和文件体积但很多人第一眼根本看不出区别。只有在大屏、慢动作、AR 场景下才有明显优势。正常情况下 30fps 足够。技术参数最容易被忽略的是输出格式的兼容性。比如透明背景视频在部分浏览器里只能播放 WebM不能播放 MOV。如果交付对象是前端工程师最好先确认播放载体再决定是否导出透明通道。否则测试时本地能播上线后一片黑。3. 关键视觉转译动态设计怎么让人看懂分区和洗烘3.1 分区结构用双层容器和独立路径建立空间关系米家分区洗烘一体机这类产品视觉上最大的特点就是“一个机身多个内筒”。动态设计里要表现“分区”最忌讳的是把两个内筒各转各的却没有建立清晰的上下结构。我常用的方法是双层容器加独立路径先把机身的上下两部分用半透明材质显示让用户看到内部存在两个独立空间。然后分别给两个内筒添加不同的颜色标识或图标比如上筒用蓝色下筒用橙色。接着让衣物分别从两个入口进入形成两条并行的路径线。路径线可以用流动的虚线或光带表示。当两条路径线始终不相交时用户自然能理解“分区”的含义衣物不会混在一起程序也不会互相干扰。这里要注意分区不等于“两个洗衣机并排”。动态设计里必须让两个内筒仍处于同一个机身外壳中不然用户会以为这是两台独立设备。比较好的做法是让机身外壳始终保持完整内筒切换为半透明或线框模式再配合局部高亮。3.2 洗烘流程把时间轴变成可视化的状态变化洗涤和烘干是连续的时间过程。动态设计表现这类过程不能只做几个静帧之间的切换要让用户看到状态在时间轴上的变化。我会把洗烘流程拆成四个阶段进水、洗涤、脱水、烘干。每个阶段用不同的视觉符号进水水滴下落水位线上升。洗涤内筒旋转气泡和泡沫出现。脱水内筒高速旋转水滴从筒壁向外甩出。烘干气流线条循环颜色从冷色过渡到暖色。为了让用户不觉得这是“四张静态图轮播”需要在镜头之间用连续性动作串联。比如进水阶段结束时镜头跟随水流进入内筒内筒开始旋转就自然过渡到洗涤阶段。洗涤阶段结束后内筒转速加快水滴符号出现就进入脱水阶段。这样整个流程像一条流水线用户不会跳戏。同一时间只需要保留两个状态元素。比如洗涤阶段画面重点是旋转和泡沫温度数字可以放到次要位置。不要又显示水流、又显示泡沫、又显示温度、又显示时间信息一多注意力就散了。3.3 智能控制用界面反馈做动态连接智能洗烘一体机最大的卖点之一是远程控制和自动判断。动态设计里如果只拍一个 App 界面会显得很平。更好的做法是让 App 界面和机身状态产生实时联动。比如动态画面分成左右两部分左边是手机界面右边是洗衣机机身。用户点击 App 上的“开始洗涤”按钮按钮出现一个弹性反馈同时机身对应区域的呼吸灯亮起。这种联动能让用户感受到“远程控制”不是口号而是真实状态变化。App 界面里的按钮、滑块、进度条都值得单独做动效。但要注意这些动效不能太花哨。智能家电的动效应该偏轻、偏快、反馈明确不能像游戏界面一样大量使用粒子、扫光、抖动。我用得比较多的是 0.2 到 0.4 秒的短缓动配合轻微的缩放和透明度变化。如果动态设计要表现“智能投放”可以用一个条形图或剂量动画来展示洗涤剂和柔顺剂的使用量变化。这里不需要强调化学原理只要把“机器自己计算用量”这个结果表达出来就好。3.4 材质和光影家电产品不要过度渲染动态设计里材质和光影决定了整体品质但也最容易过度。米家产品整体风格偏简洁、白净、科技感动态设计不应做成赛博朋克或者重金属质感。我在做这类项目时机身材质会用干净的白灰、浅蓝灰为主表面反射不要太强。内筒用金属拉丝质感的简化版不要出现过于复杂的污渍反射。背景一般用浅灰、暖白或淡蓝渐变让产品轮廓保持清晰。光影方面我习惯用三光源主光打亮产品正面辅光补侧面轮廓背光把产品从背景里分离。阴影不要过硬动态过程中阴影的透明度和位移要跟着产品运动一起变化。如果产品是悬浮旋转阴影也要同步移动否则很像把商品图叠加在视频上。还有一个小细节产品 logo 和米家标识在动画里要保持足够的清晰度不能因为模糊或透视变形导致识别困难。同时不要擅自增加官方没有的图案否则会变成虚构信息。4. 节奏和缓动动态设计最容易翻车的地方4.1 先定总时长再分配每个镜头的权重动态设计最常见的翻车点是节奏失控。前面铺陈太长用户看不到重点功能镜头太短用户还没看清就切走结尾拖沓用户觉得冗余。我建议先确定总时长再按功能优先级分配时间。一支 40 秒的动态设计可以这样拆0 到 5 秒场景引入产品入场5 到 14 秒分区结构展示14 到 28 秒洗烘流程展开28 到 35 秒智能交互和 App 联动35 到 40 秒价值收尾产品回归场景每个核心卖点至少保证 4 秒因为用户需要时间看清画面、读字幕、理解信息。如果卖点很多不要硬塞进一支 30 秒动画里宁可拆成系列短片也不要让一支成片变成信息轰炸。4.2 缓动曲线决定“手感”动态设计的质感很大程度来自缓动曲线。如果所有元素都使用匀速运动画面会显得非常生硬。如果到处使用弹性曲线又会让家电产品显得不够沉稳。我一般这样分配产品入场使用较强的缓出先快后慢模拟机械设备停止的过程。UI 元素出现使用短促的缓出0.2 到 0.4 秒不要弹跳。状态切换比如内筒从洗涤转到烘干要使用平滑过渡尽量用透明度叠加而不是硬切。提示光效可以使用轻微的过冲曲线让用户感觉到反馈但幅度不能超过元素本身大小的 5%。如果使用 CSS 或者类似 keyframe 工具缓动参数可以写成类似{ property: opacity, from: 0, to: 1, duration: 0.4, easing: cubic-bezier(0.22, 1, 0.36, 1) }这个曲线是典型的“快速进入平稳结束”适合大多数功能提示和产品动效。不要一上来就用 back 曲线做所有元素否则画面会显得很“跳”。4.3 镜头切换要跟着逻辑走不要为了炫技家电动态设计里镜头切换要服务于功能表达。分区结构出现时可以用上下分层的位移切换洗烘流程展开时可以用时间推进式的连续镜头App 交互出现时可以用屏幕“拉近”的方式切入界面。我最常用的转场方式有四种位移转场、缩放转场、透明度转场、遮罩转场。位移转场适合表现空间关系比如从产品全景推进到内部结构。缩放转场适合从机身切换到内筒让用户感觉镜头穿过外壳。透明度转场适合状态切换避免硬切带来的跳感。遮罩转场适合形态变化比如从水滴形状过渡到气流形状。在米家分区洗烘一体机这类产品上我不会频繁使用旋转转场。产品本身是方正的大型家电动态设计应该维持稳重感。镜头旋转变化太多会让人觉得这不是洗衣机而是某种科技装置。4.4 字幕和配音要在动效里提前预演动态设计里文字信息很容易被当成“最后加上去的部分”其实应该和画面一起设计。尤其在小屏观看场景字幕的停留时间、字号、位置直接决定用户能不能看懂。我通常把字幕分成三类功能标题、说明文字、数据标签。功能标题用大字号3 个字到 6 个字最合适比如“上下分区”“独立洗烘”“智能投放”。说明文字控制在 15 字以内负责补充动作细节。数据标签只用来强调数字或者状态不承担完整句子的表达。字幕出现时间不能和画面完全同步最好比画面晚 0.2 到 0.3 秒给用户先看画面的时间。字幕消失时可以用透明度淡出不要用弹跳退出。如果成片需要配音配音文案也要提前和分镜对应起来。我的经验是先写出配音稿再按配音稿调整分镜长短比先剪画面再补配音更高效。5. 实测中的常见坑和排查顺序5.1 不要把同类产品的功能直接套到当前机型上我见过很多失败方案原因是设计者把别的分区洗衣机资料直接搬过来用。有的画成了上下滚筒但当前机型其实是滚筒加波轮有的把高温除菌作为主宣传点但产品资料里根本没有这个功能有的把“洗烘一体”描述成“洗完后自动叠衣服”这就严重脱离实际了。避免这个问题的方法是开工前做一次功能点确认把所有不能确认的信息标记出来。比如分区的具体数量、内筒类型、洗烘能力、智能控制方式只要资料里没有写就用占位符并向需求方确认。动态设计里宁可少一个功能点也不要画错一个结构。如果遇到需求方也说不清楚的情况就把镜头停留在产品外观和通用功能上不要展示模糊的内部结构。5.2 画面信息过载一个镜头只讲一件事动态设计里最典型的失败案例是每个镜头都把产品所有功能塞进去。顶部放标题中间放产品底部滚动字幕旁边还有数据图表。用户看第一眼会觉得内容很丰富继续看就会因为找不到焦点而退出。我给自己定的规矩是一个镜头围绕一个核心信息。如果这个镜头想表达“分区”就不要同时表达“洗烘”“智能投放”“静音”“除菌”。等分区讲清楚了再切换到下一个镜头。这样做的好处是容易判断这个镜头如果不是为了回答“产品是什么/怎么用/有什么好处”其中任何一个问题就应该删掉。5.3 排查顺序信息、镜头、渲染、输出动态设计做完后如果发现效果不对不要直接改参数先按下面的顺序排查先检查信息准确性。产品结构、功能点、文案有没有错误。信息错了动效再流畅也无用。再检查镜头逻辑。每个镜头是否有明确焦点镜头之间是否能衔接用户是否知道接下来要看哪里。然后检查渲染细节。材质、光影、颜色、产品比例、logo 清晰度。最后检查输出兼容性。分辨率、帧率、编码格式、透明通道、字幕字体是否在目标平台正常显示。很多“动效看起来奇怪”的问题根源其实在镜头逻辑或信息先后顺序。比如先讲烘干再讲洗涤用户会觉得时间线混乱这不是参数能解决的。5.4 小成本起步先做单功能 20 秒动态如果你第一次做这类家电动态设计不要一上来就挑战 60 秒全功能长片。我先建议做一个 20 秒左右的单品卖点测试。选一个最核心的卖点比如“上下分区独立洗”做一支 20 秒动态。内容可以简化成三部分产品全景、分区结构高亮、两个内筒独立运行。先不涉及烘干、App 控制等复杂内容。这支短片的作用是验证你的视觉方案是否成立。如果三秒内用户能说出“这台洗衣机有两个筒可以分开洗”说明方向对了。如果用户看完之后只记得“洗衣机转了一下”那就要重新打磨镜头的焦点和信息密度。6. 做完以后怎么判断动态设计是否达标6.1 三秒测试用户能不能说出核心卖点动态设计交付后我通常会找几个同事做一次三秒测试。把成片循环播放不提前告诉任何背景信息只看一遍然后问三个问题这台洗衣机最核心的功能是什么它跟普通洗衣机有什么区别你有没有记住任何一句文案这不是严格的用户调研但很能说明问题。如果受访者支支吾吾答不出核心卖点大概率是因为画面里卖点被埋没了。这时候不要急着解释先回到分镜表看时间分配核心卖点是否被给了足够多的时间是否被放在足够早的位置。6.2 信息层级和视觉焦点检查检查动态设计有没有达标另一个方法是把成片截图按关键帧导出几张静帧图然后只看这些静帧不看过程。如果静帧图里每一帧都能让人快速找到主角说明信息层级是合理的。如果某一帧里产品、文字、光效、数据全部混在一起说明这个镜头信息过载。还可以检查对比度。产品主体和背景之间是否有足够的明暗差异字幕和白墙是否冲突内筒高亮区域是否和机身外壳混淆。尤其在手机端屏幕亮度参差不齐对比度不足会导致画面灰成一片。6.3 用数据复盘而不是只看画面动态设计上线后如果能在后台拿到播放数据一定要复盘。重点关注前 3 秒流失率、完播率、点击转化还有弹幕或评论区提到最多的词。前 3 秒流失率高说明开头没有建立吸引力可能是产品入场太慢、开场文案不痛不痒、画面没有信息差。完播率低说明中间信息密度出问题可能是某个卖点镜头太长。评论区反复提到的疑问往往是动态设计没有讲清楚的地方。不要只看点赞量。一支点赞量很高的动态设计也可能没有让人记住产品卖点。真正有效的内容是用户看完后愿意进入下一步点击详情或者搜索产品名。6.4 动态设计的边界讲清楚比炫技重要最后说一个我踩过多次坑之后才彻底想明白的结论动态设计不是越多越好能讲清楚才是好设计。米家分区洗烘一体机这类产品卖点已经很明确动态设计的任务是放大卖点而不是创造卖点。如果一个转场、一个光效、一个粒子效果不能帮助用户理解功能就不要加。如果做减法之后画面显得冷清那就调整节奏和镜头时长而不是堆元素。家电产品的用户往往在手机端、低音量、多任务场景里观看他们不会盯着复杂的设计细节琢磨只会快速判断“这产品跟我有什么关系”。所以我现在的习惯是拿到需求后先写一句话视觉提案再搭分镜表再动手做镜头。过程中不断提醒自己这个镜头是不是在回答“用户为什么要买这台洗衣机”。如果回答不了就继续删。删除到只剩关键信息动态设计才算真正稳了。