文档导读
高端感不是靠堆砌装饰，而是靠一整套被严格执行的设计规范。本手册总结华瑞富博十年高端建站沉淀下来的设计标准，从设计原则到可访问性，覆盖视觉决策的每个环节。无论您是想了解"高端官网是怎么做出来的"，还是希望建立自己团队的设计规范，都能从中直接取用。
本章节目录
- 第一章 高端网页设计五项原则
- 第二章 品牌色彩体系
- 第三章 字体排印规范
- 第四章 栅格与间距系统
- 第五章 通用组件规范
- 第六章 图标与图形风格
- 第七章 动效与微交互规范
- 第八章 响应式断点策略
- 第九章 可访问性基础
高端网页设计规范手册
涵盖色彩、字体、间距、图标等设计规范，确保网站视觉品质统一。
第一章
高端网页设计五项原则
所有具体规范，都服务于这五条底层原则。
克制
少即是多。一屏之内重点不超过一个，用大量留白衬托内容，而不是堆满元素。
秩序
对齐、间距、字号都有统一的节奏，让页面看起来"理所应当"，而不是拼凑。
质感
细腻的阴影、圆角、渐变与图片质感，是高端与廉价的分水岭。
一致
同类按钮、卡片、标题在全站保持一致样式，降低用户认知负担。
克制的动效
动效服务于引导与反馈，绝不喧宾夺主，单页动效控制在必要范围。
第二章
品牌色彩体系
色彩决定第一印象，高端商务站讲究"主色克制、点缀精准"。
三层用色结构
- 主色：取自品牌色，用于按钮、强调、关键图形，全站占比约 10%。
- 辅助色：1—2 个邻近色，用于渐变与状态区分。
- 中性色：文字、背景、分割线，由深灰到浅灰成体系，占比约 80%。
用色纪律
- 一个页面高饱和色不超过两处，避免花哨。
- 正文与背景对比度不低于 4.5:1，保证可读。
- 成功/警告/错误用语义色，全站统一。
- 渐变要" subtle "，色相差控制在 30° 以内。
第三章
字体排印规范
排版是高端感最容易被忽视、却最见功力的地方。
字号阶梯
采用 1.25 比例的阶梯：正文 16px，小标题 20—24px，章节标题 32—40px，主视觉标题 48—64px。
行高与行距
正文行高 1.7—2.0，标题行高 1.2—1.4；段间距大于行间距，形成清晰节奏。
字重搭配
标题用 600—800 字重，正文 400，强调 500；一个页面不超过 3 种字重。
字体选择
中文优先系统无衬线字体栈，英文搭配 Inter / Helvetica，避免全站花式字体。
行长控制
正文每行 35—65 个中文字符，过长打断视线，过短频繁换行。
数字与西文
关键数据用等宽数字或品牌数字字体，与中文混排时预留字距。
第四章
栅格与间距系统
统一的间距尺度，是页面"整齐高级"的底层原因。
12 栏栅格
- 桌面端采用 12 栏栅格，容器最大宽度 1200—1280px。
- 栏间距 24—32px，左右安全边距在小屏自动收紧。
- 所有模块对齐到栅格，避免凭感觉摆位置。
8pt 间距基准
- 所有间距取 8 的倍数：8 / 16 / 24 / 32 / 48 / 64 / 96。
- section 上下内边距 96px，卡片内边距 24—40px。
- 大间距分隔章节，小间距组织元素，层级一目了然。
第五章
通用组件规范
按钮、卡片、表单，是构成页面的基本零件。
按钮
主按钮实心渐变，次按钮描边；统一圆角与高度，状态含 hover/disabled。
卡片
统一圆角 12—16px，1px 浅边框，hover 轻微上浮与阴影。
表单
标签在上、输入框等高，聚焦态高亮描边，错误提示紧邻字段。
标签/徽章
小圆角胶囊形，浅色底深字，用于分类与状态。
分割线
用 1px 浅灰或虚线分隔，避免粗黑线割裂页面。
图片
统一 object-fit: cover，固定比例容器，避免布局抖动。
第六章
图标与图形风格
图标是设计语言的延伸，必须风格统一。
线性图标体系
- 统一采用线性描边图标，描边粗细 1.5—2px。
- 同一套图标使用统一的圆角与视觉尺寸。
- 优先使用 SVG 矢量，可随主题色变色、不失真。
配图原则
- 商务场景用真实办公/团队照片，避免廉价图库感。
- 抽象概念用渐变图形或几何插画，风格与品牌一致。
- 图片统一调色与裁切比例，形成系列感。
第七章
动效与微交互规范
动效是高端体验的"调味料"，不是主菜。
- 滚动显现：元素进入视口时淡入上移，时长 0.4—0.6s，缓动自然。
- 悬浮反馈：卡片、按钮 hover 时轻微上浮 4—6px 并加深阴影。
- 图片缩放：案例图 hover 缓慢放大 1.05 倍，时长 0.6s。
- 数字滚动：统计数据进入视口时从 0 滚动到目标值。
- 克制原则：关闭偏好动态（reduce-motion）时，自动退化为直接显示。
第八章
响应式断点策略
一套设计，无缝适配手机、平板与桌面。
≥1200px
桌面宽屏
多栏栅格完整展开，展示最大信息量，容器居中。
768—1199px
平板
由三栏降为两栏，导航收起为抽屉，间距适度收紧。
<768px
手机
单列流式布局，字级放大触控热区，底部固定咨询按钮。
第九章
可访问性基础
高端网站应当对所有访客友好。
对比度
正文与背景对比度 ≥ 4.5:1，大标题 ≥ 3:1。
语义化
正确使用 H1—H6、button、nav 等标签，支持屏幕阅读器。
替代文本
关键图片提供 alt 描述，装饰图留空 alt。
常见问题
设计规范高频疑问
设计规范一旦定死，会不会限制创意？
规范约束的是重复元素，释放的是核心创意。组件越标准，设计师越能把精力花在真正出彩的首屏与转化点上。
客户已有品牌色，还需要重新定色彩体系吗？
需要。我们会以品牌主色为基础，延展一套适合屏幕的中性色与辅助色，而不是直接把印刷色搬到网页上。