网页设计经典作品欣赏
大同小异的网页设计已经让你视觉疲劳了吧，加入不规则几何形状的网页设计也许能让你的眼睛重获新鲜感。几何元素的融入不仅让网页变得高大上，也在无形中突出了网页中的某些内容，这样的突出方式并不单薄无力，反而让网页看起来更自然。一网学，致力于网页设计培训、UI设计培训、淘宝美工培训，平面设计培训，是最好的远程设计培训学校。
没有人会对沉闷的网页产生兴趣，而几何图形恰巧能在增强视觉体验的同时营造出活跃的氛围。我们为大家找到了14个融入了几何元素的网页设计，尽情享受吧！
Ondo的网站选用了较为鲜艳的色彩，再加以特别的效果，让用户在浏览时得到了一种别样的视觉感受。如果上一个案例表达了宁静的主题，那么Ondo表达的就是城市中的现代繁华。
![](https://wkrtcs.bdimg.com/rtcs/image?w=563.33333333333&md5sum=e39463b68af6cb973beeeb04113e15f1&sign=b3c979c61a&rtcs_flag=1&rtcs_ver=3.1&l=webapp&bucketNum=46&ipr={"t":"img","w":"563.33333333333","h":"352.33333333333","dataType":"png","c":"word/media/image1.png","imgOriW":640,"imgOriH":400})
这个网站中的几何元素体现在各方各面，既有设计师的设计，同时，局部也拼凑了一些包含几何元素的真实图片。我们可以看出该设计师对不规则元素十分热爱，图片本身的形状也不是传统的中规中矩，让整个页面多了一种拼贴感。
![](https://wkrtcs.bdimg.com/rtcs/image?w=563.33333333333&md5sum=e39463b68af6cb973beeeb04113e15f1&sign=b3c979c61a&rtcs_flag=1&rtcs_ver=3.1&l=webapp&bucketNum=46&ipr={"t":"img","w":"563.33333333333","h":"612.2","dataType":"png","c":"word/media/image2.png","imgOriW":640,"imgOriH":696})
Wixel的网站运用了几何元素，增加了现代化元素。
![](https://wkrtcs.bdimg.com/rtcs/image?w=562.4&md5sum=e39463b68af6cb973beeeb04113e15f1&sign=b3c979c61a&rtcs_flag=1&rtcs_ver=3.1&l=webapp&bucketNum=46&ipr={"t":"img","w":"562.4","h":"317","dataType":"jpeg","c":"word/media/image3.png","imgOriW":620,"imgOriH":350})
几何元素的叠加使用使画面富有层次感，大小不一的正六边形更是增添了活力。
![](https://wkrtcs.bdimg.com/rtcs/image?w=562.4&md5sum=e39463b68af6cb973beeeb04113e15f1&sign=b3c979c61a&rtcs_flag=1&rtcs_ver=3.1&l=webapp&bucketNum=46&ipr={"t":"img","w":"562.4","h":"331.46666666667","dataType":"jpeg","c":"word/media/image4.png","imgOriW":620,"imgOriH":366})
几何元素的作用比较多元化，随着周围坏境色彩的变化，它也能随之显现出完全不同的效果。在这个案例中，几何元素释放了它的神秘感。半透明的图片设计让网页有了重叠感，而规则的几何也不会让网页很繁复。
![](https://wkrtcs.bdimg.com/rtcs/image?w=563.33333333333&md5sum=e39463b68af6cb973beeeb04113e15f1&sign=b3c979c61a&rtcs_flag=1&rtcs_ver=3.1&l=webapp&bucketNum=46&ipr={"t":"img","w":"563.33333333333","h":"307.93333333333","dataType":"png","c":"word/media/image5.png","imgOriW":640,"imgOriH":350})
几何元素并不是只能带来高大上的效果，卡通清新的设计也能引入几何造型。这个案例中的图案就是由一些小几何组合出来的，在这里使用几何不仅不会觉得格格不入，反而能增添几分活泼和童趣。
![](https://wkrtcs.bdimg.com/rtcs/image?w=563.33333333333&md5sum=e39463b68af6cb973beeeb04113e15f1&sign=b3c979c61a&rtcs_flag=1&rtcs_ver=3.1&l=webapp&bucketNum=46&ipr={"t":"img","w":"563.33333333333","h":"352.33333333333","dataType":"png","c":"word/media/image6.png","imgOriW":640,"imgOriH":400})
如果网站全局都铺满了几何成分，那一定会看起来过于臃肿。而案例中的网站则很好的解决了这一问题。Lacca采用的是不同大小的矩形元素，并且恰当的倾斜了一个角度，使页面看上去不那么死板严肃。
![](https://wkrtcs.bdimg.com/rtcs/image?w=562.4&md5sum=e39463b68af6cb973beeeb04113e15f1&sign=b3c979c61a&rtcs_flag=1&rtcs_ver=3.1&l=webapp&bucketNum=46&ipr={"t":"img","w":"562.4","h":"257.2","dataType":"jpeg","c":"word/media/image7.png","imgOriW":620,"imgOriH":283})
这是国外一个做网页设计的机构，只看首页，也许你会认为这是一个玩具网站或是童装店。规整的几何与充满跳跃性的色彩相搭配的确能勾勒出一种活泼亮丽，充满创意和想象力的感觉。
![](https://wkrtcs.bdimg.com/rtcs/image?w=563.33333333333&md5sum=e39463b68af6cb973beeeb04113e15f1&sign=b3c979c61a&rtcs_flag=1&rtcs_ver=3.1&l=webapp&bucketNum=46&ipr={"t":"img","w":"563.33333333333","h":"355","dataType":"png","c":"word/media/image8.png","imgOriW":640,"imgOriH":403})
如果网站全局都铺满了几何成分，那一定会看起来过于臃肿。而案例中的网站则很好的解决了这一问题。设计灵感来源于折纸艺术，每个图形之间都留了一定的距离，这样做不仅能让几何元素贯穿全程，也不会看起来很复杂。
![](https://wkrtcs.bdimg.com/rtcs/image?w=448.33333333333&md5sum=e39463b68af6cb973beeeb04113e15f1&sign=b3c979c61a&rtcs_flag=1&rtcs_ver=3.1&l=webapp&bucketNum=46&ipr={"t":"img","w":"448.33333333333","h":"902.06666666667","dataType":"png","c":"word/media/image9.png","imgOriW":640,"imgOriH":1289})
在设计中一旦加入了一些独特的创意思想，就会马上提升整个作品的美感和个性，比如以上这一组加入了几何形状设计元素的优秀WEB设计，将几何图形和色彩进行了恰到好处的处理，从而给用户在第一眼就带来新鲜感与舒适感，这可能是几何与色彩与生俱来的独特影响力。
【一网学，我的未来我设计】
本文资源来自一网学 网页设计培：http://www.ywxue.com/
本文来源：https://www.2haoxitong.net/k/doc/32e5a77bccbff121dd3683a7.html
文档为doc格式