网站展示：折叠线内的设计

在“设计‘首屏’有必要吗？”一文中，我分享了对当今600像素顶部“首屏”的看法，并强调了网站层级结构的重要性。本文将展示成功利用或巧妙规避网站顶部600像素区域的电子商务网站案例。

以下按各网站“首屏”（above the fold）延伸程度排序，预览图中600像素以下区域已添加遮罩层。

Winestore

Winestore 几乎完全位于首屏之上，仅在600像素标记下保留版权及服务条款。这种极简设计在不信息过载的前提下，完整展示了必要内容。

Habitat Shoe Boutique

与 Winestore 类似，Habitat Shoe Boutique 也将绝大部分内容置于首屏。不同之处在于，它利用内容滑块将额外信息融入前600像素区域，这是以首屏为设计考量时的绝佳技巧。

Onirik

这家法国商店略微延伸至首屏之下，但仍保持极简整洁。Onirik 同样使用内容滑块，在不显杂乱的情况下容纳更多内容于首屏。

The Famous 4th Street Cookie Company

该在线糖果店在首屏建立了良好第一印象，并将相关信息合理布局于页面下方。值得注意的是，其再次运用了内容滑块。

Sky’s Guide Service

Sky’s Guide Service 是构建网站层级结构的典范。菜单、购物车及登录等核心信息立即可见，次要信息则置于首屏之下，仅需一次滚动即可查看。

山花饰

Pediment 采用随用户滚动的垂直菜单布局。这不仅确保重要信息始终可见，还有效引导用户进行滚动操作。

现代伊甸园

A Modern Eden 将标题、菜单和购物车固定在首屏上方，并用内容滑块展示新品。它让用户瞥见首屏下方的内容，从而促使继续滚动获取更多信息，体现了有效的网站层级结构。

RFRM – 复古风格珠宝

这是一个深知用户会滚动的网站。不仅内容段落被600像素首屏分割，用于显示背景的“窗口”也仅在用户滚动时生效。

Sony Store

索尼在线商店呈现干净的第一印象，并构建了清晰的层级结构。内容滑块后依次展示特别优惠、新产品、重要链接等信息。

Frozen Rotors

在本文示例中，Frozen Rotors 的内容延伸至首屏下方最远位置。但它仍将最相关信息置顶、“次要”信息置下，维持了清晰的层级结构。请注意，其所有文本内容均位于首屏下方。

通过示例学习

浏览这些网站可发现明显趋势：许多在线商店利用内容滑块，在不牺牲简洁设计的前提下容纳更多内容。深入探索后会发现，即便是简约网站最终也会延伸至首屏以下。无论是否保持在首屏内，这些网站都将购物车和菜单固定在首页顶部，并构建了清晰有力的站点层级结构。