UI-Patterns 界面设计模式库｜按场景查阅交互范式与截图翻译站点

UI-Patterns 是一个按使用场景整理的界面设计模式库。它少谈抽象原则，多把「让用户确认删除」「引导完成注册」「把价格讲清楚」这类具体问题拆成条目，配上截图与取舍说明。

三类模式

站内把模式分为用户界面设计模式、说服式设计模式，以及验证与商业模式模式。第一类解决操作与信息组织，第二类讨论如何影响用户选择，第三类关注注册、付费与增长环节的设计。三类并置，做产品决策时能同时看到体验与商业两面。

每条模式的结构

• 问题描述：先用一段话说明这类界面要解决什么，读者可对照自己的场景判断是否适用。
• 解决方案：给出常见做法与变体，指出各自适用的条件。
• 示例截图：配真实产品截图，比纯文字描述更容易理解细节。
• 注意事项：列出误用后果与反面案例，避免照搬。

常见场景

表单校验、导航层级、搜索与筛选、空状态、首次使用引导、付费墙与升级提示，这些反复出现的问题在库里都有对应条目。做后台系统的人会常查数据表格与批量操作；做消费产品的人更关注新手引导与订阅转化。把条目当检查清单，评审时能少漏几项。

怎么用这些模式

做新功能时先按场景在库里找同类问题，读一遍问题描述，确认自己遇到的是不是同一件事。再看解决方案的变体，挑一个与产品阶段相称的做法，别一上来就做版本最重的方案。评审时把条目链接附在方案旁，讨论会集中在取舍上，而不是各自凭感觉争论。团队新人按这个路径读十几条，比通读设计原则更快进入状态。

延伸内容

站点另设博客与演讲栏目，讨论设计模式的来由与争议；通讯订阅按期推送新增条目。站方还出过一套卡牌，把常见模式印成实物，用于工作坊讨论，卡牌需另行购买。

使用须知与局限

案例以 Web 与桌面端为主，移动端原生界面的条目偏少，做 App 时要自行迁移。站点更新节奏不快，近几年新兴的对话式界面、AI 助手交互几乎没有覆盖。示例多来自欧美产品，直接搬到中文语境要重新考虑文案长度与信息密度。模式是参考而非规范，照抄容易得到千篇一律的界面，理解其背后的取舍才有用。读的时候不妨连着看三四个相邻模式，边界条件往往藏在对照里。