web-design-patterns

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Design Patterns

网页设计模式

Principle-based patterns for designing website sections that feel human-designed, not AI-generated. Each pattern teaches WHY and WHEN, not just templates to copy.

基于原则的网站板块设计模式，打造具有人工设计质感而非AI生成的页面。每种模式都会讲解设计的原因与适用场景，而非仅提供可复制的模板。

What You Produce

你将产出的内容

Well-designed website sections: heroes, card layouts, CTAs, trust signals, and testimonials that match the business context and avoid the "AI skeleton" look.

设计精良的网站板块：包括Hero区域、卡片布局、CTA、信任标识和客户评价，与业务场景适配，避免出现“AI框架感”。

When to Read Which Reference

不同场景对应参考文档

Building this...	Read this reference
Homepage hero, page headers, landing pages	`references/hero-patterns.md`
Service cards, team grids, pricing tiers, portfolios	`references/card-patterns.md`
Conversion sections, buttons, banner CTAs	`references/cta-patterns.md`
Credibility: badges, licences, reviews, guarantees	`references/trust-signals.md`
Customer reviews, social proof, quote sections	`references/testimonial-patterns.md`

Load on demand — don't read all five for every project. Read the one(s) relevant to the current section.

正在搭建以下内容...	请阅读这份参考文档
首页Hero区域、页面页眉、着陆页	`references/hero-patterns.md`
服务卡片、团队网格、定价层级、作品集	`references/card-patterns.md`
转化板块、按钮、横幅CTA	`references/cta-patterns.md`
可信度相关：徽章、资质证书、评价、保障承诺	`references/trust-signals.md`
客户评价、社交证明、引用板块	`references/testimonial-patterns.md`

按需查阅——无需为每个项目通读全部5份文档，仅阅读与当前板块相关的内容即可。

Cross-Cutting Principles

通用设计原则

These apply to ALL patterns. Internalise these before reading any reference file.

以下原则适用于所有设计模式。在阅读任何参考文档前，请先理解并内化这些原则。

Anti-AI Patterns (Avoid These)

反AI设计模式（需避免）

The "AI skeleton" that signals template-generated design:

The sequence: Hero → trust bar → 3 identical cards → features → stats → CTA → footer
Democratic design: Every element gets equal visual weight, no hierarchy
Perfect symmetry: Everything centred, perfectly aligned, no intentional asymmetry
Identical repetition: All cards same size, same structure, same padding, same shadow
Generic copy: "Learn More" as every CTA, "Quality Service You Can Trust" as every headline
Decoration without purpose: Floating shapes, random gradients, abstract blobs

所谓的“AI框架感”，是模板化设计的典型特征：

固定流程：Hero区域 → 信任栏 → 3个完全相同的卡片 → 功能介绍 → 数据统计 → CTA → 页脚
平均主义设计：所有元素视觉权重一致，无层级区分
过度对称：所有内容居中、完全对齐，无刻意的不对称设计
重复同质化：所有卡片尺寸、结构、内边距、阴影完全相同
通用化文案：所有CTA均使用“了解更多”，所有标题均使用“值得信赖的优质服务”
无意义装饰：悬浮形状、随机渐变、抽象 blob 图形

What Makes Design Feel Human

打造人工设计质感的要点

One element clearly dominates — hierarchy, not democracy
Asymmetry is intentional — not everything centred or balanced
Specific, opinionated copy — "Schedule Your Free Roof Inspection" not "Learn More"
Visual weight guides the eye — you know where to look first, second, third
Restraint — not every technique used, just the ones that serve the purpose
Context-appropriate — emergency plumber looks different from luxury hotel

明确视觉焦点：有一个元素占据主导地位，而非平均分配权重
刻意不对称：并非所有内容都要居中或平衡布局
具体且有立场的文案：使用“预约免费屋顶检测”而非“了解更多”
视觉权重引导视线：用户能清晰知道浏览的先后顺序
克制使用设计技巧：只采用服务于目标的设计手法，而非堆砌所有技巧
适配业务场景：紧急水管维修的页面与豪华酒店的页面风格截然不同

Ethical Rules

伦理准则

Non-negotiable across all patterns:

On lead-gen sites (no real business data), NEVER fabricate:

Star ratings or review counts
Specific years in business
Licence or ABN numbers
Named individuals or team members
Exact customer counts

Safe alternatives for lead-gen:

"Experienced Team" (not "25 Years Experience")
"Highly Rated" (not "4.9 Stars (127 Reviews)")
"Licensed & Insured" (not "QBCC License #1234567")

所有设计模式均需遵守以下不可妥协的准则：

对于无真实业务数据的获客类网站，绝不能伪造以下内容：

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

获客类网站的安全替代表述：

“经验丰富的团队”（而非“25年从业经验”）
“广受好评”（而非“4.9星（127条评价）”）
“具备资质且已投保”（而非“QBCC资质编号 #1234567”）

Business Context Shapes Everything

业务场景决定一切

The same section type looks completely different for different businesses:

Business type	Design feel
Emergency services	Direct, immediate, phone-first
Luxury/hospitality	Spacious, refined, atmospheric
Trades/local services	Trustworthy, capable, genuine
Professional/corporate	Confident, clean, structured
Creative/agency	Distinctive, bold, personality-driven

同一类型的板块，针对不同业务需采用完全不同的设计风格：

业务类型	设计风格
应急服务	直接、即时、以电话为核心
奢侈品/酒店业	开阔、精致、氛围感强
本地服务/手工业	值得信赖、专业可靠、真实接地气
专业服务/企业	自信、简洁、结构清晰
创意机构/工作室	特色鲜明、大胆、充满个性

Quick Pattern Examples

设计模式快速示例

Hero Approaches

Hero区域设计思路

Image-dominant (strong photography available):

Let the image do the work, minimal text
One clear focal point
Text placement within image composition, not slapped on top

Typography-dominant (no strong imagery):

Font choice, size, weight, spacing IS the design
Generous whitespace as active design element
Colour blocking or subtle texture instead of stock photos

Split/balanced (strong copy + strong imagery):

One side dominates slightly — true 50/50 feels indecisive
On mobile, order matters — which element first in vertical stack?

图片主导型（拥有优质摄影素材时）：

让图片成为核心，文字尽量精简
设定清晰的视觉焦点
文字融入图片构图，而非直接叠加在图片上方

排版主导型（无优质图片时）：

字体选择、字号、字重、间距本身就是设计的核心
将充足留白作为主动的设计元素
用色块或微妙纹理替代库存图片

分栏平衡型（同时拥有优质文案与图片时）：

其中一侧需略微占据主导——完全50/50的分栏会显得优柔寡断
在移动端，顺序至关重要——垂直堆叠时哪个元素优先展示？

Card Layout Decision

卡片布局决策要点

Count items first — wrong grid math creates orphan cards
Check hierarchy — is one item more important? Feature it at 2x size
Content density — image-heavy = fewer columns, text-heavy = more columns
Orphan fix — never leave 1 card alone on a row

先统计数量——错误的网格计算会导致孤立的卡片（一行仅存1张）
检查层级——是否有某个内容更重要？可将其设置为2倍尺寸突出展示
内容密度适配——图片密集型内容减少列数，文字密集型内容增加列数
解决孤立卡片问题——绝不能让一行仅剩下1张卡片

CTA Hierarchy

CTA层级设计

Match CTA urgency to business context:

Emergency services: Phone number IS the CTA. Huge, high-contrast, tappable.
Professional services: Lower commitment first. "Book a consultation."
Creative/agency: Relationship-building. "View our work."

Golden rule: Make your case first, then ask for action. CTA appears AFTER value.

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

应急服务：电话号码即为核心CTA。需大尺寸、高对比度、便于点击。
专业服务：先引导低门槛行为。例如“预约咨询”。
创意机构：以建立关系为核心。例如“查看我们的作品”。

黄金法则：先传递价值，再引导行动。CTA应在价值展示之后出现。

Trust Signal Hierarchy

信任标识层级

Tier	Type	Example
1 (Strongest)	Specific, verifiable	"QBCC License #1234567"
2	Third-party validation	"4.8 stars (127 Google Reviews)" + link
3	Self-claimed	"Fully licensed and insured"
4 (Weakest)	Generic assurances	"Quality guaranteed"

One Tier 1 signal beats three Tier 4 signals. Distribute trust throughout the page — don't isolate in one section.

层级	类型	示例
1（最强）	具体可验证	"QBCC资质编号 #1234567"
2	第三方验证	"4.8星（127条谷歌评价）" + 链接
3	自我声明	"具备完整资质且已投保"
4（最弱）	通用保证	"品质保证"

1个1层级的信任标识胜过3个4层级的标识。需将信任标识分散在页面各处——不要集中在一个板块中。

Testimonial Approach

客户评价设计思路

Situation	Approach
One powerful testimonial	Single featured quote, make it big
3-6 good testimonials	Grid with variety, one featured
No real testimonials	Service promises, guarantees, process descriptions

Never use carousels — users see 1 of 5 testimonials, <1% click controls. Show all or curate the best 3.

场景	设计思路
有1条极具说服力的评价	单独突出展示该引用，加大尺寸
有3-6条优质评价	采用网格布局并加入变化，突出其中1条
无真实评价	使用服务承诺、保障条款、流程说明替代

绝不要使用轮播组件——用户仅能看到5条评价中的1条，点击控件的用户不足1%。要么展示全部评价，要么精选最佳的3条。

Reference File Index

参考文档索引

Each reference is a deep-dive (300-470 lines) with full principles, anti-patterns, implementation patterns, and business-specific guidance.

File	Lines	Covers
`hero-patterns.md`	~470	Approach selection, constraint-based creativity, overlay techniques, responsive behaviour, page-specific heroes
`card-patterns.md`	~550	Layout decision framework, anti-sameness strategies, grid math, orphan handling, CSS patterns, business context
`cta-patterns.md`	~420	Action hierarchy, placement strategy, copy principles, visual design, mobile considerations, context-specific CTAs
`trust-signals.md`	~490	Trust psychology, trust hierarchy, context-sensitive trust, lead-gen vs client, placement strategy, anti-patterns
`testimonial-patterns.md`	~350	Social proof psychology, lead-gen ethics, design approach selection, content principles, placement, alternatives

每份参考文档都是深度解析（300-470行内容），包含完整的设计原则、反模式、落地模式及业务场景专属指导。

文件	行数	涵盖内容
`hero-patterns.md`	~470	设计思路选择、基于约束的创意、叠加层技巧、响应式适配、页面专属Hero区域设计
`card-patterns.md`	~550	布局决策框架、避免同质化策略、网格计算、孤立卡片处理、CSS模式、业务场景适配
`cta-patterns.md`	~420	行动层级、放置策略、文案原则、视觉设计、移动端考量、场景专属CTA设计
`trust-signals.md`	~490	信任心理学、信任层级、场景适配型信任标识、获客类vs客户类网站、放置策略、反模式
`testimonial-patterns.md`	~350	社交证明心理学、获客类网站伦理、设计思路选择、内容原则、放置策略、替代方案