表单设计
设计更好的形式
设计师常犯的错误以及如何解决这些错误
image.png
无论是注册流程，多视图步骤还是单调数据输入界面，表单都是数字产品设计的重要组成部分之一。本文重点介绍了表单设计的常见做法和注意事项。请记住，这些是一般准则，每条规则都有例外。
表格应该是一列
image.png
多列破坏用户垂直势头。
顶部对齐标签
image.png
用户以比左对齐标签更高的速率完成顶部对齐的标签形式。顶部对齐的标签在移动设备上也可以很好地翻译 但是，考虑将左对齐标签用于具有可变选项的大型数据集条目，因为它们更容易一起扫描，它们会降低高度，并提示比顶部对齐标签更多的考虑。
用他们的输入组标签
image.png
将标签和输入紧密地放在一起，确保字段之间有足够的高度，以便用户不会感到困惑。
避免全部大写
image.png
所有上限更难以阅读和扫描。
如果在6以下显示所有选项
image.png
将选项放置在选择器下拉菜单中需要两次点击，并隐藏选项。如果有超过5个选项，请使用输入选择器。如果有超过25个选项，则在下拉菜单中加入上下文搜索。
抵制使用占位符文本作为标签
image.png
image.png
<figure name="4bf8" id="4bf8" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">通过使用占位符文本作为标签来优化空间是很诱人的。这导致了许多可用性问题，这些问题由尼尔森诺曼集团的凯蒂谢尔温总结。</figcaption>
</figure>
为了便于扫描，将复选框（和收音机）置于彼此之下
image.png
将复选框放在下面可以轻松扫描。
使CTA具有描述性
image.png
行动呼吁应说明意图。
内联指定错误
image.png
向用户显示发生错误的位置并提供原因。
在用户填写该字段后使用内联验证（除非在过程中帮助他们）
<figure name="265b" id="265b" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">不要在用户输入时使用内联验证 - 除非它帮助他们 - 例如创建密码，用户名或带字符数的消息。</figcaption>
</figure>
不要隐藏基本帮手文本
<figure name="007c" id="007c" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="26" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 1000px; height: 363px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[图片上传失败...(image-2de964-1526630337323)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">尽可能暴露基本帮助文本。对于复杂的辅助文本，请考虑将其放在焦点状态的输入旁边。</figcaption>
</figure>
区分主要和次要行动
<figure name="2396" id="2396" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="26" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 1000px; height: 363px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[图片上传失败...(image-9a5e21-1526630337323)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">关于是否应该包括次要选项还有更大的哲学争论。</figcaption>
</figure>
使用字段长度作为可供件
<figure name="22f6" id="22f6" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="16" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 1000px; height: 218px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[图片上传失败...(image-b43f07-1526630337323)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">领域的长度提供了答案的长度。对于具有定义的字符数的字段，如电话号码，邮政编码等</figcaption>
</figure>
沟*和表示可选字段
<figure name="7cd1" id="7cd1" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3 graf--trailing" data-scroll="native" style="display: block; margin: 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100; padding: 5px 0px; --margin-top-multiplier:0;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="31" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 1000px; height: 429px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[图片上传失败...(image-67b397-1526630337323)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 1000px; top: 0px; margin: 10px auto 0px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">用户并不总是知道所需字段标记（*）的含义。相反，最好是表示可选字段。</figcaption>
</figure>
集团相关信息
<figure name="ea7e" id="ea7e" class="graf graf--figure graf-after--h3 graf--trailing" style="display: block; margin: 44px 0px 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="70" height="75" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 700px; height: 752.5px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[图片上传失败...(image-a8376d-1526630337323)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 700px; top: 0px; margin-top: 10px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">用户分批思考，长时间的形式会感到压倒性的。通过创建逻辑组，用户可以更快地理解表单。</figcaption>
</figure>
为什么这么问？
省略可选字段并考虑其他收集数据的方式。总是问问自己，问题可以推断，推迟或完全排除。
数据输入越来越自动化。例如，移动设备和可穿戴设备在没有用户意识的情况下收集大量数据。想想你可以利用社交，对话用户界面，短信，电子邮件，语音，OCR，位置，指纹，生物识别等方式。
让它变得有趣
生命短暂。没有人想填写表格。会话。好笑。逐渐参与。做到意外。设计师的角色是表达他们公司的品牌以引发情绪反应。如果做得对，它会提高完成率。只要确保你没有违反上面列出的规则。
我希望这篇文章能帮助你设计更好的表格。如果您正在设计一个您希望得到我的反馈的设计，请加入这个评论平台，并与我一起在andrewcoyle55 [@] gmail上分享您的设计。
期待您的设计。我希望我能帮上忙。
<figure name="276d" id="276d" class="graf graf--figure graf-after--p" style="display: block; margin: 43px 0px 0px; position: relative; clear: both; outline: 0px; box-sizing: border-box; user-select: auto; z-index: 100;">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="42" style="display: block; vertical-align: baseline; position: absolute; top: 0px; left: 0px; width: 600px; height: 349px; margin: auto; box-sizing: border-box; visibility: hidden; opacity: 0; backface-visibility: hidden; transition: visibility 0s linear 0.5s, opacity 0.1s 0.4s;"></canvas>
[图片上传失败...(image-55c38-1526630337322)]
<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 700px; top: 0px; margin-top: 10px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">分享您的工作并通过https://ohapollo.com/sign-up/获取反馈意见</figcaption>
</figure>
