Apple HIG:文本栏(Text fields)

2026年5月5日
Apple HIG
Apple HIG
苹果人机界面设计指南
已累计原创 20 篇文章查看全部

文本栏是一个矩形区域,用户可以在其中输入或编辑特定的小段文本。


最佳实践

使用文本栏请求少量信息,如姓名或电子邮件地址。若要让用户输入大量文本,请改用文本视图

在文本栏中显示提示以帮助传达其目的。文本栏在没有其他文本时可以包含占位符文本,例如“电子邮件”或“密码”。因为占位符文本会在用户开始键入时就消失,所以包含一个描述该栏位的单独标签以提醒用户其用途也很有用。

使用安全文本栏隐藏隐私数据。App 请求密码等敏感数据时,始终使用安全文本栏。

尽可能使文本栏的大小与预期的文本数量相匹配。文本栏的大小可以帮助用户从视觉上衡量要提供的信息量。

均匀间隔多个文本栏。如果布局包含多个文本栏,请在它们之间留出足够的空间,以便用户可以轻松地看到每个介绍性标签对应哪个输入栏。尽可能垂直叠放多个文本栏,并使用一致的宽度来创建一个更加整洁有序的布局。例如,地址表单中姓和名栏位的宽度可能相同,而地址和城市栏位的宽度可能不同。

确保在多个栏位之间按用户预期的方式切换。在栏位之间切换时,按逻辑顺序移动焦点。系统会尝试自动实现这个结果,所以你不需要经常去自定义它。

适时验证栏位。例如,如果某个栏位的唯一合法值是数字字符串,那么你的 App 需要在用户输入非数字字符时发出提醒。检查数据的合适时机取决于上下文:输入电子邮件地址时,最好是在用户切换到另一个栏位时进行验证;创建用户名或密码时,需要在用户切换到另一个栏位之前进行验证。

使用数字格式器帮助处理数值数据。数字格式器会自动将文本栏配置为仅接受数值。它还能够以特定方式显示值,如带有特定小数位数、百分比或货币。但是,请不要假设数据实际表示的值,因为格式化可能会因用户所在的地区而有很大的差异。

Pro 会员文章
开通美叶 Pro 会员,即可阅读此篇文章的全部内容,同时可阅读全站 Pro 会员文章
开通美叶 Pro

0 人收藏了本文

为 Gemini 应用绘制插画体系为 Gemini 应用绘制插画体系
Material3设计规范:轮播(Carousel)Material3设计规范:轮播(Carousel)
Apple HIG:页面控制(Page controls)Apple HIG:页面控制(Page controls)
Apple HIG:提醒(Alerts)Apple HIG:提醒(Alerts)
Apple HIG:操作表单(Action sheets)Apple HIG:操作表单(Action sheets)
Apple HIG:进度指示符(Progress indicators)Apple HIG:进度指示符(Progress indicators)
Material3设计规范:开关(Switch)Material3设计规范:开关(Switch)
Apple HIG:材质(Materials)Apple HIG:材质(Materials)