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

2、图片展播

3、小栏目组们

4、文章列表

5、ENDING信息

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


由于前面两个都是政府门户网站,以新闻内容为主,所以第三个看不懂的文章列表设计风格看起来很闲情逸致。文章列表最中流砥柱的当然也就是一个可以点击的文章标题而已,那其余的就都是修饰,所以修饰有哪些呢?日期、文字前的小圆点、“更多”、被重点推出的标题以及其附带的一段灰色内容概要,选区被选中时的修饰效果,有些还会附加一张图…………
2、小栏目组们
小栏目组的适当调整要考虑栏目个数以及栏目的分类,有些是横着排列在页面中,有些事侧边竖下来一列,这个大概位置在需求文档中客户会大概的分布好,但有时客户分布地不合理,或者出于设计合理性,可以适当调整位置,只要最终这样的分类不影响网页体验。栏目的设计中很容易出现整体性的问题,小栏目组成的小整体,还有整个快速入口与整个页面内容排布的整体性。这一点在最后的实例中会有淋漓尽致的体现。。。。。总之相同的内容分布怎样设计版式,上面三个一横排,下面的栏目就分成四块,这样栏目之间上下就是错位的,并不是排排站的,这样可以增强整体性。总而言之就是要错落有致,就像瀑布流的设计一样,方块之间不是对齐完全一样的。
三、实例分析
在这里先PO一个由分裂逐渐走向整体的设计过程,大家轻喷。这个就是传说中的排排站,没有“错落有致”,导致了分割。




四、养养眼


上面的截图当时也是即兴的,已经不清楚来源了。
最后给几个链接,是我收藏在“栏目组和”中的几个网站,大家可以看看:
网友评论