网页设计中杂志布局的 14 个精美示例

下次浏览流行的印刷/纸质报纸或杂志时，请注意页面布局之间的差异。 一些页面布局清晰、干净且可读性强。

其他人可能更时尚、更有艺术气息。 然而，它们都遵循最高的设计标准，清晰、简洁、美观地呈现内容。

保持这些高标准并非易事，但始终如一。 通常情况下，这些高设计标准反映在他们的网络版本中，经常推动创新，尤其是当他们必须向如此多的不同设备和屏幕尺寸提供内容时。

杂志式网站设计是一种非常流行的布局风格，但很多时候，这些网站并没有从离线杂志中汲取灵感。 找出最有效的方法的一个好方法是仔细查看流行的在线杂志，因为负责设计印刷版的人通常也会为在线杂志的版面设计做出贡献。

虽然一切都很美观，但以下每个杂志风格的网站都具有创造性和高度独特的布局，它们都将用户体验放在首位，并且都是设计一致性的主要例子。 这就是杂志风格的网页设计应该如何完成。

时间

《时代》主页在很大程度上依赖于视觉效果，但这本杂志的印刷版在其历史上一直都是如此。 然而，网页设计师设法为观众提供了多种选择，同时避免了混乱的外观。

本网站可用性和可读性成功的秘诀之一是对视觉层次的依赖。 访问者总能看到当下的特色故事是什么。

边缘

称之为马赛克或拼图，但 The Verge 的主页设计让您快速了解里面的内容，并让您快速到达您想去的地方。

布局也令人赏心悦目。 浏览文章列表只需要一两秒钟。 内页有时会分解成图片缩略图轮播——这样可以很容易地深入到特定的故事或感兴趣的主题。

纽约客

《纽约客》纸质版的粉丝不会对网络版的布局感到失望。 主要焦点放在内容上，布局风格极简且吸引人。

纽约客的排版很熟悉，因为印刷版的排版在整个网站上一直保持不变。 这本杂志在让在线观众感到宾至如归方面做得非常出色。

有线

Wired 的网站展示了一种近乎不可思议的能力，可以选择大量种类繁多的主题（尽管大多数主题似乎都是极客导向的），并以一种真正使浏览舒适和可读性极佳的方式排列它们。

这是通过巧妙地使用列宽、间距、填充、舒适地使用空白以及令人赏心悦目的无衬线字体来实现的。 字体大小还表明哪些文章最有可能引起大多数观众的兴趣。 一致性是规则，所有不同的部分在整个网站上形成一个有凝聚力的整体。

新闻周刊

Newsweek 的网站结构经过深思熟虑，但它还配备了设计精美的响应式版本，因此您可以在旅途中浏览其文章。

这对移动用户来说尤其是个好消息，因为该杂志以其许多优秀的文章和图片而闻名。 它把所有东西放在一起做得很好。

彭博社

Bloomberg.com 已成为许多人的数字目的地，因为它能够以现代、用户友好的格式提供最新新闻的新闻体验。

访问者特别喜欢这本为当今全球网络消费者打造的在线杂志巧妙地整合其最强大的媒体资产的方式。

GQ

那些经常阅读 GQ 并且已经习惯了离线版本内容呈现方式的人，会发现在线版本中同样熟悉的外观。

毫不奇怪，您首先看到的是横跨页面宽度的时尚图像横幅。 向下滚动，文章列表很好地排列在时尚的网格中。

国家地理

国家地理的网络版不会让人失望。 该网站拥有简单的设计，并展示了大图片以及易于阅读的字体选择。

公路与赛道

Road and Track 杂志长期以来以其富有洞察力的文章和精彩的图片而深受汽车爱好者的欢迎。 当决定创建网络版时，这本杂志的编辑显然已经做好了准备。

精彩的文章和令人惊叹的照片仍然存在，还有一个非常方便的静态导航栏。

名利场

《名利场》在一年前重新设计了网站，结果非常令人满意。 新的在线版本出色地结合了该杂志著名的长篇文章与快速新闻、幻灯片、视频等。

网站编辑还注意到许多访问者在移动设备上浏览的事实。 他们煞费苦心地让内容在所有平台上看起来都很棒——而且他们取得了巨大的成功。

洛杉矶时报

洛杉矶时报成功创建了有史以来最大的响应式网站之一。 读者可以在任何设备或屏幕尺寸上阅读世界上最大的报纸之一，获得相同的世界级体验。

为此，网页设计师放弃了传统的页面网格。 取而代之的是，突出了报纸的重要新闻报道，消除了混乱，并将更多的注意力放在了报纸独特的声音和多媒体上。

下一个网络

The Next Web (TNW) 以单页网站格式呈现，设计大胆。 它在平衡业务需求和强大的用户体验方面做得非常出色。

内容是最重要的，有很多，但没有混乱的迹象。

企业家

企业家，应对企业所有权挑战的权威指南，已经在报摊上销售了 30 年，但在线版在布局上绝对是现代的。

主页可能不是特别有创意，但布局简单明了且易于遵循。 该杂志每月出版一次，提供印刷版和移动应用程序版。

广告时代

从 1930 年的芝加哥大报到成为全球出版物，《广告时代》现在提供印刷版和在线版，以及每日和每周的电子邮件时事通讯。

除了突出显示的文章外，在您向下滚动一两页之前，主题都被分配了相同的空间，之后许多主题被列为行项目。 Ad Age 布局是一种很容易模仿的布局。

这些示例之一或一两个示例的组合可能适合您。 请记住设计中一致性的重要性。