一、布局原则

1. F型与Z型布局（视觉动线优先）

F型布局：适用于文字密集型页面（如博客、新闻）。用户视线先水平扫过顶部，再向下垂直移动。将关键信息（如标题、CTA按钮）放在左栏或水平带区域。

Z型布局：适用于简单、故事性强的页面（如首页、落地页）。用户视线从左上到右上，再斜向下到左下到右下。适合放置品牌Logo、导航、主要行动号召和转化点。

实战应用：避免全页混乱排布，让用户视线自然流过“第一视觉区→行动区→次内容区”。

2. 网格系统（对齐与结构化）

12栏栅格最通用，可灵活组合成2、3、4、6列。例如：产品列表用3列×4行；案例展示用2列不对称布局（左大图右文本）。

留白（负空间）管理：区块间留白不少于行高的1.5倍，内容组内边距小于组间距。例如，卡片内边距20px，卡片间距30px。

基线网格：确保垂直方向所有元素（文本、按钮、图片）的底部对齐同一参考线，避免视觉参差。

3. 响应式与断点策略

移动优先：从窄屏（375px）布局开始设计，逐步增强到桌面（1440px+）。避免从桌面下钻导致移动端拥挤。

关键断点：

手机（<768px）：单列布局，导航折叠汉堡菜单。

平板（768-1024px）：可能2列，导航可部分展开。

桌面（>1024px）：多列，显示完整水平导航。

弹性单位：使用相对单位（%、vw、clamp()）而非固定px，例如：font-size: clamp(1rem, 2vw, 1.5rem)。

4. 视觉层次与重量

大小对比：主标题字号是正文的2-3倍，次级标题1.5倍。例如正文16px，主标题32-48px。

深浅/色彩对比：最重要的行动按钮使用品牌主色，次要按钮为线框或灰色。避免同等亮度。

空间分离：不同信息模块之间增加间距或细分割线，不依赖边框。例如，特色区域之间空出40-60px。

5. 内容优先的对称与平衡

非对称平衡：左侧大图+右侧表单文本，通过视觉重量（图像细节vs.表单高度）保持平衡，避免一侧过重。

对称：用于导航栏、页脚、产品展示网格。确保核心操作（注册/登录）不处于边缘迷失区。

二、排版原则

1. 可读性与字距

行高（line-height）：正文1.4-1.6倍（如16px字体行高24-28px），标题1.2-1.3倍。

字符间距（letter-spacing）：标题可紧-0.5%至+1%，正文正常（0%）。全大写段需增加+1-2%间距。

行长（measure）：每行40-70字符（中文约20-35字），超出则阅读疲劳。

2. 字体选择与搭配

系统字体优先：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 保证跨设备性能。

配对策略：一个无衬线标题+一个衬线正文；或同一字体家族不同字重。避免超过2种字体。

Web字体性能：使用font-display: swap避免不可见文本闪烁；仅加载所需字重（400、600、700）。

3. 对比与可访问性

颜色对比度：文本与背景至少4.5:1（WCAG AA级）。大号文本（≥24px）3:1。使用工具如Contrast Checker验证。

避免纯黑与纯白：深色文本用#1E1E1E代替#000000，背景用#F7F9FC减少眩光。

不要仅靠颜色传达信息：错误提示同时显示红色边框+错误说明文本。

4. 响应式排版

流体字体：使用clamp()配合视口单位。例如：font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem)。

断点调整：移动端正文16px（最小15px），平板18px，桌面可到20px但不超过阅读舒适区。

标题层级缩放：<h1>移动端28px，桌面端48px；<h2>分别24px和36px。

三、常见陷阱与解决方案

陷阱1：信息过载，首页堆砌过多模块 → 解决：提炼3个核心转化目标（如“产品-案例-联系”），其他内容降级到内页。

陷阱2：窄屏上表格/多列错位 → 解决：小屏幕将多列转为垂直卡片或手风琴折叠，确保不出现水平滚动。

陷阱3：装饰性元素干扰排版 → 解决：背景图案降低透明度（如8-15%），避免与文字重叠区域复杂。

陷阱4：行动号召按钮不明显 → 解决：至少保持40×40px点击区域，与周围元素留白12px以上，使用微阴影提高层次。

四、快速检验清单（设计/开发阶段使用）

页面是否有一种主要的布局模式（F型或Z型）？

栅格列宽是否统一？模块是否贴齐基线？

在375px、768px、1280px下测试，是否有内容溢出或错位？

最重要信息（公司定位/核心产品/咨询按钮）是否在首屏无需滚动即可看到？

任何段落的行宽是否在40-70字符范围内？

所有文本对比度是否通过AA级？

是否使用了超过2种不同的字体家族？

点击目标（按钮/链接）在移动端是否易于点按（不小于44×44px）？

五、行业参考示例

优秀布局：Stripe（卡片网格+非对称图文）、Airbnb（F型搜索流程+大留白）、Dropbox（Z型故事线+清晰行动点）。

排版参考：Medium（纯阅读优化行高/行长）、A List Apart（严苛基线网格）、Stripe Press（字体配对与节奏感）。

最终，公司网站布局与排版需要平衡美学、品牌与任务完成率。建议在开发前使用热图工具（如Hotjar）对低保真原型进行点击测试，或进行A/B对比不同布局下的转化效果。