Web开发

首页 » 常识 » 诊断 » 案例分享有趣的网页设计
TUhjnbcbe - 2021/1/8 22:31:00
医院订阅哦!

01

Genesis

如果只看首页设计,你可能认为Genesis仅仅只是一副插画作品,但却很难将它与食物和餐厅联系起来。

其实,Genesis是一个提倡素食,专注于快速休闲餐饮和有机舒适食品的网站。网页设计特色之一是手电筒光标。随着鼠标的滑动,所到区域将以高亮显示。单页设计、鼠标悬停微交互设计和滚动触发动画效果的结合使用,使得整个网站富有神秘色彩。激发用户的好奇心,也是一种吸引用户的方式。

?02

Waaark

作为设计工作室类网站,本款设计用到了不对称网格,将页面划分成了三个功能区。但却通过添加流体特效,带给用户完全不同的感受和体验,清新而充满趣味性。设计整体插画风格的应用,使整个页面更具视觉表现力。

03

Waaark

这是一个非常有意思的插画风格的作品集动效网页设计。当然,这跟作者本人是插画家,动画师和设计师有很大的关系。所以,这个有趣的网站是创作者风格的完美展示。如果你想学习通过添加一些局部动画盘活整个网页的设计,这就是一个很好的例子。出色的导航栏设计可以提供良好的用户体验。悬浮导航栏的滚动效果使用户在访问网站的时候逻辑更清晰,循序渐进。如果仔细浏览网页,你会发现细节动画的效果也很有趣。

?

?04

Sally

用户通过在想要的方向上滚动或移动鼠标来让它从一个部分移动到下一个部分。70多个独立的动画,让它看起来像在动。

05

YutoTakahashi

滚动触发动画:上面有艺术家的名字、作品集和时间等字样。每一个新的滚动,某种液体状的动画出现在图像上。

06

YourPlan,YourPlanet

YourPlan,YourPlanet是由荷兰MediaMonks公司制作的关于可持续未来规划的动效网页作品。首页导航设计以水、食物、能量等生活元素为主,鼠标滑动选择不同的元素的设计技巧,与悬停动效的结合,让整个页面设计非常富有创意和设计感。

等距插图的运用让打造可持续未来的规划变得生动有趣。同时,我们也可以看到材料设计更有趣的方面。每个生活元素的动画效果设计和UX文案都非常富有故事性和引导性,和用户的每一次互动都会产生不同的结果,每一步操作都在传播环保和可持续发展的理念,是一个寓教于乐的动画网页设计。

-END-(版权说明:本文素材来源于网络,如有损害或影响您的合法权益,请积极与我们联系处理)编辑|何晶熊星玉联系我们:

qq.
TUhjnbcbe - 2021/1/8 22:31:00
医院订阅哦!

01

Genesis

如果只看首页设计,你可能认为Genesis仅仅只是一副插画作品,但却很难将它与食物和餐厅联系起来。

其实,Genesis是一个提倡素食,专注于快速休闲餐饮和有机舒适食品的网站。网页设计特色之一是手电筒光标。随着鼠标的滑动,所到区域将以高亮显示。单页设计、鼠标悬停微交互设计和滚动触发动画效果的结合使用,使得整个网站富有神秘色彩。激发用户的好奇心,也是一种吸引用户的方式。

?02

Waaark

作为设计工作室类网站,本款设计用到了不对称网格,将页面划分成了三个功能区。但却通过添加流体特效,带给用户完全不同的感受和体验,清新而充满趣味性。设计整体插画风格的应用,使整个页面更具视觉表现力。

03

Waaark

这是一个非常有意思的插画风格的作品集动效网页设计。当然,这跟作者本人是插画家,动画师和设计师有很大的关系。所以,这个有趣的网站是创作者风格的完美展示。如果你想学习通过添加一些局部动画盘活整个网页的设计,这就是一个很好的例子。出色的导航栏设计可以提供良好的用户体验。悬浮导航栏的滚动效果使用户在访问网站的时候逻辑更清晰,循序渐进。如果仔细浏览网页,你会发现细节动画的效果也很有趣。

?

?04

Sally

用户通过在想要的方向上滚动或移动鼠标来让它从一个部分移动到下一个部分。70多个独立的动画,让它看起来像在动。

05

YutoTakahashi

滚动触发动画:上面有艺术家的名字、作品集和时间等字样。每一个新的滚动,某种液体状的动画出现在图像上。

06

YourPlan,YourPlanet

YourPlan,YourPlanet是由荷兰MediaMonks公司制作的关于可持续未来规划的动效网页作品。首页导航设计以水、食物、能量等生活元素为主,鼠标滑动选择不同的元素的设计技巧,与悬停动效的结合,让整个页面设计非常富有创意和设计感。

等距插图的运用让打造可持续未来的规划变得生动有趣。同时,我们也可以看到材料设计更有趣的方面。每个生活元素的动画效果设计和UX文案都非常富有故事性和引导性,和用户的每一次互动都会产生不同的结果,每一步操作都在传播环保和可持续发展的理念,是一个寓教于乐的动画网页设计。

-END-(版权说明:本文素材来源于网络,如有损害或影响您的合法权益,请积极与我们联系处理)编辑|何晶熊星玉联系我们:

qq.
1
查看完整版本: 案例分享有趣的网页设计