web-design-patterns
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseWeb 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 | |
| Service cards, team grids, pricing tiers, portfolios | |
| Conversion sections, buttons, banner CTAs | |
| Credibility: badges, licences, reviews, guarantees | |
| Customer reviews, social proof, quote sections | |
Load on demand — don't read all five for every project. Read the one(s) relevant to the current section.
| 正在搭建以下内容... | 请阅读这份参考文档 |
|---|---|
| 首页Hero区域、页面页眉、着陆页 | |
| 服务卡片、团队网格、定价层级、作品集 | |
| 转化板块、按钮、横幅CTA | |
| 可信度相关：徽章、资质证书、评价、保障承诺 | |
| 客户评价、社交证明、引用板块 | |
按需查阅——无需为每个项目通读全部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 |
|---|---|---|
| ~470 | Approach selection, constraint-based creativity, overlay techniques, responsive behaviour, page-specific heroes |
| ~550 | Layout decision framework, anti-sameness strategies, grid math, orphan handling, CSS patterns, business context |
| ~420 | Action hierarchy, placement strategy, copy principles, visual design, mobile considerations, context-specific CTAs |
| ~490 | Trust psychology, trust hierarchy, context-sensitive trust, lead-gen vs client, placement strategy, anti-patterns |
| ~350 | Social proof psychology, lead-gen ethics, design approach selection, content principles, placement, alternatives |
每份参考文档都是深度解析（300-470行内容），包含完整的设计原则、反模式、落地模式及业务场景专属指导。
| 文件 | 行数 | 涵盖内容 |
|---|---|---|
| ~470 | 设计思路选择、基于约束的创意、叠加层技巧、响应式适配、页面专属Hero区域设计 |
| ~550 | 布局决策框架、避免同质化策略、网格计算、孤立卡片处理、CSS模式、业务场景适配 |
| ~420 | 行动层级、放置策略、文案原则、视觉设计、移动端考量、场景专属CTA设计 |
| ~490 | 信任心理学、信任层级、场景适配型信任标识、获客类vs客户类网站、放置策略、反模式 |
| ~350 | 社交证明心理学、获客类网站伦理、设计思路选择、内容原则、放置策略、替代方案 |