关注前端开发/网页设计/网站可用性/用户体验,暴风彬彬的趣味互联网生活…
当我们提到漂亮的网页设计的时候,一个很容易被忽视的网站元素就是分类列表。所以我想通过这篇文章来总结一些我看到过的很棒的网站分类列表设计,分享给大家。也希望大家通过这篇文章重视分类列表的设计。今天暴风彬彬将继续赏析国外漂亮的页脚设计、存档页设计。您还可以浏览之前的侧边栏设计、日历设计和标签云设计赏析。
;
希望大家在欣赏这些原创的设计的同时,仔细观察它们的细节,理解它们的创意。然后一起来讨论如何才能将自己的分类列表设计得如此漂亮。
有几个设计出色的网站在这里出现了不下一次,主要是因为它们的分类列表在网站上有多种样式。
相比使用侧边栏,网页设计中一个普遍流行的方式是在页脚位置放置补充信息(比如导航、分类列表、缩略图等)。如果使用页脚而取代侧边栏,那么页脚将能为页面的主要内容提供更多的空间;而且它还能为页面的底部创建漂亮的锚。在这里我们能看到在网站中被定义为“楼底”的页脚。我们还能了解到一些放在底部内容区的“伪页脚”。
这里面有一些实例我们曾经在之前侧边栏介绍中看到过,它们双重推荐!
现在一起来讨论一下页脚吧…
第一个:Viget Labs Inspire.
这个网站的页脚为分类占用的很大的区域,而且色调比较深。category listing板块使用的宽度与上面的主内容区的宽度是相同的,当然月份形式的archives板块的宽度是等同于侧边栏的。
这种分类列表的排版是非常漂亮的,我想重点强调一下的就是它的用线条布局和简洁朴素的处理手法。
下一个,Designing the News.
Designing the News这个网站也是在页面底部使用了深色的区域来显示补充信息。
在分类的处理上这里超级简单:仅仅是一个popular tags列表和latest experiment板块。
Nimbupani Designs 有一个让人感兴趣而且印象深刻方案
任何人都不可能看不到这个页面尾部的分类列表;因为嫩黄色很难别人忽视!
边框的缝纫效果使页脚变得很活泼。分类列表仅仅使用了Popular列表和Categories的标签云。
其他方法
让我们再来看看Komodo Media
Komodo在主内容区底部使用了一个非常非常漂亮的日历;这就是我所谓的“伪页脚”,因为它相比在网站的底部,更像是在日志区域的底部。
这个日历使用横排的形式,每行展示了一年中的一些有价值的日志,并在包含日志的月份进行高亮和链接。板块头部的木纹和叶子的细节处理的相当棒。
另一个网站我们以前也看到过,Intensify.org by Rachel在页面的底部总结回顾电影、书籍和音乐。
在底部的Movies板块,网页标准字体与手绘效果的组合让人感觉很有趣很活泼。
交互
Fling Media有点与众不同
在页面的底部是一个内容可以横向滚动控制的板块。
每个日志在这里都表现为一个小页面:非常可爱!
一些网站有一个专门的存档页面,但遗憾的是,我看过的大多实例使用的都是很乏味的日志列表。所以现在我们来讨论一下那些引人注目的存档页面。
我们将通过后面的几个实例了解网页设计师展示存档页面的不同方法,而且有少数网站我们之前看到过(三重推荐!)
Jason Santa Maria的存档页面,命名为Articles,相当的简洁,做的非常好。
由“Recent Entries”、一个类别列表、月份分类和“design tags”组成。“design tag”是一个有趣的概念,Jason打算为网站设计添加额外的风格和形象的描述,随日志而定;这些标签根据设计的属性分类并能随引导相关日志。
Boagworld 为分类页面使用了简洁风格的列表
这个列表也使用的简洁风格,但展示了很多近期更新的细节,标签过滤可以让你更快更方便的找到相关的日志。
Orderedlist也是使用了简洁风格的列表,而且提供了“live-search”的搜索框。
Designing the News 使用了月份和类别板块来组成简洁的存档页面。
当我想在这个页面点击进入其他页面的时候,我发现分类组合搜索是个不错的功能。
再来看看Jeff Croft的网站
Jeff曾经在侧边栏使用的条形图表,现在在这个标签存档页面也一样使用这种风格,这种风格的确能给人耳目一新的视觉冲击。
The Statement的另一种表现
说实话,最后这个AvalonStar,我实在不知道用什么话来描述了,华丽!不多说,大家看吧。
希望大家能喜欢这次的分类列表赏析之旅!正如你看到的那样,分类列表可以以不同的排版和风格展现出来,只要你能够想到并且运用得当,那么无论它在什么位置、有什么功能,都将是一道亮丽的风景线。多在分类列表上下点功夫,搞些令人意料之外而且很漂亮的样式,能为整个网站增色很多。
转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/beautiful-web-site-archives-pt2.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作
6 条 关于 "20+漂亮的网站分类存档设计赏析(下)" 的评论
呵呵 好久不见了 最近可好呀
国外的人设计的很有自己的风格,国内真是的为网络空间上了很多伤痕。
不过也是众口难调,要没有不好看的做衬托,哪有好看的。
个性化是国外强调的,不管有没有设计功底,个性化确实比国内的强化很多。
不过有的时候细想来,光设计个好的外表还只是一部分,内容的充实才是更重要的。
[...] 《精选15个国外CSS框架》 《推荐20个让
[...] 20+漂亮的网站分类存档设计赏析(下) | 彬Go (tags: css 网页设计) [...]
[...] 原载:彬Go 本文链接:http://blog.bingo929.com/beautiful-web-site-archives-pt2.html [...]
[...] 继续阅读《20+漂亮的网站分类存档设计赏析(下)》 [...]
[...] 《精选15个国外CSS框架》 《推荐20个让
我要评论 >>