不会代码也能做站：采集文章留在网站，这套UI规范只要几百块

很多老板想给公司搞个官网，第一反应就是找外包，一问报价，少则几千，多则几万，还要被牵着鼻子走。其实，如果你只是想把网上采集的文章整理好、发出去，甚至自己不会写代码，完全可以自己动手。这里的核心不在于多复杂的技术架构，而在于**“采集文章留在网站”这个动作背后的视觉呈现和基础搭建成本。很多人纠结这个方案到底要多少钱**，其实如果抛开那些花里胡哨的动态效果，只保留最核心的内容展示功能，成本可以压得非常低。

对于非技术人员来说，最大的痛点不是“怎么做”，而是“做得丑不丑”以及“会不会出错”。今天这篇内容，专门针对那些想自己动手、但不懂设计规范的老板或运营人员，拆解一套适用于内容采集型网站的UI/UX设计规范。这套规范的目标很明确：低成本、高可读性、易于维护。它不涉及复杂的后端逻辑，只聚焦于前端展示层，让你即使使用最基础的HTML/CSS模板，也能让网站看起来专业、不廉价。

设计原则：内容优先，拒绝视觉噪音

在讨论具体怎么做之前，必须确立一个核心原则：对于以“采集文章”为主的站点，内容是绝对的主角，UI是背景。

很多新手站长（或者不懂设计的外包公司）容易犯一个错误：喜欢加各种动效、悬浮层、炫酷的过渡动画。但对于一个主要展示文字信息的网站来说，这些都是干扰。用户来你的网站，是为了看文章，不是为了看你的CSS写得有多花哨。

1. 信息层级要清晰 用户扫视网页的时间通常只有3-5秒。如果第一屏全是密密麻麻的文字，或者重点不突出，用户会直接关掉页面。设计的首要任务是帮用户梳理信息层级。

• 标题层级：H1标签只给页面主标题用，H2给章节标题，H3给小节标题。不要为了好看把正文加粗当成小标题用，这对SEO极不友好。
• 正文留白：采集的文章往往段落较长，如果没有合理的留白，阅读体验会极差。行高（Line-height）建议设置为1.5到1.8之间，段落之间保留1.5em以上的间距。

2. 响应式不是可选，是必选 现在超过60%的流量来自移动端。如果你的网站在手机上要左右滑动才能看完，或者字体小到需要放大才能看清，那这个网站基本就废了。响应式设计（Responsive Design）的核心不是“自适应”，而是“断点优化”。

• 桌面端：内容区域宽度建议限制在1200px左右，居中显示，两侧留白。
• 移动端：内容区域宽度设为100%，但内边距（Padding）要增加，避免文字紧贴屏幕边缘。

3. 性能即体验 对于采集类网站，图片往往是加载慢的元凶。很多采集来的文章图片没有压缩，原图动辄几兆。设计时必须规定：所有图片必须经过压缩处理，且必须设置宽高属性（width/height），以防止页面在加载过程中发生“布局偏移”（Cumulative Layout Shift, CLS）。Google Search Console 对核心网页指标（Core Web Vitals）中的CLS非常敏感，如果因为图片没占位导致页面跳动，你的搜索排名会直接掉下去。

这套原则的成本是多少？ 几乎为零。这只是思维方式的转变。不需要买什么设计软件，只需要在动手前想清楚：我是做杂志还是做报纸？对于采集站，要做的是“报纸”，信息密集但清晰，而不是“杂志”，图片精美但信息分散。

布局与间距规范：用8px网格系统搞定排版

很多不会代码的人觉得排版靠感觉，其实靠的是网格系统。这里推荐最通用的8px基础网格（8pt Grid）。所有的间距、高度、宽度，都最好是8的倍数。这样能保证视觉上的整齐划一，不会出现“这里空了10px，那里空了12px”的尴尬情况。

1. 页面容器规范

• 最大宽度：1200px。这是大多数企业官网的标准宽度，既能在大屏显示器上显得大气，又不会让行长（Line Length）过长导致阅读疲劳。
• 边距（Margin）：桌面端两侧各留20px-40px；移动端两侧各留16px-20px。
• 内边距（Padding）：内容卡片内部，上下左右统一使用24px或32px。

2. 文章详情页布局 这是采集站的核心页面。建议采用单栏布局，不要搞多栏。

• 标题区：顶部留白32px，标题字体大小32px（桌面）/24px（移动），行高1.3。
• 元信息区：标题下方，显示发布时间、作者（如果是采集的，可以隐藏作者或统一署名为“编辑部”）、阅读量。字体大小14px，颜色#666666，与标题间距16px。
• 正文区：字体大小16px（不要小于14px，否则手机上看不清），颜色#333333，行高1.75，段落间距24px。
• 底部导航：上一篇/下一篇链接，字体大小14px，颜色#999999，与正文间距48px。

3. 列表页布局 列表页是用户进入网站的入口。

• 卡片间距：垂直方向24px，水平方向（如果有侧边栏）32px。
• 缩略图规范：建议统一裁切为16:9比例。图片必须添加object-fit: cover样式，确保不同比例的源图片都能填满容器且不变形。
• 标题长度限制：CSS中设置white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，确保标题过长时显示省略号，而不是换行导致卡片高度不一致。

为什么坚持8px网格？ 因为人类眼睛对整齐的间距有天然的偏好。当你使用8、16、24、32这些数字时，页面会给人一种“精心计算过”的专业感，而不是“随便拖拽出来的”廉价感。这种专业感，是提升用户信任度的关键，也是你能否留住访问者的关键。

色彩与字体：克制才是高级感

不会代码的人最容易在颜色上“翻车”。五颜六色、高饱和度、对比度极低……这些都是大忌。对于内容型网站，色彩应该极度克制。

1. 色彩体系

• 主色（Primary Color）：选择一种品牌色，用于链接、按钮、重点标记。推荐低饱和度的蓝色或深灰色。例如：#1E3A8A（深蓝）或 #333333（深灰）。
• 背景色（Background）：正文背景必须是纯白 #FFFFFF 或极浅的灰 #F9FAFB。不要用彩色背景做正文底色，眼睛会累。
• 文字色（Text Color）：
  • 一级标题：#111827（近乎黑）
  • 正文：#374151（深灰，不要用纯黑#000000，纯黑在白底上对比度过高，容易视觉疲劳）
  • 次要信息（时间、作者）：#6B7280（中灰）
• 边框色（Border）：#E5E7EB（浅灰）。用于分割线、卡片边框。

2. 字体规范

• 字体族（Font Family）：
  • 中文：优先使用系统默认字体，如 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif。不要加载额外的Web字体（如方正粗黑等），除非你有极高的预算和加载速度优化能力。系统字体渲染最快，且跨平台一致性最好。
  • 英文/数字：与中文字体保持一致，或单独指定 Roboto, Arial, sans-serif。
• 字体大小（Font Size）：
  • 基础字号：16px。
  • 正文：16px。
  • 辅助文字：14px。
  • H1：32px / 28px（移动）。
  • H2：24px / 20px（移动）。
  • H3：18px / 16px（移动）。

3. 对比度检查 务必使用WCAG 2.1标准检查文字与背景的对比度。正文文字与背景的对比度至少应达到4.5:1。如果你选了一个浅灰色的文字放在浅灰色的背景上，看起来“挺高级”，但用户根本看不清，这就是设计事故。

这套色彩和字体方案要花钱吗？ 不需要。这些都是CSS变量（CSS Variables）里的值。你可以在代码里定义一次，全站复用。例如：

:root {--color-primary: #1E3A8A;--color-text-main: #374151;--color-text-secondary: #6B7280;--color-bg-white: #FFFFFF;--font-family-base: system-ui, -apple-system, sans-serif;--spacing-unit: 8px;
}

通过这种方式，你可以像搭积木一样组合页面，而且风格高度统一。

组件设计：标准化模块降低维护成本

对于采集类网站，页面结构是高度重复的。首页、列表页、详情页，无非就是“头部+导航+内容区+侧边栏+页脚”的组合。因此，设计时必须组件化。

1. 头部导航（Header）

• Logo：高度固定为40px-48px，宽度自适应。
• 菜单：水平排列，字体16px，颜色#333333，悬停时变为主色并加下划线。
• 背景：白色，底部加1px浅灰边框 #E5E7EB，增加层次感。
• 粘性导航（Sticky Header）：建议开启。当用户向下滚动时，导航栏固定在顶部。CSS实现：position: sticky; top: 0; z-index: 100;。

2. 文章卡片（Article Card） 这是列表页的核心组件。

• 结构：缩略图 + 标题 + 摘要 + 元信息。
• 交互：鼠标悬停时，卡片轻微上浮（transform: translateY(-2px);）并增加阴影（box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);）。注意，阴影不要太重，否则显得脏。
• 点击区域：整个卡片可点击，跳转到详情页。

3. 侧边栏（Sidebar）

• 位置：桌面端在右侧，宽度固定300px；移动端隐藏或折叠到底部。
• 内容：最新文章列表、热门标签、联系方式。
• 间距：各个模块之间间距24px。
• 标题样式：侧边栏的小标题（如“最新文章”）字体18px，加粗，底部加2px主色下划线，下划线长度仅覆盖文字宽度。

4. 页脚（Footer）

• 背景：深灰色 #111827 或 #1F2937。
• 文字：浅灰色 #9CA3AF。
• 内容：版权信息、备案号、友情链接。
• 布局：多列布局，桌面端3-4列，移动端单列垂直排列。

组件化的好处是什么？ 当你需要修改某个样式时（比如把链接颜色从蓝改绿），你只需要修改CSS变量或组件类，全站自动更新。这对于后期维护至关重要，尤其是当你不懂代码，交给外包或实习生修改时，标准化的组件能大幅降低出错率。

前端实现：极简CSS模板示例

下面提供一段基于上述规范的极简CSS模板。你可以直接复制这段代码，配合基础的HTML结构使用。它没有依赖任何框架（如Bootstrap、Tailwind），完全原生，加载速度极快。

/* * 基础变量定义* 所有颜色和间距都从这里引用，方便全局修改*/
:root {--color-primary: #1E3A8A;      /* 品牌主色 */--color-text-main: #374151;    /* 正文颜色 */--color-text-sub: #6B7280;     /* 次要文字 */--color-bg-white: #FFFFFF;     /* 背景白 */--color-bg-gray: #F9FAFB;      /* 背景浅灰 */--color-border: #E5E7EB;       /* 边框色 */--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--max-width: 1200px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-xxl: 48px;
}/* * 全局重置*/
* {box-sizing: border-box;margin: 0;padding: 0;
}body {font-family: var(--font-family);color: var(--color-text-main);background-color: var(--color-bg-white);line-height: 1.6;font-size: 16px;
}a {color: var(--color-primary);text-decoration: none;transition: color 0.2s ease;
}a:hover {text-decoration: underline;
}/* * 布局容器*/
.container {max-width: var(--max-width);margin: 0 auto;padding: 0 var(--spacing-lg);
}/* * 头部导航*/
.header {background-color: var(--color-bg-white);border-bottom: 1px solid var(--color-border);position: sticky;top: 0;z-index: 100;
}.header-inner {display: flex;justify-content: space-between;align-items: center;height: 64px;
}.logo {font-size: 20px;font-weight: 700;color: var(--color-primary);
}.nav-list {list-style: none;display: flex;gap: var(--spacing-lg);
}.nav-list a {color: var(--color-text-main);font-weight: 500;
}.nav-list a:hover {color: var(--color-primary);text-decoration: none;
}/* * 文章列表网格*/
.article-grid {display: grid;grid-template-columns: repeat(3, 1fr); /* 桌面端3列 */gap: var(--spacing-lg);padding: var(--spacing-xl) 0;
}/* * 文章卡片组件*/
.article-card {background-color: var(--color-bg-white);border: 1px solid var(--color-border);border-radius: 8px;overflow: hidden;transition: transform 0.2s ease, box-shadow 0.2s ease;cursor: pointer;
}.article-card:hover {transform: translateY(-4px);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}.article-img {width: 100%;height: 180px;object-fit: cover; /* 关键：防止图片变形 */background-color: var(--color-bg-gray);
}.article-content {padding: var(--spacing-lg);
}.article-title {font-size: 18px;font-weight: 600;margin-bottom: var(--spacing-sm);color: var(--color-text-main);/* 单行省略 */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}.article-excerpt {font-size: 14px;color: var(--color-text-sub);margin-bottom: var(--spacing-md);/* 两行省略 */display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;
}.article-meta {font-size: 12px;color: var(--color-text-sub);
}/* * 详情页文章正文*/
.article-detail {max-width: 800px;margin: 0 auto;padding: var(--spacing-xl) 0;
}.detail-title {font-size: 32px;line-height: 1.3;margin-bottom: var(--spacing-md);color: #111827;
}.detail-meta {font-size: 14px;color: var(--color-text-sub);margin-bottom: var(--spacing-xl);padding-bottom: var(--spacing-md);border-bottom: 1px solid var(--color-border);
}.detail-body p {margin-bottom: var(--spacing-lg);line-height: 1.8;
}.detail-body img {max-width: 100%;height: auto;border-radius: 4px;margin: var(--spacing-lg) 0;
}/* * 响应式断点*/
@media (max-width: 768px) {.container {padding: 0 var(--spacing-md);}.article-grid {grid-template-columns: 1fr; /* 移动端1列 */}.detail-title {font-size: 24px;}.nav-list {display: none; /* 简单处理：移动端隐藏导航，实际项目中应做汉堡菜单 */}
}

如何使用这段代码？

1. 创建一个 style.css 文件，粘贴上述代码。
2. 在你的HTML文件中引入：<link rel="stylesheet" href="style.css">。
3. 按照HTML结构编写页面。例如，文章卡片结构如下：

   <div class="article-card"><img src="thumb.jpg" alt="文章缩略图" class="article-img"><div class="article-content"><h3 class="article-title">这里放文章标题，如果太长会自动省略</h3><p class="article-excerpt">这里放文章摘要，如果太长会自动截断显示两行，引导用户点击查看完整内容。</p><div class="article-meta">2023-10-27 | 阅读 120</div></div>
   </div>
   

这套代码的成本与价值 这段代码没有一行冗余，完全符合现代Web标准。它解决了布局偏移（通过固定高度和object-fit）、响应式适配（通过媒体查询）、视觉一致性（通过CSS变量）。对于不会代码的人来说，你只需要替换HTML中的文字和图片路径，就能得到一个看起来非常专业的网站。

关于成本的最后说明 很多老板问“这套方案到底多少钱？” 如果你自己动手，使用免费的编辑器（如VS Code）和上述代码，成本是0元（除了域名和服务器费用）。 如果你找外包，要求他们按照这套规范来做，由于代码逻辑简单、样式统一，报价应该远低于定制开发。如果对方报价超过2000元，建议多比比价，或者考虑使用现成的CMS模板（如WordPress）配合这套CSS进行二次开发。

互动话题 你的网站用的什么技术栈？是WordPress、Typecho，还是自己写的原生HTML？评论区聊聊，看看大家的方案是不是也踩了同样的坑。