2022年漂亮的网站分类存档设计赏析 .docx

《2022年漂亮的网站分类存档设计赏析 .docx》由会员分享，可在线阅读，更多相关《2022年漂亮的网站分类存档设计赏析 .docx（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精选学习资料 - - - - - - - - - 封面1 / 15 名师归纳总结 - - - - - - -第 1 页,共 15 页精选学习资料 - - - - - - - - - 作者： PanHongliang 仅供个人学习1 2 / 15 名师归纳总结 - - - - - - -第 2 页,共 15 页精选学习资料 - - - - - - - - - 当我们提到美丽的网页设计的时候,一个很简洁被忽视的网站元素就是分类列 表；所以我想通过这篇文章来总结一些我看到过的很棒的网站分类列表设计,共享给大家；也期望大家通过这篇文章重视分类列表的设计；今日的第一部分 将赏析国外美丽的侧边栏设计、日历

2、设计和标签云设计；下半部分将赏析页脚 设计、存档页设计和总结；期望大家在观赏这些原创的设计的同时,认真观看它们的细节,懂得它们 的创意；然后一起来争论如何才能将自己的分类列表设计得如此美丽；有几个设计杰出的网站在这里显现了不下一次,主要是由于它们的分类列 表在网站上有多种样式；侧边栏网站最普遍的一个显示分类列表的地方是侧边栏；这些列表可以代表性的 分解成按类别的列表和按日期的列表,有时仍会包括那种更新列表、日历或标 签云的形式；第一来看看Szabolcs Bakos的网站, New Concept.点击查看清楚大图在这个实例当中,分类列表显示在页面右侧 是整个三栏中的其次栏；两个侧边栏中的第一

3、个,也就3 / 15 名师归纳总结 - - - - - - -第 3 页,共 15 页精选学习资料 - - - - - - - - - 这个分类列表从Categories开头,然后将complete archive和category archive这两个组成另一块,紧接着是Recent Comments；很好的块级处理让网页看起来特别美丽；其次个是 Viget Labs Inspire点击查看清楚大图分类列表也是在侧边栏,呈现了recent comments 和 recent entries两个板块,小而简洁；板块间的间距和排版处理的都特别好,使得网站很吸引人；侧边栏的头部处理的特别美丽,设计

4、者使用了类似水彩画的背景图片装饰,使得 recent comment 板块能特殊吸引人的留意；上面的文字对比度有些偏低,所以读起来有些费劲；但这些文字在网页中的重要性并不是很高,所以这种处 理成效仍是特别棒的；第三个, The Statement点击查看清楚大图The Statement 为它的分类列表使用了醒目的侧边栏,使人感觉到了肯定 了空间感；The most popular posts板块显得特殊突出,其实是用几个简洁好玩的数字形式的风格来标示出流行的次序；4 / 15 名师归纳总结 - - - - - - -第 4 页,共 15 页精选学习资料 - - - - - - - - - 日

5、历下面我们来看看日历形式的侧边栏,现在的博客几乎很少在使用日历了；这个是 Viget Extend点击查看清楚大图 先来张日历部分的特写这种形式在初期的博客中常常能看到,这个日历的表现形式很美丽,标注的日期显得很 醒目,而且可以左右掌握日期的变化（废话！）；下面来看看 Intensify.org by Rachel点击查看清楚大图这个网站依旧在侧边栏使用了日历日历没有将每个日期以块的形式显示,链接使用了醒目好玩的桃红色下划线；标签云5 / 15 名师归纳总结 - - - - - - -第 5 页,共 15 页精选学习资料 - - - - - - - - - 先来个比较与众不同的 coda.co

6、za点击查看清楚大图这个网站的侧边栏使用了标签云来显示那些比较流行的关键词；下面依旧有 recent comments和most popular posts板块；这种列表简洁而又漂亮；需要留意的是,那些标签云在鼠标悬停的时候也有特殊的成效；那些标签在没有悬停的时候显得对比度很低,但仍能看到它们是以不同的 字号来显示它们的流行度；其它处理方式这是 Jeff Croft 的首页点击查看清楚大图Jeff 的网站特别简洁,认真观看的话可以发觉一些美丽的细节,比如圆角 的处理、阴影的处理和令人惊奇的图表,使网站增色不少；侧边栏的分类风格主要侧重于简洁,但是最抢眼的就是他的既好玩又独一 无二的流行标签的显

7、示方式；相比于使用标签云,他更喜爱使用线型图表的显 示方式；说实话,我看了以后就想仿照这种风格了 _ 交互式第一,来看看Alex Buga.6 / 15 名师归纳总结 - - - - - - -第 6 页,共 15 页精选学习资料 - - - - - - - - - 点击查看清楚大图这个侧边栏的分类处理的小而简洁；板块的间距和排版都很吸引人；侧边栏的recent articles板块可以再按下“ 绽开” 和“ 收缩” 按钮时显示和隐匿内容；这样可以让每个内容都变得很紧凑；下面是 Darren Hoyt Dot Com点击查看清楚大图这个网站的侧边栏的分类列表防止了那种保守的设计风格,而且看起来

8、比较紧凑,节约了空间；这种列表的风格很美丽,我很喜爱这种颜色,很舒适；鼠标悬停以后绽开的内容过度也很柔和；再来一个,Komodo Media.点击查看清楚大图7 / 15 名师归纳总结 - - - - - - -第 7 页,共 15 页精选学习资料 - - - - - - - - - 这种分类列表的切换变化的风格,给人一种与众不同的视觉感受,而且能 是板块干净并且节约空间；这种切换的形式有时会阻碍可用性,由于用户可能会看不到其他标签,但 那些小图标使得这些标签能引起用户的留意；2 当我们提到美丽的网页设计的时候,一个很简洁被忽视的网站元素就是分类列 表；所以我想通过这篇文章来总结一些我看到过的

9、很棒的网站分类列表设计,共享给大家；也期望大家通过这篇文章重视分类列表的设计；今日暴风彬彬将连续赏析国外美丽的页脚设计、存档页 设计；您仍可以浏览之前的侧边栏设计、日历设计和标签云设计赏析； ；期望大家在观赏这些原创的设计的同时,认真观看它们的细节,懂得它们 的创意；然后一起来争论如何才能将自己的分类列表设计得如此美丽；有几个设计杰出的网站在这里显现了不下一次,主要是由于它们的分类列 表在网站上有多种样式；页脚相比使用侧边栏,网页设计中一个普遍流行的方式是在页脚位 置放置补充 信息（比如导航、分类列表、缩略图等）；假如使用页脚而取代侧边栏,那么 页脚将能为页面的主要内容供应更多的空间；而且它仍

10、能为页面的底部创建漂8 / 15 名师归纳总结 - - - - - - -第 8 页,共 15 页精选学习资料 - - - - - - - - - 亮的锚；在这里我们能看到在网站中被定义为“ 楼底” 的页脚；我们仍能明白到一些放在底部内容区的“ 伪页脚” ；这里面有一些实例我们曾经在之前侧边栏介绍中看到过,它们双重举荐！现在一起来争论一下页脚吧第一个 :Viget Labs Inspire .点击缩略图查看大图这个网站的页脚为分类占用的很大的区域,而且色调比较深；category listing 板块使用的宽度与上面的主内容区的宽度是相同的,当然月份形式的archives 板块的宽度是等同于侧

11、边栏的；点击缩略图查看大图这种分类列表的排版是特别美丽的,我想重点强调一下的就是它的用线条布局和简洁朴实的处理手法；下一个, Designing the News .点击缩略图查看大图Designing the News这个网站也是在页面底部使用了深色的区域来显示补充信息；点击缩略图查看大图9 / 15 名师归纳总结 - - - - - - -第 9 页,共 15 页精选学习资料 - - - - - - - - - 在分类的处理上这里超级简洁：仅仅是一个popular tags列表和latest experiment 板块；Nimbupani Designs点击缩略图查看大图有一个让人感爱好而

12、且印象深刻方案任何人都不行能看不到这个页面尾部的分类 列表；由于嫩黄色很难别人忽视！点击缩略图查看大图边框的缝纫成效使页脚变得很活泼；分类列表仅仅使用了Popular列表和Categories 的标签云；其他方法让我们再来看看 Komodo Media点击缩略图查看大图Komodo在主内容区底部使用了一个特别特别美丽的日历；这就是我所谓的“ 伪页脚” ,由于它相比在网站的底部,更像是在日志区域的底部；点击缩略图查看大图这个日历使用横排的形式,每行呈现了一年中的一些有价值的日志,并在包含日志的月份进行高亮和链接；板块头部的木纹和叶子的细节处理的相当棒；10 / 15 名师归纳总结 - - - -

13、 - - -第 10 页,共 15 页精选学习资料 - - - - - - - - - 另一个网站我们以前也看到过,Intensify.org by Rachel在页面的底部总结回忆电影、书籍和音乐；点击缩略图查看大图点击缩略图查看大图在底部的Movies板块,网页标准字体与手绘成效的组合让人感觉很好玩很活泼；交互Fling Media 有点与众不同点击缩略图查看大图在页面的底部是一个内容可以横向滚动掌握的板块；点击缩略图查看大图每个日志在这里都表现为一个小页面：特别可爱！存档页一些网站有一个特地的存档页面,但遗憾的是,我看过的大多实例使用的都是很乏味的日志列表；所以现在我们来争论一下那些引人

14、注目的存档页面；我们将通过后面的几个实例明白网页设计师呈现存档页面的不同方法,而且有少数网站我们之前看到过（三重举荐！）11 / 15 名师归纳总结 - - - - - - -第 11 页,共 15 页精选学习资料 - - - - - - - - - Jason Santa Maria的存档页面, 命名为Articles,相当的简洁,做的特别好；点击缩略图查看大图由“Recent Entries” 、一个类别列表、月份分类和“design tags” 组成；“design tag” 是一个好玩的概念,Jason 准备为网站设计添加额外的风格和形象的描述,随日志而定； 这些标签依据设计的属性分类

15、并能随引导相关日志；Boagworld 为分类页面使用了简洁风格的列表点击缩略图查看大图这个列表也使用的简洁风格,但呈现了许多近期更新的细节,标签过滤可以让你更快更便利的找到相关的日志；Orderedlist 也是使用了简洁风格的列表,而且供应了“live-search” 的搜寻框；点击缩略图查看大图Designing the News 页面；点击缩略图查看大图使用了月份和类别板块来组成简洁的存档当我想在这个页面点击进入其他页面的时候,我发觉分类组合搜寻是个不 错的功能；12 / 15 名师归纳总结 - - - - - - -第 12 页,共 15 页精选学习资料 - - - - - - -

16、- - 再来看看Jeff Croft的网站点击缩略图查看大图Jeff 曾经在侧边栏使用的条形图表,现在在这个标签存档页面也一样使用这种风格,这种风格的确能给人耳目一新的视觉冲击；The Statement 的另一种表现点击缩略图查看大图说实话, 最终这个AvalonStar,我实在不知道用什么话来描述了,华丽！不多说,大家看吧；点击缩略图查看大图总结期望大家能喜爱这次的分类列表赏析之旅！正如你看到的那样,分类列表可以以不同的排版和风格呈现出来,只要你能够想到并且运用得当,那么无论它在什么位置、有什么功能,都将是一道亮丽的风景线；多在分类 列表上下点功夫,搞些令人意料之外而且很美丽的样式,能为整

17、个网站增色许多；版权申明 本文部分内容,包括文字、图片、以及设计等在网上搜集整理；版权为潘宏亮个人全部This article includes some parts, including text, pictures, 13 / 15 名师归纳总结 - - - - - - -第 13 页,共 15 页精选学习资料 - - - - - - - - - and design. Copyright is Pan Hongliangs personal ownership. 用户可将本文的内容或服务用于个人学习、争论或观赏, 以及其他非商业性或非盈利性用途, 但同时应遵守著作权法及其他相关法律 的规

18、定,不得侵害本网站及相关权益人的合法权益；除此以外,将本文任何内容或服务用于其他用途时,许可,并支付酬劳；须征得本人及相关权益人的书面Users may use the contents or services of this article for personal study, research or appreciation, and other non-commercial or non-profit purposes, but at the same time, they shall abide by the provisions of copyright law and other

19、 relevant laws, and shall not infringe upon the legitimate rights of this website and its relevant obligees. In addition, when any content or service of this article is used for other purposes, written permission and remuneration shall be obtained from the person concerned and the relevant obligee.

20、转载或引用本文内容必需是以新闻性或资料性公共免费信息为使用目的的合理、善意引用,不得对本文内容原意进行曲解、修改,并自负版权等法律责任；Reproduction or quotation of the content of this article must be reasonable and good-faith citation for the use of news or informative public free information. It shall not 14 / 15 名师归纳总结 - - - - - - -第 14 页,共 15 页精选学习资料 - - - - - - - - - misinterpret or modify the original intention of the content of this article, and shall bear legal liability such as copyright.15 / 15 名师归纳总结 - - - - - - -第 15 页,共 15 页