平面设计色彩搭配不靠感觉：HSL调色与60-30-10配色比例
2026/10/14 12:22:05
打开“彩彩与千圣：水蜜桃恋色物语”的时候，我其实只想做一个简单的展示页，把角色介绍和章节试读串起来，方便给朋友浏览。结果越做越细，从配色、卡片、时间线到悬浮爱心动效，完全停不下来。最后这个页面没有引入任何前端框架，只用 HTML、CSS 和 JavaScript 就完成了。
这篇文章会把整个搭建过程完整拆解：先讲清楚页面需求和视觉设计思路，再带你从零写出项目结构、页面骨架、水蜜桃主题样式和交互脚本，最后附上常见报错排查和工程化建议。无论是前端初学者，还是想为自己的小说、剧本、漫画项目做落地页的创作者，都可以按这套思路快速复刻。
1. 背景与页面需求拆解
1.1 故事展示页到底是什么
故事展示页，本质上是一个以内容为核心的静态信息页面。它和普通企业官网、后台管理系统不一样，不需要复杂的表单提交、权限判断或者数据管理，核心目标只有一个：让访问者在一个页面里快速理解故事的人物、情节和氛围。
“彩彩与千圣”是一个偏日常、偏治愈的短篇故事。它不追求强烈的戏剧冲突，而是靠人物性格、四季变化、水蜜桃园的意象来推进感情线。这样的内容非常适合用专题页来呈现：打开页面，先看到主题横幅，然后通过角色卡、时间线、章节试读等模块层层递进，读者能很快判断这个故事是否合自己的口味。
这种页面也经常被用在个人作品集、同人创作展示、小说连载入口、独立出版宣传等场景。和动不动就几十个依赖的复杂项目相比，它的优势是轻量、加载快、易部署。
1.2 功能模块如何拆分
在做任何页面之前，我习惯先把功能拆成清晰的模块。这比直接写代码重要得多，因为模块边界清楚了，HTML 结构、CSS 样式和 JavaScript 逻辑才不会混成一团。
这个页面最终被拆分成了六个模块：
| 模块 | 作用 | 交互行为 |
|---|---|---|
| 顶部 Hero 横幅 | 展示书名和故事氛围 | 点击按钮滚动到角色区 |
| 吸顶导航 | 页面内快速定位 | 锚点跳转 |
| 角色印象 | 展示两位主角的基本信息和性格标签 | 点击“展开更多”显示隐藏人物介绍 |
| 剧情时间线 | 按时间顺序展示故事关键节点 | 鼠标悬停可查看内容 |
| 章节试读 | 展示三个章节的开头片段 | 点击标签切换章节内容 |
| 氛围卡片 | 用配色和文字营造情绪 | 无复杂交互 |
角色卡展开和章节切换是页面中最核心的两处交互。它们不复杂，但如果直接使用前端框架，会引入额外的依赖；用原生 JavaScript 来处理，反而更干净，也更容易让初学者理解事件绑定的基本逻辑。
1.3 技术选型：为什么选择纯前端三件套
这个页面完全可以不用 Vue、React 或者打包工具，原因是内容量不大、交互简单、不需要服务端渲染。直接用 HTML 写结构、CSS 写样式、JavaScript 写交互，整个项目只有一个文件夹，用浏览器双击打开就能看效果。
所谓“纯前端”并不是说只能写静态页面。CSS 可以做出渐变、动画、毛玻璃效果，JavaScript 可以操作 DOM 实现动态内容切换。对于单页内容展示来说，它的表现力已经足够了。
更重要的是，纯前端项目的部署成本非常低。你可以把整个文件夹丢到 GitHub Pages、Gitee Pages 或任意一个静态托管服务上，不需要数据库，不需要 Nginx 配置，也不需要维护运行环境。对于个人创作者来说，这是最合适的方式。
2. 环境准备与项目结构
2.1 开发环境说明
搭建这个页面不需要安装复杂的开发环境。我们在做页面的时候，选择了一台普通的 Windows 电脑作为开发机，不需要 Linux 服务器，不需要容器环境，只需要满足以下条件：
- 任意现代浏览器，推荐 Chrome 或 Edge；
- 一个文本编辑器，推荐 VS Code；
- 如果希望在浏览器中实时刷新，可以安装 VS Code 的 Live Server 插件；
- 不需要安装 Node.js 和任何 npm 包。
版本方面不需要过于纠结。CSS 中使用了clamp()、backdrop-filter、linear-gradient等较新的特性，建议使用近两年版本的浏览器。如果你的电脑浏览器版本较旧，可能会遇到部分样式不生效的情况，但页面的基本结构和内容依然可以正常阅读。
2.2 项目目录结构
为了让代码组织清晰，我建议按下面的目录结构来创建文件：
peach-story/ ├── index.html ├── css/ │ └── style.css └── js/ └── main.js在这个结构中，index.html是页面入口，负责承载所有内容结构；css/style.css保存全部样式，负责把内容美化为主题页面；js/main.js存放交互逻辑，负责处理角色卡展开、章节切换和爱心动效。三个文件各司其职，后续维护和排错都会方便很多。
2.3 创建项目目录
在命令行或 VS Code 中执行下面的命令，即可快速创建目录：
mkdir peach-story cd peach-story mkdir css js如果是在 Windows 的 CMD 中，mkdir css js可能无法一次创建多个目录。你可以分两次执行：
mkdir css mkdir js目录创建好后，依次在css和js文件夹中新建style.css和main.js文件。接下来我们先把视觉风格确定下来，再写代码，这样不容易返工。
3. 水蜜桃主题视觉设计：先定调再写代码
3.1 配色：为什么选这一组颜色
水蜜桃这个意象自带柔和、甜美、夏日的气息。如果使用高饱和度的粉色，容易显得腻；使用灰暗色调，又会丢掉故事本身的温暖感。因此，我选择以奶油白作为页面主背景，以桃粉色作为强调色，用深红棕色作为正文文字色。
页面用到的核心色值如下：
| 颜色用途 | 色值 | 说明 |
|---|---|---|
| 页面背景 | #fff7f0 | 带一点奶油感的淡橘白，不刺眼 |
| 主粉色 | #ffb7c5 | 水蜜桃果肉的颜色，用于装饰 |
| 强调色 | #ff8fab | 偏深一点的桃红色，用于按钮和关键元素 |
| 正文颜色 | #6b4a4a | 带红棕调的深色，比纯黑柔和 |
| 辅助文字 | #a57f7f | 浅棕色，用于描述性文字 |
| 蓝色点缀 | #6ab7d6 | 用于千圣角色头像，形成冷暖对比 |
这套配色的好处是：整体饱和度偏低，长时间阅读不会疲劳；粉色的同色系搭配不会产生颜色冲突；蓝色作为辅助色，刚好用来区分两个角色。
在 CSS 中，我们可以使用:root自定义属性来统一定义这些颜色变量。这样后续想调整色调，只需要修改顶部的变量即可，不需要满文件搜索替换。
3.2 字体、圆角、阴影与层次
字体方面，中文环境优先使用Microsoft YaHei和PingFang SC，西文部分回退到Helvetica Neue和Arial。我们没有引入外部字体，因为故事页面需要保证本地打开时也能完整显示字体效果。
圆角是这个页面风格的关键