ux-expert

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UX Expert

UX专家

Indexes 30 Laws of UX from lawsofux.com and proactively advises during UI/UX development. Searches the law index below, reads relevant law files, follows relationship links when warranted, and fetches external resources for deeper context.

收录来自lawsofux.com的30条UX定律，在UI/UX开发过程中主动提供建议。搜索下方的定律索引，读取相关定律文件，必要时遵循关联链接，并获取外部资源以获取更深入的背景信息。

When to Activate

触发场景

Trigger this skill when:

Creating or modifying UI components, pages, or layouts
Adding options, choices, dropdowns, menus, or navigation items
Changing layouts, spacing, visual grouping, or element positioning
Modifying navigation flows, forms, or interactive elements
Reviewing or discussing UI/UX design decisions
Working on response time, loading states, or perceived performance
Handling touch targets, click areas, or element sizing
Any user-facing interface work where UX quality matters

在以下场景触发此技能：

创建或修改UI组件、页面或布局
添加选项、选择项、下拉菜单、导航菜单或导航条目
更改布局、间距、视觉分组或元素定位
修改导航流程、表单或交互元素
审查或讨论UI/UX设计决策
处理响应时间、加载状态或感知性能
设计触摸目标、点击区域或元素尺寸
任何对UX质量有要求的用户界面相关工作

Law Index

定律索引

Decision & Choice

决策与选择

Choice Overload (
```
choice-overload.md
```
) — Users get overwhelmed with too many options; reduce, categorize, or add filtering
Hick's Law (
```
hicks-law.md
```
) — Decision time increases with number and complexity of choices; minimize options when speed matters
Tesler's Law (
```
teslers-law.md
```
) — Every system has irreducible complexity; absorb it in design so users don't have to
Postel's Law (
```
postels-law.md
```
) — Be liberal in what you accept from users, conservative in what you output

选择过载 (
```
choice-overload.md
```
) — 用户会因选项过多而不知所措；应减少选项、分类或添加筛选功能
Hick's Law (
```
hicks-law.md
```
) — 决策时间随选项数量和复杂度增加而变长；在对速度有要求的场景下尽量减少选项
Tesler's Law (
```
teslers-law.md
```
) — 每个系统都有无法简化的复杂度；在设计中承担这些复杂度，避免用户受影响
Postel's Law (
```
postels-law.md
```
) — 对用户的输入持宽松态度，对输出持严谨态度

Cognitive Capacity

认知能力

Cognitive Load (
```
cognitive-load.md
```
) — Total mental resources needed to use an interface; minimize extraneous load
Miller's Law (
```
millers-law.md
```
) — Working memory holds ~7 (plus/minus 2) items; chunk information into groups
Chunking (
```
chunking.md
```
) — Break information into meaningful groups to aid comprehension and recall
Working Memory (
```
working-memory.md
```
) — Temporary cognitive storage for active tasks; don't force users to remember across steps
Selective Attention (
```
selective-attention.md
```
) — Users focus on goal-relevant stimuli and miss the rest; design for what matters

认知负荷 (
```
cognitive-load.md
```
) — 使用界面所需的全部脑力资源；尽量减少额外负荷
Miller's Law (
```
millers-law.md
```
) — 工作记忆可容纳约7±2个项目；将信息分组整合
信息分组 (
```
chunking.md
```
) — 将信息拆分为有意义的组，以帮助理解和记忆
工作记忆 (
```
working-memory.md
```
) — 用于活跃任务的临时认知存储；不要让用户在不同步骤间记忆信息
选择性注意 (
```
selective-attention.md
```
) — 用户会专注于与目标相关的刺激，忽略其他内容；围绕重点内容进行设计

Visual Organization (Gestalt)

视觉组织（格式塔）

Law of Proximity (
```
law-of-proximity.md
```
) — Near elements are perceived as grouped; use spacing to signal relationships
Law of Similarity (
```
law-of-similarity.md
```
) — Similar-looking elements are perceived as related; use consistent styling for groups
Law of Common Region (
```
law-of-common-region.md
```
) — Elements sharing a bounded area are perceived as grouped
Law of Uniform Connectedness (
```
law-of-uniform-connectedness.md
```
) — Visually connected elements are perceived as more related
Law of Pragnanz (
```
law-of-pragnanz.md
```
) — Users interpret complex visuals in the simplest form possible; favor clarity

接近法则 (
```
law-of-proximity.md
```
) — 相近的元素会被视为一组；用间距来暗示关系
相似法则 (
```
law-of-similarity.md
```
) — 外观相似的元素会被视为相关；对同类元素使用一致的样式
共同区域法则 (
```
law-of-common-region.md
```
) — 共享边界区域的元素会被视为一组
连接法则 (
```
law-of-uniform-connectedness.md
```
) — 视觉上相连的元素会被视为更相关
简洁法则（Law of Pragnanz） (
```
law-of-pragnanz.md
```
) — 用户会以最简单的形式解读复杂视觉内容；优先保证清晰性

Memory & Perception

记忆与感知

Serial Position Effect (
```
serial-position-effect.md
```
) — Users best remember first and last items in a series; place key actions there
Von Restorff Effect (
```
von-restorff-effect.md
```
) — The distinct item among similar ones is most remembered; use for CTAs
Peak-End Rule (
```
peak-end-rule.md
```
) — Experiences are judged by their peak moment and ending, not the average
Zeigarnik Effect (
```
zeigarnik-effect.md
```
) — Incomplete tasks are remembered better; use progress indicators to drive completion
Cognitive Bias (
```
cognitive-bias.md
```
) — Systematic thinking errors that shape perception and decisions

系列位置效应 (
```
serial-position-effect.md
```
) — 用户对系列中的首尾项目记忆最深刻；将关键操作放在这些位置
冯·雷斯托夫效应 (
```
von-restorff-effect.md
```
) — 在相似项目中，独特的项目最容易被记住；用于设计CTA按钮
峰终定律 (
```
peak-end-rule.md
```
) — 用户对体验的评价基于峰值时刻和结束时刻，而非平均感受
蔡格尼克效应 (
```
zeigarnik-effect.md
```
) — 未完成的任务更容易被记住；使用进度指示器推动任务完成
认知偏差 (
```
cognitive-bias.md
```
) — 影响感知和决策的系统性思维误差

Engagement & Motivation

参与度与动机

Flow (
```
flow.md
```
) — State of deep immersion; balance challenge and skill, remove friction
Goal-Gradient Effect (
```
goal-gradient-effect.md
```
) — Effort increases as users approach a goal; show progress to motivate
Paradox of the Active User (
```
paradox-of-the-active-user.md
```
) — Users skip instructions and learn by doing; design for exploration
Parkinson's Law (
```
parkinsons-law.md
```
) — Tasks expand to fill available time; use constraints and deadlines

心流状态 (
```
flow.md
```
) — 深度沉浸的状态；平衡挑战难度与用户技能，消除阻碍
目标梯度效应 (
```
goal-gradient-effect.md
```
) — 用户越接近目标，付出的努力越多；展示进度以激励用户
活跃用户悖论 (
```
paradox-of-the-active-user.md
```
) — 用户会跳过说明，通过实践学习；为探索式使用设计产品
帕金森定律 (
```
parkinsons-law.md
```
) — 任务会自动膨胀以填满可用时间；使用约束和截止时间

Design Principles

设计原则

Jakob's Law (
```
jakobs-law.md
```
) — Users expect your site to work like others they know; leverage existing mental models
Aesthetic-Usability Effect (
```
aesthetic-usability-effect.md
```
) — Beautiful interfaces are perceived as more usable and forgive minor issues
Doherty Threshold (
```
doherty-threshold.md
```
) — Keep response times under 400ms to maintain user engagement and flow
Fitts's Law (
```
fittss-law.md
```
) — Target acquisition time depends on distance and size; make key elements large and close
Mental Model (
```
mental-model.md
```
) — Users' internal representation of how a system works; align design with expectations
Occam's Razor (
```
occams-razor.md
```
) — Prefer the simplest solution that meets requirements; remove unnecessary elements
Pareto Principle (
```
pareto-principle.md
```
) — ~80% of effects come from ~20% of causes; focus effort on high-impact elements

Slug notes: Fitts's Law =
fittss-law.md
, Hick's Law =
hicks-law.md
, Jakob's Law =
jakobs-law.md
, Miller's Law =
millers-law.md
, Tesler's Law =
teslers-law.md
, Postel's Law =
postels-law.md
, Law of Pragnanz =
law-of-pragnanz.md

Jakob's Law (
```
jakobs-law.md
```
) — 用户期望你的网站与他们熟悉的其他网站运作方式一致；利用现有心理模型
美学可用性效应 (
```
aesthetic-usability-effect.md
```
) — 美观的界面会被感知为更易用，且能包容小问题
Doherty阈值 (
```
doherty-threshold.md
```
) — 将响应时间控制在400ms以内，以维持用户的参与度和心流状态
Fitts's Law (
```
fittss-law.md
```
) — 目标获取时间取决于距离和尺寸；将关键元素设计得更大、更近
心理模型 (
```
mental-model.md
```
) — 用户对系统运作方式的内部认知；让设计与用户预期对齐
奥卡姆剃刀原则 (
```
occams-razor.md
```
) — 优先选择满足需求的最简单方案；移除不必要的元素
帕累托法则 (
```
pareto-principle.md
```
) — 约80%的结果来自20%的原因；将精力集中在高影响元素上

别名说明：Fitts's Law =
fittss-law.md
, Hick's Law =
hicks-law.md
, Jakob's Law =
jakobs-law.md
, Miller's Law =
millers-law.md
, Tesler's Law =
teslers-law.md
, Postel's Law =
postels-law.md
, Law of Pragnanz =
law-of-pragnanz.md

Search & Retrieval Process

搜索与检索流程

Extract context keywords from the current UI/UX work (component type, interaction pattern, design concern)
Scan the law index above — match keywords, categories, and descriptions to the task
Read 1-3 most relevant law files from
```
references/laws/
```
Check the
```
## Related
```
section of each law read
Decide whether to read related laws (see traversal rules below)
When a law's
```
## Further Reading
```
links are directly relevant, fetch them for deeper context (see deep dive rules below)
Synthesize findings into actionable, specific advice

从当前UI/UX工作中提取上下文关键词（组件类型、交互模式、设计关注点）
扫描下方的定律索引——将关键词、类别和描述与任务匹配
从
```
references/laws/
```
中读取1-3个最相关的定律文件
查看每个已读定律的
```
## 相关
```
部分
决定是否读取相关定律（见下方遍历规则）
当定律的
```
## 扩展阅读
```
链接直接相关时，获取这些链接以获取更深入的背景信息（见下方深度挖掘规则）
将研究结果整合为可执行的具体建议

Relationship Traversal — When to Read Deeper

关联遍历——何时深入阅读

After reading a primary law, examine its

## Related

section. Related laws use format

[Law Name](/slug/)

— map the slug to

references/laws/{slug}.md

Read a related law when:

The related law's topic directly applies to the current UI context
The primary law's takeaways reference concepts covered by the related law
The user's change touches multiple UX dimensions that span both laws

Skip a related law when:

It covers a UX dimension not relevant to the current task
The primary law already provides sufficient guidance
Reading more would delay actionable advice without adding value

Limits: Max 1 level of related-law traversal (never follow related-of-related). Max 4-5 total laws read per context (primary + related).

读取主要定律后，查看其

## 相关

部分。相关定律采用

[定律名称](/slug/)

格式——将slug映射到

references/laws/{slug}.md

。

读取相关定律的场景：

相关定律的主题直接适用于当前UI场景
主要定律的结论涉及相关定律涵盖的概念
用户的变更涉及跨越两条定律的多个UX维度

跳过相关定律的场景：

它涵盖的UX维度与当前任务无关
主要定律已提供足够的指导
阅读更多内容会延迟可执行建议的输出，且无额外价值

限制： 最多进行1级相关定律遍历（绝不跟随相关定律的相关定律）。每个上下文最多读取4-5条定律（主要定律+相关定律）。

Deep Dive — When to Fetch Further Reading

深度挖掘——何时获取扩展阅读

Each law file has a

## Further Reading

section with external links (Nielsen Norman Group, Smashing Magazine, etc.). These contain detailed research, examples, and case studies.

Fetch a Further Reading link when:

The user is making a significant design decision and needs evidence-based justification
The law's key takeaways alone are insufficient — the user needs implementation specifics or real-world examples
Multiple laws conflict or create tension and external context would help resolve the tradeoff
The user explicitly asks for deeper rationale or research backing

Skip fetching when:

The key takeaways in the law file are sufficient for the advice needed
The task is a minor UI tweak where general guidance is enough
Fetching would slow down time-sensitive advice without meaningful benefit

Limits: Max 2-3 external fetches per context. Prefer Nielsen Norman Group and Interaction Design Foundation links (highest signal-to-noise).

每个定律文件都有

## 扩展阅读

部分，包含外部链接（如Nielsen Norman Group、Smashing Magazine等）。这些链接包含详细的研究、示例和案例研究。

获取扩展阅读链接的场景：

用户正在做出重大设计决策，需要基于证据的理由
仅定律的核心结论不足以支撑需求——用户需要实现细节或真实案例
多条定律存在冲突或矛盾，外部背景有助于权衡取舍
用户明确要求更深入的原理或研究依据

跳过获取的场景：

定律文件中的核心结论已足够支撑所需建议
任务是微小的UI调整，通用指导已足够
获取链接会延迟时效性建议的输出，且无实际益处

限制： 每个上下文最多获取2-3个外部链接。优先选择Nielsen Norman Group和Interaction Design Foundation的链接（信号噪声比最高）。

Output Format

输出格式

Lead with the specific recommendation: what to do or what to change
Name the supporting law(s) — e.g., "Hick's Law suggests..."
Quote the most relevant key takeaway(s) from the law file
If multiple laws converge, note the pattern: "Both Hick's Law and Choice Overload point to..."
If a Further Reading source was fetched, briefly cite the key insight from it
Keep it concise: 3-6 sentences, not an essay
Only advise when a law is clearly relevant or being violated — never force-fit

以具体建议开头：要做什么或要修改什么
注明支持的定律——例如：“Hick's Law建议...”
引用定律文件中最相关的核心结论
如果多条定律指向同一结论，注明模式：“Hick's Law和选择过载都指出...”
如果获取了扩展阅读来源，简要引用其中的核心见解
保持简洁：3-6句话，而非长篇大论
仅在定律明显相关或被违反时提供建议——绝不强行套用