电脑组成部件及其功能_突出的“功能部件”小部件的出色思想和趋势

经营一本成功的在线杂志需要扎实的受众和大量高质量的著作。 但是，杂志的版面设计也对访客的参与度起着至关重要的作用。 一种技术是在首页顶部创建特色帖子小部件 。 这展示了最新流行的文章，理想地将读者带入该站点。

在这篇文章中，我想介绍可用于创建成功的特色文章窗口小部件的设计技术。 尽管此小部件通常在杂志风格的布局上效果最好，但是您也可以将其应用于较小的博客或动态内容网站。

印刷对比

最具特色的帖子依靠缩略图吸引注意力。 这通常采用与每个文章标题相关的背景图片的形式。

这种技术看起来很棒，但是很难在版式和动态背景图片之间建立明显的对比 。 通过研究其他杂志，您可以掌握一些微妙的技巧来帮助提高可读性。

Next Web是一本大型在线杂志，其主页上有醒目的帖子小部件。 每个缩略图的大小各不相同，但是它们都使用深色渐变来改善对比度 。

文章标题位于深色渐变顶部的缩略图块的底部。 浅色文本很容易在深色背景上使用 ，但也不能覆盖整个图像。

CSS3的现代改进使开发人员可以轻松地重新创建这些效果。 如果您可以使固定的渐变自然地在每个缩略图的顶部流动，并且仍然炫耀出足够的图像来吸引注意力，则固定渐变是完美的。

数字趋势首页上使用的技术稍有不同。 此帖子小部件在文本后使用高对比度的纯色背景 ，使每个标题清晰明快。

区别在于每种背景色均为100％纯色。 您看不到整个缩略图照片，因此一小部分从视图中丢失了。 但是文字清晰易读，可能对首次登陆数字趋势首页的访问者同样具有吸引力。

找到适量的对比度很棘手。 某些网站（例如TechCrunch）尝试将文本放在缩略图旁边，以完全消除此问题。

但是，如果您喜欢缩略图上方标题文本的设计风格，您将需要考虑对比因子如何进入等式 。

零星图像大小

特色帖子小部件的价值在于在页面顶部展示特色内容 。 不对称是吸引注意力的一种好方法，在这种情况下，不对称缩略图的大小非常有用。

以ZDNet的主页为例。 在其特色小部件中，左侧最大的文章使用最宽的缩略图来占用更多空间，并希望引起更多关注。 其他精选缩略图的标题也变小了。

请注意，此网格结构如何自然地引导您浏览页面。 每个访问者的目光都倾向于落入一个特定区域，然后在每个缩略图之间移动，直到有东西跳出来。

ZDNet还在每个缩略图图像的顶部放置一个深色渐变 ，以建立印刷对比度，以使文本更具可读性。 从根本上讲，这是我见过的功能最强大的帖子小部件设计之一。

可以在CNET主页上找到非常相似的设计样式。 由于大多数访问者都是从左到右阅读的，因此最大的缩略图位于左侧。

在设计自己的特色帖子小部件时，您不必遵循相同的技术。 您可以使用任何缩略图大小，只要它们能紧密地结合在一起并形成统一的网格布局即可。

自定义缩略图样式

设计选择因布局而异，因此没有一种完美的解决方案。 精选帖子小部件的设计绝对要复杂得多，因此它们需要研究和耐心才能适应自定义布局。

每个缩略图的样式都会影响整个小部件对观众的外观。 例如，在The Verge上找到的特色小部件样式。

每个缩略图在照片顶部都有一个彩色渐变。 这可以增强对比度并提高可读性，但同时也增加了网站的风格。

有些人不喜欢这种风格，因为他们觉得它艳丽或不吸引人。 但是它在Verge读者中也很受欢迎， 其他设计师也都在模仿这种风格。

但是颜色和花哨的技术并不是要考虑的唯一因素。 网格和缩略图的大小也必须仔细选择，因为它们有助于定义总体特色帖子小部件样式。

也许最好的例子之一是Mashable的设计 ，这些设计已经经历了很多年。 现在，Mashable被认为是新闻的主流来源，它努力将大量帖子填充到主页上，以便于浏览。

一些帖子使用小的方形缩略图，而其主排行榜将较大的全尺寸缩略图横幅固定在文章上。 这必须要求编辑者进行额外的工作，以确保所有帖子都具有正确尺寸的适当照片。

但是在登陆网站后，您会注意到它散发出了信誉 。 这种风格感觉非常主流，几乎任何类型的在线杂志都可以使用它来建立与读者群的信任。 唯一的问题是编写足够的内容来填充页面！

多帖子小部件

一些具有特色的帖子窗口小部件以静态网格显示文章。 这通常是最受欢迎的选择，因为它可以做出响应，并且可以很好地融合到任何布局中。

其他小部件依赖于动态交互，例如幻灯片演示。 以“ 名利场”的主页为例，其顶部的特色帖子栏位于页面顶部。 一次只显示一个帖子，但是将鼠标悬停在特定标题上时会显示新文章。

缩略图和标题都可以通过简单的悬停交互自动更新。 需要注意的一件事是，对于不熟悉这种动态悬停技术的Internet用户而言，这可能会非常令人困惑。

但从积极的方面来说，该技术将通过隐藏多余的内容来节省页面空间 。

尽量不要将精选的帖子小部件视为黑白。 它们只是用于精选最有趣或最受欢迎的文章的页面部分。 完成此任务的技术始终可以公开辩论。

《综合杂志》将完整的幻灯片显示用于其特色小部件。 每个帖子都有一个特色缩略图以及底部渐变，以实现印刷对比。

但是，这些文章不是并排放置每个缩略图，而是通过幻灯片放映框动态流式传输 。 导航可以自动设置，也可以通过箭头链接控制。 这种设计节省了大量空间，并使用户更愿意与页面进行交互。

结语

特色文章展示没有正确或错误的设计。 他们都有许多相似的特征，但是每本杂志都使用自己的风格来组织特色内容。

我希望本文提供设计实用的文章小部件时实用的技巧。 如果您感到卡住，请去其他杂志寻找灵感。 找到您喜欢的特征，并弄清楚如何复制它们以融合到您自己的杂志设计中。

翻译自: https://www.hongkiat.com/blog/feature-posts-widgets/