突出的“功能发布”小部件的出色思想和趋势
这展示了最新流行的文章，理想地将读者带入该站点。
一种技术是在首页顶部创建特色帖子小部件 。
但是，杂志的版面设计也对访客的参与度起着至关重要的作用。
经营一本成功的在线杂志需要扎实的受众和大量高质量的著作。
尽管此小部件通常在杂志风格的布局上效果最好，但是您也可以将其应用于较小的博客或动态内容网站。
在本文中，我想介绍可用于创建成功的特色文章窗口小部件的设计技术。
印刷对比
这通常采用与每个文章标题相关的背景图片的形式。
最具特色的帖子依靠缩略图吸引注意力。
通过研究其他杂志，您可以掌握一些微妙的技巧来帮助提高可读性。
这种技术看起来很棒，但是很难在版式和动态背景图片之间建立明显的对比 。
每个缩略图的大小各不相同，但都使用深色渐变来改善对比度 。
Next Web是一本大型在线杂志，其主页上有醒目的帖子小部件。
浅色文本很容易在深色背景上使用 ，但也不能覆盖整个图像。
文章标题位于深色渐变顶部的缩略图块的底部。
如果您可以让固定的渐变自然地在每个缩略图的顶部流动，并且仍然炫耀出足够的图像来吸引注意力，则固定渐变是完美的。
CSS3的现代改进使开发人员可以轻松地重新创建这些效果。
该帖子小部件在文本后面使用高对比度的纯色背景 ，使每个标题清晰明快。
在“ 数字趋势”的首页上使用了稍有不同的技术。
但是文字清晰易读，可能对首次登陆数字趋势首页的访问者同样具有吸引力。
您看不到整个缩略图，因此一小部分从视图中丢失了。
区别在于每种背景色均为100％纯色。
某些网站（例如TechCrunch）尝试将文本放在缩略图旁边，以完全消除此问题。
找到适量的对比度很棘手。
但是如果您喜欢缩略图上方的标题文本的设计风格，则需要考虑对比度因素如何进入方程 。
零星图像大小
不对称是吸引注意力的一种好方法，在这种情况下，不对称缩略图的大小非常有用。
特色帖子窗口小部件的价值在于在页面顶部展示特色内容 。
其他精选缩略图的标题也变小了。
在其特色小部件中，左侧最大的文章使用最宽的缩略图来占用更多空间，并希望引起更多关注。
以ZDNet的主页为例。
每个访问者的目光都倾向于落入一个特定区域，然后在每个缩略图之间移动，直到有东西跳出来。
请注意，此网格结构如何自然地引导您浏览页面。
从根本上讲，这是我见过的功能最强大的帖子小部件设计之一。
ZDNet还在每个缩略图图像的顶部放置一个深色渐变 ，以建立印刷对比度，以使文本更具可读性。
由于大多数访问者从左到右阅读，因此最大的缩略图位于左侧。
可以在CNET主页上找到非常相似的设计样式。
您可以使用任何缩略图大小，只要它们能紧密地结合在一起并形成统一的网格布局即可。
在设计自己的特色帖子小部件时，您不必遵循相同的技术。
自定义缩略图样式
精选帖子小部件的设计肯定更加复杂，因此它们需要研究和耐心才能适应自定义布局。
设计选择因布局而异，因此没有一种完美的解决方案。
例如，在The Verge上找到的特色小部件样式。
每个缩略图的样式都会影响整个小部件对观众的外观。
这可以增强对比度并提高可读性，但同时也可以增加网站的风格。
每个缩略图在照片顶部都有一个彩色渐变。
但是它在Verge读者中也很受欢迎， 其他设计师也都在模仿这种风格。
有些人不喜欢这种风格，因为他们觉得它艳丽或不吸引人。
网格和缩略图的大小也必须仔细选择，因为它们有助于定义总体特色帖子小部件样式。
但是颜色和花哨的技术并不是要考虑的唯一因素。
现在被认为是新闻的主流来源，Mashable致力于将大量帖子填充到首页上以便于浏览。
也许最好的例子之一是Mashable的设计 ，这些设计已经经历了很多年。
这必须要求编辑者进行额外的工作，以确保所有帖子都具有正确尺寸的适当照片。
一些帖子使用小方形缩略图，而其主排行榜则将大型全尺寸缩略图横幅固定在文章上。
唯一的问题是编写足够的内容来填充页面！
这种风格感觉非常主流，几乎任何类型的在线杂志都可以使用它来建立与读者群的信任。
但是在登陆网站后，您会发现它散发出了信誉 。
多帖子小部件
这通常是最受欢迎的选择，因为它可以做出响应，并且可以很好地融合到任何布局中。
一些具有特色的帖子窗口小部件以静态网格显示文章。
一次只显示一个帖子，但是将鼠标悬停在特定标题上时会显示新文章。
以“ 名利场”的主页为例，其顶部的特色帖子栏位于页面顶部。
其他小部件依赖于动态交互，例如幻灯片演示。
需要注意的一件事是，对于不熟悉这种动态悬停技术的Internet用户，这可能会造成很大的困扰。
缩略图和标题都可以通过简单的悬停交互自动更新。
但从积极的方面来说，该技术将通过隐藏多余的内容来节省页面空间 。
完成此任务的技术始终可以公开辩论。
它们只是用于精选最有趣或最受欢迎的文章的页面板块。
尽量不要将精选的帖子小部件视为黑白。
每个帖子都有一个特色缩略图以及底部渐变，以增强印刷对比。
《综合杂志》为其特色小部件使用完整的幻灯片显示。
这种设计节省了大量空间，并使用户更愿意与页面进行交互。
导航可以自动设置，也可以通过箭头链接控制。
但是，这些文章不是并排放置每个缩略图，而是通过幻灯片放映框动态流式传输 。
包起来
他们都有许多相似的特征，但是每本杂志都使用自己的风格来组织特色内容。
特色文章展示没有正确或错误的设计。
找到您喜欢的特征，并弄清楚如何复制它们以融合到您自己的杂志设计中。
如果您感到被卡住，请向其他杂志寻求灵感。
我希望本文提供了一些实用的技巧，可用于设计您自己的特色文章小部件。