干货总结：产品首页的动态icon设计法则

干货总结：产品首页的动态 icon 设计法则编辑导读：在很多产品的首页，动态 icon 是一个常见的设计。动态 icon 设计，本质上是对流动信息的感知设计。本文作者对一些产品的动态 icon 设计展开分析，希望对你有帮助。 在很多 APP 首页的金刚区，动态 icon 是一个常见的设计。由于几百像素的二维空间所能承载的静态图像信息实在有限，因此不得不借助时间这一维度，使二维静态 icon 化身为“三维”动态 icon。 所以动态 icon 设计，本质上是对流动信息的感知设计。 有别于我们在做 PPT 时给各种元素添加的动态效果，PPT 的动效往往是为了配合演讲的节奏而强调元素的存在和变化，因为运动的事物总是更容易吸引视线。 而动态 icon 除了比静态 icon 更容易引起注意以外，它本身还要具有自叙故事的能力。 讲故事是考验品牌拓展能力的一个硬技能，故事讲得好，就能快速占领用户心智。 这需要我们在设计前就规划好故事脚本，也就是信息流动的秩序。 梳理信息秩序并不难，根据常用的脚本可以分为几种类型：视觉引导、情感共鸣、品牌背书、利益点曝光、任务引导等。 在实际的项目中通常会结合以上的一类或两类。超过两类会对信息秩序和动态时长都造成不小的挑战，尽量避开。 来看几个简单的例子。01 随申办 · 考拉海购 动态类型：情感共鸣 + 视觉引导 上海的朋友应该对这个小笼包印象深刻，它就存在于我们每天都要出示健康码的 APP-随申办首页。 设计一方面选择了上海的经典美食小笼包作为情感传递的视觉载体，增强用户启动首页后的情感归属和心理认同，给予一个工具类 APP 以有趣的性格，拉近与用户的距离。 另一方面小笼包本身发挥了“播报员”的职能：在有新消息的时候会弹出提示红点，引导用户点击查看；没有新消息的时候，也作为一个动态视觉引导元素，实时提供天气预报等日常信息。 与此类似的还有考拉海购在首页推出的考拉乐园。考拉乐园是一个类似之前美团“袋鼠快跑”的促活养成型小游戏，通过合并同类项完成升级。 视觉元素十分简要，一只考拉抱着装满商品的礼盒，是一个有温度的 icon 设计，但却并不能很精准地传递出其小游戏的属性。 在 3 秒时间内，通过重新编排信息流动的秩序，信任一定能有比这更好的方案。02 饿了么 · 有道翻译 动态类型：视觉引导 2025 年疫情严重期间，线上买菜的需求爆棚，饿了么在首页金刚区添加了买菜功能的入口。为了在一定时期内强化该垂类业务引导，功...