UI 模式图鉴

一份看图认名字的 UI 词汇表：94 个界面元素的规范名称、别名和平时的叫法，每个都配有定义和标本。

指南

全部模式

  • 分段控制器（Segmented control） — 一排等宽按钮，同一时刻只有一个胜出。最适合 2–5 个平级视图之间的切换——千万别拿它放操作。
  • 标签栏（Tab bar） — 把整个应用的地图收进一条横栏——三到五个目的地，始终可见，永不滚走。
  • 面包屑导航（Breadcrumb） — 标记你身在何处的足迹：每个上级都是链接，当前页只是文字。如果用户根本不会走深，就别撒面包屑。
  • 分页（Pagination） — 给长列表设下带编号的站点，「上一页」「下一页」守在两端。用户放弃无限滚动，换来一份位置感。
  • 汉堡菜单（Hamburger menu） — 三条横线，把整套导航藏进一次点击里。省下了空间，赔上了可发现性——藏起来的东西就是没人看。
  • 选项卡（Tabs） — 横排在一块区域顶部的一组标签，每个标签在同一位置打开各自的面板。只放平级内容——如果一个标签离开另一个就看不懂，它们就该合成一页。
  • 分步向导（Wizard） — 把一件长任务拆成固定顺序的几个小步骤，每步一屏：顶部的步骤条显示你在第几步（1 填写信息、2 付款、3 确认），底部是“上一步”和“下一步”。安装设置、结账、注册流程都常用；单独那一排带编号的步骤叫步骤条（stepper）。
  • 轮播指示点（Pagination dots） — 轮播图、新手引导页或手机主屏幕多页下面的那一排小圆点：每页一个点，当前页的点是实心或拉长的。它告诉你一共有几页、现在在第几页；在 iOS 里还可以点按当前点的两侧，或沿着这排点拖动来翻页。Apple 把这个控件叫 page control（页面控件）。
  • 开关（Toggle switch） — 单个设置的即时开/关。如果改动不是立刻生效，那它应该是个复选框。
  • 搜索框（Search field） — 药丸形状的查询入口。小放大镜是极少数人人秒懂的图标之一。
  • 步进器（Stepper） — 两个连体按钮，负责小而精确的加减——数量、份数、人数。
  • 复选框（Checkbox） — 收集独立是/否回答的小方块，想勾几个勾几个。它是开关的「延迟版表亲」：不提交，什么都不会发生。
  • 单选组（Radio group） — 圆形按钮，选中一个就弹起其他——在可见选项里恰好选一个。名字来自老式车载收音机的机械选台键。
  • 滑块（Slider） — 沿轨道拖动的滑钮，在范围里凭感觉取值。适合「差不多就行」的设置；一旦数值要精确，它就是灾难。
  • 日期选择器（Date picker） — 弹出的日历，免打字选日期。一旦涉及区间或可约规则，它的复杂度就都值了。
  • 筛选标签（Filter chips） — 小圆角标签，一开一关切换列表的筛选维度。当前选中的组合，顺便就是「你在看什么」的摘要。
  • 下拉菜单（Dropdown menu） — 收起时只显示当前选项、点开才列出其余选项的框。选项多时省地方；选项只有几个时，反而白白把它们藏了起来。
  • 输入框（Text field） — 让人往里打字的框，配一个说明要填什么的标签。标签要一直看得见——一打字就消失的占位文字不算标签。
  • 验证码输入框（OTP input） — 输入一次性验证码的一排小方框，通常 4 或 6 格；验证码来自短信、邮件或身份验证器 App。每格一位数字，输完一格光标自动跳到下一格。最好只用一个真正的输入框，方框只是画出来的，这样手机能直接从短信里带出验证码，粘贴时也能一次填满所有格子。
  • 文件上传（File upload） — 表单里添加文件的部分：一个虚线边框的框（拖拽区，英文叫 dropzone），可以把文件拖进去，也可以点击打开文件选择窗口；下面列出已选的文件，每个都有文件名、大小、上传中的进度条和删除按钮。在手机上，同样的控件会打开照片或文件选择器。
  • 星级评分（Star rating） — 一排五颗星：要么显示一个分数，比如“4.5 星，1,280 条评价”，要么让你点一颗星来打分。用来显示时，它汇总所有人的评分，星星按半颗填充；用来输入时，它其实是一组五个单选按钮，点第四颗星就是五分里打四分。
  • 悬浮操作按钮（Floating action button） — 悬浮在一切之上的圆按钮，只留给整屏最重要的那一个操作。出现两个 FAB，等于没有重点。
  • 按钮组（Button group） — 一组相关操作肩并肩排开，共享边框与分量。最重要的那个用实底样式，其余保持安静。
  • 更多菜单（Overflow menu） — 三个点，收着放不下的操作。装不常用的没问题；常用的东西放进去，就等于埋了。
  • 下拉刷新（Pull to refresh） — 把列表顶部往下拖、松手，就加载最新内容。这个手势是看不见的，所以旁边还得留一个看得见的刷新入口，给不能或不想滑动的人。
  • 拆分按钮（Split button） — 分成两部分的一个按钮：主体部分直接执行最常用的操作，旁边窄窄的箭头部分打开一组相关的备选操作——发送或定时发送、粘贴或选择性粘贴、保存或另存为。当某个选择大多数时候都会用到，它能代替一排按钮。
  • 功能区（Ribbon） — Word、Excel、PowerPoint 和 Outlook 顶部那一大条命令区，分成“开始”“插入”“布局”等选项卡，每个选项卡里的按钮按任务分组。Office 2007 用它取代了旧的菜单栏和工具栏；按 Ctrl+F1 可以隐藏或显示它。
  • 幽灵按钮（Ghost button） — 透明的按钮：没有填充色，只有一圈细边框，文字和边框同色，背后的图片或底色能透出来。它常放在实心的主按钮旁边当次要选项（“注册”旁边的“登录”），或者压在首屏大图上。不少设计系统把这种带边框的叫 outline button（线框按钮），把连边框都没有、只在悬停时出现底色的才叫 ghost。
  • 工具栏（Toolbar） — 一排按钮（大多是图标），放 App 或窗口里最常用的命令：编辑器里的加粗、斜体、插入链接，照片 App 里的返回、分享、删除。它在窗口或屏幕的顶部或底部；放不下的命令收进“更多”（⋯）菜单。Office 的功能区（ribbon）就是把很多条工具栏叠成选项卡。
  • 拖拽排序列表（Drag and drop list） — 可以拖动来调整顺序的列表：按住条目（通常是那个六个点的拖动手柄 ⋮⋮）拖动时，其他条目会让开，露出它将落下的位置，松手就放到那里。待办清单、播放列表、表单搭建器，以及菜单或标签页顺序的设置都常用它。它还需要键盘或按钮的替代方式，因为不是每个人都能拖动。
  • 底部抽屉（Bottom sheet） — 从底部滑上来的卡片，处理一个快速子任务，同时让父级界面保持可见。
  • 模态对话框（Modal dialog） — 把全世界调暗、逼你先回答的窗口。强力而无礼——只花在真正卡住流程的决定上。
  • 操作面板（Action sheet） — 一小组动词清单，只回答一个问题：「你想对它做什么？」危险操作穿一身红。iPhone 上它原来从底部滑出，最下面单独放“取消”；iOS 26 起，它通常从你点的按钮处弹出，和 iPad 一样，没有“取消”，点别处就关掉。
  • 工具提示（Tooltip） — 悬停或聚焦时冒出的小标签，说明指针下的东西是什么。如果界面必须靠它才能被看懂，说明界面藏得太多了。
  • 气泡卡片（Popover） — 在你点的东西旁边打开的小面板，带个小尖角指回它，里面放的是能操作的内容——选项、简短表单、预览。跟工具提示不同，它要点了才出现、可以在里面操作；跟模态弹窗不同，它不挡住整个页面。
  • 右键菜单（Context menu） — 在你点鼠标右键的地方（手机上是长按的地方）弹出的菜单，列出针对所点对象的操作：拷贝、粘贴、重命名、删除、在新标签页中打开。菜单内容随所点的对象而变，所以也叫“上下文菜单”。
  • 新手引导（Coach marks） — 第一次使用 App 时指向界面某个部分的简短提示，常常把屏幕其余部分压暗、只把一个按钮“打光”突出，说明它的用途，点“下一步”或“知道了”继续。连成一串就是产品导览。它应该简短、可以跳过，关掉后不再出现。
  • 大图预览（Lightbox） — 点开缩略图后，在压暗的页面上放大显示照片或视频的浮层：右上角有关闭（×）按钮，用箭头或左右滑动切换图库里的其他图片，常带图片说明和计数（3 / 12）。按 Esc 或点击暗色背景关闭。网页设计里叫灯箱（lightbox），它是专门用来看图的模态框。
  • 轻提示（Toast） — 弹出来说一句话就自己离开的轻确认。永远别把需要用户处理的事放进 Toast 里。
  • 进度条（Progress bar） — 逐渐填满的轨道，显示任务完成了多少。诚实的进度条与真实进展挂钩；其余的只是会动的道歉。
  • 骨架屏（Skeleton screen） — 加载时替内容占位的灰色影子，在数据到达前先许诺布局。比转圈感觉更快，因为它预告了东西会落在哪。
  • 空状态（Empty state） — 界面无内容可展示时说的话。好的空状态会解释为什么是空的，并把能填满它的那个操作递到你手上。
  • 徽标（Badge） — 钉在图标上的小数字或小红点，轻声说「里面有东西在等你」。哪天它常亮不灭，就再也没人理它了。
  • 加载指示器（Loading spinner） — 一直转个不停的圈，只表达“正在处理”，别的什么也不说。一两秒内没问题；再久，人们就想知道还要等多久——那就该换成进度条或骨架屏。
  • 横幅提示（Alert banner） — 横贯页面或区块顶部的一条提示，写着值得知道的事，直到处理或关掉才消失。比轻提示响，比弹窗安静——而且一次只放一条。
  • 正在输入提示（Typing indicator） — 聊天时对方正在写回复，界面上出现的带三个跳动圆点的气泡。它只表示对方开始打字了，并不代表消息马上就到：对方停下或删掉草稿，气泡就会消失。有的 App 显示的是“对方正在输入…”文字。
  • 启动页（Splash screen） — App 启动时短暂铺满屏幕的那一页，通常是纯色背景上的 App 图标或 logo，随后才出现第一个真正的界面。Apple 叫它 launch screen（启动屏幕）。它应该用来遮住加载时间，而不是额外制造等待。
  • 已读回执（Read receipts） — 消息下方告诉发送者“对方已经看过”的小提示：iMessage 里是“已读 9:41”，WhatsApp 里是两个蓝色对勾，Messenger 和 Instagram 里是“已读”或读者的小头像。在这之前，“已送达”或两个灰色对勾表示消息已经到了对方手机。大多数 App 可以关掉“发送已读回执”；在 WhatsApp 里关掉后，你也看不到别人的已读状态。
  • 卡片（Card） — 一个有边界的容器，把图片、标题、信息、操作打包成一件「拿得起来」的东西。所有信息流和网格的主力工人。
  • 轮播图（Carousel） — 横向滑动浏览的内容条，露出下一张的一角作为邀请。位置圆点老实交代还有多深。
  • 手风琴（Accordion） — 层层叠放的标题，一次展开一节，让长内容保持可扫读。箭头是承诺，折叠是仁慈。
  • 时间轴（Timeline） — 把事件按时间顺序排在一条线上，每个事件是一个圆点，配简短标题和日期：快递从下单到签收、账户的操作记录、项目里程碑、公司大事记。实心点表示已发生，空心点表示还没到。和步骤条不同，它记录发生了什么，而不是等你去做下一步。
  • 头像（Avatar） — 代表一个人的小圆形（有时是圆角方形）：有照片就显示头像照片，没有就显示姓名首字母或灰色的人形剪影。它出现在名字、评论和消息旁边，也常作为页头角落的账户按钮；边上的小圆点可以表示对方在线。好几个叠成一排的叫头像组（avatar group）。
  • 数据表格（Data table） — 行与列，让许多条记录在同一组属性下可比较。可排序的表头是契约，对齐方式替眼睛干活。
  • 树形控件（Tree view） — 像文件夹一样能层层打开的列表：有子项的条目前有一个箭头（▸），点开后在下面缩进一级显示里面的内容，再点一次收起（▾）。文件管理器左侧的文件夹栏、代码编辑器的文件列表、邮件 App 的邮箱列表都用它来显示层级，又不用一次全部摊开。
  • 灵动岛（Dynamic Island） — 新款 iPhone 屏幕顶部的黑色胶囊，里面藏着前置摄像头，还会变大显示正在进行的事——通话、计时、音乐、导航。苹果把屏幕上的一个洞变成了显示状态的地方。
  • 状态栏（Status bar） — 手机屏幕最上方的细条，显示时间、信号、Wi-Fi 和电量。它属于系统而不是 App——App 能决定的只有图标是深色还是浅色。
  • 底部横条（Home indicator） — iPhone（没有 Home 键的机型）屏幕底部那条细横线。它不是装饰：往上滑回主屏幕，上滑停住打开多任务，左右滑在 App 之间切换。
  • 刘海（Notch） — 屏幕顶边的黑色缺口，里面是前置摄像头和面容 ID 传感器。屏幕绕着它铺开，所以状态栏被分成左右两只“耳朵”。
  • 控制中心（Control Center） — 从 iPhone 右上角往下拉出来的快捷面板：Wi-Fi、蓝牙、亮度、音量、手电筒、计时器。每天都要碰的设置，从任何界面一滑就到。
  • 通知中心（Notification Center） — 从 iPhone 屏幕顶部往下拉出来的通知列表，按 App 分组、新的在上。来的时候没处理的通知都在这里等着，直到你清掉。
  • 辅助触控（AssistiveTouch） — 有些 iPhone 屏幕上飘着的灰色圆形按钮：一个辅助功能快捷方式，点开是回到主屏幕、控制中心、截屏和手势等菜单。它是在设置里打开的功能，不是故障。
  • 快捷设置面板（Quick Settings panel） — 安卓下拉菜单顶部那一格格开关——Wi-Fi、蓝牙、手电筒、自动旋转、勿扰。下拉一次是一小排，再拉一次展开整个面板；三星叫它快捷面板（Quick panel）。
  • 系统导航栏（Android navigation bar） — 安卓屏幕底部那一条，带返回、主屏幕和最近应用三个按键——开了手势导航后就只剩一条细横条。它属于系统而不是 App；App 自己的标签栏在它上面。
  • 侧屏面板（Edge panel） — 三星的侧边栏：屏幕边缘一个小把手，从任何界面都能拉出一列常用 App、联系人或工具。它是属于手机的快捷抽屉，不属于你正在用的 App。
  • 菜单栏（Mac menu bar） — Mac 屏幕最上方那一条：左边是苹果菜单和当前 App 的菜单，右边是状态图标、控制中心和时钟。菜单随 App 变化，菜单栏本身一直在那里。
  • 程序坞（Dock） — Mac 屏幕底部（或侧边）那一排 App 图标：固定的 App、正在运行的 App、最近用过的 App，最后是下载文件夹和废纸篓。点一下打开，图标下面有小点表示它正在运行。
  • 任务栏（Taskbar） — Windows 屏幕底部那一条：开始按钮、搜索、固定和正在运行的 App，右边是通知区域，有 Wi-Fi、音量、电量和时钟。点一下就能切换到任何打开的窗口。
  • 系统托盘（System tray） — Windows 任务栏右端那一角：Wi-Fi、音量、电量、时钟，以及在后台运行的 App 图标。微软的正式名称是“通知区域”；旁边的小向上箭头点开是隐藏的图标。
  • 隐私指示器（Privacy indicator） — 屏幕顶部亮起的橙色或绿色小圆点：有 App 正在使用麦克风或摄像头时就会出现，让你随时知道自己可能正被录音或录像。iPhone、iPad、Mac 和安卓手机都有；打开控制中心或下拉通知栏，就能看到是哪个 App。
  • 小组件（Widget） — App 放在主屏幕、锁屏或桌面上的一块实时小卡片，不用打开 App 就能看到其中一部分信息——天气、下一个日程、一张照片。点它会打开 App，有的小组件自带按钮。
  • 应用抽屉（App drawer） — 安卓手机上列出你所有 App 的界面，一般按字母排序，这样主屏幕上只需放你挑的那些。多数手机在主屏幕上向上滑就能打开；Google 的帮助文档叫它 All apps（所有应用），三星叫“应用程序屏幕”。iPhone 上对应的是 App 资源库。
  • App 切换器（App switcher） — 把最近用过的 App 排成一排卡片的界面：点一张就回到那个 App，向上划掉就把它关掉。iPhone 上从底部上滑并停顿即可打开；安卓叫“最近任务”，同样上滑停顿，或者点方块键。
  • 分享面板（Share sheet） — 点“分享”时从底部滑出的面板：一排常联系的人、一排可以发送到的 App，下面是拷贝、存储到“文件”、打印等操作列表。它由系统绘制，所以在每个 App 里都一样；安卓叫 Sharesheet。
  • 窗口控制按钮（Window controls） — 每个 App 窗口角落里用来关闭、最小化和放到最大的按钮。在 Mac 上是左上角红、黄、绿三个圆点，俗称“红绿灯”；在 Windows 上是右上角的最小化、最大化和关闭（X）按钮。
  • 锁屏界面（Lock screen） — 手机、平板或电脑锁定时显示的画面：壁纸上是大号的时间和日期、新通知，手机上还有手电筒、相机等快捷按钮，iPhone 上还能放小组件和实时活动。不解锁也能看一眼；打开 App 或任何私人内容，需要面容 ID、指纹、PIN 码或密码。
  • 息屏显示（Always-on display） — 手机熄屏后仍然亮着的暗色锁屏：不用碰手机，就能看到时间、日期、小组件和通知图标。为了省电，屏幕降到很低的亮度和刷新率：iPhone 可以保留调暗的壁纸，也可以只留黑底；许多安卓手机只在黑底上显示一个时钟。拿起、轻点或解锁手机，就回到完整的亮屏。
  • 实时活动（Live Activities） — App 放在 iPhone 锁屏上的实时卡片，用来跟踪正在发生的事：外卖送到哪了、网约车还有几分钟、比赛比分、计时器；有灵动岛的 iPhone 在你用其他 App 时，也会在灵动岛里显示。卡片会自己更新，事情结束就消失，最长可持续 8 小时。
  • 页头（导航栏） — 网站每一页最上方的那条横栏：一边是 logo，中间或右边是主导航链接，常常还有搜索、登录或一个主要按钮。里面那组导航链接就是导航栏（navbar）。
  • 页脚（Footer） — 网站每一页最下方的那块区域：放次要链接（关于、联系我们、招聘）、法律页面、社交媒体图标、版权信息，有时还有订阅邮件的输入框。用户在页头找不到东西时，会滚到这里来找。
  • 侧边栏（Sidebar） — 页面左侧或右侧、紧挨主内容的一列。放在左边时通常是导航（后台、文档、管理工具）；放在右边时通常是相关内容——筛选条件、目录、广告或「相关推荐」。
  • 首屏大图区（Hero） — 落地页上紧接页头的第一大块：一句说明产品是什么的大标题、一行补充说明、一两个行动按钮，通常还有一张大图或一段视频。是用户不用滚动就能看到的那部分。
  • 网站图标（Favicon） — 网站显示在浏览器标签页、书签和历史记录旁边的小图标，通常是 logo 的简化版。同一个图标的大尺寸版本，会在用户把网站添加到手机主屏幕时成为快捷方式图标。
  • 滚动条（Scrollbar） — 滚动区域边缘的一条细条，显示你滚到了哪里、还剩多少。可以拖动的那一小块叫滑块（thumb），它滑动的槽叫轨道（track）。手机和 Mac 通常要等你滚动时才显示它。
  • Cookie 同意横幅（Cookie consent banner） — 第一次访问网站时弹出的横条或小框，询问能否使用 Cookie，通常有「接受」「拒绝」两个按钮和一个按类别选择的链接。它是为隐私法规而存在的，所以按钮有规矩：拒绝必须和接受一样容易。
  • 返回顶部按钮（Back to top button） — 在长页面往下滚动一段后出现的小按钮，通常是角落里的一个向上箭头，点一下就回到页面顶部。省得用户再滚很久才能回到页头和导航。
  • 无限滚动（Infinite scroll） — 列表或信息流在你快滚到底时自动加载下一批内容，页面看起来永远没有尽头。信息流很适合它；但需要查找、比较内容或者要用到页脚的页面，往往不适合。
  • 占位文字（Placeholder） — 空输入框里的灰色提示文字，比如「搜索商品」「name@example.com」，一开始输入就消失。它用来示范内容或格式，不能代替标签，因为它恰好在用户需要的时候消失了。
  • 跑马灯（滚动字幕） — 一条持续横向滑过屏幕的文字或 logo 带——新闻滚动字幕、股票行情、一排客户 logo、促销公告。很抓眼球，但移动的文字很难读，必须能让用户暂停。
  • 地址栏（Address bar） — 浏览器顶部那条长长的输入框，显示当前网页的地址（URL），也是输入新网址的地方。现在的浏览器里它同时也是搜索框；Chrome 的开发文档叫它 omnibox，Mac 上的 Safari 叫 Smart Search field（智能搜索栏）。在手机上它常常在屏幕底部。
  • 大型下拉菜单（Mega menu） — 从网站顶部导航栏展开的一大块面板，一次展示很多链接，按栏目分列、带小标题，有时还配图片或推荐内容。商品多、栏目深的商城和企业网站常用它，让人不用一页页点进去就能看到整个分区。
  • Bento 网格（Bento grid） — 由大小不一的圆角卡片拼成一个规整矩形的布局：一张大卡片旁边两张小的，下面再一张宽的，每张展示一个功能、数字或图片。名字来自日本便当盒的分格，常用在落地页上集中展示产品功能。
  • 瀑布流布局（Masonry layout） — 一种卡片网格：每列宽度相同，卡片保留各自的高度，所以各列结束的位置不同，但卡片之间没有空隙，像砌墙的石头。Pinterest 让它广为人知；相册、作品集和博客常用它展示形状不一的图片。和 bento 网格不同，它的排布由内容决定，而不是事先排好。
  • 语言切换（Language selector） — 把网站或 App 切换成其他语言的控件：通常是页头或页脚里的地球图标，或当前语言的名称（English ▾），点开是语言列表，每种语言用它自己的名称和文字书写，比如 Deutsch、Español、日本語。最好不用国旗，因为国旗代表国家而不是语言；切换后应该停留在同一个页面。