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

精品学习资源封面欢迎下载精品学习资源作者： PanHongliang仅供个人学习〔1〕欢迎下载精品学习资源当我们提到美丽的网页设计的时候，一个很简洁被忽视的网站元素就是分类列表；所以我想通过这篇文章来总结一些我看到过的很棒的网站分类列表设计， 共享给大家；也期望大家通过这篇文章重视分类列表的设计；今日的第一部分将赏析国外美丽的侧边栏设计、日历设计和标签云设计；下半部分将赏析页脚设计、存档页设计和总结；期望大家在观赏这些原创的设计的同时，认真观看它们的细节，懂得它们的创意；然后一起来争论如何才能将自己的分类列表设计得如此美丽；有几个设计杰出的网站在这里显现了不下一次，主要是由于它们的分类列表在网站上有多种样式；侧边栏网站最普遍的一个显示分类列表的地方是侧边栏；这些列表可以代表性的分解成按类别的列表和按日期的列表，有时仍会包括那种更新列表、日历或标签云的形式；第一来看看 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 .点击查看清楚大图欢迎下载精品学习资源这种分类列表的切换变化的风格，给人一种与众不同的视觉感受，而且能是板块干净并且节约空间；这种切换的形式有时会阻碍可用性，由于用户可能会看不到其他标签，但那些小图标使得这些标签能引起用户的留意；〔2〕当我们提到美丽的网页设计的时候，一个很简洁被忽视的网站元素就是分类列表；所以我想通过这篇文章来总结一些我看到过的很棒的网站分类列表设计， 共享给大家；也期望大家通过这篇文章重视分类列表的设计；今日暴风彬彬将日历设计和标签云设计赏析； ；期望大家在观赏这些原创的设计的同时，认真观看它们的细节，懂得它们的创意；然后一起来争论如何才能将自己的分类列表设计得如此美丽；有几个设计杰出的网站在这里显现了不下一次，主要是由于它们的分类列表在网站上有多种样式；页脚连续赏析国外美丽的页脚设计、 存档页 设计；您仍可以浏览之前的 侧边栏设计、相比使用侧边栏，网页设计中一个普遍流行的方式是在页脚位 置放置补充信息（比如导航、分类列表、缩略图等）；假如使用页脚而取代侧边栏，那么页脚将能为页面的主要内容供应更多的空间；而且它仍能为页面的底部创建漂欢迎下载精品学习资源亮的锚；在这里我们能看到在网站中被定义为“楼底”的页脚；我们仍能明白到一些放在底部内容区的“伪页脚”；这里面有一些实例我们曾经在之前侧边栏介绍中看到过，它们双重举荐！现在一起来争论一下页脚吧⋯第一个 :Viget Labs Inspire .点击缩略图查看大图这个网站的页脚为分类占用的很大的区域，而且色调比较深； category listing 板块使用的宽度与上面的主内容区的宽度是相同的，当然月份形式的archives 板块的宽度是等同于侧边栏的；点击缩略图查看大图这种分类列表的排版是特别美丽的，我想重点强调一下的就是它的用线条布局和简洁朴实的处理手法；下一个， Designing the News .点击缩略图查看大图Design ing the News 这个网站也是在页面底部使用了深色的区域来显示补充信息；点击缩略图查看大图欢迎下载精品学习资源在分类的处理上这里超级简洁：仅仅是一个 popular tags 列表和 latest experiment 板块；Nimbupani Designs 有一个让人感爱好而且印象深刻方案点击缩略图查看大图任何人都不行能看不到这个页面尾部的分类 列表；由于嫩黄色很难别人忽视！点击缩略图查看大图边框的缝纫成效使页脚变得很活泼；分类列表仅仅使用了 Popular 列表和Categories 的标签云；其他方法让我们再来看看 Komodo Media点击缩略图查看大图Komodo 在主内容区底部使用了一个特别特别美丽的日历； 这就是我所谓的“伪页脚”，由于它相比在网站的底部，更像是在日志区域的底部；点击缩略图查看大图这个日历使用横排的形式，每行呈现了一年中的一些有价值的日志，并在包含日志的月份进行高亮和链接； 板块头部的木纹和叶子的细节处理的相当棒；欢迎下载精品学习资源面的底部总结回忆电影、书籍和音乐；点击缩略图查看大图点击缩略图查看大图在底部的 Movies板块，网页标准字体与手绘成效的组合让人感觉很好玩很活泼；交互Fling Media有点与众不同点击缩略图查看大图在页面的底部是一个内容可以横向滚动掌握的板块；点击缩略图查看大图每个日志在这里都表现为一个小页面：特别可爱！存档页另一个网站我们以前也看到过， Intensify.org by Rachel 在页一些网站有一个特地的存档页面，但遗憾的是，我看过的大多实例使用的都是很乏味的日志列表；所以现在我们来争论一下那些引人注目的存档页面；我们将通过后面的几个实例明白网页设计师呈现存档页面的不同方法，而且有少数网站我们之前看到过（三重举荐！）欢迎下载精品学习资源Jason Santa Maria 的存档页面， 命名为 Articles ，相当的简洁， 做的特别好；点击缩略图查看大图由“ Recent Entries ”、一个类别列表、月份分类和“ design tags ”组成；“ design tag ”是一个好玩的概念， Jason 准备为网站设计添加额外的风格和形象的描述， 随日志而定； 这些标签依据设计的属性分类并能随引导相关日志；Boagworld 为分类页面使用了简洁风格的列表点击缩略图查看大图这个列表也使用的简洁风格，但呈现了许多近期更新的细节，标签过滤可以让你更快更便利的找到相关的日志；Orderedlist 也是使用了简洁风格的列表，而且供应了“ live-search ”的搜寻框；点击缩略图查看大图Designing the News 使用了月份和类别板块来组成简洁的存档页面；点击缩略图查看大图当我想在这个页面点击进入其他页面的时候，我发。