表单设计

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

一份非常易懂的指南,来自 Geri Reid 关于构建表单的指南。不是代码,而是应该指导代码的设计和 UX 原则。

为一家银行设计系统让我学到了很多关于表单的知识。我观察了我们在实验室中的测试。我与来自专业无障碍组织的专家合作。我看到残疾人和辅助技术用户测试表单。我还阅读了很多研究。

从所有这些学习中,我形成了自己的表单最佳实践指南。

在谈到一般表单建议时,我总是想到一件事与代码相关:**所有输入都需要一个关联的标签。**

<label for="name">Name:</label>
<input type="text" id="name" name="name">

<!-- or -->

<label>
  Name:
  <input type="text" name="name">
</label>

这是 HTML 101 的内容,但很多表单都没有做到这一点。我曾经听过一个故事,一群即将上大学的盲人高中生无法申请大学,仅仅是因为他们无法弄清楚表单上的输入需要什么。在那次经历之后,他们开始怀疑自己能否独自完成大学学业。

你知道《洋葱报》在每次发生大规模枪击事件时都会发表文章“‘无法阻止这种情况’,唯一发生这种情况的国家表示”吗?我感觉应该有人创建一个网站,发布一篇指向每个未能通过此测试的网站的文章,标题类似于“‘无法阻止这种情况’,标签只用敲几下就能修复的网站表示”。