2026年最新版！UI设计控件全面扫盲

在学习 UI 初期，除了学会软件要了解我们设计界面时都在设计什么，而 UI 控件就是首当其冲的设计对象。

UI 控件是一个统称，在下级还包含不同的控件类型，而这些控件类型是今天实现界面展示和交互的必要元素。

虽然控件的外观在不同项目中样式各异，但控件本身的类型却是非常固定的。

学习控件最佳方式，就是先从 iOS 官方组件库中提供的控件开始学起，然后再拓展到一些特殊的样式和类型中。

所以下面，我们会以 iOS26 规范的组件库为标准，来对 UI 的控件类型做一个详尽的说明，帮助大家快速理解行业对控件的最新定义。

更多教程：

一、iOS系统级控件

1. 状态栏 Status bars

状态栏出现在屏幕的上边缘，显示设备当前状态的信息，如时间、蜂窝运营商和电池电量。

在竖屏模式下几乎每个页面必须出现，只有在横屏或极少数场景下才能暂时隐藏（例如全屏显示视频、图片时）。

状态栏只存在黑白两种颜色，需要按照背景元素的深浅更改状态栏的颜色，状态栏选择黑还是白只需要考虑一条原则——哪个与背景有更高的对比度就选哪个。正常来说，在 App 中这个选择是 iOS 自动进行的，不需要设计师指定色彩，但作为设计师不能在设计稿中出现状态栏对比度不足的情况。

2. 首页指示器 Home indicators

首页指示器是 iPhone 用来控制回到首页和进入任务后台的控件。

在 iOS26 之前都是与状态栏一样强制显示的。随着用户对这套交互习以为常，苹果在 iOS26 的更新中取消了首页指示器的默认显示方案，只在交互时暂时出现，所以现在可以不在设计稿中放这个控件。

二、动作和菜单

1. 按钮 Button

按钮可以用来触发一个瞬时的动作，按钮多用在一个或多个独立的命令上，一个按钮对应一个命令。

按钮的样式比较自由，没有固定的做法，内容也可以是图标、文字或者两者组合。按钮拥有多种状态，在 App 设计中最常见的状态有三个：默认、禁用、点击。

2. 菜单 Menus

菜单需要用户进行一次交互之后才会展示，用一种更加节省空间的方式将多项命令组织成的一个面板。

菜单存在多种不同的使用场景，例如：选中某个对象之后才会出现与之对应命令选项的上下文菜单 Context menus、在主屏幕长按 App 图标之后出现的主屏幕快捷操作 Home Screen quick actions 等等。

3. 编辑菜单 Edit menus

编辑菜单本质上也属于菜单的一种，但编辑菜单有几个比较固定的命令，且大多属于文本或图片的编辑命令，例如：剪切、复制、全选、翻译等等。

在 iOS 中，系统会自动检测所选项目的数据类型，从而在编辑菜单中添加相关操作。例如，选择一个地址时，编辑菜单中可能会添加“获取路线”等项目。所以如果你不需要自定义额外的命令的话，编辑菜单大体上可以认为是一个系统级控件。

多提一嘴，iOS26 中新的编辑菜单在样式上也有所变化，去掉了指向内容的小箭头，边框整体变成了圆角。

4. 工具栏 Toolbars

工具栏通常由一个或多个控件构成，它们水平排列在界面的顶部/底部边缘或者键盘上方。

在苹果现在的定义中，只要一组水平排列的控件放置在页面顶部或者底部，都叫工具栏，甚至涵盖了以前我们所熟知的「导航栏 Navigation bar」或者「标题栏 Title bar」，因为 iOS26 允许设计师在工具栏中放置页面标题。 更具体地说，工具栏中可以放置以下三类控件：

1. 当前界面的标题/副标题
2. 导航控件，如后退前进、页面指示器等，以及搜索栏
3. 按钮和菜单

三、导航和搜索

1. 搜索域 Search fields

搜索域是一个可输入关键词进行搜索的特殊文本域。默认状态下它一般包含几个关键的特征元素：搜索图标、占位文字，输入关键词后右侧会出现清除按钮。

搜索域通常会放置在界面顶部，在工具栏中与其他按钮放置在同一栏，或也有在界面底部的，比如 Safari，在输入状态下底部的搜索域会移至虚拟键盘上方。

2. 标签栏 Tabbars

标签栏让用户在 App 最顶级的几个界面之间切换，是 App 最高级的导航控件。

如果没有特殊设计，标签栏一般放置在界面底部，且只有层级最高的那几个界面才有，下级页面是否需要保留标签栏需要设计师视情况自己决定。

在 iOS26 中，苹果重新设计了一种悬浮式的标签栏，它可以像工具栏一样与其他控件并排放置，而传统的标签栏则一般会覆盖页面底部整个区域。

在更复杂的情况下，液态玻璃标签栏还会根据页面的滚动情况、控件的点击状态进行收起和展开，或者在工具栏和标签栏之间切换。总之，现在的标签栏不再是固定在界面底部的一个死区，苹果希望它对内容浏览造成的影响更低。

四、选择和输入

1. 文本域 Text fields

文本域是一个用来输入文本的矩形区域。

通常用来输入信息表单，例如：昵称、手机号、电子邮件、密码、评论等等，在注册登录页、动态详情页、账号信息修改页等多有使用。

在一些对话输入框中，文本域也可以和其他功能按钮组合在一起。

2. 数字输入视图 Digit entry views

数字输入视图是文本域的一种变体，它专门用来输入数量固定的验证码数字。

这个控件几乎只用在验证码登录、2FA 密钥验证登录或解锁的场景。

3. 分段控制器 Segmented controls

分段控制器是一组分段但集成在一起的按钮，每个按钮通常宽度相等，也就是说设计时采用均分的方法。

分段控制器内的每个分段可以是互斥的选项，让用户在不同视图/页面之间进行切换，例如：不同时间窗口下的统计信息；也可以同时启用，用来控制状态的开关，例如：文本编辑中的文本属性，可以同时开启粗体/倾斜/下划线。

少数场景下分段控制器可以用来充当分页器的角色。

4. 开关 Toggles

开关可以控制一对相对的状态，最简单直白的状态就是：开和关，其他还有例如：深色模式和浅色模式。

常用在设置某些功能启用与否的场景下，开关本身能描述的信息只有它的状态，所以想要明确它所作用的对象，就需要文本来说明。

在 iOS26 里，为了表现液态玻璃的效果，苹果把开关做成了上图这种扁扁的样子，你们可以自由决定是否采用苹果的新设计。

5. 滑块 Sliders

滑块是一条水平或垂直轨道，正常形态下的滑块带有一个滑块按钮，它可以在最大值和最小值之间滑动选择，而最小值和选择值之间的区域会被填充上颜色。

滑块可以被用来在一个连续的，或者固定刻度的范围内进行取值，比如音量、亮度、价格、距离、字体大小、不透明度等等数值。

滑块也有一些变体，例如：iOS 控制中心的亮度和音量滑块，它是一个区域填充的纵向轨道，而且没有滑块按钮；还有可以选取中间某个区域的双端点滑块，以及圆形滑块等等。

6. 步进器 Steppers

步进器本身是两个按钮的组合，一个按钮给数值+1，另一个-1。它通常与一个显示当前数值的文本域组合出现。

一般出现在购物软件中，对商品进行数量选择的场景下。需要注意，步进器的按钮在数值达到极值时会有状态变化，由可点击状态变为禁用状态。

7. 选择器 Pickers

苹果的选择器特指日历视图的日期选择器，和滚动视图的时间选择器，当然滚动视图不止能用来选择时间，也能用来分别选择日期的年月日，或者其他数据类型。

8. 颜色选择器 Color wells

用来选择颜色的控件，直接调用系统原生的颜色选择器即可，不过苹果也允许设计师自定义颜色选择器的外观。

五、展示

1. 弹出框 Popovers

点击某个控件或区域之后弹出的临时弹窗。

在 iOS 原生 App 中一般不会使用这个控件，它大体上是为 iPadOS 和 MacOS 准备的控件，不过如果你有需求的话，它可以用来提供额外的说明信息。

2. 进度指示器 Progress indicators

进度指示器用来指示加载、下载或者其他任务的进度情况。

进度指示器分为可估算和不可估算两种样式，可估算用于可以预估剩余数值的情况，一般用在下载、数据统计等场景下，不可估算则一般用于加载、刷新等场景中，也有比较特殊的会与页面控制结合在一起，用以提示当前 Banner 还会停留多久。

3. 页面控制 Page controls

页面控制，也可以叫轮播指示器，用来展示在一系列的图像中，当前展示到了哪一幅。说起来有点绕，其实就是 Banner 的指示器，那一排小圆点。

最多就是出现在 Banner 展示中，因为 Banner 通常一次只能展示一张图，所以需要页面控制来指示当前轮播到了哪一幅，从哪里开始轮播。

当然苹果还把这个控件用在主屏底部，桌面页面滚动的指示；还用在了切换墙纸滤镜风格的场景中；前面还提到过，这个控件也可以组合在工具栏中。总之苹果的使用方法可以大致参考一下。

4. 动作表单 Action sheets

动作表单用于展示与用户发起的操作相关的一系列选项，其中可以包含一些破坏性的操作，一般会用红色标出。它是一种模态视图。

iOS26 之前动作表单都是从底部弹出，同时界面覆上一层半透明的黑色遮罩，但是在 iOS26 里，苹果允许动作表单从别处的按钮上弹出来，比如：发送邮件时的取消按钮。

5. 警报 Alerts

警报是系统出现问题，或者用户触发了危险操作时向用户发起的一种强制提醒，可以用于确认或者取消操作。它是一种模态视图。

一般用于一些重要操作的二次确认，例如：删除、登出、取消订阅等等；也会用于系统状态出现变化时的提醒，例如 App 索取权限、更新系统、未知崩溃等等。

警报基本只需要使用 iOS 提供的系统样式即可，不需要自己设计。

结尾

iOS26 因为更新了设计风格，所以对很多控件的设计、定义都发生了变化。不管你们在网上以前的分享怎么写的，建议你们都以最新版本为标准做解读。

了解完控件以后，下次我们有机会会再做个组件分类的整理。

我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」