做一公司网站速查手册：从设计到上线的避坑指南

网站做好了没人访问，这几乎是所有创业者建站的噩梦。你花了几万块，请了设计，写了文案，甚至买了最贵的服务器，结果上线一个月，后台浏览量只有个位数，全是自己点进去的。别急着怪市场不好，90%的问题出在“做一公司网站”的底层逻辑上。今天这份速查手册，不讲虚的大道理，只给能落地的标准、数据和代码，帮你把网站从“自嗨”变成“获客机器”。

设计原则：拒绝自嗨，以转化为核心

很多老板找我们做站，第一句话往往是“我要大气、要高端、要科技感”。这是典型的“自嗨式需求”。设计不是为了好看，而是为了降低用户的认知成本，提高行动转化。

1. 视觉层级必须清晰 用户浏览网页的时间平均只有3.7秒（根据Nielsen Norman Group数据）。在这3秒内，他必须知道：这是谁做的？能帮我解决什么？我该点哪里？

F型阅读模式：绝大多数人浏览网页是F型路径。关键信息（Logo、核心价值主张、主按钮）必须放在左上和顶部横条。
对比度原则：主按钮（CTA）的颜色必须与背景形成强烈对比。如果是白底，不要用浅灰按钮；如果是蓝底，不要用深蓝字按钮。

2. 信任感构建 B2B企业官网，信任是第一生产力。用户会潜意识地寻找以下元素：

社会证明：客户Logo墙、行业奖项、合作伙伴背书。
具体案例：不要只说“服务过500强企业”，要展示“为XX行业头部客户降低30%库存成本”。
真实细节：团队照片、办公环境、资质证书。模糊的素材图（Stock Photo）会极大降低信任度。

3. 极简主义 “少即是多”不是口号，是规范。每多一个无关元素，用户流失率增加5%。砍掉那些花哨的3D动画、自动轮播的大图（用户根本不看）、以及冗余的导航链接。导航栏不超过7个选项，超过就折叠到“更多”。

布局与间距规范：像素级的秩序

布局混乱是网站显得“廉价”的元凶。很多模板站虽然功能齐全，但间距忽大忽小，行距拥挤，让人看着就累。建立一套严格的间距系统（Spacing System），能让你的网站瞬间提升专业感。

1. 8pt 网格系统 这是业界最通用的间距标准。所有的边距、内边距、行高，都应该是8的倍数。

S (Small): 8px / 16px —— 用于紧凑元素，如图标与文字间距。
M (Medium): 24px / 32px —— 用于卡片内部间距、段落间距离。
L (Large): 48px / 64px —— 用于Section区块之间的垂直间距。
XL (Extra Large): 80px / 120px —— 用于首页大板块之间的呼吸感。

2. 响应式断点策略 不要只盯着电脑屏幕。现在超过60%的流量来自移动端。

Mobile First (移动优先)：先写手机端的CSS，再逐步增强到平板和桌面。
关键断点：
- 320px - 767px：手机竖屏
- 768px - 1023px：平板竖屏/小笔记本
- 1024px - 1439px：桌面主流
- 1440px+：大屏优化
注意：在768px以下，导航栏必须收起为汉堡菜单（Hamburger Menu），字体大小不小于16px，避免iOS自动缩放。

3. 容器宽度限制 正文内容区域（Content Area）不要铺满全屏。

最大宽度：建议设置为 1200px 或 1140px。
居中显示：使用 margin: 0 auto 确保内容在宽屏下依然保持舒适的阅读宽度。
背景延伸：内容限宽，但背景色可以延伸到屏幕边缘，这样既保证了阅读体验，又显得大气。

色彩与字体：品牌色的克制使用

颜色和字体是品牌的皮肤。用错了，品牌调性全毁；用对了，用户没记住名字，也能想起你的颜色。

1. 60-30-10 配色法则

60% 主色：通常是背景色或大面积留白。建议用白色、浅灰（#F5F5F5）或品牌主色的极浅色版本。
30% 辅色：用于标题、图标、次要按钮。通常是品牌主色（如科技蓝 #1890FF，金融绿 #2E7D32）。
10% 强调色：用于CTA按钮、重要数据高亮。必须是高饱和度的对比色（如橙色 #FF6B00，红色 #E53935）。
禁忌：全站使用超过3种主色调。不要为了“丰富”而滥用彩虹色。

2. 字体选型与层级

西文：推荐 Inter, Roboto, Open Sans。开源、清晰、屏幕显示效果好。
中文：推荐 PingFang SC (苹果/部分安卓), Microsoft YaHei (Windows), Source Han Sans (思源黑体, 跨平台最佳)。
字体层级示例：
- H1: 32px, Bold (700) —— 页面主标题
- H2: 24px, SemiBold (600) —— 区块标题
- H3: 18px, Medium (500) —— 卡片标题
- Body: 16px, Regular (400), Line-height 1.5 —— 正文
- Caption: 14px, Regular (400), Color #666 —— 辅助说明

3. 可读性黄金比例

行高：正文行高建议在 1.5 - 1.6 之间。太密累眼，太松散显得空洞。
行宽：每行字数控制在 45-75 个字符（英文）或 25-35 个汉字。太长，眼球追踪容易串行。

组件设计：标准化的模块思维

做一公司网站，不是画一张图，而是搭建一个系统。组件化思维能极大提升开发效率和后期维护性。

1. 导航栏 (Header)

高度：固定 64px - 80px。
结构：Logo (左) + 导航链接 (中) + CTA按钮 (右)。
交互：滚动超过 10px 后，添加阴影 (box-shadow) 或改变背景色，与内容区分层。
移动端：汉堡菜单点击后，全屏覆盖或从右侧滑出，动画时长不超过 300ms。

2. 英雄区 (Hero Section)

布局：左文右图或居中对称。
文案：
- 主标题：一句话说清价值（例：让企业官网转化率提升 30%）。
- 副标题：补充说明或信任背书。
- 按钮：主按钮（立即咨询）+ 次按钮（查看案例）。
背景：避免使用复杂的图片作为文字背景。如需图片，必须加半透明蒙层（Mask），确保文字对比度 > 4.5:1（WCAG标准）。

3. 卡片组件 (Card)

用途：产品展示、团队介绍、服务流程。
规范：
- 圆角：8px 或 12px（统一全站）。
- 阴影：默认 0 2px 8px rgba(0,0,0,0.08)，悬停时加深并轻微上浮 (transform: translateY(-4px))。
- 内容：图片 + 标题 + 简述 + 链接。保持内容长度一致，避免布局跳动。

4. 表单设计

标签：放在输入框上方（移动端）或左侧（桌面端，且需对齐）。
占位符：仅作示例，不能替代标签。
错误提示：实时校验，红色文字提示在输入框下方，不要弹窗。
按钮：提交按钮颜色使用强调色，文字明确（如“提交申请”而非“确定”）。

前端实现：代码规范与性能优化

设计再好，代码不行，加载慢，一样没人看。SEO友好和性能优化是技术底层的底线。

1. 语义化 HTML 搜索引擎（如百度）非常依赖标签语义来理解页面结构。

使用 <header>, <nav>, <main>, <section>, <article>, <footer>。
标题标签 <h1> 到 <h6> 必须严格层级，一个页面只能有一个 <h1>。
图片必须添加 alt 属性，描述图片内容，这对SEO和残障人士无障碍访问至关重要。

2. CSS 示例：响应式容器与卡片

/* 基础重置与变量 */
:root {--primary-color: #1890FF;--text-color: #333333;--bg-color: #F5F7FA;--spacing-unit: 8px;--max-width: 1200px;
}body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color: var(--text-color);background-color: var(--bg-color);margin: 0;padding: 0;line-height: 1.6;
}/* 响应式容器 */
.container {width: 100%;max-width: var(--max-width);margin: 0 auto;padding: 0 calc(var(--spacing-unit) * 3); /* 24px padding */
}/* 卡片组件 */
.card {background: #FFFFFF;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);transition: transform 0.3s ease, box-shadow 0.3s ease;
}.card:hover {transform: translateY(-6px);box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}.card-body {padding: calc(var(--spacing-unit) * 3); /* 24px padding */
}.card-title {font-size: 20px;font-weight: 600;margin-bottom: var(--spacing-unit);
}.card-desc {font-size: 16px;color: #666;margin-bottom: calc(var(--spacing-unit) * 2);
}/* 主按钮 */
.btn-primary {display: inline-block;background-color: var(--primary-color);color: white;padding: 12px 24px;border-radius: 6px;text-decoration: none;font-weight: 500;transition: background-color 0.2s;
}.btn-primary:hover {background-color: #40A9FF;
}

3. 性能优化关键点

图片优化：
- 格式：优先使用 WebP，兼容性好且体积小。
- 尺寸：不要上传 4K 原图。根据展示尺寸压缩。
- 懒加载：使用 loading="lazy" 属性，或 JS 库实现视口外图片延迟加载。
CSS/JS 合并压缩：减少 HTTP 请求数。
字体加载：使用 font-display: swap 避免文字闪烁。
服务器响应时间：TTFB (Time To First Byte) 应小于 200ms。选择靠近目标用户群的服务器节点（如国内用户选阿里云/腾讯云华东/华北节点）。