web-design-patterns

Web 设计模式

基于原则的模式，用于设计看起来由人类而非 AI 生成的网站版块。每种模式都会讲解原因和适用时机，而不只是提供可照搬的模板。

你将产出什么

精心设计的网站版块：首屏、卡片布局、CTA、信任信号和客户评价，并与业务情境相符，避免呈现出“AI 骨架”的感觉。

何时阅读哪篇参考文档

正在构建……	阅读此参考文档
首页首屏、页面标题、着陆页	references/hero-patterns.md
服务卡片、团队网格、定价层级、作品集	references/card-patterns.md
转化版块、按钮、横幅 CTA	references/cta-patterns.md
可信度：徽章、许可证、评价、保证	references/trust-signals.md
客户评价、社会认同、引述版块	references/testimonial-patterns.md

按需加载——不要每个项目都阅读全部五篇。阅读与当前版块相关的文档。

跨模式原则

这些原则适用于所有模式。阅读任何参考文件前，请先牢记这些原则。

反 AI 模式（应避免）

会暴露模板生成设计的“AI 骨架”：

1. 固定顺序：首屏 → 信任栏 → 3 张相同卡片 → 功能 → 数据统计 → CTA → 页脚
2. 平均主义设计：每个元素的视觉权重都相同，没有层级
3. 完美对称：所有内容居中、对齐得完美无瑕，没有刻意的不对称
4. 千篇一律的重复：所有卡片大小、结构、内边距和阴影都相同
5. 通用文案：每个 CTA 都写“了解更多”，每个标题都写“值得信赖的优质服务”
6. 没有目的的装饰：悬浮图形、随机渐变、抽象色块

让设计更显人性化的要素

1. 有一个元素明显占据主导地位——讲究层级，而非平均分配
2. 不对称是有意为之——并非所有内容都要居中或平衡
3. 文案具体且有主见——“预约免费屋顶检查”，而非“了解更多”
4. 视觉权重引导视线——让人知道先看哪里、再看哪里、最后看哪里
5. 有所克制——不必用上所有技巧，只用能服务于目的的技巧
6. 契合具体情境——紧急水管维修服务与豪华酒店的设计截然不同

道德规范

所有模式都必须遵守以下原则：

对于没有真实业务数据的获客网站，绝对不要编造：

• 星级评分或评价数量
• 具体的经营年限
• 许可证或 ABN 编号
• 具名的个人或团队成员
• 精确的客户数量

获客网站可采用的安全替代说法：

• “经验丰富的团队”（而非“25 年经验”）
• “广受好评”（而非“4.9 星（127 条评价）”）
• “持证并已投保”（而非“QBCC 许可证编号 1234567”）

业务情境决定一切

同一种版块类型在不同业务中的呈现会截然不同：

业务类型	设计风格
紧急服务	直接、迅速、以电话联系为先
奢华／酒店服务	宽敞、精致、富有氛围
技工／本地服务	可信、有能力、真诚
专业／企业服务	自信、简洁、有条理
创意／代理机构	独特、大胆、彰显个性

快速模式示例

首屏设计思路

图片主导（有高质量摄影作品时）：

• 让图片发挥作用，文字尽量精简
• 设置一个明确的视觉焦点
• 文字应融入图片构图，而非简单叠加在上面

文字主导（没有出色图片时）：

• 字体选择、字号、字重、间距本身就是设计
• 将充足留白作为积极的设计元素
• 使用色块或细腻纹理，而非图库照片

分栏／平衡（文案和图片都很出色时）：

• 一侧应略占主导——真正的五五分会显得犹豫不决
• 在移动端，排列顺序很重要——纵向排列时哪个元素应放在前面？

卡片布局决策

1. 先统计项目数——网格计算错误会导致卡片落单
2. 检查层级——是否有某个项目更重要？将其放大到 2 倍
3. 内容密度——图片多 = 列数少，文本多 = 列数多
4. 处理落单卡片——不要让 1 张卡片单独占据一行

CTA 层级

根据业务场景匹配 CTA 的紧迫程度：

• 紧急服务：电话号码就是 CTA。要醒目、高对比度且可点击。
• 专业服务：先降低承诺门槛。“预约咨询。”
• 创意/代理机构：以建立关系为主。“查看我们的作品。”

黄金法则：先说明理由，再请求采取行动。CTA 应出现在价值之后。

信任信号层级

层级	类型	示例
1（最强）	具体、可核实	“QBCC License #1234567”
2	第三方认可	“4.8 星（127 条 Google Reviews）” + 链接
3	自我声明	“持有完整执照并已投保”
4（最弱）	泛泛的保证	“保证品质”

1 个第 1 层级信号胜过 3 个第 4 层级信号。将信任信号分布在整个页面中——不要只放在一个版块里。

客户评价的处理方式

情况	处理方式
有 1 条有力的客户评价	单独展示重点引述，并放大呈现
有 3-6 条优质客户评价	采用多样化网格，其中 1 条重点展示
没有真实客户评价	展示服务承诺、保证和流程说明

切勿使用轮播——用户只能看到 5 条评价中的 1 条，点击控件的比例不到 1%。全部展示，或精选最佳的 3 条。

参考文件索引

每份参考文件都是一份深入指南（300-470 行），包含完整原则、反模式、实现模式和针对具体业务的指导。

文件	行数	内容
hero-patterns.md	~470	方案选择、基于约束的创意、叠加技巧、响应式表现、针对不同页面的 Hero
card-patterns.md	~550	布局决策框架、避免雷同的策略、网格计算、落单卡片处理、CSS 模式、业务场景
cta-patterns.md	~420	行动层级、位置策略、文案原则、视觉设计、移动端注意事项、针对不同场景的 CTA
trust-signals.md	~490	信任心理学、信任层级、因场景而异的信任、潜在客户开发与客户、位置策略、反模式
testimonial-patterns.md	~350	社会认同心理学、潜在客户开发伦理、设计方案选择、内容原则、位置、替代方案