视觉风格与设计变量

官网类型与目标用户

制作官网前，需要先明确目标受众与沟通方式。

先讲用户痛点与核心流程，再用真实软件界面和示例打动访客的页面，通常属于 SaaS 产品官网↗。而如果主要面向企业采购团队，需要详细交代组织架构权限、企业合规认证与多人审批流程，就属于 B2B 企业官网↗。两者的差异在于信息重心和决策链条不同。

轻量工具官网的核心是展示工具能做什么、生成的结果长什么样，以及如何快速开始使用。因此，按照 SaaS 产品官网的逻辑来设计较为直接，暂时不需要复杂的企业采购流程。

标题、正文与按钮的字阶层级

页面中文字的大小、粗细、行高与对齐方式，共同构成了界面的排版↗（Typography）。清晰的排版层级能够帮助访客区分重要信息：主标题展示核心定位，副标题说明具体原因，正文展开细节，按钮提示后续操作。

通常采用清晰易读的无衬线字体：

• 主标题（H1）：说明产品定位，通常控制在 1 到 2 行以内；
• 次级标题（H2）：用于区分各个功能卡片或核心内容区域；
• 正文：用于解释具体流程和细节，字号舒适，行高适中；
• 按钮文字：使用明确的动作词，例如「免费体验」或「查看完整示例」。

检查排版时，可以使用真实的文案测试，观察在手机窄屏下是否会出现单字折行或内容溢出。

• 标题：展示产品定位、功能模块和关键结论。
• 正文：补充说明工具具体如何解决问题。
• 按钮与链接：指引下一步的操作动作。
• 辅助说明：用于呈现小字提示或补充说明。

设计令牌与样式复用

如果代码中各处直接写入具体的像素数值或颜色代码，后续调整样式时容易遗漏。将常用的颜色、间距、字号和圆角抽成集中命名的变量，称为设计令牌↗（Design Tokens）。

当所有组件从同一套变量中取值时，修改一个变量的值就能同步更新所有相关位置，方便统一维护。

命名时建议体现具体用途，例如用 color.action 表示操作按钮颜色，用 space.gap-card 表示卡片间距，这样比直接写死数值更清晰。

• 对 AI 这样说：“帮我整理一套基础设计令牌（Design Tokens）：主色使用中性高饱和蓝，字阶包含 H1(32px)、H2(20px)、正文(14px)，间距统一 8/16/24px，卡片统一 12px 圆角。所有组件统一使用这些 CSS 变量，不要写死随机像素。”

全局样式的统一应用

确定了视觉规则后，后续的每个区块都遵循这套规范：标题和正文的层级比例固定，主色专用于关键按钮和交互高亮，区块之间保持合理的留白与间距，卡片圆角和边框保持克制。

如果发现去掉装饰性特效后内容难以辨认，通常需要优先调整标题大小、区块排列或者间距，而不是继续增加装饰。