新手必看 | 这个控件叫什么？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我们下篇再贱~