企业官网设计规范怎么定：颜色、字号、间距、栅格、组件，一份能交给任何外包照着做的文档

先讲三个我们接手时常见的场面。

场面一：企业两年前做的官网，今年换了一家服务商做两个新栏目。新页面单看挺好看，但和旧页面摆在一起，像两个公司的网站：旧的正文字号 15px，新的 16px；旧的圆角 4px，新的 12px；旧的按钮是深蓝，新的按钮是青绿。老板看了半天说："怎么感觉不像我们的站了？"

场面二：市场部要在首页加一个"双十一活动"区块。设计稿发过去，前端做了三天，做出来颜色不准、间距不齐、手机上按钮叠在一起。原因是首页原本没有"活动区"这种组件，也没有人规定过"新组件该长什么样"。

场面三：企业自己接手后台维护半年，回头看首页，一共出现了七种字体颜色、五种按钮样式、三种分割线。没有人故意捣乱，每个人都在"就改这一点点"。

这三个场面的共同原因只有一个：网站没有设计规范。不是设计水平不行，是没有一份写下来的规则，告诉后来的人"什么可以变，什么不能变"。

这篇讲企业官网的设计规范怎么定：包含哪 8 个模块、每个模块的具体数值怎么取、交付成什么格式才算真能用、以及一套 8 条的验收标准。写给正在准备做站、改版，或者准备把网站交给第二家服务商的企业负责人。

一、设计规范解决的不是"好看"，是三种成本

很多企业主以为设计规范是大公司才需要的东西，是"设计系统""组件库"这类听着就贵的词。其实它解决的是三件很具体的事。

第一，沟通成本。没有规范的时候，每次提需求都要重新描述一遍"按钮要多大、标题要多粗、图片要多宽"。有规范之后，一句"按规范里的主按钮做"就够了。这一条省下来的时间，通常比写规范花的时间多。

第二，返工成本。返工大多不是因为做错了，而是因为"没约定"。字号差 1px、间距差 4px，单看没问题，凑在一页就别扭，于是改，改完又影响到别处。规范的作用是把"判断"前置，减少来回。

第三，一致性成本。这是最容易被低估的。用户对网站的信任，很大一部分来自"这看起来是同一家公司做的"。页面的字号、间距、圆角、按钮状态如果每次都变，用户说不出哪里不对，但会觉得"这站不太正规"。而信任感，恰恰是询盘转化的前置条件。

所以设计规范不是审美的枷锁，它是把"审美决策"变成"可执行参数"的一次翻译。

二、8 个模块：一份能用的规范至少要写这些

一份企业官网的设计规范，不需要写成上百页的手册。按我们的实践，8 个模块、20 到 30 页，足够覆盖 95% 的日常场景。

1. 色彩系统：主色、辅助色、语义色、中性色，各自的色值和用法比例。
2. 字体与字号阶梯：字体族、8 级字号、行高、字重、字间距。
3. 间距与栅格：基础间距单位、栅格列数、容器最大宽度、断点。
4. 组件库：按钮、表单、卡片、导航、表格等，含各状态。
5. 图标与插画：线性或面性、线宽、尺寸档位、来源与授权。
6. 图片规则：比例、尺寸、压缩、命名、alt 写法。
7. 动效规则：时长、缓动曲线、触发条件、降级方案。
8. 可访问性：对比度、焦点态、键盘可达、减少动效偏好。

下面挑最常出问题的五个模块，给出可以直接抄的取值方法。

三、颜色：三层色板，加一条 60-30-10

企业官网的色板不要超过三层，层数一多就会乱。

第一层，主色 1 个。就是品牌色，用于主按钮、重点链接、关键图标。主色只允许一个。很多站的问题就出在"主色有两个"——市场部喜欢蓝，老板喜欢红，最后两个都在用，用户就不知道哪个是"要点的"。

第二层，辅助色 1 到 2 个。用于分类、标签、图表区分。辅助色不做按钮，只做区分。

第三层，语义色 4 个 + 中性色 6 到 8 级。语义色是成功（绿）、警告（橙）、错误（红）、信息（蓝），含义固定，不随品牌色变。中性色是从近黑到近白的灰阶，用于正文、辅助文字、边框、分隔线、背景。

用法上，一条经典规则够用：60% 中性色打底、30% 主色与辅助色、10% 强调色。企业官网尤其要克制——B2B 站的主色覆盖率超过 30%，页面就会显得"闹"，而 B2B 的读者是来找参数的，不是来看海报的。

还有一条硬指标：正文文字与背景的对比度不低于 4.5:1，大号文字（18px 加粗或 24px 常规以上）不低于 3:1。这是无障碍的基本线，也是手机在户外阳光下能不能看清的分界线。设计稿上好看、实际在阳光下看不清的浅灰正文，是移动端跳出率最隐蔽的杀手之一。

顺便提醒一个常见坑：主色不要用渐变做主按钮。渐变在深色模式、在高对比度模式、在印刷物料上，都会失真，而且很难定义"按下状态"该用哪一段颜色。纯色加明度变化，稳得多。

四、字号：8 级阶梯，中文正文 16px 起步

字号不需要很多级。8 级阶梯可以覆盖从页脚小字到首屏大标题的全部场景。

12px：版权、备案号、辅助说明（不超过全站 5% 的面积）。
14px：表格内文字、标签、面包屑。
16px：正文基准、表单输入、导航二级。
18px：导语、正文强调段。
24px：卡片标题、小节标题。
32px：内页标题。
40px：首页区块主标题。
56px：首屏主标题（仅 PC；手机端降到 32—36px）。

三条配套规则，比字号本身更重要。

第一，中文正文不小于 16px。14px 的中文在手机上不是"精致"，是"要眯眼"。这不是审美偏好，是阅读生理。手机网站建设里最常见的返工就是把 PC 的 14px 直接搬到手机，结果整页字都显小。

第二，行高按字号分档。16px 正文行高 1.7—1.8；24px 以上标题行高 1.3—1.4；12—14px 辅助文字行高 1.5。只写一个"行高 1.5"全站通用，是最省事也最难看做法。

第三，控制行宽。正文每行 28—40 个汉字最舒服。PC 端正文容器别拉满屏，1280px 宽度下正文区控制在 680—760px，阅读体验立刻不一样。

五、间距与栅格：一个 8px 基准，撑起整站的秩序

如果一份规范只能保留一条，我会保留这条：所有间距、内边距、组件高度，都取 8 的倍数。4、8、16、24、32、48、64、96。为什么是 8？因为它在常见屏幕像素密度下能整除，缩放不失真；也因为限制取值个数，页面自然就整齐了。

栅格部分，企业官网用 12 列足够。容器最大宽度取 1200 或 1280px，两侧留白不小于 24px。断点建议四档：375（小屏手机）、768（平板竖屏）、1024（平板横屏/小笔记本）、1280（桌面），需要的话再加 1440 一档大屏。

这里说一个 2026 年确实值得写进规范的新东西：容器查询（container queries）。过去响应式网站建设只能按"屏幕宽度"切换样式，一个卡片在侧栏里和在通栏里长得一样，挤得难看。容器查询让组件按"自己所处的容器宽度"变化——同一个产品卡片，放进侧栏就自动变成紧凑版，放进通栏就自动变成图文并排版。这条写进规范，能省掉大量"这个位置的特例"。

另外提醒断点的写法：不要写"小于 768 隐藏某块内容"。隐藏是万恶之源——移动优先索引下，移动端看不到的内容，等于不存在。正确写法是"小于 768 改为纵向排列"。

六、组件：12 个必备，每个都要有"状态"

组件库的价值不在"有多少个"，在"每个都有完整状态"。只画一个默认态的按钮，等于没画。

企业官网必备 12 个组件：按钮、文字链接、输入框、下拉选择、单选与复选、表单校验提示、卡片、标签、面包屑、分页、弹窗、数据表格。

每个组件至少定义这些状态：默认、悬停、聚焦、按下、禁用、加载中、错误。其中"聚焦"和"错误"最常被漏掉。聚焦态是键盘用户唯一能看见自己位置的方式；错误态决定了用户填错手机号时，是知道怎么改，还是干脆放弃。

再补三条经验：

按钮分三级，不要超过三级。主按钮（实心主色）、次按钮（描边）、文字按钮。一页里主按钮最多两个，多于两个等于没有主次。

表单字段的宽度要有意义。手机号一行放得下 11 位，就不要拉满整屏；公司名称可能很长，才需要通栏。宽度本身就在暗示"该填多长"。

表格要定义"手机上怎么办"。数据表格在手机上横滑是最常见的妥协，但必须给横滑提示（右侧渐隐或小箭头），否则用户以为内容就这些。

七、图片与图标：三条规则，省下后期一半麻烦

规则一：比例固定，尺寸成档。轮播 16:9 或 21:9，产品图 4:3 或 1:1，文章头图 3:2，团队照片 3:4。每档给出 1 倍和 2 倍两个尺寸，例如头图 1200×800 与 2400×1600。比例不固定，后期每换一张图都要重新调版。

规则二：压缩写进流程。JPG 质量 78—82、开启渐进式；PNG 只在需要透明时用；单张图超过 300KB 就要回头看。这一条直接决定移动端的最大内容绘制能不能进 2.5 秒。

规则三：alt 描述内容，不堆关键词。"车间不锈钢反应釜实拍，2026 年 9 月"是有用的 alt；"郑州网站建设 郑州网站设计 郑州做网站"是垃圾。后者不仅对无障碍无益，还可能被判为作弊。

图标方面，只选一种风格（线性或面性），线宽统一（1.5px 或 2px），尺寸只留 16、20、24、32 四档。图标混风格，是"看起来不专业"最快的方式。

关于 AI 生图，2026 年企业用得很多，建议在规范里写清"三不用"：不用 AI 图冒充真实车间和真实团队；不用 AI 图做资质证书、检测报告、资质墙；不用 AI 图做产品细节特写。这三类图一旦被客户或监管核查，代价远大于省下的拍摄费。AI 图适合做氛围背景、抽象插画、示意图——用在"不需要证明什么"的地方。

八、动效与可访问性：写在规范里，才不会越做越花

动效规则只要三行：时长 120—240 毫秒（超过 300ms 就会觉得卡）；缓动统一用 ease-out 进场、ease-in 退场；同一屏同时运动的元素不超过两组。

再补一条必须写的降级：尊重系统的"减少动态效果"设置（CSS 的 prefers-reduced-motion）。有前庭功能敏感的用户开了这个开关，页面的视差滚动和大幅位移要自动关掉。这不是矫情，是基本礼貌。

可访问性还有两条硬要求：所有可点击元素有可见的键盘焦点框（不要 outline:none 了事）；所有图标按钮有可读的文字标签（aria-label），否则读屏软件只会念"按钮"。

九、交付什么格式，才算"真能用"

这是最多企业踩坑的地方：拿到一份 PDF 版的"设计规范"，看着很专业，实际没人用。因为 PDF 里的色值要手抄，字号要目测，前端还是凭感觉写。

能用的交付物应该包含五样：

1. 一份一页速查表（色值、字号、间距、断点，打印出来贴墙上的那种）。
2. 一套设计变量（Figma 的 Variables，或 tokens.json）。3. 一套 CSS 变量，直接落到代码里，改一处全站生效。
4. 一个组件库文件，含所有状态，能直接拖进新页面。
5. 三个示例页：首页、列表页、详情页，作为"正确示范"。

判断标准很简单：把这份规范交给一个没见过你公司的新设计师，他能不能在不问你的情况下做出一个"看起来是你们家"的页面？能，就合格；不能，就还只是效果图合集。

十、8 条验收标准，和 5 个最常见的错

规范做完了，用这 8 条自查：

1. 主色是否只有一个，且写明了不适用场景；2. 字号是否成阶梯，中文正文是否 ≥16px；3. 所有间距是否 8 的倍数；4. 每个组件是否有 6 个以上状态；5. 断点是否写了"怎么变"而不是"隐藏什么"；6. 图片是否给了比例和两档尺寸；7. 是否定义了键盘焦点和减少动效的处理；8. 是否交付了 CSS 变量或设计变量，而不只是 PDF。

五个最常见的错，也顺手列一下：一是"只有色卡没有用法"，给了十六进制但没有场景，等于没给；二是"组件只有默认态"，一遇错误提示就自由发挥；三是"断点靠隐藏"，移动端内容被删掉，索引跟着掉；四是"规范只覆盖首页"，内页、表单页、404 页全靠临场发挥；五是"没有版本和负责人"，规范发出去三个月就过期，没人维护。

最后一条尤其重要：设计规范是活的。建议指定一个负责人（通常是市场或产品的一个人），每季度收一次"新增了什么组件"的清单，合并进规范。没有这一步，规范最多活半年。

十一、写到什么程度，花多少钱

不是所有企业都需要一整套组件库。按规模分三档，够用就好。

第一档：轻量版（参考 5000—8000 元，或自己写 2—3 天）。适合 10 个页面以内的展示型站。只要色板、字号阶梯、间距规则、按钮与表单两种组件的规范，加一页速查表。这一档能解决 80% 的一致性问题。

第二档：标准版（参考 1.5 万—2.5 万元）。适合有产品库、有内容栏目、会持续更新的企业站。8 个模块齐全，含 12 个组件和三个示例页，交付设计变量与 CSS 变量。这一档基本可以支撑一次完整改版。

第三档：系统版（参考 3 万元以上）。适合多品牌、多语言、有多套站点需要统一的企业。要加设计令牌的版本管理、多主题（深浅色）、多端（PC/手机/小程序）映射。大多数企业用不到这一档，不必被"设计系统"这个词吓到。

选择网站设计公司时，可以直接问一句："你们交付设计规范吗？交付成什么格式？"如果对方只会给一份 PDF，或者说"规范是另外的价钱但我们没做过"，那你要有心理准备：这个站的第二年、第三年，大概率会变成上面说的"场面一"。

十二、写在最后

做了十几年郑州网站设计，我们越来越觉得，判断一个官网好不好，不看第一眼，看第三年。第一眼好看靠灵感，第三年还整齐靠规则。

设计规范这件事，说白了就是把老设计总监脑子里的经验，写成一张新人也能照着做的纸。它不产生惊艳的效果，但它让网站不会在换了三拨人之后散架。对一家要做十年生意的企业来说，后者比前者重要得多。

如果你手上有一个正在变"花"的官网，不妨先做一件小事：把最近三个月新加的页面截图排在一起看一遍，数一数出现了几种按钮、几种字号、几种间距。数出来的数字，就是你需要写规范的理由。

关于维度网络
维度网络（www.hnwd.net）做企业网站建设与网站设计十余年，累计服务企业超过 1200 家。我们交付设计稿时，习惯同时交一份"规范速查页"——不是额外收费项，而是让客户以后自己改内容、或者换团队接手时，有个能对照的标准。我们不认为规范能让网站变漂亮，但它能让网站三年后还像一家公司的网站。如果你正准备改版，或者想给现有的站补一份规范，可以把现有页面地址发过来，我们先看看它的"一致性问题"出在哪。服务热线：400-008-3710。