搜索
(1)当我们提到漂亮的网页设计的时候，一个很容易被忽视的网站元素就是分类列表。所以我想通过这篇文章来总结一些我看到过的很棒的网站分类列表设计，分享给大家。也希望大家通过这篇文章重视分类列表的设计。今天的第一部分将赏析国外漂亮的侧边栏设计、日历设计和标签云设计。下半部分将赏析页脚设计、存档页设计和总结。希望大家在欣赏这些原创的设计的同时，仔细观察它们的细节，理解它们的创意。然后一起来讨论如何才能将自己的分类列表设计得如此漂亮。有几个设计出色的网站在这里出现了不下一次，主要是因为它们的分类列表在网站上有多种样式。侧边栏网站最普遍的一个显示分类列表的地方是侧边栏。这些列表可以代表性的分解成按类别的列表和按日期的列表，有时还会包括那种更新列表、日历或标签云的形式。首先来看看SzabolcsBakos的网站，NewConcept.点击查看清晰大图在这个实例当中，分类列表显示在页面右侧两个侧边栏中的第一个，也就是整个三栏中的第二栏。这个分类列表从Categories开始，然后将completearchive和categoryarchive这两个组成另一块，紧接着是RecentComments。很好的块级处理让网页看起来非常漂亮。第二个是VigetLabsInspire点击查看清晰大图分类列表也是在侧边栏，展示了recentcomments和recententries两个板块，小而简洁。板块间的间距和排版处理的都非常好，使得网站很吸引人。侧边栏的头部处理的非常漂亮，设计者使用了类似水彩画的背景图片装饰，使得recentcomment板块能特别吸引人的注意。上面的文字对比度有些偏低，所以读起来有些费劲；但这些文字在网页中的重要性并不是很高，所以这种处理效果还是非常棒的。第三个，TheStatement点击查看清晰大图TheStatement为它的分类列表使用了醒目的侧边栏，使人感觉到了一定了空间感。Themostpopularposts板块显得特别突出，其实是用几个简单有趣的数字形式的风格来标示出流行的顺序。日历下面我们来看看日历形式的侧边栏，这种形式在初期的博客中经常能看到，现在的博客几乎很少在使用日历了。这个是VigetExtend点击查看清晰大图先来张日历部分的特写这个日历的表现形式很漂亮，标注的日期显得很醒目，而且可以左右控制日期的变化（废话！）。下面来看看Intensify.orgbyRachel点击查看清晰大图这个网站依然在侧边栏使用了日历日历没有将每个日期以块的形式显示，链接使用了醒目有趣的桃红色下划线。标签云先来个比较与众不同的coda.coza点击查看清晰大图这个网站的侧边栏使用了标签云来显示那些比较流行的关键词。下面依然有recentcomments和mostpopularposts板块。这种列表简单而又漂亮。需要注意的是，那些标签云在鼠标悬停的时候也有特殊的效果。那些标签在没有悬停的时候显得对比度很低，但仍能看到它们是以不同的字号来显示它们的流行度。其它处理方式这是JeffCroft的首页点击查看清晰大图Jeff的网站非常简洁，仔细观察的话可以发现一些漂亮的细节，比如圆角的处理、阴影的处理和令人惊讶的图表，使网站增色不少。侧边栏的分类风格主要侧重于简洁，但是最抢眼的就是他的既有趣又独一无二的流行标签的显示方式；相比于使用标签云，他更喜欢使用线型图表的显示方式。说实话，我看了以后就想模仿这种风格了^_^交互式首先，来看看AlexBuga.点击查看清晰大图这个侧边栏的分类处理的小而简洁。板块的间距和排版都很吸引人。侧边栏的recentarticles板块可以再按下“展开”和“收缩”按钮时显示和隐藏内容。这样可以让每个内容都变得很紧凑。下面是DarrenHoytDotCom点击查看清晰大图这个网站的侧边栏的分类列表避免了那种保守的设计风格，而且看起来比较紧凑，节省了空间。这种列表的风格很漂亮，我很喜欢这种颜色，很舒服。鼠标悬停以后展开的内容过度也很柔和。再来一个，KomodoMedia.点击查看清晰大图这种分类列表的切换变化的风格，给人一种与众不同的视觉感受，而且能是板块整洁并且节省空间。这种切换的形式有时会阻碍可用性，因为用户可能会看不到其他标签，但那些小图标使得这些标签能引起用户的注意。(2)当我们提到漂亮的网页设计的时候，一个很容易被忽视的网站元素就是分类列表。所以我想通过这篇文章来总结一些我看到过的很棒的网站分类列表设计，分享给大家。也希望大家通过这篇文章重视分类列表的设计。今天暴风彬彬将继续赏析国外漂亮的页脚设计、存档页设计。您还可以浏览之前的侧边栏设计、日历设计和标签云设计赏析。;希望大家在欣赏这些原创的设计的同时，仔细观察它们的细节，理解它们的创意。然后一起来讨论如何才能将自己的分类列表设计得如此漂亮。有几个设计出色的网站在这里出现了不下一次，主要是因为它们的分类列表在网站上有多种样式。页脚相比使用侧边栏，网页设计中一个普遍流行的方式是在页脚位置放置补充信息（比如导航、分类列表、缩略图等）。如果使用页脚而取代侧边栏，那么页脚将能为页面的主要内容提供更多的空间；而且它还能为页面的底部创建漂亮的锚。在这里我们能看到在网站中被定义为“楼底”的页脚。我们还能了解到一些放在底部内容区的“伪页脚”。这里面有一些实例我们曾经在之前侧边栏介绍中看到过，它们双重推荐！现在一起来讨论一下页脚吧…第一个:VigetLabsInspire.点击缩略图查看大图这个网站的页脚为分类占用的很大的区域，而且色调比较深。categorylisting板块使用的宽度与上面的主内容区的宽度是相同的，当然月份形式的archives板块的宽度是等同于侧边栏的。点击缩略图查看大图这种分类列表的排版是非常漂亮的，我想重点强调一下的就是它的用线条布局和简洁朴素的处理手法。下一个，DesigningtheNews.点击缩略图查看大图DesigningtheNews这个网站也是在页面底部使用了深色的区域来显示补充信息。点击缩略图查看大图在分类的处理上这里超级简单：仅仅是一个populartags列表和latestexperiment板块。NimbupaniDesigns有一个让人感兴趣而且印象深刻方案点击缩略图查看大图任何人都不可能看不到这个页面尾部的分类列表；因为嫩黄色很难别人忽视！点击缩略图查看大图边框的缝纫效果使页脚变得很活泼。分类列表仅仅使用了Popular列表和Categories的标签云。其他方法让我们再来看看KomodoMedia点击缩略图查看大图Komodo在主内容区底部使用了一个非常非常漂亮的日历；这就是我所谓的“伪页脚”，因为它相比在网站的底部，更像是在日志区域的底部。点击缩略图查看大图这个日历使用横排的形式，每行展示了一年中的一些有价值的日志，并在包含日志的月份进行高亮和链接。板块头部的木纹和叶子的细节处理的相当棒。另一个网站我们以前也看到过，Intensify.orgbyRachel在页面的底部总结回顾电影、书籍和音乐。点击缩略图查看大图点击缩略图查看大图在底部的Movies板块，网页标准字体与手绘效果的组合让人感觉很有趣很活泼。交互FlingMedia有点与众不同点击缩略图查看大图在页面的底部是一个内容可以横向滚动控制的板块。点击缩略图查看大图每个日志在这里都表现为一个小页面：非常可爱！存档页一些网站有一个专门的存档页面，但遗憾的是，我看过的大多实例使用的都是很乏味的日志列表。所以现在我们来讨论一下那些引人注目的存档页面。我们将通过后面的几个实例了解网页设计师展示存档页面的不同方法，而且有少数网站我们之前看到过（三重推荐！）JasonSantaMaria的存档页面，命名为Articles，相当的简洁，做的非常好。点击缩略图查看大图由“RecentEntries”、一个类别列表、月份分类和“designtags”组成。“designtag”是一个有趣的概念，Jason打算为网站设计添加额外的风格和形象的描述，随日志而定；这些标签根据设计的属性分类并能随引导相关日志。Boagworld为分类页面使用了简洁风格的列表点击缩略图查看大图这个列表也使用的简洁风格，但展示了很多近期更新的细节，标签过滤可以让你更快更方便的找到相关的日志。Orderedlist也是使用了简洁风格的列表，而且提供了“live-search”的搜索框。点击缩略图查看大图DesigningtheNews使用了月份和类别板块来组成简洁的存档页面。点击缩略图查看大图当我想在这个页面点击进入其他页面的时候，我发现分类组合搜索是个不错的功能。再来看看JeffCroft的网站点击缩略图查看大图Jeff曾经在侧边栏使用的条形图表，现在在这个标签存档页面也一样使用这种风格，这种风格的确能给人耳目一新的视觉冲击。TheStatement的另一种表现点击缩略图查看大图说实话，最后这个AvalonStar，我实在不知道用什么话来描述了，华丽！不多说，大家看吧。点击缩略图查看大图总结希望大家能喜欢这次的分类列表赏析之旅！正如你看到的那样，分类列表可以以不同的排版和风格展现出来，只要你能够想到并且运用得当，那么无论它在什么位置、有什么功能，都将是一道亮丽的风景线。多在分类列表上下点功夫，搞些令人意料之外而且很漂亮的样式，能为整个网站增色很多。