+漂亮的网站分类存档设计赏析.docxVIP

仅供个人学习 仅供个人学习 作者：Pan Hon glia ng 当我们提到漂亮的网页设计的时候，一个很容易被忽视的网站元素就是分 类列表。所以我想通过这篇文章来总结一些我看到过的很棒的网站分类列表设 计，分享给大家。也希望大家通过这篇文章重视分类列表的设计。今天的第一 部分将赏析国外漂亮的侧边栏设计、日历设计和标签云设计。下半部分将赏析 页脚设计、存档页设计和总结。 解它们希望大家在欣赏这些原创的设计的同时，仔细观察它们的细节，理 的创意。然后一起来讨论如何才能将自己的分类列表设计得如此漂亮。 解它们 有几个设计出色的网站在这里出现了不下一次，主要是因为它们的分类列 表在网站上有多种样式。 侧边栏 网站最普遍的一个显示分类列表的地方是侧边栏。这些列表可以代表性的 分解成按类别的列表和按日期的列表，有时还会包括那种更新列表、日历或标 签云的形式。 首先来看看 Szabolcs Bakos 的网站，New Co ncept 点击查看清晰大图 在这个实例当中，分类列表显示在页面右侧两个侧边栏中的第一个，也就 是整个三栏中的第二栏。 这个分类列表从 Categories 开始，然后将 complete archive 和 category archive 这两个组成另一块，紧接着是 Recent Comme nts 。很 好的块级处理让网页看起来非常漂亮。 第二个是 Viget Labs In spire 点击查看清晰大图 分类列表也是在侧边栏，展示了 recent comments和recent entries 两个 板块，小而简洁。板块间的间距和排版处理的都非常好，使得网站很吸引人。 侧边栏的头部处理的非常漂亮， 设计者使用了类似水彩画的背景图片装饰, 使得recent comment 板块能特别吸引人的注意。上面的文字对比度有些偏低， 所以读起来有些费劲；但这些文字在网页中的重要性并不是很高，所以这种处 理效果还是非常棒的。 第三个，The Stateme nt 点击查看清晰大图 The Stateme nt 为它的分类列表使用了醒目的侧边栏，使人感觉到了一定 了空间感。 The most popular posts 板块显得特别突出，其实是用几个简单有趣的数 字形式的风格来标示出流行的顺序。 日历 下面我们来看看日历形式的侧边栏， 这种形式在初期的博客中经常能看到, 现在的博客几乎很少在使用日历了。 这个是 Viget Extend 点击查看清晰大图 先来张日历部分的特写 这个日历的表现形式很漂亮，标注的日期显得很醒目，而且可以左右控制 日期的变化（废话！）。 下面来看看 In te by Rachel 点击查看清晰大图 这个网站依然在侧边栏使用了日历 日历没有将每个日期以块的形式显示，链接使用了醒目有趣的桃红色下划 线。 标签云 先来个比较与众不同的 coda.coza 点击查看清晰大图 这个网站的侧边栏使用了标签云来显示那些比较流行的关键词。下面依然 有 recent comments 禾口 most popular posts 板块。这种歹V表简单而又漂 亮。需要注意的是，那些标签云在鼠标悬停的时候也有特殊的效果。 那些标签在没有悬停的时候显得对比度很低，但仍能看到它们是以不同的 字号来显示它们的流行度。 其它处理方式 这是Jeff Croft 的首页 点击查看清晰大图 Jeff的网站非常简洁，仔细观察的话可以发现一些 漂亮的细节，比如圆角 的处理、阴影的处理和令人惊讶的图表，使网站增色不少。 侧边栏的分类风格主要侧重于简洁，但是最抢眼的就是他的既有趣又独一 无二的流行标签的显示方式；相比于使用标签云，他更喜欢使用线型图表的显 示方式。说实话，我看了以后就想模仿这种风格了 A_A 交互式 首先，来看看 Alex Buga . 点击查看清晰大图 这个侧边栏的分类处理的小而简洁。板块的间距和排版都很吸引人。 侧边栏的rece nt articles 板块可以再按下“展开”和收缩”按钮时显 示和隐藏内容。这样可以让每个内容都变得很紧凑。 下面是 Darren Hoyt Dot Com 点击查看清晰大图 这个网站的侧边栏的分类列表避免了那种保守的设计风格，而且看起来比 较紧凑，节省了空间。 这种列表的风格很漂亮，我很喜欢这种颜色，很舒服。鼠标悬停以后展开 的内容过度也很柔和 再来一个，Komodo Media 点击查看清晰大图 这种分类列表的切换变化的风格，给人一种与众不同的视觉感受，而且能 是板块整洁并且节省空间。 这种切换的形式有时会阻碍可用性，因为用户可能会看不到其他标签，但 那些小图标使得这些标签能引起用户的注意。 ⑵ 风彬侧边栏 风彬 侧边栏 希望大家在欣赏这些原创的设计的同时，仔细观察它们的细节，理解它们 的创