# CatchUI

> CatchUI is a bilingual web app that identifies recognizable UI patterns in interface screenshots and teaches their conventional names, purposes, and tradeoffs.

CatchUI is built for design students, career-switchers, product managers, and developers who understand what an interface element does but do not yet know what it is called. Recognition is model-assisted and may occasionally be wrong; the 94-pattern teaching catalog is curated.

## Key facts

- Canonical product URL: https://catchui.com/
- Primary task: identify and learn UI/UX pattern names from screenshots
- Languages: English and Simplified Chinese
- Catalog size: 94 curated patterns
- 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
- CatchUI is a vocabulary and learning tool, not a screenshot-to-code generator or design-cloning service
- Facts last verified: 2026-08-03

## Primary pages

- [Product facts and FAQ](https://catchui.com/about): citation-ready description, audience, workflow, limitations, and direct answers
- [中文产品事实与问答](https://catchui.com/zh/about): 可独立抓取和引用的简体中文产品说明
- [How to identify UI patterns in a screenshot](https://catchui.com/guides/identify-ui-patterns-from-screenshot): practical naming guide for common interface elements
- [What is that part of your phone screen called?](https://catchui.com/guides/phone-and-computer-screen-parts): names of the system UI on iPhone, Android, Mac and Windows — Dynamic Island, status bar, home indicator, Quick Settings, menu bar, Dock, taskbar, system tray
- [What is that part of a website called?](https://catchui.com/guides/parts-of-a-website): names of the parts of a web page — header and navbar, footer, sidebar, hero section, favicon, scrollbar, cookie consent banner, back to top button, infinite scroll, placeholder text, marquee
- [What is this icon called?](https://catchui.com/guides/ui-icon-names): names of common app and website icons by shape — hamburger menu (three lines), kebab and meatballs menus (three dots), drag handle (six dots), app launcher (nine dots, the waffle), gear, share icons, chevron and caret, notification dot, privacy indicator dots — with what each does and its Material Symbols and SF Symbols names
- [UI words to use when vibe coding](https://catchui.com/guides/ui-words-for-vibe-coding): everyday words mapped to the conventional UI names AI coding tools and component libraries use
- [Connect an AI assistant over MCP](https://catchui.com/mcp): setup guide for adding the CatchUI MCP server to Claude, ChatGPT, Cursor, and other clients (中文版: https://catchui.com/zh/mcp)
- [Scan a screenshot](https://catchui.com/): upload an interface screenshot for model-assisted recognition
- [UI Pattern Catalog](https://catchui.com/catalog): curated pattern definitions and related terminology
- [中文 UI 模式图鉴](https://catchui.com/zh/catalog): 94 个 UI 模式的中文名、定义、常见叫法和问答，每个条目一页（https://catchui.com/zh/catalog/<id>）
- [Privacy Policy](https://catchui.com/legal/privacy.html): how uploads, accounts, analytics, and billing data are handled
- [Terms of Service](https://catchui.com/legal/terms.html): service rules, quotas, and limitations

## Machine-readable resources

- [Full product and catalog context](https://catchui.com/llms-full.txt): expanded product facts plus every catalog definition
- [XML sitemap](https://catchui.com/sitemap.xml): canonical crawlable URLs
- [MCP server](https://catchui.com/api/mcp): Model Context Protocol endpoint (Streamable HTTP, no authentication) — connect Claude, ChatGPT, Cursor, or any MCP client to search the pattern catalog with search_ui_patterns, get_ui_pattern, list_ui_patterns, compare_ui_patterns, get_ui_component_names, and get_implementation_prompt

## Pattern catalog

- [Segmented control](https://catchui.com/catalog/segmented): 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. (also called: segmented button, segment control)
- [Tab bar](https://catchui.com/catalog/tabbar): The app's whole map in one strip — three to five destinations, always visible, never scrolling away. (also called: bottom navigation bar, bottom app bar, bottom bar, 底部导航栏, 底部导航, 底部栏)
- [Breadcrumb](https://catchui.com/catalog/breadcrumb): 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.
- [Pagination](https://catchui.com/catalog/pagination): Numbered stops through a long list, with previous and next as bookends. Users trade endless scroll for a sense of place. (also called: page numbers, pager, numbered pagination, 页码, 翻页)
- [Hamburger menu](https://catchui.com/catalog/hamburger-menu): Three stacked lines hiding the whole navigation behind one tap. Saves space, costs discoverability — everything inside is out of sight. (also called: hamburger icon, three-line menu, menu icon, navigation drawer, nav drawer, drawer menu, 三条横线图标, 三横线图标, 汉堡菜单图标, 导航抽屉, 抽屉式菜单)
- [Tabs](https://catchui.com/catalog/tabs): A row of labels across the top of a section, each opening its own panel in the same spot. Peers only — if one tab makes no sense without another, they belong on one page. (also called: top tabs, tabbed interface, tab strip, tab navigation, 标签页, tab切换)
- [Wizard](https://catchui.com/catalog/wizard): A long task split into a fixed sequence of short steps, one screen each, with a step indicator on top showing where you are (1 Details, 2 Payment, 3 Review) and Back and Next at the bottom. Setup, checkout and sign-up flows use it; the row of numbered steps on its own is called a stepper. (also called: stepper UI, step indicator, multi-step form, progress stepper, setup assistant, 步骤条, 分步表单)
- [Pagination dots](https://catchui.com/catalog/pagination-dots): The row of small dots under a carousel, a set of onboarding screens or the pages of a home screen: one dot per page, with the current one filled or stretched. They show how many pages there are and which one you are on; in iOS you can also tap beside the current dot or drag along the row to move. Apple calls the control a page control. (also called: page control, carousel indicators, carousel dots, dot indicator, page indicator, slider dots, 指示点)
- [Toggle switch](https://catchui.com/catalog/toggle): An instant on/off for a single setting. If the change doesn't take effect immediately, it should be a checkbox instead.
- [Search field](https://catchui.com/catalog/search): A pill-shaped prompt for queries. The little magnifier is one of the few icons everyone reads instantly. (also called: search box, search input, search bar)
- [Stepper](https://catchui.com/catalog/stepper): Two buttons joined at the hip for small, precise adjustments — quantities, copies, guests. (also called: number stepper, quantity selector, plus minus buttons)
- [Checkbox](https://catchui.com/catalog/checkbox): 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.
- [Radio group](https://catchui.com/catalog/radio-group): Round buttons where picking one releases the others — exactly one answer from a visible set. Named after mechanical car-radio presets.
- [Slider](https://catchui.com/catalog/slider): 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. (also called: slider control, range slider)
- [Date picker](https://catchui.com/catalog/date-picker): A pop-open calendar for choosing a day without typing it. The moment ranges or availability rules appear, this pattern earns its complexity. (also called: date range picker, date range selector, 日期范围选择器)
- [Filter chips](https://catchui.com/catalog/chip-filter): 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. (also called: filter chip, filter tags, faceted filter chips)
- [Dropdown menu](https://catchui.com/catalog/dropdown): A closed box that shows one choice and opens a list of the rest. Saves room when there are many options; hides them for no reason when there are only a few. (also called: drop-down list, select menu, select box, pull-down menu, searchable dropdown, combobox, 下拉框, 下拉列表, 下拉选择框, 组合框, 可搜索下拉框)
- [Text field](https://catchui.com/catalog/text-field): A box you type into, with a label that says what goes in it. The label stays visible — placeholder text that vanishes on the first keystroke is not a label. (also called: text box, input field, text input, form field, password field, 文本框, 文本输入框)
- [OTP input](https://catchui.com/catalog/otp-input): The row of small boxes — usually four or six — for the one-time code a site texts or emails you, or an authenticator app shows: one digit per box, with the cursor jumping to the next box as you type. It works best as one real field with the boxes only drawn on, so the phone can offer the code from the message and pasting fills every box at once. (also called: verification code input, OTP input field, OTP input box, one-time password input, PIN input, code input, 验证码框)
- [File upload](https://catchui.com/catalog/file-upload): The part of a form for adding files: a box with a dashed border — the dropzone — that takes files dragged onto it or opens the file picker when clicked, then a list of the chosen files, each with its name, size, a progress bar while it uploads and a button to remove it. On a phone the same control opens the photo or file picker. (also called: dropzone, drop zone, drag and drop file upload, file uploader, file upload box, file input, 拖拽上传, 上传组件)
- [Star rating](https://catchui.com/catalog/star-rating): A row of five stars that either shows a score, such as 4.5 stars from 1,280 reviews, or lets you give one by tapping a star. As a display it summarises everyone’s ratings, filling stars to the nearest half; as an input it is really a set of five radio buttons, where choosing the fourth star means four out of five. (also called: rating, 5 star rating, rating stars, star review, rating component, rating input, 星星评分)
- [Floating action button](https://catchui.com/catalog/fab): One round button floating above everything, reserved for the screen's single most important action. Two FABs means zero priorities. (also called: FAB, floating button)
- [Button group](https://catchui.com/catalog/button-group): Related actions lined up shoulder to shoulder, sharing borders and importance. When one matters most, it gets the filled style — the rest stay quiet.
- [Overflow menu](https://catchui.com/catalog/overflow-menu): Three dots holding the actions there was no room to show. Fine for the rarely used; a graveyard for anything people need every day. (also called: kebab menu, three dots menu, more menu, meatballs menu, more options button, 三个点的菜单, 三个点图标, 更多按钮)
- [Pull to refresh](https://catchui.com/catalog/pull-to-refresh): Drag the top of a list down and let go to load what is new. A gesture nobody can see, so it needs a visible way to refresh beside it for anyone who cannot or will not swipe. (also called: swipe to refresh, pull down to refresh, refresh control, 下拉刷新页面)
- [Split button](https://catchui.com/catalog/split-button): One button in two parts: the main part runs the most common action at once, and a narrow arrow segment beside it opens a menu of related alternatives — Send or Schedule send, Paste or Paste special, Save or Save as. It replaces a row of buttons when one choice is used most of the time. (also called: split dropdown button, button with dropdown arrow, dropdown split button, split action button, 下拉按钮)
- [Ribbon](https://catchui.com/catalog/ribbon): The wide band of commands across the top of Microsoft Word, Excel, PowerPoint and Outlook, organised into tabs — Home, Insert, Layout — with each tab’s buttons grouped by task. Office introduced it in 2007 to replace the old menus and toolbars; Ctrl+F1 hides or shows it. (also called: ribbon bar, ribbon toolbar, ribbon interface, ribbon menu, Office ribbon, Word ribbon, Ribbon 界面, Word 功能区)
- [Ghost button](https://catchui.com/catalog/ghost-button): A see-through button: a transparent fill with a thin outline and a label in the outline’s colour, so the photo or colour behind it shows through. It sits beside a solid primary button as the second choice (Sign up / Log in) or over a hero image. Many design systems call this an outline button and keep “ghost” for one with no border at all, which shows a background only on hover. (also called: outline button, outlined button, transparent button, hollow button, bordered button, 透明按钮)
- [Toolbar](https://catchui.com/catalog/toolbar): A row of buttons, mostly icons, for the commands you use most in an app or window: Bold, Italic and Link in an editor; Back, Share and Delete in a photo app. It runs along the top or bottom edge of a window or screen, and commands that do not fit go into an overflow (⋯) menu. A ribbon is many toolbars stacked into tabs. (also called: tool bar, formatting toolbar, floating toolbar, quick access toolbar, command bar, action bar)
- [Drag and drop list](https://catchui.com/catalog/drag-and-drop-list): A list you reorder by dragging: grab an item, usually by its handle of six dots (⋮⋮), and as you drag it the other items slide apart to show where it will land; let go and it drops into place. To-do apps, playlists, form builders and menu or tab order settings use it. It needs a keyboard or button alternative, because not everyone can drag. (also called: sortable list, reorderable list, draggable list, drag to reorder, drag handle, drag grip, 拖拽排序, 拖动排序)
- [Bottom sheet](https://catchui.com/catalog/bottomsheet): A card that slides up over the screen for a quick sub-task while keeping the parent visible. (also called: bottom drawer, slide-up panel, sheet, 底部弹窗)
- [Modal dialog](https://catchui.com/catalog/modal): 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. (also called: modal window, dialog box, popup dialog, popup, confirmation dialog, confirmation modal, 弹窗, 对话框, 确认对话框)
- [Action sheet](https://catchui.com/catalog/action-sheet): A short list of verbs answering one question: "what do you want to do with this?" Destructive options are dressed in red. On iPhone it used to slide up from the bottom with Cancel set apart; since iOS 26 it usually pops up from the button you tapped, as on iPad, with no Cancel: tapping anywhere else dismisses it.
- [Tooltip](https://catchui.com/catalog/tooltip): 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. (also called: hover text, hover box)
- [Popover](https://catchui.com/catalog/popover): A small panel that opens beside the thing you clicked, pointing back at it, and holds real content — options, a short form, a preview. Unlike a tooltip it waits for a click and can be used; unlike a modal it leaves the page alone. (also called: popover menu, popup panel, flyout, 弹出框, 气泡弹窗)
- [Context menu](https://catchui.com/catalog/context-menu): The menu that appears right where you right-click — or touch and hold on a phone — with actions for the thing under your pointer or finger: Copy, Paste, Rename, Delete, Open in new tab. What it offers depends on what you clicked, which is where the name comes from. (also called: right-click menu, long-press menu, contextual menu, shortcut menu, pop-up menu, 上下文菜单, 快捷菜单, 鼠标右键菜单)
- [Coach marks](https://catchui.com/catalog/coach-marks): Short tips that point at parts of an app the first time you use it — often with the rest of the screen dimmed and a spotlight on one button — saying what it does, with Next or Got it to move on. A run of them is a product tour. They should be brief and skippable, and never come back once dismissed. (also called: coach mark, coachmarks, product tour, onboarding tooltips, walkthrough, instructional overlay, 功能引导气泡, app新手引导)
- [Lightbox](https://catchui.com/catalog/lightbox): An overlay that shows a photo or video enlarged over the page, with the page dimmed behind it, a close (×) button, arrows or swipes to move through the rest of the gallery, and often a caption and a count (3 / 12). It opens when you click a thumbnail and closes with Esc or a click on the dark backdrop: a modal made for looking at media. (also called: image lightbox, lightbox gallery, lightbox popup, image viewer, photo viewer, image popup, 图片灯箱, 图片预览)
- [Toast](https://catchui.com/catalog/toast): 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. (also called: snackbar, toast notification, Toast提示, Toast弹窗)
- [Progress bar](https://catchui.com/catalog/progress-bar): 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.
- [Skeleton screen](https://catchui.com/catalog/skeleton): 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. (also called: skeleton loader, ghost elements, content placeholder)
- [Empty state](https://catchui.com/catalog/empty-state): 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.
- [Badge](https://catchui.com/catalog/badge): 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. (also called: notification badge, notification dot, red dot)
- [Loading spinner](https://catchui.com/catalog/spinner): A circle that keeps turning to say “working on it” — and nothing else. Fine for a second or two; any longer and people want to know how long, so show a progress bar or a skeleton instead. (also called: loading circle, activity indicator, loading wheel, throbber, circular progress indicator, loading dots, 加载转圈, 加载图标, 加载动画)
- [Alert banner](https://catchui.com/catalog/alert-banner): A full-width strip at the top of a page or section that states something worth knowing and stays until it is dealt with or dismissed. Louder than a toast, quieter than a modal — and never more than one at a time. (also called: notification banner, announcement bar, alert bar, inline alert, 警告提示, 公告栏)
- [Typing indicator](https://catchui.com/catalog/typing-indicator): The bubble with three animated dots that appears in a chat while the other person is writing a reply. It means they have started typing, not that a message is on its way: if they stop or delete the draft, the bubble goes away. Some apps show “typing…” text instead. (also called: typing bubble, typing dots, is typing indicator, dot dot dot bubble, 对方正在输入, 正在输入的三个点)
- [Splash screen](https://catchui.com/catalog/splash-screen): The screen that fills the display for a moment while an app starts — usually its icon or logo on a plain background — before the first real screen appears. Apple calls it the launch screen. It should cover loading time, not add a delay of its own. (also called: launch screen, loading screen, startup screen, app launch screen, 闪屏页, 开屏页, 启动屏幕)
- [Read receipts](https://catchui.com/catalog/read-receipts): The small note under a message that tells the sender it has been seen: “Read 9:41” in iMessage, two blue ticks in WhatsApp, “Seen” or the reader’s tiny profile picture in Messenger and Instagram. Before that, “Delivered” or two grey ticks mean it reached the other phone. Most apps let you stop sending them; in WhatsApp that also stops you seeing other people’s. (also called: read receipt, seen receipts, read status, blue ticks, delivered and read, seen indicator, 消息已读)
- [Card](https://catchui.com/catalog/card): A bounded container that makes one item — image, title, meta, action — feel like a single graspable thing. The workhorse of every feed and grid.
- [Carousel](https://catchui.com/catalog/carousel): 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. (also called: image slider, slideshow)
- [Accordion](https://catchui.com/catalog/accordion): Stacked headers that expand one section at a time, keeping long content scannable. The chevron is the promise; the collapse is the mercy. (also called: collapsible sections, expand / collapse)
- [Timeline](https://catchui.com/catalog/timeline): Events in time order along a line, each a dot with a short title and a date: a parcel going from ordered to delivered, an account’s activity, a project’s milestones, a company’s history. Filled dots have happened; hollow ones are still to come. Unlike a stepper, it records what happens rather than waiting for you to do the next step. (also called: timeline UI, vertical timeline, activity timeline, timeline component, event timeline, order timeline, 时间线)
- [Avatar](https://catchui.com/catalog/avatar): The small circle, sometimes a rounded square, that stands for a person: their profile photo, or their initials or a grey silhouette when there is none. It sits beside their name, comments and messages, and as the account button in a corner of the header; a dot on its edge can show they are online. Several overlapping in a row are an avatar group. (also called: profile picture, avatar UI, user avatar, user icon, avatar group, avatar stack, 用户头像)
- [Data table](https://catchui.com/catalog/table): Rows and columns for comparing many records across the same attributes. Sortable headers are the contract; alignment does the reading. (also called: data grid, sortable table)
- [Tree view](https://catchui.com/catalog/tree-view): A list that opens like folders: an item with children has an arrow (▸) that expands it to show what is inside, indented one level deeper, and collapses it again (▾). The folder pane of a file manager, the file list of a code editor and the mailbox list of an email app use it to show a hierarchy without showing everything at once. (also called: treeview, tree view UI, file tree, directory tree, folder tree, tree control, 树形菜单, 目录树, 文件树)
- [Dynamic Island](https://catchui.com/catalog/dynamic-island): The black pill at the top of newer iPhones that hides the front camera and grows to show live activity — a call, a timer, music, directions. Apple turned a hole in the screen into a place for status. (also called: iPhone island, island on iPhone, pill at the top of iPhone)
- [Status bar](https://catchui.com/catalog/status-bar): The thin strip along the top of a phone screen with the time, signal, Wi-Fi and battery. It belongs to the system, not the app — an app only chooses whether its icons are light or dark. (also called: phone status bar, top bar on a phone, status icons, 状态栏图标)
- [Home indicator](https://catchui.com/catalog/home-indicator): The thin line at the bottom of iPhones without a Home button. It is not decoration: swipe it up to go home, up and hold for the app switcher, sideways to jump between apps. (also called: home bar, gesture bar, swipe bar, 苹果手机底部横条)
- [Notch](https://catchui.com/catalog/notch): The black cutout at the top edge of the screen that holds the front camera and Face ID sensors. The screen wraps around it, so the status bar is split into two “ears”, one on each side. (also called: display notch, camera cutout, sensor housing, 刘海屏)
- [Control Center](https://catchui.com/catalog/control-center): The panel of shortcuts you pull down from the top-right corner of an iPhone: Wi-Fi, Bluetooth, brightness, volume, flashlight, timer. The settings you touch every day, one swipe from any screen. (also called: iPhone Control Center, control centre, swipe down menu on iPhone)
- [Notification Center](https://catchui.com/catalog/notification-center): The list of notifications you pull down from the top of an iPhone, grouped by app, newest first. Anything you did not deal with on arrival waits here until you clear it. (also called: notification centre, iPhone notifications list, notification history)
- [AssistiveTouch](https://catchui.com/catalog/assistivetouch): The floating grey circle some iPhone screens show: an accessibility shortcut that opens a menu for Home, Control Center, screenshots and gestures. Someone turned it on in Settings — it is not a glitch. (also called: iPhone floating button, virtual home button, circle button on iPhone, 小白点, 小白点虚拟按键)
- [Quick Settings panel](https://catchui.com/catalog/quick-settings): The grid of toggles at the top of the Android pull-down shade — Wi-Fi, Bluetooth, flashlight, rotation, Do Not Disturb. Swipe down once for a short row, twice for the full panel; Samsung calls it the Quick panel. (also called: Quick Settings, Quick panel, notification shade, notification panel, Android pull-down menu, 快捷设置, 下拉通知栏)
- [Android navigation bar](https://catchui.com/catalog/android-navigation-bar): The strip at the bottom of an Android screen with the Back, Home and Recents buttons — or, with gesture navigation, just a thin handle. It belongs to the system, not the app; an app’s own tabs sit above it. (also called: system navigation bar, Android navigation buttons, three-button navigation, soft keys, 导航栏三个键, 导航键)
- [Edge panel](https://catchui.com/catalog/edge-panel): Samsung’s sidebar: a small handle on the edge of the screen that slides out a panel of favourite apps, contacts or tools from any screen. A shortcut drawer that belongs to the phone, not to the app you are in. (also called: Samsung sidebar, sidebar on Samsung, Edge screen, side panel on Samsung, edge handle, 侧边屏)
- [Mac menu bar](https://catchui.com/catalog/mac-menu-bar): The strip across the top of a Mac screen: the Apple menu and the menus of whichever app is in front, then status icons, Control Center and the clock on the right. The menus change with the app; the bar itself never moves. (also called: menu bar, macOS menu bar, top bar on Mac, menu bar extras)
- [Dock](https://catchui.com/catalog/dock): The row of app icons along the bottom (or side) of a Mac screen: apps you keep there, open apps, recent apps, then the Downloads folder and the Trash. Click to open; a dot underneath means the app is running. (also called: Mac Dock, macOS Dock, app bar on Mac, Mac 程序坞)
- [Taskbar](https://catchui.com/catalog/taskbar): The bar along the bottom of a Windows screen: the Start button, search, pinned and open apps, and on the right the notification area with Wi-Fi, volume, battery and the clock. One click switches to any open window. (also called: Windows taskbar, Start bar, bottom bar on Windows)
- [System tray](https://catchui.com/catalog/system-tray): The corner at the right end of the Windows taskbar with Wi-Fi, volume, battery, the clock and the icons of apps running in the background. Microsoft’s official name is the notification area; the small up arrow beside it shows hidden icons. (also called: notification area, taskbar corner, tray icons, hidden icons, 系统托盘图标, 右下角托盘图标)
- [Privacy indicator](https://catchui.com/catalog/privacy-indicator): The small orange or green dot at the top of the screen that lights up while an app is using the microphone or camera, so you always know when you could be recorded. iPhone, iPad, Mac and Android phones all show one; Control Center or the pull-down shade names the app. (also called: orange dot, green dot, recording indicator, camera indicator, microphone indicator, 隐私指示灯, 橙色点, 小绿点)
- [Widget](https://catchui.com/catalog/widget): A small live tile from an app that sits on the home screen, lock screen or desktop and shows one piece of its information — the weather, your next meeting, a photo — without opening the app. Tapping it opens the app; some widgets have buttons of their own. (also called: home screen widget, lock screen widget, app widget, desktop widget, 桌面小组件, 小部件, 微件, 服务卡片)
- [App drawer](https://catchui.com/catalog/app-drawer): The screen on an Android phone that lists all your apps, usually A to Z, so the home screen only has to hold the ones you choose. On most phones you swipe up from the home screen to open it; Google’s help calls it All apps and Samsung the Apps screen. The iPhone equivalent is the App Library. (also called: App Library, all apps, apps screen, app tray, app list, App 资源库, 资源库, 抽屉模式)
- [App switcher](https://catchui.com/catalog/app-switcher): The screen that shows your recently used apps as a row of cards, so you can jump back to one or swipe it away to close it. On iPhone you swipe up from the bottom and pause; Android calls it Recents and opens it the same way, or with the square button. (also called: recent apps, Recents, multitasking view, Overview screen, Task View, task switcher, 最近任务, 多任务界面, app切换器)
- [Share sheet](https://catchui.com/catalog/share-sheet): The panel that slides up when you tap Share: a row of people you message often, a row of apps to send to, and a list of actions such as Copy, Save to Files or Print. The system draws it, so it looks the same in every app; Android calls it the Sharesheet. (also called: share menu, Sharesheet, share panel, activity view, 分享菜单, 分享界面, 分享框)
- [Window controls](https://catchui.com/catalog/window-controls): The buttons in the corner of every app window that close it, minimize it and make it fill the screen. On a Mac they are the red, yellow and green dots at the top left, nicknamed traffic lights; on Windows they are the minimize, maximize and close (X) buttons at the top right. (also called: traffic lights, red yellow green buttons, minimize maximize close buttons, caption buttons, title bar buttons, 红绿灯, 红黄绿三个按钮, 最小化最大化关闭按钮)
- [Lock screen](https://catchui.com/catalog/lock-screen): The screen a phone, tablet or computer shows while it is locked: the time and date in large type over your wallpaper, new notifications and, on phones, shortcuts such as the flashlight and camera, with widgets and Live Activities on iPhone. You can glance at it without unlocking; opening apps or anything personal needs Face ID, a fingerprint, a PIN or a password. (also called: lockscreen, iPhone Lock Screen, Android lock screen, Windows lock screen, lock screen display, 锁屏, 手机锁屏)
- [Always-on display](https://catchui.com/catalog/always-on-display): A dimmed version of the lock screen that stays on while the phone sleeps, so you can see the time, date, widgets and notification icons without touching it. The screen drops to very low brightness and refresh rate to save power: iPhone can keep a darkened wallpaper or go black, while many Android phones show only a clock on black. Raising, tapping or unlocking the phone wakes the full screen. (also called: AOD, always on display, always-on screen, ambient display, 全天候显示屏, 全天候息屏显示)
- [Live Activities](https://catchui.com/catalog/live-activities): Live cards for something happening right now, such as a delivery on its way, a ride arriving, a game score or a timer, that apps put on the iPhone Lock Screen and, on iPhones with a Dynamic Island, in the island while you use other apps. Each one updates on its own and goes away when the event ends; it can stay active for up to eight hours. They can also appear in StandBy, in CarPlay and on a paired Apple Watch. (also called: Live Activity, iPhone live activities, lock screen live activity, Live Activity widget, Live Updates, 灵动岛实时活动)
- [Header](https://catchui.com/catalog/website-header): The band across the top of every page of a website: the logo on one side, the main navigation links in the middle or on the right, and often search, sign-in or a call-to-action button. The navigation inside it is the navbar. (also called: navbar, navigation bar, top bar, top menu, site header, sticky header, 页头, 网站导航栏, 顶部导航栏, 网站顶部, 网页头部)
- [Footer](https://catchui.com/catalog/website-footer): The band across the bottom of every page of a website: secondary links (About, Contact, Careers), legal pages, social icons, copyright and sometimes a newsletter sign-up. It is where people scroll when they cannot find something in the header. (also called: site footer, page footer, website footer, 页脚, 网页底部, 网站底部, 底部信息栏)
- [Sidebar](https://catchui.com/catalog/sidebar): A column down the left or right side of a page, beside the main content. On the left it usually holds navigation (dashboards, docs, admin tools); on the right, related content — filters, a table of contents, ads or “more like this”. (also called: sidebar menu, side bar, side menu, side navigation, sidenav, navigation rail, 侧边栏, 侧栏, 侧边导航, 左侧菜单栏)
- [Hero section](https://catchui.com/catalog/hero-section): The first big block of a landing page, right under the header: a headline that says what the product is, a line of support, one or two call-to-action buttons and usually a large image or video. It is the part people see before they scroll. (also called: hero banner, hero image, hero area, hero header, above the fold section, 首屏, hero区, 首屏大图, 头图, 主视觉区)
- [Favicon](https://catchui.com/catalog/favicon): The small icon a website shows in the browser tab, beside bookmarks and in history — usually a simplified version of the logo. The same image, at larger sizes, becomes the shortcut icon when someone adds the site to a phone’s home screen. (also called: tab icon, site icon, browser tab icon, shortcut icon, bookmark icon, 网站图标, 网页标签图标, 标签页图标, 浏览器标签图标)
- [Scrollbar](https://catchui.com/catalog/scrollbar): The thin bar along the edge of a scrolling area that shows how far down you are and how much is left. The part you drag is the thumb; the groove it slides in is the track. Phones and Macs often hide it until you scroll. (also called: scroll bar, scroll indicator, scroll thumb, 滚动条, 滚动栏, 滚动指示器)
- [Cookie consent banner](https://catchui.com/catalog/cookie-banner): The bar or box a website shows on your first visit to ask whether it may use cookies — usually with Accept, Reject and a link to choose by category. It exists for privacy law, so its buttons have rules: refusing must be as easy as accepting. (also called: cookie banner, cookie consent pop up, cookie popup, cookie notice, consent banner, cookie bar, cookie弹窗, Cookie 横幅, Cookie 同意弹窗, Cookie 提示)
- [Back to top button](https://catchui.com/catalog/back-to-top): A small button, usually an up arrow in a corner, that appears after you scroll down a long page and takes you back to the top in one tap. It saves a long scroll back to the header and its navigation. (also called: scroll to top button, go to top button, back to top arrow, jump to top button, 返回顶部按钮, 回到顶部, 返回顶部箭头, 一键置顶)
- [Infinite scroll](https://catchui.com/catalog/infinite-scroll): A list or feed that loads the next batch of items automatically as you near the bottom, so the page seems never to end. Feeds love it; pages where people need to find, compare or reach the footer often do not. (also called: endless scrolling, infinite scrolling, continuous scrolling, auto load on scroll, 无限滚动, 无限加载, 滚动加载, 上拉加载更多)
- [Placeholder text](https://catchui.com/catalog/placeholder): The grey hint inside an empty text field — “Search products”, “name@example.com” — that disappears as soon as you type. It shows an example or format; it is not a label, because it vanishes exactly when people need it. (also called: placeholder, hint text, input hint, ghost text, watermark text, gray text, 占位符, 占位符文本, 占位文字, 提示文字, 输入框提示语)
- [Marquee (scrolling text)](https://catchui.com/catalog/marquee): A strip of text or logos that slides continuously sideways across the screen — a news ticker, a stock ticker, a row of client logos, a sale announcement. Eye-catching, but moving text is hard to read and must be pausable. (also called: scrolling text, ticker, news ticker, text ticker, logo ticker, crawl, 跑马灯, 滚动字幕, 滚动文字, 跑马灯效果)
- [Address bar](https://catchui.com/catalog/address-bar): The long field at the top of a web browser that shows the address (URL) of the page you are on and where you type a new one. In today’s browsers it doubles as the search box; Chrome’s developers call it the omnibox, and Safari on the Mac calls it the Smart Search field. On phones it often sits at the bottom of the screen. (also called: URL bar, omnibox, location bar, Smart Search field, web address bar, 网址栏, 浏览器地址栏)
- [Mega menu](https://catchui.com/catalog/mega-menu): A large panel that drops down from a website’s top navigation and shows many links at once, grouped into columns with headings — sometimes with pictures or a featured offer. Shops and sites with many sections use it so people can see a whole section without clicking page after page. (also called: mega dropdown, mega menu navigation, mega nav, big dropdown menu, big dropdown)
- [Bento grid](https://catchui.com/catalog/bento-grid): A layout of rounded cards in different sizes fitted together into one tidy rectangle — a big card beside two small ones, a wide one under them — each showing one feature, number or image. Named after the compartments of a Japanese bento lunch box, it is a common way to show a product’s features on a landing page. (also called: bento box layout, bento layout, bento box design, bento UI)
- [Masonry layout](https://catchui.com/catalog/masonry-layout): A grid of cards in equal-width columns where each card keeps its own height, so the columns end at different points but there are no gaps between cards, like stones in a wall. Pinterest made it familiar; photo galleries, portfolios and blogs use it for images of mixed shapes. Unlike a bento grid, the arrangement comes from the content rather than a fixed plan. (also called: masonry grid, Pinterest layout, Pinterest-style grid, staggered grid, waterfall layout, 瀑布流)
- [Language selector](https://catchui.com/catalog/language-selector): The control that switches a website or app to another language: usually a globe icon or the current language’s name (English ▾) in the header or footer, opening a list where each language is written in its own name and script, such as Deutsch, Español and 日本語. Flags are best avoided, since they stand for countries rather than languages, and switching should keep you on the same page. (also called: language switcher, language picker, language dropdown, language selection, language menu, 语言切换按钮, 网站语言切换)