自由的风 发表于 2016-11-7 14:09:10

网页设计常用的布局方式以及设计方案

网页设计的布局方式很多,根据企业行业情况或企业特色、需求选择合适的布局方式。网站需要哪种布局方式,首先要了解都有哪些布局方式,要做到心理有数。下面就分享网页设计常用的布局方式,了解这些布局方式的特点。
  1、去界面化
  网页设计中的主要元素之一,就是容器元素:方块、边框、形状和所有类型的容器,用于将内容从页面中分离开。想象一个古板的页头,元素刚好容纳其中,与内容分隔开。如今的一项普遍趋势,就是去除所有这些额外的界面元素。这是种极简主义的方式,但它更进一步,带来一些有趣的转变。
  2、大框套小框的布局
  这种布局方式并不是一无是处,但我们总不能只会这一种布局方式,次次套用吧?按照这种布局当然也可以做出来漂亮的设计,但毕竟方框限制的视线的扩展,如果客户要求做出大气的感觉,一般不会按照这种方式来布局,通常来讲,大气意味着开阔视野。
  3、通栏布局
  这种布局方式让视线不再受到方框的限制,比起上面的布局方式,自然多了些大气、开阔的味道来。另外,主视觉部分还可以灵活处理,既可以向上拓展到logo和导航的顶部位置,也可以向下拓展到内容区域,这种布局方式也是非常常见的布局方式。
  4、导航在主视觉下方的布局
  这种虽然不多,但也时不时能看到,导航放在banner下面的好处是可以弥补banner中设计素材截断的缺点,让设计看上去完整、自然。所以说布局的方式受到多方面因素的影响,不仅考虑到信息内容所占据的空间,还包括你手头现有的素材。
  5、分割屏幕
  在这类中,我们精选的网站都用了垂直分隔线来分割屏幕,一是按照重要性给内容排序,然后重要性会体现在设计的层次和结构上;二是一种重要的两重性,通过屏幕分割来表现这一点,是种令人愉快的方式。
  6、左中右布局
  这种布局方式不常见到,但却是非常富有新鲜感的布局方式,如果你已经做腻歪了水平分割的设计,尝试一下这种布局也未尝不是一种好的选择。
  7、环绕式布局
  这种布局方式看上去更加灵活,banner区域相对较小,就可以在页面放置更多的信息内容。
  8、穿插式布局
  这种布局在企业站中较难看到,用的不多,banner区域相对较大,可以作为一种布局的选择。
  9、基于模块或网格
  接下来这些排版方式,建立在模块化或类似网格的结构上。在这些设计中,每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式,不过响应式网页设计让它变得更加有用。它暗示了一种自适应布局模式,可以像搭积木一样,由各种模块组件创建而成。
  网页布局的方式还有很多,但大多数都遵循重要信息靠左、靠上,次要信息靠右、靠下的原则即可,不要局限于比较哪种好,选择合适的,同时增加一些自己的创意。
页: [1]
查看完整版本: 网页设计常用的布局方式以及设计方案