企业品牌网站设计的常见布局方式

企业品牌网站设计制作中，如何将其布局的井井有条是至关重要的，因为这个也能影响到网站的优化跟用户体验。要想设计出能够吸引人的网页形式，就要对布局和网页设计有一个全面的把握，遵守统一变化的原则，强化版面的外形特征，体现设计的生命力，与此同时，还要通过精心的设计与安排，进行整体上的比较，在保证形式上的和谐以外，还要保证其疏密有致，轻重适度，最终体现设计上的别具一格。 

 

网站设计首页布局.jpg

 

关于网站主页的布局

一般主页是网站的直接入口！是对网站访客留下第一印象的最重要的页面！网站首页是访问量最多的，也决定了其他页面的风格，网站的布局就像建房子，地基打得牢固与否直接影响整栋房子的美观。设计师在设计过程中的布局思路非常重要。所以我们设计网站时首页必须要考虑清楚怎样设计，比如如何排版、布局，什么样的配色等等。网站首页策划时应该是要首先定义出网站的整体色素和元素的统一性制作、设计，另外就是对网站产品展现形式的策划和产品形态的定位！

 

自适应和响应式

自适应网页设计（Responsive Web Design）最早是由Ethan Marcotte在2010年提出，是指可以自动识别屏幕宽度、并做出相应调整的网页设计。随着移动化网页需求的增长，在自适应基础上又诞生了响应式网页设计（Adaptive Web Design）。

两者最大的区别在于

前者只根据浏览器宽度作出布局的调整，后者是根据设备的不同而作出的调整。

前者的调整只停留在左右上下位置上的调整，后者涉及到内容的增减等。

在这项技术的支持下，我们现在能看到很多网站把最大主体区域做到了1600px，但同时又支持手机正常显示。

 

通栏布局

这种布局方式让视线不再受到方框的限制，比起上面的布局方式，自然多了些大气、开阔的味道来。另外，主视觉部分还可以灵活处理，既可以向上拓展到logo和导航的顶部位置，也可以向下拓展到内容区域，这种布局方式也是非常常见的布局方式。

 

左右对称结构布局

左右对称结构是网页布局中最为简单的一种。“左右对称”所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部用作主体内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适。栏目划分结构清晰、分开主次性，重为左，此为右。

 

环绕式布局

这种布局方式看上去更加灵活，banner区域相对较小，就可以在页面放置更多的信息内容。

 

“同”字型结构布局

“同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主体内容，这种结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷。

 

网页布局均匀，避免头重脚轻，重量失衡

网页的布局均匀，体现在网页规划和设计时栏目与栏目、色块与色块、图片与文字之间的搭配协调问题，好的页面会做到搭配合理，避免头重脚轻、重量失衡的现象，和给访客造成心理上的不适。 

 

大框套小框的布局

这种布局方式即是我在上面提到的常见的布局，不是说这种布局方式一无是处，但我们总不能只会这一种布局方式，次次套用吧?按照这种布局当然也可以做出来漂亮的设计，但毕竟方框限制的视线的扩展，如果客户要求做出大气的感觉，一般不会按照这种方式来布局，通常来讲，大气意味着开阔视野。

 

合理的主颜色和统一的页面风格

在确定网站的主颜色时，一定要根据所要设计的网站的行业特征和所面向的访问对象来选择合理的主颜色，如作为机械装备类的多以蓝色、灰色为主，在主颜色、栏目及网站首页版块确定后，其它的附属页面也应该依次风格来设置。一般网页的大色块区域以不超过3种颜色为好。

 

网页的布局不可能像平面设计那么简单，虽然网页制作已经摆脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的。一个页面存在多个功能模块，它们的展现形式应该如何，就要考虑各个模块的重要程度，重要信息、重要功能模块“靠上靠左”呈现，这是因为这些地方从位置上讲比较有吸引眼球的优势，要做到“突出重点”。