广东快3>WIKI库>学习设计基础>WEB设计常见布局讲解

WEB设计常见布局讲解


我们一般的版式设计除了平面设计,就是网页设计和互联网产品,比如一些移动端手机APP这些界面的设计。这些设计都有一些通用的布局,大家在刚开始学习布局时有一个诀窍,即不用太在意布局的理论,而去收集一些大家常用的布局,先把这些东西记下来,随着经验的积累,可以通过这些通用的布局产生自己的理解和想法,然后去打破这些传统的布局,有自己的创新和突破。



大框套小框的布局


左边为最常见的大框套小框的布局,整个网页首先在一个比较大的框里面,然后各个模块在大的框里面去布局分配。


explain1.png


这种布局的特点是有一个比较大的背景,背景是可以平铺的,然后其他的内容可以限制在一定的宽度范围内,好处就是视线比较集中。


explain2.png



通栏布局


通栏布局打破了框的限制,如图导航部分等是适应屏幕拉伸的。


explain3.png


如图背景可以根据屏幕无限延伸,显得比较大气。视觉上显示比较整体,整个网页上都是有内容的。


explain4.png



导航在主视觉下方的布局


如图为导航在主视觉下方的布局的示意图,传统规则就是导航放在画面中间。


explain5.png


这是一种比较时尚、流行的布局方式,如图上面是体现当前页面主题的一个banner,这个banner比较重要,它的设计完全可以体现整个网页的风格,同时也起到一个装饰的作用。接下来把这个banner放在中间的位置而不是传统的上面的位置,这样就给banner这个位置留下了比较多的空间,让整个画面显得比较简洁大气。


explain6.png



左中右布局


如图为左中右布局示意图。


explain7.png


结合案例,如图分三栏左中右。对banner进行比较主题式的设计,如图第一张素材的选择体现了整个网页的风格。同样第二张、第三张的图片选择也是体现整个网页主题的主体部分。所以这种布局是必须有个部分体现这个主题的,其他两个部分用来布局网页的其他内容。


explain8.png



环绕式布局


如图为环绕式布局的示意图。


explain9.png


环绕式就是页面会环绕一个比较显眼的图片装饰来进行设计。如图一,中间为图片焦点,内容部分环绕在图片焦点周围,进行布局设计。第二张、第三张也为内容环绕主题进行设计的。这种布局比较灵活,可以先选好一个主题图,然后所有元素围绕它的视觉效果去设计,整个画面的效果就会以图为中心,主题非常鲜明。


explain91.png


explain92.png



穿插式布局


穿插式布局虽然很少看到,但效果也不错。


explain93.png


如图案例均属于穿插式布局,即所使用的图片素材在内容里面是一个穿插效果。整个banner穿插在网页内容里面,整个网页对称、画面感非常强。比较适合做一些专题类的网站。


真正的版面设计里面的布局时千变万化的,我们只要遵循前面讲到的用户体验要好、视觉上画面平衡,那效果就会很好。


explain94.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

分享到:

目录