广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

网页这么设计,程序员会给你加鸡腿!
发布日期:2024-12-11 17:14:36 浏览次数: 1106 来源:菜心设计铺

来了来了,最新一期的网页亮点设计分享来了。前面我们已经分享了很多优秀网页中的案例了,今天这一期还是继续给大家分享一些优秀案例为大家提供一些设计上的思路。

一、滑动卡片设计

在网页中,展示卡片的设计层出不穷,但经典永不过时。通过点击让卡片进行滑动以此来展示的方式,是一种非常经典的方式。下面就用案例来为大家介绍一下这种方式。

在下面这个案例中,设计师就运用了滑动卡片的设计来展示卡片。并且在滑动卡片的基础上,通过视觉层次上的设计让用户看起来卡片有一种3D立体感。用户通过点击页面,来形成左右滑动的状态。这样的设计虽然很老套,但是不可否定是这样的设计更加深入人心,经典永不过时。

这种在经典的样式上在加以创新,整体即显得经典,又十分有创意。

下面这一个案例中,整体看起来少了一些创意,不过在细节上设计的很好。我们可以看到下方的案例,中间卡片展示的是一些插画,整体没有什么创意性设计,就是普普通通的卡片。不过在卡片的背景以及卡片本身的层次上都细节满满。

用户通过点击页面,卡片就会进行滑动切换,展示不同的插画内容。

所以,综上所示,设计方式是不会出错的,只要用心设计那么在老套的设计方式都可以设计的漂亮,让用户感到舒适。

二、贯穿式设计

我们这里说的所谓的贯穿式设计,是在一个网页中,有一个元素或者信息从始至终一直贯穿整个网页。成为整个网页中的一个轴承,始终存在于网页中。

在下面这个案例中,我们从下方稍微有些短的图片中可以看到,页面中有一个蓝色的类似于水滴的元素。当用户滑动页面时,蓝色的水滴就会跟着页面向下掉落,直到落到下一个蓝色的页面上,就像融入了海洋,当用户继续往下滑,那么水滴就会继续往下滴落。

蓝色的水滴从始至终贯穿了整个网页,既有设计感,又有趣味性,还能链接整个网页的一个衔接感。

上面的案例是用水滴元素来设计的,而下面这个案例用的则是线条来设计的整个贯穿式设计。下方的案例中,整个网页采用的是横向设计的手法。从进入网页之后,页面中就会出现由线条组成的元素,用户滑动页面之后,页面中原有的线条元素就会进行分解,然后变成线条跟随着页面前进,在前方继续组成新的元素然后继续分解。

这个案例中的贯穿式设计比上一个案例更加有设计感,更有创意性。让用户眼前一亮,线条从头到尾贯穿网页,仿佛无穷无尽,在视觉上给了用户很大的冲击力。

贯穿式设计很有特点,能够同时为网页增加设计感、趣味性以及视觉上的冲击力等等。但是贯穿式设计也有不好的地方,那就是一旦掌握不好其中的度,那么网页就会出现不伦不类的感觉。

三、画面占比设计

在网页中,页面中的元素画面占比设计也是一个设计细节。一个页面中,如果展示两个元素,或者多个元素那么画面占比就是一个问题,如何充分展示元素又让画面饱满是一个需要考虑的问题。

下面的案例中,在这个画面中除了一些文字信息之外,整体想展示的是两张卡片。设计师将两张卡片的面积进行了放大,让两张卡片充分的占满了画面,虽然画面中没有其他的元素,不过整体的页面依旧十分饱满,让人挑不出毛病。

而且为了更好的展示卡片,当用户将鼠标放置在其中的一张卡片上时,那么卡片就会进行放大,充分的展示选中的卡片的内容,而另一张卡片则会进行缩小。

下面这一个案例和上面一样,都是两张卡片和文字信息。不过,在下面这个案例中,卡片的面积并没有上面的大。但是,在案例中虽然卡片的画面占比小,不过页面整体也是十分饱满,因为卡片虽然面积小,不过在却位于画面的视觉中心,并且画面占比也刚刚好。
在这个案例中,卡片的展示并没有像上方一样进行缩小放大,而是在卡片中进行局部放大。这样虽然没有足够的展示到其中的细节,不过通过简单的动效还是能够吸引用户的视线。
所以在网页中,页面的画面占比并不是一定要放很多的元素,也不是要把元素放的足够大。画面的饱满并不是取决于数量和大小,我更认为画面的饱满度是取决于视觉上的。
四、创意性设计
就目前而言,想要在众多网页中脱颖而出,赢得用户的喜爱,那么在网页中加入创意性设计就是必不可少的。只有足够的创意创新设计,才能让用户收获新鲜感。
在下面这个案例中,网页的主页面中,有一个按钮,当用户拖动鼠标时按钮中的图标就会跟随鼠标进行转动。而且当用户将鼠标放置在按钮上时,按钮中的图标就会进行变化,点击按钮之后页面中的白色主体物就会进行一个不规则的转动。这样的一个设计,不仅有创意同时还有趣味性,能够让用户和网页进行互动。
在这一个案例中,设计师在按钮中加入了一些创意。当用户将鼠标放置在上面的时候,按钮中的红点会从左边移动到右边,然后会从中飞出大量的信封小元素。这里的信封元素并不是随便设计的,而是通过按钮的含义来延展的。这样普普通通的一个按钮,在加入了一些创意之后,整个按钮都变得有设计感和趣味性了。
所以,创意性设计能够化腐朽为神奇,是设计中的一味良药。
总结
以上就是本期分享的内容,其中的设计手法和创意设计都值得我们去学习的,希望能够对大家有所帮助,我们下期再见!

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!