专栏名称: 交互设计学堂
系统学习交互知识,就找老D。干货分享、在线培训、行知书院三大版块帮你提升自己。 最新资讯-全是干货还有老D点评,每天推送; 交互培训-在线课程帮助小伙伴进入交互行业,只要3个月; 行知书院-老D帮小伙伴们解读经典设计书籍,都是“硬”知识。
目录
相关文章推荐
字体设计  ·  端午节包装设计教程 ·  2 天前  
设计上海  ·  “设计上海”2025即将震撼启幕!邂逅全球设 ... ·  19 小时前  
ZaomeDesign  ·  里斯本的一抹黄 ·  2 天前  
庞门正道  ·  出入平安。 ·  昨天  
51好读  ›  专栏  ›  交互设计学堂

这四个动效小趋势,让你可以把网页设计得更加圆融

交互设计学堂  · 公众号  · 设计  · 2017-11-18 21:02

正文

请到「今天看啥」查看全文



Taika Strom 这个网站中则采用了更加先进的技术,背景使用 WebGL 来驱动弹性动效,让用户在浏览的时候全程都能感受到动效,丰富了整体的体验。


Taika Strom

(http://taikastrom.com/)


变化的LOGO


花上几秒钟看着LOGO逐渐变化,似乎是一件颇为浪费时间和资源的事情,但是在很多时候,它是非常有效的设计。作为品牌标识的一部分,LOGO 承载着品牌信息(特征、风格、元素、色彩等),也关乎审美。虽然LOGO在网页中占据的位置并不大,但是它非常吸引眼球,在用户心目中也会被视作为重要的组件,并不会被那么轻易被忽略。


在LOGO上施加动效有几种不同的趋势。


1、让LOGO变得有趣


看看 HTMLBuger 这个网站的LOGO,它在动画的加持下不仅仅颇为有趣,而且达成了两个目标:


  • 作为吉祥物,用来支撑品牌形象,展示品牌气质和特征

  • 作为一种有意思的动态效果,它为项目增加额外的乐趣,营造欢脱的氛围


HTML Burger

(https://htmlburger.com/)


2、让LOGO显得严肃和保守


和前一个网站不同的地方在于, Muriel Guillaumon 同样运用了动效,但是它们是为了营造网站严肃的氛围。这里的动画并不复杂,只是颜色和大小有微小的变化,但是它很好地匹配了网站的整体主题和审美趋势。








请到「今天看啥」查看全文