您是否希望在下一个博客设计中做一些不同的事情？
当您设计博客时，需要考虑很多不同的页面，但最重要的是存档页面，包括您的博客主页面以及类别页面、博客的个人博客文章以及博客的主页。
在这篇文章中，我们展示了每个的设计示例，以便您可以获得一些灵感。
博客网站设计可以激发您的下一个项目
博客页面设计
1. 向上翻转
主要设计元素： 英雄部分的搜索栏；侧边栏中的搜索过滤器
这是 UpFlip 网站的博客页面，我们在帖子中介绍的一个网站 商业博客示例。
UpFlip 是一个商业博客和课程学院，为小型企业家提供创业和副业技巧。
该网站的博客页面与通常的博客页面风格不同，通常的博客页面风格通过使用英雄部分来提供网站最新帖子的简单按时间顺序存档，其中包括读者可以用来查找他们想要阅读的主题的搜索栏。
搜索栏下方甚至还有四个按钮充当搜索建议。单击时，它们会更改搜索栏中的文本。
当您将鼠标悬停在搜索栏上时，搜索栏的右侧甚至会出现一个小“x”，允许您删除其中的搜索查询。
页面 做 正如用户所期望的那样，它有一个按时间顺序排列的存档，但它在左侧设有过滤器，允许用户按主题和行业过滤帖子。
存档本身使用三列网格布局，其中每个帖子都是一张卡片，其中包括帖子的特色图像、标题、作者和类别。
博客页面使用分页，因此网格中只有五行。
最后以电子邮件选择加入表格结束。
2. 线性度
主要设计元素： 带有基于卡片的动画的特色帖子滑块
线性度 是一种设计工具，图形设计师可以用来创建动画、插图、数字广告、社交媒体图像、品牌资产、传单等。
该工具的博客页面具有特色帖子滑块形式的独特元素，该滑块使用基于卡片的动画从一个特色帖子更改为下一个特色帖子。
滑块中特色帖子的数量显示在其底部，视图中的帖子以数字周围的细橙色轮廓突出显示。
该大纲甚至具有充当计时器的动画，让您知道滑块何时切换到下一篇专题文章。
该滑块下方是以网格布局显示的按钮，每个按钮代表不同的博客类别。
接下来的几个部分以不同的方式宣传品牌内容：
- 产品文章 – 三列、一行展示博客关于 Linearity 本身的最新帖子。
- 观看和学习 – 推广 Linearity Academy 视频教程的部分。它具有视频背景和三个特色视频。
- 最近的文章 – 博客最新帖子的存档。它有一个很大的部分展示最新的帖子。接下来是附加帖子的三列网格布局，带有“加载更多”按钮，您可以选择显示任意数量的附加帖子。
- 创意社区 – 号召性用语宣传网站的社区画廊，其中展示了 Linearity 客户使用该工具创建的项目。
- 开始使用 – 呼吁采取行动促进线性本身。
- Instagram 动态 – 在 # Linearity 标签下发布的最新 Instagram 帖子的五列、两行网格布局。
3. 技术咨询
主要设计元素： 精选帖子滑块
技术咨询 是一家著名的技术媒体网站，发布评论、研究和其他数据驱动的文章和指南。
该网站的博客布局使用英雄部分，其中包括右侧的特色帖子滑块。
该滑块具有并排显示为卡片形式的两篇文章。每张卡片都有特色图片、帖子标题和发布日期。
滑块底部有两个箭头，您可以使用它们循环浏览滑块中的每个帖子。
滑块还有一个进度条，指示您滚动到的程度。
页面的其余部分非常标准。它具有博客最新帖子的分页网格布局。接下来是博客类别链接的简单列表和充满介绍博客专家的卡片的团队元素。
页面底部有一个电子邮件选择加入表格。
4. 智软
主要设计元素： 类别作为英雄部分中的按钮
智软 是一家软件开发公司，为其他软件开发机构发布指南以及一般软件开发的实用指南。
该公司使用了一个很棒的博客布局，简单但有用。
英雄部分有几个用于博客类别的按钮，这些按钮通向类别存档页面。
此部分还设有一个搜索栏，读者可以使用它来查找他们正在寻找的特定主题。
页面的其余部分具有分页的最新帖子存档以及电子邮件选择加入表格。
博客文章设计
5.头发里的盐
主要设计元素： 大图像；浮动部分选择器；元素盒
我们头发里的盐 是我们在帖子中介绍的一个旅游博客 旅游博客示例。这是一个由来自荷兰的夫妇尼克和汉娜经营的旅游博客。
该网站使用了漂亮的博客布局，主要依赖于这对夫妇在冒险中拍摄的大图片。他们使用专业相机，使他们能够捕捉到高质量的图像。
页面上最好的元素之一实际上是浮动部分选择器，它允许读者轻松跳转到他们最感兴趣的部分。
当然，因为它是浮动的，所以当读者滚动时它会跟随页面向下移动。
该帖子还包含几个元素框，主要用于号召这对夫妇希望读者与之互动，以便预订酒店、在 Google 地图中查看这对夫妇的地图提示并将帖子保存到 Pinterest。
6. 落针
主要设计元素： 独特的设计；浮动社交分享链接
落针 是安东尼·凡塔诺自己的博客。安东尼在 YouTube 上发布音乐评论和其他音乐特定内容。
安东尼在网站上的博客采用了令人惊叹的平面设计，其特点是柔和的黄色背景和帖子每个部分周围的边框，例如内容区域和侧边栏部分。
每个边框的底部最厚，营造出平面 3D 效果。
用于社交共享链接的浮动元素紧贴帖子内容框的左侧。
该网站还使用动画来向网站访问者展示进度。每个帖子的顶部都有一个浮动的进度条，还有一个填充后退箭头的进度条，将读者带到页面顶部。
这些动画鼓励读者从头到尾阅读帖子，因为它让他们知道他们还剩下多少帖子可以阅读。
博客主页设计
7. 一小撮百胜
主要设计元素： 主页顶部的类别链接和搜索框
一小撮百胜 是一个受欢迎的美食博客，我们在我们的帖子中介绍了 美食博客示例。
该博客的设计切中读者的要害。他们的主页上有几个链接，读者可以使用它们来访问博客的不同食谱类别。
这些链接是基于图像的，顶部有四个图像链接，描述了博客最受欢迎的食谱类别。接下来是其他类别的九个较小链接。
这里还有一个搜索框，它会显示一个完整的搜索覆盖层，其中包含博客的最新帖子、热门博客帖子和故事的帖子建议。
主页的其余部分包含博客的最新帖子、热门博客帖子和多个电子邮件选择加入表单。
8.时尚杰克逊
主要设计元素： 特色邮箱中的附属链接；精选帖子的选项卡选择
时尚杰克逊 是我们在帖子中介绍的生活方式博客 时尚博客示例。
该博客使用干净简约的布局，但它有几个小元素，使其具有独特的设计。
其中几个可以在博客的主要特色帖子元素中找到。它们是博客所有者艾米在特色帖子中推荐的产品的基于图像的附属链接。
还有另一个部分用于其他特色帖子，但这一个部分有一个选项卡选择，读者可以使用它来循环浏览不同的特色帖子集合，例如热门帖子、旅行提示和评论。
主页的其余部分包含推荐产品、Instagram 帖子、最近帖子和电子邮件选择加入表单的不同元素。
9.霍普·泰勒
主要设计元素： 对资源、不同内容和产品的多次号召性用语
霍普·泰勒 是一位专业摄影师和内容创作者，在她的博客和 YouTube 频道上发布内容。
她的博客网站采用了视觉上吸引人的设计，她的主页是将内容建议与专业营销元素（例如号召性用语）结合起来的博客的绝佳示例。
主页上有多个号召性用语来宣传 Hope 的服务、产品和资源。
交给你了
我们有 9 个博客网站设计，可以为您的下一个项目的布局提供灵感。
寻找有关创建新博客的更多信息？查看这些帖子：
Leave a Reply