广州网站设计规范有哪些？栅格间距与组件统一

很多企业官网做完，首页看还行，翻到第三层页面就开始走样：字号忽大忽小、按钮颜色不统一、间距每个页面不一样。原因不是设计师水平问题，而是没有网站设计规范——规范就是把首页的好状态固定下来，让后面所有页面照着执行。本文给出一套最小可用的规范清单，企业可以直接拿去对照验收。

图：界面组件与色板整理，网页栅格系统 和组件规则写清楚，多页面才能保持一致

一、栅格：页面的骨架

1、栅格怎么定

常见做法是 12 栏栅格，桌面端内容区宽度定一个上限（例如 1200 像素），所有内容块按栏的倍数落位。两栏布局就是 6+6，图文混排常见 8+4。用网页栅格系统 的好处是所有页面共享同一套骨架，新页面不需要重新设计布局，往栅格里填内容就行。

2、响应式的断点

栅格要配断点才有意义：桌面、平板、手机各定义一套栏数。手机端通常是单栏，原来的多栏在断点处堆叠。断点没定义清楚的规范，到了开发阶段必然扯皮。

2、断点没写清的后患

断点没定义清楚的规范，到了开发阶段必然扯皮：设计稿上一个三栏布局，开发在平板上不知道该变两栏还是直接堆叠，最后各页面处理不一，规范等于白做。网站设计规范 里断点至少写三档——桌面（1200 以上）、平板（768–1199）、手机（767 以下），每档栏数怎么变、哪些模块隐藏，逐条落字。

3、栅格不是越死越好

栅格管的是骨架，不锁内容。宣传位可以跨栏放大图，强调区块可以占满整行——只要边界落在栅格线上，页面就还是整齐的。把栅格理解成"所有模块等宽"是常见误读，那样排出来的页面单调且浪费空间。

二、间距：最容易乱的环节

1、间距档位

间距乱的根本原因是"随手写值"：这里 18、那里 21，肉眼说不齐但就是显得乱。网站间距规范 的做法是把间距收敛到四五个档位，所有地方只从档位里取值，页面自然整齐。

2、留白优先于分隔线

两个板块之间先用间距区分，间距不够再加底色或边框。满屏边框线是规范缺位的典型症状。

三、组件：按钮、表单、标题的统一

1、按钮只留两三种

主按钮一个样式（品牌色底反白字）、次按钮一个样式（描边）、链接一个样式。全站通用。按钮圆角、高度、内边距写死数值，任何页面不许另造。网站组件统一 做好了，访客在哪个页面都知道哪里能点。

2、字号层级固定

通常四到五级：页面主标题、节标题、小节标题、正文、辅助说明。每级字号、行高、字重定死。层级靠字号和字重区分，不靠随意加粗变色。

3、颜色写进规范

品牌色、辅助色、灰阶各层级、成功/警示/错误色，全部给出色值。没有色值的规范只是示意图，开发还原时必然跑偏。

4、图标与图片的统一规则

图标要么全部线性、要么全部面性，粗细和圆角一个标准；图片要有统一的宽高比和圆角处理，列表缩略图尤其要一致。这两项不在规范里，新页面上线一次就乱一次——开发随手找的图标风格和图截取比例，每次都不一样。设计规范文档 里给图标一套来源（同一个图标库）、给图片一套裁切规则，一致性就自动化了。

四、规范怎么交付和执行

规范不是一份设计稿截图，而是一份可查的文档加组件示例：栅格参数、间距档位、字号层级、组件各状态（默认、悬停、点击、禁用）的样式、色值表。开发按文档实现，验收按文档对照，争议才有依据。

设计规范在整个流程里的位置，参考广州网站设计流程怎么走——规范属于视觉稿定稿后、开发开始前要产出的事。规范与排版的配合方式，在广州网站设计制作的三个关键细节里有展开；首屏与视觉方向的统一，参考广州网页设计指南。

延伸问答：网站设计规范 的常见疑问

一、小网站需要做规范吗？

五个页面以内的展示站可以不写正式文档，但栅格和按钮这两项还是要在设计稿阶段定死。页面一多，没有规范的维护成本会指数上涨。

二、规范定得越细越好吗？

不是。规范的作用是约束一致性，不是限制灵活性。核心项（栅格、间距、组件、色值）写死，内容编排方式留空间，这样规范才被执行得下去。

三、怎么验收开发有没有按规范做？

抽查三个字：量间距、对色值、点状态。拿设计稿的间距档位去量线上页面，取色器对按钮颜色，把按钮和表单的各状态点一遍。十分钟就能看出还原度。

总结

网站设计规范 覆盖四块：栅格定骨架、间距收敛档位、组件全站统一、色值写进文档。规范的价值不在文档多厚，而在后面每个新页面都能低成本保持一致。广州企业验收时，用间距、颜色、组件状态三项抽查，基本能判断对方交的是"规范"还是"示意图"。