Axioma 是一套为创意机构、独立设计工作室、品牌顾问与自由创意团队准备的响应式 HTML 网站模板。它不是只放一屏宣传内容的单页落地页，而是由首页、作品、服务、工作室和联系五个页面组成的完整营销网站，可以用来展示案例、说明服务范围并承接项目询盘。
模板以原生 HTML、CSS 和 JavaScript 编写，不依赖 Bootstrap、React 或其他前端框架，也没有 npm 安装与打包步骤。解压后即可在浏览器中预览，修改页面文字、图片和联系方式后，可部署到普通虚拟主机、对象存储或静态网站托管平台。
五个页面分别承担什么作用
| 页面 | 文件 | 主要内容 |
|---|---|---|
| 首页 | index.html |
大字标题、精选作品、六项服务、客户滚动展示、品牌宣言与行动号召 |
| 作品 | work.html |
按品牌、网页、动态、编辑与营销活动分类筛选的十个案例卡片 |
| 服务 | services.html |
品牌识别、网站开发、艺术指导、数字策略、动态影像与编辑设计六类服务 |
| 工作室 | about.html |
团队故事、四人团队、价值观、奖项列表与招聘区域 |
| 联系 | contact.html |
工作室地址、联系渠道，以及包含项目类型、预算和启动时间的询盘表单 |
这套信息架构比单页模板更适合需要建立专业信任的服务型业务。首页负责形成第一印象，作品页展示能力证据，服务页解释交付范围，工作室页补充团队背景，联系页则把访客引导到具体询盘。
左侧固定导航与编辑式视觉构成主要辨识度
桌面端采用左侧固定品牌与导航栏、右侧滚动内容面板的构图，正文不会被传统顶栏反复切断。屏幕宽度不超过 768px 时，左侧栏会折叠成顶部栏和覆盖式移动菜单，使同一套页面能够适配手机浏览。
配色以纸张白 #F5F4F0、墨黑 #0E0E0E 为主体，并用荧光青柠色 #C8FF3D 强调按钮和行动区域。标题字体使用 Bricolage Grotesque，正文与标签分别使用 Geist 和 Geist Mono，字体通过 Google Fonts 加载。若部署环境不能稳定访问 Google Fonts，建议下载并自托管字体，或改用本地可用字体栈。
原生代码适合直接改字换图
页面文案直接写在五个 HTML 文件中，品牌名、标语、地址、邮箱、电话、团队成员、客户名称和奖项都可以通过编辑器搜索替换。全站颜色、字体、间距、导航宽度和动画参数集中在 assets/css/styles.css 顶部的 CSS 自定义属性中，适合先统一改品牌色，再逐页调整内容。
图片目录中的 SVG 文件是带标签的占位图，不是可直接用于真实商业项目的摄影素材。源码在对应图片标签前写有推荐尺寸：作品卡片建议使用 1200×900 的 4:3 图片，团队肖像建议使用 600×750 的 4:5 图片，工作室图片建议使用 800×1000 的 4:5 图片。正式上线前应替换为拥有使用权的项目图片，并同步修改准确的 alt 文本。
交互脚本只处理三类必要功能
- 滚动显现：使用 IntersectionObserver 为进入视口的元素添加状态类，动画仅改变透明度和位移。
- 移动导航：控制覆盖式菜单的打开、关闭、焦点状态与页面滚动。
- 作品筛选：根据案例卡片的
data-tags属性切换显示项目，不依赖第三方筛选库。
模板会检测 prefers-reduced-motion，当访客在系统中开启“减少动态效果”时跳过滚动动画。来源说明列出的测试宽度为 320、768、1024、1440 和 1920 像素；这能作为响应式断点检查参考，但替换长中文标题和真实图片后仍应重新逐页测试。
联系表单需要接入后端才能真正收件
联系页已经包含姓名、邮箱、公司、角色、项目类型、预算、计划启动时间、获知渠道和留言等字段，但压缩包本身只有静态前端文件，没有邮件发送接口、数据库或表单服务。正式上线时需要自行连接 Formspree、Netlify Forms、Cloudflare Workers、WordPress 接口或其他后端服务，同时增加提交成功、失败、隐私说明和反垃圾机制。
作品筛选也只是在浏览器中隐藏或显示现有卡片，并不是内容管理系统。需要频繁增加案例、由非技术人员维护内容或支持多语言时，应考虑把模板接入 WordPress、静态站点生成器或自有 CMS，而不是长期直接编辑多个 HTML 文件。
建议按这个顺序完成二次修改
- 解压后先打开
index.html，确认本地页面、样式和脚本均能正常加载。 - 在五个 HTML 文件中统一替换 Axioma 品牌名、演示邮箱、电话、地址、团队和客户信息。
- 修改 CSS 自定义属性中的主色、字体和间距，保持各页视觉一致。
- 按照 README 标注的尺寸替换作品、团队和工作室占位图，并检查图片路径与 ALT。
- 把联系表单接入可用的提交接口，实际测试成功、失败和重复提交场景。
- 在手机、平板和桌面宽度下检查导航、长标题、作品筛选、表单与键盘操作，再上传到正式环境。
暂无评论内容