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

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

作者: June青豆 | 来源:发表于2016-01-10 18:40 被阅读212次

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

一、首页内容大致分类

1、导航栏

2、图片展播

3、小栏目组们

4、文章列表

5、ENDING信息

二、板块排布的适当调整

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

1、文章列表

天朝政府网 天朝中央纪委监察部网站

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

2、小栏目组们

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

三、实例分析

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

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

四、养养眼

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

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

东京某托儿所主页

Brotherearth

homeworker's community

claska

相关文章

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

    页面设计之前需要的是客户给的需求文档,而需求文档中的板块排布是客户自己提出来的,设计时难免受限制。需求文档中是简单...

  • 网站首页整体设计思路

    整体架构 本教程里要设计的网站首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给...

  • CSS布局

    单列布局 单列布局通常用于网站的首页,分为头部的导航、网页内容、页脚相关信息。 优点:布局实现简单,界面显示整体性...

  • 网站文章SEO标题怎么设置比较好?

    如果把整个网站本身比喻成一个人的话,那么网站首页的标题则是大脑,网站的架构设计便是骨头,网站的内链便是筋脉,网站的...

  • 《大型网站技术架构》(二)——大型网站架构模式

    主要内容: 大型网站架构模式 网站架构模式 什么是模式呢?想象下软件设计模式,是经过反复使用实践、编程设计经验的总...

  • 网站信息架构IA调查

    网站首页设计之家(标注).png 网站地图计之家 > 网站地图 > | >>新闻 | 【设计新闻】 | || 【...

  • 【建站篇】3、产品详情页要如何搭建

    上篇:【建站篇】1、如何策划搭建有吸引力的网站架构 - 简书 [ 【建站篇】2、如何策划搭建高转化的首页 -...

  • 产品设计、好奇心和有趣

    这个问题的产生,主要缘于设计宝贝格子的网站首页时。 在设计商品楼层时,为了首页内容的“极大丰富”,我们决定在左边放...

  • 《信息架构》学习笔记4

    网站的设计者通过信息架构的精心设计,让用户更容易查找到“需要”的内容,也让用户更容易理解到网站提供给到用户的“内容...

  • BAT架构技术专题合集500+

    Mike创作的完整《BAT架构技术合集500+》,是大型高并发网站架构技术文章合集,内容包括技术选型、架构设计、性...

网友评论

      本文标题:网站首页设计整体性之内容架构篇

      本文链接:https://www.haomeiwen.com/subject/nfuqkttx.html