内容被认为是网站的“肉”。内容应该是可用的，并以一种能够有效阅读和操作的方式显示。现在我们已经讨论过了网站导航设计模式，现在让我们探索显示内容的流行设计模式。
下面，我们列出了一些当前内容呈现的设计趋势，都是基于增强用户体验。
定价表
随着软件即服务(SaaS)的流行，价格表现在已经成为网络上的一个主要内容。当你有多个定价选项时，比如多层订阅计划，价目表是有意义的。
表格可以让访问者以快速参考的格式比较基本功能和价格，这使他们更容易做出决定和采取行动。在精心设计的定价表中，每个计划都有自己的注册按钮，简化了注册过程，减少了混乱。
何时使用
任何时候，当你对同一产品有多个注册或订阅选项时(例如主机计划或web应用程序)，都应该使用定价表来帮助潜在客户选择适合他们需求的计划。
例子
这里有一些价目表的例子。Basecamp这个流行的项目管理工具中的定价表使用一个只有三列的简单表。提供最佳价值的计划被给出独特的设计这是一种经常出现在价目表上的流行风格。
WufooWufoo网站的价目表使用了一个彩色的、有趣的表格来显示他们的服务计划和定价，从最昂贵的在左边，最便宜的(免费)在右边。
Light CMS使用了一个色彩丰富的定价表，但与Wufoo的定价表(上图)相比，它有点缺乏活力。
Shopify这个托管的电子商店解决方案有一个很好的定价表，它展示了一个使用颜色区分不同定价计划的很好的例子。
CannyBill有一个简单明了的定价表。
文章列表与内容预告
文章列表通常在新闻网站和博客上看到，并且最容易在上面找到主页或者只显示部分内容的存档页面。这些列表的格式对网站用户浏览有用内容的容易程度有很大的影响;我们都知道，越容易浏览，访问者就越有可能在你的网站上停留更长的时间。
格式良好的列表不仅包括文章的标题，还包括文章开头的简短简介(内容预告片)。
何时使用
任何时候，当您有文章需要组织到一个存档中时，您都需要考虑包含一个内容预告片。它让你的访问者更容易看到他们是否真的对文章感兴趣，并可以减少因找不到他们想要的东西而引起的沮丧。
例子
以下是5个带有内容预告的文章列表示例。9513本网站的内容预告片显示了每篇主要文章的一段左右的内容。
尽管在其主页上显示文章有三种不同的格式，但它还是大致显示了一段预告片的内容。
这种公司Kind Company在他们的博客上以预告片的形式展示每篇文章的开头。
单独列出一份清单A List Apart首页显示每篇文章的第一段作为预告片。
Psdtuts +这个流行的Photoshop教程博客在每篇文章上都有简短的介绍。
图片缩略图
缩略图可以以几种不同的方式使用。最常见的是，它们被用于产品页面或照片画廊页面作为一种方式，提供一个方便的视图的一组图像。图片缩略图还可以在文章列表中使用内容预告(上面讨论过)，为文章提供一些视觉上下文。
何时使用
图片缩略图可以与文章或类似内容一起使用，以增加页面的视觉趣味。它们也可以在图片库或类似的显示中使用，以显示所有图像的预览。在本例中，它们应该是可点击的。
当点击时，它们应该打开相应的全尺寸图像。
例子
下面是在网站上使用缩略图的五个例子。科斯特肢体Kester Limb是一个使用缩略图作为在线作品集导航的很好的例子。
这个网站使用图片缩略图来显示流行专辑中的艺术作品。
Tobias Bjerrome Ahlin这个网站使用面向肖像的缩略图(这不是一个非常常见的缩略图维度，因为它们通常是横向或方形的)和一些文本内容。
像Desey这样的Desey画廊网站是完美的图像缩略图导航方案。
Cosmicsoda是一个很好的例子，说明了缩略图在电子商务网站上的作用。
图像传送带和幻灯片
图像传送带和幻灯片是流行的内容表示设计模式，并正在越来越多地出现在网站标题以及其他突出的网页布局的位置。它们通常用于显示与内容相关的图像，通常在图像上覆盖标题或标题。
它们也可以用来展示单一产品的多张图片，有时会在单一产品网站上看到。
何时使用
当你想要吸引人们对一组特定内容(如特色文章)的注意时，在你的标题或网站的其他显著位置使用旋转木马或幻灯片。
例子
下面是一些在网站上使用的图片传送带和图片幻灯片的例子。
Netwise使用幻灯片在他们的主页上显示主要内容。
Sudhausba.de这个网站有一个幻灯片，导航作为主要的视觉元素在他们的主页上。
IconliciousIconlicious在他们的免费赠品页面上使用幻灯片来展示他们向公众提供的免费图标。
这有一个在幻灯片中显示的可滚动窗口。
水平滚动
水平滚动曾经是网页设计世界的一大禁忌，但现在在网页设计中有一种使用水平布局的趋势，使用客户端脚本(例如JavaScript)来促进内容的水平滚动，而不是在浏览器中显示水平滚动条。
利用水平滚动来显示内容的网站通常会被分解成多个屏幕，并且是水平布局而不是垂直布局。导航通常使用JavaScript完成，允许访问者从一个部分跳转到下一个部分，而无需滚动。
何时使用
当你想要一些与正常垂直滚动略有不同的内容时，使用水平滚动内容区域。
它最适用于粒度较小的网站，以及那些没有任何冗长内容块的网站。有时水平滚动区域内的单个屏幕将具有垂直滚动条，以容纳较长的内容。
例子
这里有四个水平滚动的例子。
这个网络作品集具有美丽的摄影使用固定的标题和水平滚动的内容区域。
放射性思维使用水平滚动的网页布局来显示他们网站上的最小内容。
Stephane Tartelin这个网站使用水平布局来展示所有者的作品。
这个网站使用了一个非常直接的水平布局。
无限垂直滚动
无尽的垂直滚动在内容不断更新的网站上越来越流行，比如推特而且脸谱网．通常，只要你继续滚动，无尽的垂直滚动就会继续加载新内容，尽管有时它们也需要用户输入(例如单击“加载更多”按钮，你可以更频繁地看到它手机网页设计）.
只能加载页面的部分内容减少页面加载时间，并且可以降低web服务器的资源需求，因为大多数用户可能会在加载的前几个内容块中找到他们想要的内容。
何时使用
当你有一长串不需要一次性加载的内容时，使用无限滚动。这方面的例子是基于时间轴的内容(例如在Facebook的新闻提要或Twitter的更新提要中发现的内容)，或者搜索结果等内容。
例子
这里有几个无限垂直滚动的例子。Facebook上的新闻提要可能是最常见的连续滚动界面之一。
社交新闻网站DZone使用无限滚动显示搜索结果。
进一步的阅读
要获得与上面讨论的设计模式相关的灵感，请查看以下资源:
- 网页设计中五种有效的标题
- 五种流行的设计组合网站风格
- 40个优秀的博客设计
- 70多个网页设计产品比较表的例子
- 网页设计中25个时尚的标题示例
- 16个免费的JavaScript解决方案显示您的图像
- 14个jQuery插件用于处理图像
- 使用jQuery创建一个光滑和易访问的幻灯片
