动态icon设计，记住这三点.docxVIP

在很多APP首页的金刚区，动态icon是一个常见的设计。由于几百 像素的二维空间所能承载的静态图像信息实在有限，因此不得不借助 时间这一维度，使二维静态icon化身为“三维”动态icono所以动态icon设计，本质上是对流动信息的感知设计。 有别于我们在做PPT时给各种元素添加的动态效果，PPT的动效往往 是为了配合演讲的节奏而强调元素的存在和变化，因为运动的事物总 是更容易吸引视线。 而动态icon除了比静态icon更容易引起注意以外，它本身还要具有 自叙故事的能力。 秩序设计元素 节奏 优先级 情感化 故事性 记忆点感知设计 讲故事是考验品牌拓展能力的一个硬技能，故事讲得好，就能快速占 领用户心智。 这需要我们在设计前就规划好故事脚本，也就是信息流动的秩序。 梳理信息秩序并不难，按照常用的脚本可以分为几种类型：视觉引 导、情感共鸣、品牌背书、利益点曝光、任务引导等。 这确实是一个很轻量但很有记忆点的设计,icon在原本廓形的基础上 进行生长动画的叠加，而能量球出现在刚刚好的时间点。不但不会造 成视觉干扰，反而加深了“蚂蚁森林”这个品牌标识的留存印象。 正是那句话，好的设计不是做加法，是做减法。Less is moreo总结 看完上述这些案例，关于如何做好一个动态icon并且让它真正有效地 服务于业务增长，其实已经有了一个大致框架。 用几个维度来概括，可以是以下三点： ①定义动态类型充分理解业务场景的诉求，分析该动态icon的底层需求，产品是要通 过这个icon达成什么目标、解决什么问题。 随后通过视觉引导、情感共鸣、品牌背书、利益点曝光、任务引导中 的一类或两类来归纳和定义需求。如超过两类，可以考虑梳理信息的 优先级，分期上线展示。 ②规划信息秩序图形比文字更有视觉感染力，也能承载更多的信息。不同于我们用语 言表达一句话，比方“点击红包可以获得大量金币”这句话念出来需要2 秒，但用一个红包图形，抖动一下同时撒出漫天金币只需要0.5秒， 就能get到相同的意思。 因此规划好信息的入场出场顺序和运动节奏很重要，能图形化绝不文 字化，能用2个字绝不用3个字。 ③做点不一样的 对于大局部静态场景来说，动态icon除了功能之外，它的存在还是一 个小惊喜。像Google首页的doodle 一样，增加页面的趣味性，提升 用户的好感度。 所以设计在满足易懂的基础上，要尽可能发挥创意带来新颖的视觉传 达体验，获得数据和口碑的双赢。 在实际的工程中通常会结合以上的一类或两类。超过两类会对信息秩 序和动态时长都造成不小的挑战，尽量防止。 来看几个简单的例子。 01/随申办?考拉海购动态类型：情感共鸣+视觉引导 。上考| QU春玄妙述力福(+)E ■回◎目 扫一H 申码亮通等舄nc KI 晚上好! j** M -，,二拜生也.. i.| .小面Gnn^*sr G nn^*sr Gnn^*srI取 .： G nn^*sr 2021年高考成绩查询?小 HI选丰Iff，，门 学 上海的朋友应该对这个小笼包印象深刻，它就存在于我们每天都要出 示健康码的APP-随申办首页。 设计一方面选择了上海的经典美食小笼包作为情感传递的视觉载体， 增强用户启动首页后的情感归属和心理认同，赋予一个工具类APP以 有趣的性格，拉近与用户的距离。 另一方面小笼包本身发挥了“播报员”的职能：在有新消息的时候会弹出 提示红点，引导用户点击查看；没有新消息的时候，也作为一个动态 视觉引导元素，实时提供天气预报等日常信息。 个rat; 毋s taas vnn 分itx 、 新人免单福利’下?立享全尚8券B %、 个rat; 毋s taas vnn 分it x 、 新人免单福利’ 下?立享全尚8券 B %、/ 。二,广宿日 XXHX?4K2 ■找 33?? MNSlbW D OQJmfi ????* 考拉乐园 OJ?S4 CD.IOM?■ 22：22 ■ HflK ?然?市0好友 视觉元素十分简要，一只考拉抱着装满商品的礼盒，是一个有温度的 icon设计，但却并不能很精准地传递出其小游戏的属性。 在3秒时间内，通过重新编排信息流动的秩序，相信一定能有比这更 好的方案。 02/饿了么?有道翻译动态类型：视觉引导 23：08.?1 令■。仙猿路435弄8号，㈠天天事成金ftMttK 23：08.?1 令■ 。仙猿路435弄8号，㈠ 天天事成金ftMttK 冷比慎小宝 I . . i 7天下5?.nsooesa [“偿另 tt5ts±ff?aii ?9.9 c.t?rr 爆品团的 天天特价B ED R 买菜 用户启动生活消费类的APP ,往往不会漫无目标，因此启动以后在首 页的停留通常只有短短几秒。 这几秒的时间内用户会寻找原本主线任务的入口，同时会被一些碎片 化信息（比方首焦ba