常用组件有哪些

下拉、步骤条、分页、抽屉，先认全再谈选哪个。

组件是前人对常见问题的固定答案。认得全，你的选择就是从几个成熟方案里挑一个，而不是每次从头想。图形界面几十年沉淀下来的这套组件清单，几乎是行业共识，值得先认全再动手。gui-elements-wiki

你会遇到的现象：

• 描述界面时只会说「加个框」「加个按钮」，做出来跟想的不一样
• 选了个不合适的组件，用户操作起来别扭但说不清哪里不对
• 同样的问题，产品里三个地方用了三种不同的组件

按问题认组件

按问题记比按名字记有用。真正要练的是看到一个需求，能立刻说出「这是从一组里选一个的问题」。另外记住：组件库不是越全越好，先认全再精简——选型是减法，不是加法。

几组容易选错的

• **下拉还是单选按钮。**选项少于五个用单选按钮，一眼全看见；多于五个用下拉，省空间。超过二十个要加搜索。
• **弹窗还是抽屉。**需要用户立刻做决定、且决定影响主流程，用弹窗；只是补充信息或做次要编辑，用抽屉——它不打断上下文。
• **分页还是无限滚动。**需要精确定位、需要回到某一页，用分页；随便浏览、没有明确终点，用无限滚动。后台系统几乎都该用分页。
• **表格还是卡片。**字段多、要对比、要排序，用表格；字段少、有图、移动端，用卡片。表格在手机上基本不可用。
• **步骤条还是一页到底。**步骤之间有依赖、或者字段超过十个，用步骤条；否则一页填完更快。

每个组件都有状态

组件不是一个静态样式，是一组状态。选定组件之后，这几个状态要一并想清楚：默认、悬停、按下、聚焦、不可点、处理中——输入框还要多两个：报错态和只读态。列表要多四个：空、加载、出错、有数据。

**「聚焦」这个状态最常被漏掉，而它决定了键盘用户能不能用你的产品。**AI 生成的组件里，disabled 和 focus 是最容易缺的两个，写代码时专门补一句，成本为零。

**怎么检查组件选得对不对。**把产品里所有用到同一种交互的地方截出来放成一排看：同一个动作在三个页面用了三种组件，就是该统一的信号。反过来，同一个组件出现在两种含义不同的场景里——比如「关闭」和「删除」共用同一个弹窗——就该拆成两个，因为用户无法从样式上预判后果。