来了来了,最新一期的网页亮点设计分享来了。前面我们已经分享了很多优秀网页中的案例了,今天这一期还是继续给大家分享一些优秀案例为大家提供一些设计上的思路。
一、滑动卡片设计
在网页中,展示卡片的设计层出不穷,但经典永不过时。通过点击让卡片进行滑动以此来展示的方式,是一种非常经典的方式。下面就用案例来为大家介绍一下这种方式。
在下面这个案例中,设计师就运用了滑动卡片的设计来展示卡片。并且在滑动卡片的基础上,通过视觉层次上的设计让用户看起来卡片有一种3D立体感。用户通过点击页面,来形成左右滑动的状态。这样的设计虽然很老套,但是不可否定是这样的设计更加深入人心,经典永不过时。
这种在经典的样式上在加以创新,整体即显得经典,又十分有创意。
下面这一个案例中,整体看起来少了一些创意,不过在细节上设计的很好。我们可以看到下方的案例,中间卡片展示的是一些插画,整体没有什么创意性设计,就是普普通通的卡片。不过在卡片的背景以及卡片本身的层次上都细节满满。
用户通过点击页面,卡片就会进行滑动切换,展示不同的插画内容。
所以,综上所示,设计方式是不会出错的,只要用心设计那么在老套的设计方式都可以设计的漂亮,让用户感到舒适。
二、贯穿式设计
我们这里说的所谓的贯穿式设计,是在一个网页中,有一个元素或者信息从始至终一直贯穿整个网页。成为整个网页中的一个轴承,始终存在于网页中。
在下面这个案例中,我们从下方稍微有些短的图片中可以看到,页面中有一个蓝色的类似于水滴的元素。当用户滑动页面时,蓝色的水滴就会跟着页面向下掉落,直到落到下一个蓝色的页面上,就像融入了海洋,当用户继续往下滑,那么水滴就会继续往下滴落。
蓝色的水滴从始至终贯穿了整个网页,既有设计感,又有趣味性,还能链接整个网页的一个衔接感。
上面的案例是用水滴元素来设计的,而下面这个案例用的则是线条来设计的整个贯穿式设计。下方的案例中,整个网页采用的是横向设计的手法。从进入网页之后,页面中就会出现由线条组成的元素,用户滑动页面之后,页面中原有的线条元素就会进行分解,然后变成线条跟随着页面前进,在前方继续组成新的元素然后继续分解。
这个案例中的贯穿式设计比上一个案例更加有设计感,更有创意性。让用户眼前一亮,线条从头到尾贯穿网页,仿佛无穷无尽,在视觉上给了用户很大的冲击力。
贯穿式设计很有特点,能够同时为网页增加设计感、趣味性以及视觉上的冲击力等等。但是贯穿式设计也有不好的地方,那就是一旦掌握不好其中的度,那么网页就会出现不伦不类的感觉。
三、画面占比设计
在网页中,页面中的元素画面占比设计也是一个设计细节。一个页面中,如果展示两个元素,或者多个元素那么画面占比就是一个问题,如何充分展示元素又让画面饱满是一个需要考虑的问题。
下面的案例中,在这个画面中除了一些文字信息之外,整体想展示的是两张卡片。设计师将两张卡片的面积进行了放大,让两张卡片充分的占满了画面,虽然画面中没有其他的元素,不过整体的页面依旧十分饱满,让人挑不出毛病。
而且为了更好的展示卡片,当用户将鼠标放置在其中的一张卡片上时,那么卡片就会进行放大,充分的展示选中的卡片的内容,而另一张卡片则会进行缩小。

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實(shí)的服務(wù)了近萬家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴!
優(yōu)網(wǎng)科技成立于2001年,擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用(手機(jī)站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。