当我们提到漂亮的网页设计的时候，一个很容易被忽视的网站元素就是分类列表。所以我想通过这篇文章来总结一些我看到过的很棒的网站分类列表设计，分享给大家。也希望大家通过这篇文章重视分类列表的设计。今天的第一部分将赏析国外漂亮的侧边栏设计、日历设计和标签云设计。下半部分将赏析页脚设计、存档页设计和总结。

　　希望大家在欣赏这些原创的设计的同时，仔细观察它们的细节，理解它们的创意。然后一起来讨论如何才能将自己的分类列表设计得如此漂亮。

　　有几个设计出色的网站在这里出现了不下一次，主要是因为它们的分类列表在网站上有多种样式。

侧边栏

　　网站最普遍的一个显示分类列表的地方是侧边栏。这些列表可以代表性的分解成按类别的列表和按日期的列表，有时还会包括那种更新列表、日历或标签云的形式。

首先来看看Szabolcs Bakos的网站，New Concept.

点击查看清晰大图

　　在这个实例当中，分类列表显示在页面右侧两个侧边栏中的第一个，也就是整个三栏中的第二栏。

　　这个分类列表从Categories开始，然后将complete archive和 category archive这两个组成另一块，紧接着是Recent Comments。很好的块级处理让网页看起来非常漂亮。

第二个是Viget Labs Inspire

点击查看清晰大图

　　分类列表也是在侧边栏，展示了recent comments和recent entries两个板块，小而简洁。板块间的间距和排版处理的都非常好，使得网站很吸引人。

 

　　侧边栏的头部处理的非常漂亮，设计者使用了类似水彩画的背景图片装饰，使得recent comment板块能特别吸引人的注意。上面的文字对比度有些偏低，所以读起来有些费劲；但这些文字在网页中的重要性并不是很高，所以这种处理效果还是非常棒的。

 

 

第三个，The Statement

点击查看清晰大图

　　The Statement为它的分类列表使用了醒目的侧边栏，使人感觉到了一定了空间感。

　　The most popular posts板块显得特别突出，其实是用几个简单有趣的数字形式的风格来标示出流行的顺序。

 

日历

　　下面我们来看看日历形式的侧边栏，这种形式在初期的博客中经常能看到，现在的博客几乎很少在使用日历了。

这个是Viget Extend

点击查看清晰大图

先来张日历部分的特写

 

　　这个日历的表现形式很漂亮，标注的日期显得很醒目，而且可以左右控制日期的变化（废话！）。

 

 

下面来看看Intensify.org by Rachel

点击查看清晰大图

这个网站依然在侧边栏使用了日历

　　日历没有将每个日期以块的形式显示，链接使用了醒目有趣的桃红色下划线。

 

标签云

先来个比较与众不同的　coda.coza

点击查看清晰大图

　　这个网站的侧边栏使用了标签云来显示那些比较流行的关键词。下面依然有recent comments 和 most popular posts板块。这种列表简单而又漂亮。需要注意的是，那些标签云在鼠标悬停的时候也有特殊的效果。

　　那些标签在没有悬停的时候显得对比度很低，但仍能看到它们是以不同的字号来显示它们的流行度。

 

其它处理方式

这是Jeff Croft的首页

点击查看清晰大图

　　Jeff的网站非常简洁，仔细观察的话可以发现一些漂亮的细节，比如圆角的处理、阴影的处理和令人惊讶的图表，使网站增色不少。

　　侧边栏的分类风格主要侧重于简洁，但是最抢眼的就是他的既有趣又独一无二的流行标签的显示方式；相比于使用标签云，他更喜欢使用线型图表的显示方式。说实话，我看了以后就想模仿这种风格了^_^

 

交互式

首先，来看看Alex Buga.

点击查看清晰大图

 

这个侧边栏的分类处理的小而简洁。板块的间距和排版都很吸引人。

　　侧边栏的recent articles板块可以再按下“展开”和“收缩”按钮时显示和隐藏内容。这样可以让每个内容都变得很紧凑。

 

 

下面是Darren Hoyt Dot Com

点击查看清晰大图

　　这个网站的侧边栏的分类列表避免了那种保守的设计风格，而且看起来比较紧凑，节省了空间。

　　这种列表的风格很漂亮，我很喜欢这种颜色，很舒服。鼠标悬停以后展开的内容过度也很柔和。

 

 

再来一个，Komodo Media.

点击查看清晰大图

　　这种分类列表的切换变化的风格，给人一种与众不同的视觉感受，而且能是板块整洁并且节省空间。

　　这种切换的形式有时会阻碍可用性，因为用户可能会看不到其他标签，但那些小图标使得这些标签能引起用户的注意。

继续阅读《20+漂亮的网站分类存档设计赏析(下)》

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/beautiful-web-site-archives-pt1.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

相关日志

• 20+漂亮的网站分类存档设计赏析(下) (6)
• 通过设计提高web2.0网站交互体验的四个方面 (2)
• 网站可用性研究：页面载入后自动选择表单输入框 (4)
• 网站内容排版可用性分析 (4)
• 教你如何量化用户体验 (0)