网站首页设计整体性之内容架构篇

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

一、首页内容大致分类

1、导航栏

网站首页设计整体性之内容架构篇_第1张图片

2、图片展播

网站首页设计整体性之内容架构篇_第2张图片

3、小栏目组们

网站首页设计整体性之内容架构篇_第3张图片

4、文章列表

网站首页设计整体性之内容架构篇_第4张图片

5、ENDING信息

网站首页设计整体性之内容架构篇_第5张图片

二、板块排布的适当调整

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

1、文章列表

网站首页设计整体性之内容架构篇_第6张图片
天朝政府网
网站首页设计整体性之内容架构篇_第7张图片
天朝中央纪委监察部网站

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

2、小栏目组们

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

三、实例分析

在这里先PO一个由分裂逐渐走向整体的设计过程,大家轻喷。这个就是传说中的排排站,没有“错落有致”,导致了分割。

网站首页设计整体性之内容架构篇_第8张图片
这个就是传说中的排排站,没有“错落有致”,导致了分割
网站首页设计整体性之内容架构篇_第9张图片
上面的三个栏目被一个灰色背景框了起来,但还是缺乏整体性
网站首页设计整体性之内容架构篇_第10张图片
文章列表的设计形式变化了,但设计重复;“招考快讯”旁边的三个图标移到了下方,版式排布丰富了;“院系介绍”等三个橙色的方块上多了小三角,使上下内容(上面的粉色介绍性文字与下面的橙色图标)联系紧密了,并且“院系介绍”中文下多了英文;“热点外链”移了位置,但缺乏设计感
网站首页设计整体性之内容架构篇_第11张图片
将本来的两部分栏目做了合理的调整,两个介绍单独放在了一起,但涉及效果好像是两个标签,与下面的“数据统计”联系了起来,要重新考虑一下设计;"数据统计"板块本身整体性有待增强;四个快速入口链接图标颜色与网页整体的跳跃色调有些不符;“热点外链”的这种设计形式在扁平化风行的现在很普遍。

四、养养眼

网站首页设计整体性之内容架构篇_第12张图片

上面的截图当时也是即兴的,已经不清楚来源了。

最后给几个链接,是我收藏在“栏目组和”中的几个网站,大家可以看看:

东京某托儿所主页

Brotherearth

homeworker's community

claska

你可能感兴趣的:(网站首页设计整体性之内容架构篇)