一起摇摆!18组赋予绝佳用户体验的高素质动画图标.pdfVIP

一起摇摆！18组赋予绝佳用户体验的高素质动画图标 虽然早期的GIF动画不论是从技 层面还是从应用范畴来看，都和界面设计并无特别直接的 关系，但是近几年，动画图标开始在界面设计中大量运用，并有流行开来的趋势。 坦率的讲，让图标动起来，或者通过动态图表达一些有趣的场景并非什么新鲜的东西，但是 它们在很长的一段时间里都玩儿的比较简单，居于次席，或者纯是拿来搞笑。但是现在不一样了 ，通过精巧的后期处理，这些动态的图标成为了界面上令人流连忘返的重要组成部分，成为了提 升用户体验不可或缺的元素。如此一来，Gif图所构建的动画图标开始“大规模入侵”网页设计和UI 设计领域就不是什么难以理解的事情了。 当然，空洞的概念描述都不如图片来的直观清晰。我想下面的20个案例会让你更清晰的了解 动画图标的使用。 KickMaterial 是Kickstarter的Material风格A PP的动态图标，这个令人讨喜的设计是源 于Material Design，柔和的色彩和平整的形态赋予图标精致而时尚的外观，流畅的动画令赋予图 标以动感，强化用户对于它功能的理解。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 1 微妙的色调让简单的齿轮拥有了立体感，加上旋转效果之后，整个图标开始拥有了真实的 质感。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 2 这个联系人图标同样采用了朴素的蓝白配色，色调营造出拟真的质感，名片反转的动画不仅 暗示出了图标的含义，而且确保了设计的识别度。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 3 设计师展示了一组充满活力的扁平风圆形动画图标，每个图标都包含一个类别，图片中的信 息量比传统的图标要大很多，能更好的传达信息。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 4 这个设计项目中，三个动画图标的设计细致平整，其中各种元素的运动速率变化极为自然， 使得整个图标的视觉体验非常优秀。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 5 单色的动画图标是否会让人感到单调？并不是这样，这个项目中，设计师融合了喇叭和地图 两个不同的元素，通过快速的变动呈现出图标演进变化的过程，体现出和静态图标截然不同的功 能和体验。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 扁平化设计趋势的一个重要的影响就是让动画图标更易于制作也更富有生命力。这组活动相 关的圆形图标用色鲜明，但是效果足够专业，其中的动作设计节奏感很强，看起来亮眼而独特。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 7 这是一组动画图标的设计能在第一时间吸引你的眼球，它的视觉设计堪称典范，它最突出的 地方有两个，一个是开头的色彩切换，一个是图标出现后微妙的运动效果。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 8 这组图标同样是扁平风，动画式的展示手法让它可以在一个过程中包含三个不同类型的图标 ，三个独立的动效无缝地融为一体。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 9 动画图标有一种流行的玩法，就是展示图标的制作过程，而这个Concept Icon 就是这么玩的 ，这个看起来漂亮的对话图标最开始就是这么简单，但是简单几步之后，就是一个精致的扁平风 图标。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 10 这是两个简单明了的医疗类的动画图标，动画展示呈现出了图标中各个元素构成的过程，包 含了不少医疗相关的元素，有趣好玩，又包含隐喻。 æ´å¤ç²¾å½©æ»ç¥è®¿é® 11