1) 明确企业目标：展示实力/招贤纳士/客户入口。
2) 列出页面类型：首页、关于、服务、案例、联系。
3) 收集品牌要素：Logo、主色、辅色、品牌字体、现有图片。
4) 输出设计简要（1页），作为后续配色与布局参考。

1) 取主色：从Logo提取1个主色（HEX）。使用工具（Photoshop/在线取色器）。
2) 补色与中性色：选择1个强调色和2个中性（灰、白、深灰）作背景/文字。
3) 生成色阶：对主色做 +10%、-10%、+30% 明度变化，形成主色深浅5阶。
4) 检查对比：用Contrast Checker确保正文与背景对比 ≥ 4.5:1（WCAG）。

1) 在:root定义变量：
--brand: #1A73E8; --accent: #F5A623; --bg: #FFFFFF; --text: #222222;
2) 按组件使用变量：header { background: var(--bg);} .btn-primary { background: var(--brand); color:#fff }
3) 快速切换主题：通过修改:root值可支持深色或节日主题。

1) 结构划分：header / hero / services / case / team / footer。每块独立组件化。
2) 使用响应式栅格：CSS Grid 基本模板：grid-template-columns: repeat(12, 1fr); 在不同断点合并列。
3) 示例：.container{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;} .main{grid-column:span 8} .aside{grid-column:span 4}

1) 标题层级：H3/H4在视觉上要明显，使用 1.6x、1.25x 的 font-size 比例。
2) 行距与段距：正文行高 1.5，段落上下间距 16-24px，增加可扫描性。
3) CTA 显著：按钮使用主色+圆角+适当阴影，确保点击区域 ≥ 44x44px。

1) 选图风格：真实办公场景或抽象矢量，保持一致色调（冷色/暖色）。
2) 优化步骤：图片压缩（WebP/AVIF），设置 srcset 和懒加载 loading="lazy"。
3) 图标规范：使用同一图标库（SVG），统一线条粗细和填充规则。

1) 制定断点：320/480/768/1024/1440，检查关键页面在每个断点的布局。
2) 无障碍检查：键盘导航、alt 文本、ARIA 标签、对比度测试。
3) 性能检测：使用Lighthouse检查首屏时间、交互时间和累积布局偏移（CLS）。

1) 做两套微改（配色或CTA位置），用小流量跑A/B 2-4周。
2) 指标关注：转化率、停留时长、跳出率。根据数据调整色彩饱和度或按钮文案。
3) 形成设计规范文档，便于后续页面一致性迭代。

1) 品牌色：主色 #0A84FF，辅色 #FFC857，中灰 #F5F7FA，深灰 #222B45。
2) HTML骨架：header（logo+nav）、hero（大图+CTA）、3列服务卡、案例画廊、footer。
3) 落地时间：按上面步骤，1名前端工程师 + 1设计师可在3-5天产出初版。

问：如何快速判断当前办公站点配色是否专业？

答：看三点：Logo主色是否作为页面主色、文本与背景对比是否达标（Use Contrast Checker ≥4.5:1）、页面是否存在超过3种互相冲突的鲜艳色。若不满足，按第2节配色方法重构。

问：布局改版常见的技术障碍有哪些？

答：常见有响应断点断裂（组件未使用栅格）、图片未优化导致首屏慢、缺乏设计规范导致组件样式不一致。解决方案：统一栅格、优化图片、编写组件库与样式变量。

问：中小企业没有设计师，如何保证办公网页也能提升形象？

答：使用现成的企业模板（保证可定制性）、按本文步骤提取品牌色并设置CSS变量、优先优化首页与联系方式页、使用高质量正版图片库快速替换素材，迭代A/B验证效果。