refile自己做的网站避坑指南：不懂代码也能落地设计规范

自己不会代码想做网站，最怕的就是做出来的东西看着廉价、布局乱套。很多推广人员找外包，沟通成本极高，因为设计稿和前端实现总是“两张皮”。今天这份refile自己做的网站避坑指南，就是为了解决这个痛点。

我们不只谈审美，更谈执行。作为市场人，你需要一套能直接丢给开发、或者自己用工具拖拽就能落地的标准。这套标准参考了阿里云官方文档中关于前端资源加载的性能建议，确保你的网站不仅好看，还能跑得飞快，不被用户嫌弃。

设计原则：从“我觉得好看”到“用户愿意看”

很多新手站长最大的误区，就是把个人喜好凌驾于用户习惯之上。记住，B端官网的核心是信任感，C端商城的核心是转化效率。

1. 视觉层级（Visual Hierarchy） 用户浏览网页的路径通常是“Z”字型或“F”字型。首屏必须解决“我是谁”和“你能提供什么价值”这两个问题。

标题区：字号最大，字重加粗，占据视觉中心。
副标题/描述：字号次之，颜色稍浅，解释标题。
行动按钮（CTA）：颜色对比度最高，位置显眼。

2. 留白不是浪费空间 新手最容易犯的错就是“填满”。留白是呼吸感，是高级感的来源。

模块间距：不同功能区块之间，垂直间距建议在 60px-100px 之间。
内容间距：文字段落之间，垂直间距建议为行高的 0.5-1 倍。
内边距：卡片或容器内部，文字与边缘的距离至少 20px-24px。

3. 一致性原则 整个网站只能有一套字体家族、一套色彩体系、一套圆角规范。今天这里圆角是 4px，那里是 8px，用户会感到混乱。统一，就是专业。

布局与间距规范：建立你的“网格系统”

没有网格，就没有秩序。refile自己做的网站时，如果还在凭感觉拖拽，请务必建立网格系统。

1. 标准栅格（Grid System） 主流网站普遍采用 12 列或 24 列栅格。

容器最大宽度：建议 1200px 或 1440px。太宽，用户眼球左右扫描疲劳；太窄，移动端适配困难。
断点设置：
- 移动端（Mobile）：< 768px
- 平板（Tablet）：768px - 1024px
- 桌面端（Desktop）：> 1024px

2. 间距变量（Spacing Scale） 不要随意输入 13px 或 27px 这样的数字。建立一套基于 4px 或 8px 的倍数体系。

变量名	数值 (px)	应用场景
Space-xs	4	图标与文字间隙、小标签内边距
Space-sm	8	紧凑列表项间隙、按钮内边距垂直方向
Space-md	16	卡片内边距、表单控件间隙
Space-lg	24	段落间距、模块内主要元素间隙
Space-xl	48	大区块（Section）之间的垂直间距
Space-xxl	96	页面头部（Header）与主体内容、页脚与主体内容

3. 响应式布局陷阱 很多市场人只看 PC 端效果，结果手机端图片被拉伸变形，文字挤成一团。

图片比例：使用 CSS 的 object-fit: cover 确保图片在不同比例下不变形。
文本换行：英文单词长时，设置 word-break: break-word 防止溢出容器。

色彩与字体：控制数量的艺术

色彩和字体是网站的“皮肤”，用多了就是“牛皮癣”，用对了才是“品牌资产”。

1. 色彩体系（Color Palette）

主色（Primary）：1 种。用于 Logo、主按钮、链接。建议从品牌色中提取。
辅助色（Secondary）：1-2 种。用于次要按钮、背景色块、标签。
中性色（Neutral）：4-5 种。用于文字（深灰、中灰、浅灰）、边框、背景。
功能色（Functional）：3 种。成功（绿）、警告（黄/橙）、错误（红）。

避坑点：

深色背景不要用纯白文字，对比度过高会刺眼，建议用 #F5F5F5 或 #EEEEEE。
正文文字不要用纯黑 #000000，建议用 #333333 或 #3C3C3C，阅读更舒适。

2. 字体规范（Typography）

西文字体：推荐 Inter, Roboto, 或系统默认字体栈。避免使用 Times New Roman 这种过时的衬线体作为正文。
中文字体：推荐 PingFang SC (iOS), Microsoft YaHei (Windows), Noto Sans SC (Web)。
字号阶梯：
- H1 (页面主标题)：32px - 40px, 字重 700
- H2 (区块标题)：24px - 28px, 字重 600
- H3 (卡片标题)：18px - 20px, 字重 500
- Body (正文)：14px - 16px, 字重 400
- Caption (说明文字)：12px - 13px, 字重 400
行高（Line-height）：正文行高建议 1.5 - 1.8 倍。标题行高建议 1.2 - 1.4 倍。行高太小，文字挤在一起，阅读压力大。

组件设计：把重复劳动变成标准化模块

refile自己做的网站时，不要每次都从头画按钮。组件化思维能极大提升效率，并保证风格统一。

1. 按钮（Button） 按钮是转化的关键。

主要按钮：实心背景，白色文字，无描边。悬停时颜色加深 10%。
次要按钮：透明背景，主色描边，主色文字。悬停时背景变为主色浅色调。
禁用状态：灰色背景，灰色文字，鼠标不可点击（cursor: not-allowed）。
尺寸：高度建议 36px 或 40px，内边距左右 16px 或 20px。

2. 卡片（Card） 卡片是信息容器。

结构：图片区 + 标题区 + 描述区 + 操作区。
阴影：使用极淡的阴影 box-shadow: 0 2px 8px rgba(0,0,0,0.08)，避免生硬的黑边。
圆角：统一 8px 或 12px。

3. 表单（Form） 表单体验差，用户流失率极高。

标签位置：建议标签在输入框上方，左对齐。移动端可上下堆叠。
输入框：高度 40px，内边距 12px，边框 1px solid #D9D9D9。
聚焦状态：当用户点击输入框时，边框变为主色，并加上轻微的光晕 box-shadow: 0 0 0 2px rgba(主色, 0.2)。
错误提示：红色文字，显示在输入框下方，字号 12px。

前端实现：用代码固化设计规范

设计规范再好，不能落地就是空谈。这里提供一段基础的 CSS 代码，你可以直接复制到你的项目或建站工具的自定义代码框中。这段代码定义了 CSS 变量，方便全局修改。

/* 定义全局CSS变量，refile自己做的网站时，改这里就能换肤 */
:root {/* 色彩体系 */--color-primary: #1890ff;      /* 主色 */--color-primary-hover: #40a9ff; /* 主色悬停 */--color-text-main: #333333;    /* 主要文字 */--color-text-secondary: #666666;/* 次要文字 */--color-border: #d9d9d9;       /* 边框颜色 */--color-bg-page: #f5f7fa;      /* 页面背景 */--color-bg-card: #ffffff;      /* 卡片背景 *//* 字体体系 */--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--font-size-body: 16px;--line-height: 1.6;/* 间距体系 (8px基准) */--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 48px;/* 其他 */--radius-md: 8px;--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);--transition-fast: 0.2s ease-in-out;
}/* 基础重置 */
body {margin: 0;padding: 0;font-family: var(--font-family);font-size: var(--font-size-body);line-height: var(--line-height);color: var(--color-text-main);background-color: var(--color-bg-page);-webkit-font-smoothing: antialiased;
}/* 通用容器：限制最大宽度，居中 */
.container {max-width: 1200px;margin: 0 auto;padding: 0 var(--space-md);
}/* 区块间距：统一垂直节奏 */
.section {padding: var(--space-xl) 0;
}/* 卡片组件 */
.card {background-color: var(--color-bg-card);border-radius: var(--radius-md);box-shadow: var(--shadow-card);overflow: hidden; /* 防止内部图片溢出圆角 */transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}.card:hover {transform: translateY(-4px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}.card-content {padding: var(--space-md);
}.card-title {font-size: 18px;font-weight: 600;margin: 0 0 var(--space-sm) 0;color: var(--color-text-main);
}.card-desc {font-size: 14px;color: var(--color-text-secondary);margin: 0 0 var(--space-md) 0;
}/* 按钮组件 */
.btn {display: inline-block;padding: 10px 20px;font-size: 14px;font-weight: 500;text-align: center;text-decoration: none;border-radius: var(--radius-md);cursor: pointer;transition: background-color var(--transition-fast), border-color var(--transition-fast);border: 1px solid transparent;
}.btn-primary {background-color: var(--color-primary);color: #ffffff;border-color: var(--color-primary);
}.btn-primary:hover {background-color: var(--color-primary-hover);border-color: var(--color-primary-hover);
}.btn-outline {background-color: transparent;color: var(--color-primary);border-color: var(--color-primary);
}.btn-outline:hover {background-color: rgba(24, 144, 255, 0.05);
}/* 表单组件示例 */
.form-group {margin-bottom: var(--space-md);
}.form-label {display: block;margin-bottom: var(--space-xs);font-size: 14px;color: var(--color-text-main);
}.form-input {width: 100%;padding: 10px 12px;font-size: 14px;color: var(--color-text-main);background-color: #ffffff;border: 1px solid var(--color-border);border-radius: var(--radius-md);transition: border-color var(--transition-fast), box-shadow var(--transition-fast);box-sizing: border-box;
}.form-input:focus {outline: none;border-color: var(--color-primary);box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

这段代码体现了几个关键规范：