设计基础知识

在第一部分中,您学习了如何构建基本表单。 本部分主要介绍最佳实践。 本单元介绍用户体验 (UX), 以及完善的界面 (UI) 为何能带来巨大变化。

填写表单既耗时又令人沮丧。 实际情况并非必然如此。 为了保证出色的用户体验,请确保界面直观。 确保提供最佳的表单结构和图形设计(布局、间距、字体大小和颜色), 和逻辑界面(例如标签措辞和相应的输入类型)。 让我们来看看如何改进表单并使其易于使用。

您还记得 <label> 元素的用途吗? 描述表单控件的标签。 醒目可见且写得好的标签有助于用户了解表单控件的用途。

为每个表单控件使用标签

您要向表单添加新的表单控件吗? 首先,为新字段添加标签。 这样,您就不会忘记添加该代码了。

先添加标签还有助于您专注于表单的目标 - 这里需要哪些数据? 明确这些信息后,您就可以专注于帮助用户输入数据并填写表单。

标签措辞

假设您想要描述某个电子邮件地址字段。您可以按如下方式执行此操作:

<label for="email">Enter your email address</label>

或者,您可以这样描述:

<label for="email">Email address</label>

您应选择哪一条广告内容描述?

在我们的示例中,“电子邮件地址”一词是首选 因为短标签更易于浏览,可减少视觉干扰 并帮助用户更快地了解需要哪些数据。

标签位置

借助 CSS, 您可以在表单控件的顶部、底部、左侧和右侧放置标签。 您要将其放在何处?

研究报告 最佳做法是 将标签放置在表单控件上方 这样用户就可以快速扫描表单并查看哪个标签属于哪个表单控件。

设计表单

好的表单设计可以 显著降低表单放弃率。 使用适当的元素和输入类型帮助用户输入数据 有很多种 表单元素和输入类型供您选择。 为了提供最佳用户体验,请根据您的使用情形,使用最合适的元素和输入类型。 如果用户应填写多行文本,请使用 <textarea> 元素。 如果用户需要接受您网站的条款及条件,请使用 <input type="checkbox">

您还应从视觉上区分不同类型的表单控件。 按钮应看起来像按钮。 输入类似于输入。 让用户能够轻松识别表单控件的用途。 例如,如果某个页面看起来像是链接,那么点击该链接会打开一个新页面。 而不是提交表单。

帮助用户浏览表单

奢华的布局可能很有趣,但可能会影响表单的填写。

具体来说, 研究显示 最好仅使用一列。 用户不想花时间搜索下一个表单控件的位置。 使用一列,就只能遵循一个方向。

帮助用户与表单互动

为了避免意外点按和点击, 并帮助用户与表单互动,请将按钮设计得足够大。 建议的 按钮的点按目标尺寸至少为 48 像素。 您还应使用 margin 在表单控件之间添加足够的间距。 CSS 属性,有助于避免意外交互。

默认表单控件的尺寸太小,不利于实际使用。您应使用 padding 并更改默认的 font-size 来增加大小。

您可以为不同的指控设备定义不同的尺寸 例如鼠标,使用 pointer CSS 媒体功能。

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

详细了解 pointer CSS 媒体功能

在发生错误的位置显示错误

为了让用户直接了解需要注意的表单控件, 在对应的表单控件旁显示错误消息。 在表单提交时显示错误时,请务必转到第一个无效表单控件。

向用户明确说明应输入哪些数据

确保用户了解如何输入有效数据。 用户是否至少需要输入 8 个字符的密码?请告诉他们。

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

向用户明确说明哪些是必填字段

<label for="name">Name (required)</label>
<input name="name" id="name" required>

如果字段是必填字段,请明确指出!“无障碍表单详解”介绍了 必填字段。如果表单中的大部分字段都是必填字段, 表示选填字段

如何将错误消息与表单控件相关联,以便屏幕阅读器可以读取? 您可以在下一单元中了解相关信息。

检查您的理解情况

测试您对表单设计知识的掌握情况

如何描述表单控件?

使用 <label> 元素。
使用 placeholder 属性。
使用 description 属性。
使用 <description> 元素。

推荐的点按目标尺寸是多少?

16px
31.5 像素
48px
足够大,可以用土豆点按一下。

您应将错误消息放在什么位置?

随时随地畅享内容。
一律不显示错误消息。
表单控件旁边
<form> 的顶部。

资源