1. 首页
  2. 网页设计
  3. 正文

网页动效设计趋势报告

  在浏览网页时,恰到好处的网页动效能让页面更加流畅。比如加载时的小动效,能缓解用户的负面情绪,一些和品牌结合的动画效果也能起到加强品牌的作用,让用户对品牌记忆度更深。

  一、生动的导航/菜单

  菜单导航是网页中用户最常用的交互区域。有趣生动的导航交互可以引起用户探索网页内容的兴趣,带用户深入了解网页要传达的信息。

  1、内容动态导航


  Spinning image selector,这个动态导航让图片像唱片一样有序的分类和排列并可以跟随鼠标转动,选图片的过程变得像逛唱片店一样有意思。

  2、跟随型进度导航


  Living with OCD 采用了onepage的方式用户可以通过鼠标滚动浏览,同时在底部提供了一个类似于Milestone的导航可以帮助用户快速找到自己想要的内容。

  二、独有的鼠标悬停

  很多网页设计都会在光标悬停效果上加入一些巧思,让网站设计的更出彩。


  1、流畅的色彩变换

  最常见的悬停效果,即鼠标悬停操作按钮时会产生颜色甚至形状变化,示意该区域可点击。

  2、 元素结合


  除了用于提示该元素为可操作的行动点外,也经常用于辅助传递更多信息,正常状态下只展示基础信息,在鼠标悬停时才展开详细信息。

  3、异常状态的小互动

  网页使用一些简单的鼠标悬停小互动,能让用户在浏览网站甚至遇到404的情况时不再枯燥。

  三、渐进的搜索与筛选

  网页因其更高效的鼠标点击操作及更多的空间使用,出现了搜索与筛选项融合的交互形态,此类融合方式使用分层和渐进的展示方式,确保检索过程是顺畅且无更多的跳转。

  1、动态前置搜索结果


  国外某旅行类web平台——66°Nord,将筛选项类型结合搜索入口进行聚合展示,筛选后反馈结果数据。

  2、丝滑展示搜索结果

  搜索输入过程中,过程信息及目标结果应及时反馈。

  四、效果绝佳的WebGL


  随着 WebGL 技术的发展和元宇宙的热门,3D 元素在网页设计中的使用频率越来越高。

  五、眼前一亮的加载

  加载状态是页面切换间最常出现,也常会与品牌结合去做些小心思设计的地方。

  1、结合主题加载


  网页加载的等待页面,恰当的结合网页主题其实可以变得有趣且有用。

  2、数字加载


  数字计数作为最传统的加载进度呈现方式,其实也可以做的新潮有趣。

    延伸阅读

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/7951.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();