网站首页设计整体性之内容架构技巧分享

页面设计之前需要的是客户给的需求文档，而需求文档中的板块排布是客户自己提出来的，设计时难免受限制。如何把简单的分裂的板块布局设计出整体性呢？

页面设计之前需要的是客户给的需求文档，而需求文档中的板块排布是客户自己提出来的，设计时难免受限制。需求文档中是简单的分裂的框框的板块布局，怎样把它们巧妙组合，形成一个整体，从内容架构的方面我们可以做哪些尝试与努力呢？ 

最 近是在做研招办宣传的一个页面，而自己也是在这边遇到了设计的瓶颈。之前的设计似乎都是在无意识的拼凑，都是靠运气。正好凑得上，就过，凑不上， 就改，接着凑，自己也没有想过一些设计的细节与方法，在这里整理 一下一些思路，希望自己可以借此开窍一下，也督促自己继续学习，然后就是继续改那个 稿。。。。。。。。

一、首页内容大致分类

1、导航栏

2、图片展播

3、小栏目组们

4、文章列表

5、ENDING信息

二、板块排布的适当调整

为了体现整体性，往往需要在设计中稍微“画蛇添足”，也就是多些修饰。既保证此板块与其他板块相区分，同时也保证板块内部的整体性与整个网页设计的融合性以及板块内容的合理性。下面就以文章列表与小栏目组为例，看他们是怎样的适当调整。

1、文章列表

由于前面两个都是政府门户网站，以新闻内容为主，所以第三个看不懂的文章列表设计风格看起来很闲情逸致。文章列表最中流砥柱的当然也就是一个可以点 击的文章标题而已，那其余的就都是修饰，所以修饰有哪些呢？日期、文字前的小圆点、“更多”、被重点推出的标题以及其附带的一段灰色内容概要，选区被选中 时的修饰效果，有些还会附加一张图…………

2、小栏目组们

小栏目组的适当调整要考虑栏目个数以及栏目的分类，有些是 横着排列在页面中，有些事侧边竖下来一列，这个大概位置在需求文档中客户会大概的分布好，但有时客户分布地不合理，或者出于设计合理性，可以适当调整位 置，只要最终这样的分类不影响网页体验。栏目的设计中很容易出现整体性的问题，小栏目组成的小整体，还有整个快速入口与整个页面内容排布的整体性。这一点 在最后的实例中会有淋漓尽致的体现。。。。。总之相同的内容分布怎样设计版式，上面三个一横排，下面的栏目就分成四块，这样栏目之间上下就是错位的，并不 是排排站的，这样可以增强整体性。总而言之就是要错落有致，就像瀑布流的设计一样，方块之间不是对齐完全一样的。

三、实例分析

在这里先PO一个由分裂逐渐走向整体的设计过程，大家轻喷。。。。。。

这个就是传说中的排排站，没有“错落有致”，导致了分割

上面的三个栏目被一个灰色背景框了起来，但还是缺乏整体性

文章列表的设计形式变化了，但设计重复；“招考快讯”旁边的三个图标移到了下方，版式排布丰富了；“院系介绍”等三个橙色的方块上多了小三角，使上下内容 （上面的粉色介绍性文字与下面的橙色图标）联系紧密了，并且“院系介绍”中文下多了英文；“热点外链”移了位置，但缺乏设计感

将本来的两部分栏目做了合理的调整，两个介绍单独放在了一起，但涉及效果好像是两个标签，与下面的“数据统计”联系了起来，要重新考虑一下设计；"数据统 计"板块本身整体性有待增强；四个快速入口链接图标颜色与网页整体的跳跃色调有些不符；“热点外链”的这种设计形式在扁平化风行的现在很普遍。

下面有几个养眼的整体性较好的截图：