Derive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building or expanding a colour system.
中文简介正在准备中。当前显示原文说明。
Nielsen's 10 usability heuristics. Use when auditing an interface, designing interaction flows, writing error messages or reviewing usability.
中文简介正在准备中。当前显示原文说明。
实测评分 未实测
查看安装方法安装前可以查看交给 AI 代理的指令内容。
Foundational principles for evaluating and designing usable interfaces. Apply these as a review checklist and as design constraints from the start — not only as a post-hoc audit tool.
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Users cannot make good decisions without knowing the current state of the system. Trust is built through clear, timely feedback.
In practice:
Review question: After any user action, is the outcome visible within 1 second?
The design should speak the users' language — words, phrases, and concepts familiar to the user, not internal jargon or system terminology.
Follow real-world conventions and natural mapping so the interface feels intuitive rather than requiring translation.
In practice:
Review question: Would a user unfamiliar with this product understand every label and term?
Users often perform actions by mistake. They need a clearly marked emergency exit to leave an unwanted state without going through an extended process.
Easy undo and escape paths foster confidence and prevent users from feeling trapped.
In practice:
Review question: Can the user get out of any state without losing their work or needing to contact support?
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Consistency reduces cognitive load by meeting expectations users have built from other products.
In practice:
Review question: Does the same action always look and behave the same way throughout the product?
Good error messages matter, but the best designs prevent errors from occurring in the first place.
Prevention addresses both slips (unintentional actions) and mistakes (misunderstanding of design intent).
In practice:
Review question: For every destructive or irreversible action, is there a confirmation step or an undo path?
Minimise the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another.
Recognition requires less cognitive effort than recall. Visible affordances reduce the work of using the product.
In practice:
Review question: Does a returning user need to remember anything to pick up where they left off?
Shortcuts — hidden from novice users — may speed up interaction for expert users. The design should serve both.
Accelerators, customisation, and personalisation let experienced users work faster without adding complexity for beginners.
In practice:
Review question: Can a power user complete their most frequent task significantly faster than a first-time user?
Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information competes with relevant information and reduces its relative visibility.
Focus content and visual design on the essentials that support primary user goals. Less is more, only when the less is the right less.
In practice:
Review question: Does every element on screen earn its place, or is something there "just in case"?
Error messages should be expressed in plain language, precisely indicate the problem, and constructively suggest a solution.
Error messages are a UX surface — they deserve the same care as any other UI copy.
In practice:
Review question: Does every error message tell the user what happened, why, and what to do next?
It is best if the system does not need any additional explanation. However, it may be necessary to provide documentation to help users complete tasks.
Help should be contextual, searchable, and actionable — not a last resort buried in a footer.
In practice:
Review question: Can a confused user find help without leaving the current screen?
| # | Heuristic | Check |
|---|---|---|
| 1 | System status | Every action gives visible feedback within 1s |
| 2 | Real-world language | No jargon, terminology matches user vocabulary |
| 3 | User control | Undo available, exit paths always visible |
| 4 | Consistency | Same action = same label and behaviour everywhere |
| 5 | Error prevention | Irreversible actions have confirmation or undo |
| 6 | Recognition over recall | Options visible in context, no hidden commands |
| 7 | Flexibility | Power users have faster paths to frequent tasks |
| 8 | Minimalist design | Every element earns its place |
| 9 | Error recovery | Error messages are plain, specific, and actionable |
| 10 | Help and docs | Help is contextual and available at point of need |
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Derive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building or expanding a colour system.
中文简介正在准备中。当前显示原文说明。
Top bar, sidebar rail, app launcher, tenant and environment cue, status bar. Use when designing the persistent shell, a collapsible sidebar, or navigation between apps behind one login.
中文简介正在准备中。当前显示原文说明。
Product visuals must show the real product with real data. Use when building landing pages, hero sections, screenshots or demo panels.
中文简介正在准备中。当前显示原文说明。
Shape language across type, radius and icons carries brand personality. Use when starting a design system, picking icons or radius tokens, or reviewing visual consistency.
中文简介正在准备中。当前显示原文说明。
Rest, hover, active, focus, disabled and loading states, derived from the base colour. Use when designing buttons, links, inputs or any clickable component.
中文简介正在准备中。当前显示原文说明。
Rebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it. Use when reproducing a page or checking a rebuild against the original.
中文简介正在准备中。当前显示原文说明。