/「虚谷無界·設計現場」2022网页的动效设计趋势
最新文章2023-12-18

「虚谷無界·設計現場」2022网页的动效设计趋势

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

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

▍1、内容动态导航

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


Your Plan, Your Planet是关于可持续未来规划的动效网页作品，所以它的首页导航设计以食物、水、能量等生活元素为主，鼠标滑动选择不同的元素悬停进入内容。


▍2、跟随型进度导航

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


▍3、全屏动态导航

全屏页也是非常常见的导航菜单动效方式，可以更加沉浸在整体氛围中。






 02.  不起眼的页脚 
网页底部页脚，是网站最不起眼的部分。但也正是这块最不起眼、容易忽略的部分，在网站中却有着至关重要的功能担当。

▍1、打破边界的飞入飞出

在插画里用动感舞蹈的飞人、表情等元素打破边界设计，外加多角色舞蹈、互动的手势、时髦的形状、有趣的字体、多彩的颜色，使页面别具一番特色。





▍2、贴近主题的互动方式

随着鼠标的移动，人与人之间通过分享连接在一起。加上黑白灰的配色方案，更好的营造主题氛围。



▍3、霓虹灯变色过渡效果
梦幻的霓虹灯氛围感十足，很享受这种流行色趋势，切换真实和想象，给人一种进入另一层境界的感觉。


▍4、隐藏菜单惊喜功能

很巧妙的运用颜色对比去引导用户点击彩蛋，从而给网站注入更多一些有趣和超预期的期待。



▍5、打造有趣的故事

有趣的故事画面，让人流连忘返，有效的提升品牌心智和影响力。



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

▍1、流畅的色彩变换

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




▍2、元素结合

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




▍3、制造悬停视差

也有设计师会在网页设计中融入很多让画面更有趣、更丰富、仅用于展示的悬停效果，如下图例中光标悬停在海报时的翻起效果、鼠标移动时画面元素跟随产生的视差效果。




▍4、异常状态的小互动

最后，分享几个与网站交互结合不错的鼠标悬停案例，让用户在浏览网站甚至遇到404的情况时不再枯燥。




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

▍1、结合主题加载

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



▍2、数字加载

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




 05.  渐进的搜索与筛选 

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

▍1、动态前置搜索结果

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



▍2、丝滑展示搜索结果

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



 06.  效果绝佳的WebGL 

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








来源：淘宝设计

版权归原作者所有







本文来自微信公众号“虚谷無界设计现场”（ID：gh_e3e512985dec）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章