网页首页布局提升质感全方案（落地可直接套用，从骨架到细节）

一、先定首页版式骨架（3 种主流高级布局，按需选择）

1. 栅格布局（企业官网 / 产品站首选，容易出高级感）
   PC 端通用 12 列栅格，移动端 4 列，所有图片、卡片、文字区块严格卡在栅格线内，杜绝元素随意摆放；基准用4px/8px 模数（所有间距、尺寸都是 4 的倍数）。
2. 居中对称布局（品牌、轻奢、极简官网）
   核心内容全部页面居中排布，左右大面积留白，适合高端品牌、文创、轻奢产品，视觉干净大气。
3. 非对称错落布局（设计 / 艺术 / 创意类网站）
   左右视觉重量不等（左大图右文字 / 左文字右卡片），但仍依托栅格约束，避免无规则乱飞。

避坑：不要满屏铺满内容，左右紧贴浏览器边框。

二、留白 & 间距：提升质感省钱的手段（80% 低端页面死在留白）

1. 模块间距：大区块上下间距统一 80～120px，卡片组间距 32～48px；
2. 卡片内边距：卡片内部留白 24px/32px，文字永远不靠卡片边框；
3. 页面安全边距：PC 页面左右小留白 24px，移动端 16px，内容不贴屏幕边缘；
4. 能用留白做分割，就不用分割线，减少多余线条。

三、建立统一文字层级（一套字体规范，杜绝字号乱飞）

1. 字体选型

2. 固定 5 档以内字号阶梯（全站通用）

3. 排版规则

1. 正文统一左对齐（商业网站优），需要精致感再居中，禁止一段左对齐一段居中；
2. 段落之间空 1 个正文行高，大段文字拆分短句，减少密集大文本。

四、色彩克制：颜色越少质感越高

1. 页面大面积背景只用：纯白、浅灰、深灰、炭黑，主色只用于：按钮、标签、高亮关键词；
2. 禁用高饱和荧光色做大面积背景，亮色只做小面积点缀；
3. 提前定 5 级标准灰色，全站复用：
   #FFFFFF(白)、#F5F7FA(浅灰)、#E5E7EB(分割灰)、#666666(正文灰)、#222222(标题黑)
4. 渐变慎用：只用同色系低饱和微渐变，杜绝彩虹、高对比七彩渐变。

五、图片、图标、卡片细节（细节决定精致度）

1. 图片规范

• 统一裁切比例：固定 16:9 / 4:3 / 1:1，同板块图片尺寸一致；
• 全页面图片统一色调（亮度、饱和度统一），实拍图＞廉价卡通素材，高清无压缩；

2. 图标统一

3. 圆角、阴影统一（高频优化点）

• 圆角分级（全站固定）：小按钮 4px、内容卡片 8px、大区块容器 12px，不要大小圆角杂乱；
• 阴影克制：只用低透明度柔和阴影 rgba(0,0,0,0.06~0.1)，模糊值拉高，禁用厚重黑粗阴影。

六、首屏 Hero 区（首页门面，重中之重）

1. 结构：1 句主标题 + 1 行副标题 + 1~2 个功能按钮 + 配图 / 大面积留白，删除多余装饰文字；
2. 高度：PC 首屏≈100vh（一屏高度），不超长滚动；视觉焦点集中在页面中间；
3. 按钮：仅主次两个按钮（实心主按钮 + 线框副按钮），不堆砌多个按钮。

七、动效 & 交互：少动 = 高级，多动 = 廉价

1. 仅保留：hover 悬浮、区块滚动淡入动画，动画时长统一 200~300ms，缓动 ease-out；
2. hover 变化：按钮轻微变色、卡片上浮 2~3px 即可；
3. 禁止：元素弹跳、闪烁、旋转、漂浮挂件、弹窗抖动等花哨特效；页面平滑滚动即可。

八、移动端适配优化（适配拉胯直接拉低质感）

1. 多列卡片→移动端自动单列排布，导航收缩为汉堡菜单；
2. 所有内边距、字号同步缩小，保持原有间距比例，不要随便改布局；
3. 图片自适应等比缩放，杜绝拉伸变形。

快速落地步骤（做首页直接按顺序）

1. 确定栅格系统→2. 定全站间距 / 圆角 / 配色规范→3. 敲定文字字号阶梯→4. 划分页面模块分区→5. 填充素材和内容→6. 微调留白与微交互。

加分小技巧

1. 少量细微磨砂 / 网点纹理做局部背景，大面积纯色更高级；
2. Logo 固定左上角，导航位置全站统一，品牌元素位置不变；
3. 能留白代替装饰，就删掉多余花边、漂浮装饰元素。
4.