官网要有品牌感，核心不是选一套好看的模板，而是把字体、网格、留白、动效四套参数做成可复用的规则。判断标准很简单：把首页截图遮住 logo，用户还能认出是谁。做到这一点，通常需要字体不超过 2 个家族、栅格 12 列、行高 1.5-1.7、动效时长 200-500ms。
字体：两个家族、三级字号、一个行高区间
品牌感的第一层来自文字。中文字体选择有限，反而容易做出秩序。建议正文与标题分工：标题用有性格的字体建立识别，正文用系统级黑体保证加载与阅读。字号按 1.25-1.333 倍递增，形成三级层级即可，不要出现六级标题。
- 家族数量：中文 1-2 个家族，英文 1 个，总数不超过 3 个，否则页面会散。
- 字号阶梯：正文 16px，小标题 20-24px，主标题 32-48px，比例固定为 1.25 或 1.333。
- 行高：正文 1.6-1.75，标题 1.2-1.3，行长控制在每行 28-38 个汉字。
- 字重：标题用 600-700，正文用 400，强调用 500，不要用细体做正文。
广州企业的常见问题是标题用书法体、正文用宋体、按钮再用第三种字体，三套逻辑打架。把家族压到两个，品牌感立刻回来。字体规则确定后，再进入视觉识别层面的统一，可参考标志与VI的系统做法。
网格：12 列、8px 基准、间距只取四档
网格决定页面是否「稳」。官网不需要复杂栅格，12 列足够覆盖从 1440 到 375 的响应式断点。所有间距取自同一基准，页面才不会忽松忽紧。
- 列数与槽宽：桌面 12 列，槽宽 24px；平板 8 列，槽宽 20px；手机 4 列，槽宽 16px。
- 基准单位：8px。间距只用 8、16、24、32、48、64 六档，不出现 13px、27px 这类随意值。
- 内容宽度：桌面正文区 1200px 或 1280px，超宽屏留边距，不拉伸到全屏。
- 对齐：同一区块内左对齐或居中选择一种，全站统一，不要混用。
检查方法：把页面缩到 50%，如果区块边缘能对齐成几条竖线，网格就是成立的；如果边缘参差，说明间距没有归到基准上。
留白：首屏 40% 留白，区块间距分三档
留白是最容易被忽略的品牌资产。留白不足的官网，信息再多也显得廉价。建议用比例而不是感觉来控制。
- 首屏：文字与图形以外的空白占首屏面积 35%-45%，主标题上下留白不小于 48px。
- 区块间距：模块之间 64-96px，模块内部 24-32px，卡片内边距 20-24px。
- 图文比例：图文并排时，图占 5-7 列，文字占 4-5 列，中间留 1 列空隙。
- 段落间距：段与段 16-24px，段与列表 12-16px，不要用空行硬撑。
留白不是越空越好。B2B 官网首屏留白超过 50% 会显得信息不足，35%-45% 是品牌感与信息量的平衡点。
动效：200-500ms、只做三类、尊重减弱设置
动效节奏是品牌感的第四层。很多官网动效做坏，不是不够炫，而是时长和触发方式不统一。建议把动效限制在三类：入场、切换、反馈。
- 时长：微交互 150-200ms，入场 300-500ms，页面切换 400-600ms，超过 600ms 用户会感到迟滞。
- 缓动：入场用 ease-out，退出用 ease-in，不要全站 linear。
- 触发：只在首屏以下元素进入视口时触发一次，不要随滚动反复播放。
- 可访问性：必须响应 prefers-reduced-motion，关闭动效后内容仍完整可见。
旺季前尤其要克制。年货节与春节营销期间，官网常被临时加活动弹窗和轮播，动效堆叠会拖慢首屏。建议活动物料单独走专题页，首页只保留一个入口。
对照清单：品牌感官网的 8 项验收参数
下面这张表可以直接拿去和设计方对稿，逐项打勾。任一项不达标，页面就会「像模板」。
| 项目 | 建议数值 | 不达标表现 |
|---|---|---|
| 字体家族 | ≤ 3 个 | 标题正文按钮三套字体 |
| 字号阶梯 | 1.25 或 1.333 倍 | 字号随手定，层级模糊 |
| 栅格 | 桌面 12 列 | 区块边缘对不齐 |
| 间距基准 | 8px，六档取值 | 出现 13px、27px |
| 首屏留白 | 35%-45% | 首屏塞满 Banner 与弹窗 |
| 动效时长 | 200-500ms | 动画超过 1 秒 |
| 内容宽度 | 1200-1280px | 正文拉到全屏 |
| 减弱动效 | 必须支持 | 关闭动效后内容缺失 |
参数之外，品牌感最终来自识别系统是否统一。可参考安朴酒店·高端系列的做法：从命名到应用系统建立一套识别锚点，官网只是其中一个触点，字体、色彩、版式与线下物料同源，用户在不同场景看到的是同一个品牌。网站设计的完整交付范围见网站设计服务页。
常见问题
官网品牌感提升，先改字体还是先改版式？
先改字体与字号阶梯。字体是阅读的第一层，改完立刻见效，成本也低。顺序建议：字体家族压到 2 个，字号按 1.25 倍定三级，行高调到 1.6-1.75，再动网格和留白。
官网动效时长多少合适，会不会影响加载？
微交互 150-200ms，入场 300-500ms，页面切换 400-600ms。动效本身不直接拖慢加载，拖慢的是大图和未压缩脚本。建议首屏图片控制在 300KB 以内，动效只做 CSS 过渡，并支持 prefers-reduced-motion。
春节前官网要配合营销物料，排期怎么留？
年货节物料通常提前 6-8 周定稿，官网专题页建议在节前 3-4 周上线，预留 5-7 个工作日做测试与兼容检查。首页只放一个活动入口，其余物料走专题页，避免动效与弹窗堆叠影响首屏。
官网的品牌感不是一次改版就能锁定，它是一套参数能不能被复用。字体、网格、留白、动效四组数值定下来，后续上新页面、做活动专题，都从这套规则里取值，页面才不会越做越散。
如果团队内部没有把握定这套参数，可以把现有官网的字体、间距、动效逐项对照上面的清单打一遍分，问题通常集中在字体家族过多和间距不归基准两点。
星空大海的网站设计服务覆盖从品牌识别到页面规则的全流程，可访问网站设计了解交付范围，项目咨询请拨 400-6619-020。