# CatchUI: full product and catalog context

Last updated: 2026-08-02
Canonical URL: https://catchui.com/

## What CatchUI is

CatchUI is a bilingual UI vocabulary learning web app. A user provides an app, website, or dashboard screenshot. Model-assisted recognition locates reusable interface patterns, assigns the most precise conventional UI/UX names supported by visible evidence, and returns explanations. Users can save useful patterns and their screenshot examples as cards in a personal Library, then review the names with spaced repetition.

## What CatchUI is not

- It is not a screenshot-to-code generator.
- It does not clone or recreate an uploaded interface.
- It is not a generic design-inspiration gallery.
- Recognition is probabilistic, not an authoritative design audit.

## Who it is for

- Design students and career-switchers building UI vocabulary
- Product managers who need precise interface terminology
- Developers communicating with designers
- Designers documenting or reviewing interface patterns

## How the product works

1. Upload an interface screenshot or open the built-in sample.
2. CatchUI identifies one or more recognizable UI patterns and shows the visible evidence behind each label.
3. Open the linked catalog cards to learn names, definitions, related patterns, and usage tradeoffs.
4. Save useful cards and screenshot examples to a personal Library.
5. Review saved cards with spaced repetition.

## Access, pricing, and limitations

- The public catalog and built-in sample can be used without signing up.
- Pricing: the catalog and built-in sample are free without sign-up; anonymous visitors can run up to 3 screenshot scans per day; a free account includes a 30-scan pool; CatchUI Pro is $6/month or $60/year and includes 300 scans per day.
- The interface is available in English and Simplified Chinese.
- Model-assisted recognition can make mistakes; catalog definitions are curated and users can correct detected names.
- Uploaded screenshots may contain private information, so users should review the Privacy Policy before scanning sensitive material.

## Canonical links

- Product facts and FAQ: https://catchui.com/about
- Scan: https://catchui.com/scan
- Catalog: https://catchui.com/catalog
- Privacy: https://catchui.com/legal/privacy.html
- Terms: https://catchui.com/legal/terms.html

## Curated UI pattern catalog (28 entries)

### Segmented control (#048)

- Canonical URL: https://catchui.com/catalog/segmented
- Family: NAV
- Also called: segmented button, segment control
- English definition: A row of equal buttons where exactly one wins at a time. Best for 2–5 flat views of the same thing — never for actions.
- Chinese name: 分段控制器
- Chinese definition: 一排等宽按钮，同一时刻只有一个胜出。最适合 2–5 个平级视图之间的切换——千万别拿它放操作。
- Related patterns: Tab bar, Toggle switch, Radio group

### Tab bar (#047)

- Canonical URL: https://catchui.com/catalog/tabbar
- Family: NAV
- Also called: bottom navigation bar, bottom app bar, bottom bar
- English definition: The app's whole map in one strip — three to five destinations, always visible, never scrolling away.
- Chinese name: 标签栏
- Chinese definition: 把整个应用的地图收进一条横栏——三到五个目的地，始终可见，永不滚走。
- Related patterns: Segmented control, Hamburger menu, Breadcrumb

Q: What is the bar at the bottom of an app called?
A: It is called a tab bar on iOS and a bottom navigation bar (or bottom app bar) in Android’s Material Design. It keeps three to five top-level destinations visible on every screen.

Q: What is a tab bar in an app?
A: A tab bar is the persistent strip of three to five icons at the bottom of a mobile app. Each icon is a top-level destination, and exactly one is active at a time.

### Breadcrumb (#049)

- Canonical URL: https://catchui.com/catalog/breadcrumb
- Family: NAV
- English definition: The trail of where you are: every ancestor is a link, the current page is plain text. If users never go deep, don't scatter crumbs.
- Chinese name: 面包屑导航
- Chinese definition: 标记你身在何处的足迹：每个上级都是链接，当前页只是文字。如果用户根本不会走深，就别撒面包屑。
- Related patterns: Tab bar, Pagination, Hamburger menu

### Pagination (#050)

- Canonical URL: https://catchui.com/catalog/pagination
- Family: NAV
- English definition: Numbered stops through a long list, with previous and next as bookends. Users trade endless scroll for a sense of place.
- Chinese name: 分页
- Chinese definition: 给长列表设下带编号的站点，「上一页」「下一页」守在两端。用户放弃无限滚动，换来一份位置感。
- Related patterns: Breadcrumb, Data table, Carousel

### Hamburger menu (#051)

- Canonical URL: https://catchui.com/catalog/hamburger-menu
- Family: NAV
- Also called: hamburger icon, three-line menu, menu icon
- English definition: Three stacked lines hiding the whole navigation behind one tap. Saves space, costs discoverability — everything inside is out of sight.
- Chinese name: 汉堡菜单
- Chinese definition: 三条横线，把整套导航藏进一次点击里。省下了空间，赔上了可发现性——藏起来的东西就是没人看。
- Related patterns: Tab bar, Action sheet, Accordion

Q: What are the three horizontal lines in an app called?
A: That icon is the hamburger menu (or hamburger icon): three stacked lines that open the app’s hidden navigation. The name comes from its resemblance to a bun-patty-bun.

### Toggle switch (#046)

- Canonical URL: https://catchui.com/catalog/toggle
- Family: INPUT
- English definition: An instant on/off for a single setting. If the change doesn't take effect immediately, it should be a checkbox instead.
- Chinese name: 开关
- Chinese definition: 单个设置的即时开/关。如果改动不是立刻生效，那它应该是个复选框。
- Related patterns: Checkbox, Radio group, Stepper

### Search field (#045)

- Canonical URL: https://catchui.com/catalog/search
- Family: INPUT
- English definition: A pill-shaped prompt for queries. The little magnifier is one of the few icons everyone reads instantly.
- Chinese name: 搜索框
- Chinese definition: 药丸形状的查询入口。小放大镜是极少数人人秒懂的图标之一。
- Related patterns: Filter chips, Pagination, Empty state

### Stepper (#043)

- Canonical URL: https://catchui.com/catalog/stepper
- Family: INPUT
- English definition: Two buttons joined at the hip for small, precise adjustments — quantities, copies, guests.
- Chinese name: 步进器
- Chinese definition: 两个连体按钮，负责小而精确的加减——数量、份数、人数。
- Related patterns: Slider, Toggle switch, Checkbox

### Checkbox (#052)

- Canonical URL: https://catchui.com/catalog/checkbox
- Family: INPUT
- English definition: A small square that collects independent yes/no answers — any number can be ticked at once. The deferred cousin of the toggle: nothing happens until you submit.
- Chinese name: 复选框
- Chinese definition: 收集独立是/否回答的小方块，想勾几个勾几个。它是开关的「延迟版表亲」：不提交，什么都不会发生。
- Related patterns: Toggle switch, Radio group, Filter chips

### Radio group (#053)

- Canonical URL: https://catchui.com/catalog/radio-group
- Family: INPUT
- English definition: Round buttons where picking one releases the others — exactly one answer from a visible set. Named after mechanical car-radio presets.
- Chinese name: 单选组
- Chinese definition: 圆形按钮，选中一个就弹起其他——在可见选项里恰好选一个。名字来自老式车载收音机的机械选台键。
- Related patterns: Checkbox, Segmented control, Toggle switch

### Slider (#054)

- Canonical URL: https://catchui.com/catalog/slider
- Family: INPUT
- English definition: A thumb dragged along a track to pick a value in a range. Great for rough, feel-based settings; terrible when the exact number matters.
- Chinese name: 滑块
- Chinese definition: 沿轨道拖动的滑钮，在范围里凭感觉取值。适合「差不多就行」的设置；一旦数值要精确，它就是灾难。
- Related patterns: Stepper, Progress bar, Toggle switch

### Date picker (#055)

- Canonical URL: https://catchui.com/catalog/date-picker
- Family: INPUT
- English definition: A pop-open calendar for choosing a day without typing it. The moment ranges or availability rules appear, this pattern earns its complexity.
- Chinese name: 日期选择器
- Chinese definition: 弹出的日历，免打字选日期。一旦涉及区间或可约规则，它的复杂度就都值了。
- Related patterns: Modal dialog, Filter chips, Stepper

### Filter chips (#056)

- Canonical URL: https://catchui.com/catalog/chip-filter
- Family: INPUT
- English definition: Small rounded tokens that toggle facets of a list on and off. The active set doubles as a summary of what you're looking at.
- Chinese name: 筛选标签
- Chinese definition: 小圆角标签，一开一关切换列表的筛选维度。当前选中的组合，顺便就是「你在看什么」的摘要。
- Related patterns: Search field, Checkbox, Badge

### Floating action button (#057)

- Canonical URL: https://catchui.com/catalog/fab
- Family: ACTION
- Also called: FAB, floating button
- English definition: One round button floating above everything, reserved for the screen's single most important action. Two FABs means zero priorities.
- Chinese name: 悬浮操作按钮
- Chinese definition: 悬浮在一切之上的圆按钮，只留给整屏最重要的那一个操作。出现两个 FAB，等于没有重点。
- Related patterns: Button group, Tab bar, Toast

Q: What is the round floating button in the corner of an app called?
A: A floating action button (FAB), a Material Design pattern — a circular button hovering above the content, reserved for the screen’s single most important action.

### Button group (#058)

- Canonical URL: https://catchui.com/catalog/button-group
- Family: ACTION
- English definition: Related actions lined up shoulder to shoulder, sharing borders and importance. When one matters most, it gets the filled style — the rest stay quiet.
- Chinese name: 按钮组
- Chinese definition: 一组相关操作肩并肩排开，共享边框与分量。最重要的那个用实底样式，其余保持安静。
- Related patterns: Segmented control, Floating action button, Action sheet

### Bottom sheet (#044)

- Canonical URL: https://catchui.com/catalog/bottomsheet
- Family: OVERLAY
- Also called: bottom drawer, slide-up panel, sheet
- English definition: A card that slides up over the screen for a quick sub-task while keeping the parent visible.
- Chinese name: 底部抽屉
- Chinese definition: 从底部滑上来的卡片，处理一个快速子任务，同时让父级界面保持可见。
- Related patterns: Modal dialog, Action sheet, Toast

Q: What is the panel that slides up from the bottom of the screen called?
A: A bottom sheet — a card that rises from the bottom edge to handle a quick sub-task while the parent screen stays visible behind it. iOS calls it a sheet; Material Design distinguishes standard and modal bottom sheets.

### Modal dialog (#059)

- Canonical URL: https://catchui.com/catalog/modal
- Family: OVERLAY
- Also called: modal window, dialog box, popup dialog
- English definition: A window that dims the world and demands an answer before anything else can happen. Powerful and rude — spend it only on decisions that truly block.
- Chinese name: 模态对话框
- Chinese definition: 把全世界调暗、逼你先回答的窗口。强力而无礼——只花在真正卡住流程的决定上。
- Related patterns: Bottom sheet, Action sheet, Tooltip

Q: What is the popup window that blocks the rest of the page called?
A: A modal dialog: it dims the page and requires an answer before anything else can happen. If it can be dismissed by clicking anywhere else, it is closer to a non-modal dialog or popover.

### Action sheet (#060)

- Canonical URL: https://catchui.com/catalog/action-sheet
- Family: OVERLAY
- English definition: A slide-up list of verbs answering one question: "what do you want to do with this?" Destructive options sit apart, dressed in red.
- Chinese name: 操作面板
- Chinese definition: 从底部滑出的动词清单，只回答一个问题：「你想对它做什么？」危险操作单独隔开，穿一身红。
- Related patterns: Bottom sheet, Modal dialog, Button group

### Tooltip (#061)

- Canonical URL: https://catchui.com/catalog/tooltip
- Family: OVERLAY
- English definition: A tiny label that appears on hover or focus to name or explain the thing under the pointer. If the interface needs it to be understood, the interface is hiding too much.
- Chinese name: 工具提示
- Chinese definition: 悬停或聚焦时冒出的小标签，说明指针下的东西是什么。如果界面必须靠它才能被看懂，说明界面藏得太多了。
- Related patterns: Modal dialog, Toast, Badge

### Toast (#062)

- Canonical URL: https://catchui.com/catalog/toast
- Family: FEEDBACK
- Also called: snackbar, toast notification
- English definition: A short confirmation that pops in, delivers one line, and leaves on its own. Never put anything in a toast the user must act on.
- Chinese name: 轻提示
- Chinese definition: 弹出来说一句话就自己离开的轻确认。永远别把需要用户处理的事放进 Toast 里。
- Related patterns: Badge, Tooltip, Progress bar

Q: What is the brief popup message that disappears on its own called?
A: A toast. Material Design’s variant with an optional action button is a snackbar. Both deliver one short confirmation and dismiss themselves — never put anything the user must act on inside one.

### Progress bar (#063)

- Canonical URL: https://catchui.com/catalog/progress-bar
- Family: FEEDBACK
- English definition: A track that fills to show how much of a job is done. Honest ones are tied to real work; the rest are just animated apologies.
- Chinese name: 进度条
- Chinese definition: 逐渐填满的轨道，显示任务完成了多少。诚实的进度条与真实进展挂钩；其余的只是会动的道歉。
- Related patterns: Skeleton screen, Slider, Stepper

### Skeleton screen (#064)

- Canonical URL: https://catchui.com/catalog/skeleton
- Family: FEEDBACK
- Also called: skeleton loader, ghost elements, content placeholder
- English definition: Grey ghost shapes standing in for content while it loads, promising the layout before the data arrives. Feels faster than a spinner because it shows where things will land.
- Chinese name: 骨架屏
- Chinese definition: 加载时替内容占位的灰色影子，在数据到达前先许诺布局。比转圈感觉更快，因为它预告了东西会落在哪。
- Related patterns: Progress bar, Empty state, Card

Q: What are the grey placeholder shapes shown while content loads called?
A: A skeleton screen (or skeleton loader): grey ghost shapes that hold the layout while data arrives. It feels faster than a spinner because it promises where things will land.

### Empty state (#065)

- Canonical URL: https://catchui.com/catalog/empty-state
- Family: FEEDBACK
- English definition: What a screen says when there's nothing to show. The good ones explain why it's empty and hand you the one action that fills it.
- Chinese name: 空状态
- Chinese definition: 界面无内容可展示时说的话。好的空状态会解释为什么是空的，并把能填满它的那个操作递到你手上。
- Related patterns: Skeleton screen, Search field, Floating action button

### Badge (#066)

- Canonical URL: https://catchui.com/catalog/badge
- Family: FEEDBACK
- Also called: notification badge, notification dot, red dot
- English definition: A tiny count or dot pinned to an icon, whispering "something's waiting for you in here." Loses all power the day it's always on.
- Chinese name: 徽标
- Chinese definition: 钉在图标上的小数字或小红点，轻声说「里面有东西在等你」。哪天它常亮不灭，就再也没人理它了。
- Related patterns: Toast, Tab bar, Filter chips

Q: What is the red dot on an app icon called?
A: A badge (also called a notification badge or notification dot) — a small count or dot pinned to an icon to signal that something is waiting inside.

### Card (#067)

- Canonical URL: https://catchui.com/catalog/card
- Family: CONTENT
- English definition: A bounded container that makes one item — image, title, meta, action — feel like a single graspable thing. The workhorse of every feed and grid.
- Chinese name: 卡片
- Chinese definition: 一个有边界的容器，把图片、标题、信息、操作打包成一件「拿得起来」的东西。所有信息流和网格的主力工人。
- Related patterns: Carousel, Accordion, Skeleton screen

### Carousel (#068)

- Canonical URL: https://catchui.com/catalog/carousel
- Family: CONTENT
- Also called: image slider, slideshow
- English definition: A horizontal strip of items you swipe through, with a peek of the next one as the invitation. Position dots keep you honest about how deep it goes.
- Chinese name: 轮播图
- Chinese definition: 横向滑动浏览的内容条，露出下一张的一角作为邀请。位置圆点老实交代还有多深。
- Related patterns: Card, Pagination, Segmented control

### Accordion (#069)

- Canonical URL: https://catchui.com/catalog/accordion
- Family: CONTENT
- English definition: Stacked headers that expand one section at a time, keeping long content scannable. The chevron is the promise; the collapse is the mercy.
- Chinese name: 手风琴
- Chinese definition: 层层叠放的标题，一次展开一节，让长内容保持可扫读。箭头是承诺，折叠是仁慈。
- Related patterns: Card, Hamburger menu, Data table

### Data table (#070)

- Canonical URL: https://catchui.com/catalog/table
- Family: DATA
- English definition: Rows and columns for comparing many records across the same attributes. Sortable headers are the contract; alignment does the reading.
- Chinese name: 数据表格
- Chinese definition: 行与列，让许多条记录在同一组属性下可比较。可排序的表头是契约，对齐方式替眼睛干活。
- Related patterns: Pagination, Accordion, Filter chips