（翻译）文本字段的最优显示方式

文本字段是表单中请求用户输入信息的最常用组件，它们有各种尺寸、形状和样式。有这么多的选项可供选择，能得到最优可用性的文本字段的显示方式是什么？

强烈的视觉提示

最优方法是展示文本字段的功能及与用户之间的交互方式。换句话说，文本字段应具有强烈的视觉提示，能指明需要用户如何操作。
文本字段用于在界面中输入文本。因此，文本字段的输入框应显示为空白且可点击，用户看到文本字段就能输入内容，不具有这种显示方式的文本字段视觉提示效果差，很容易被用户忽略。
文本字段视觉提示效果差并不意味着用户不会输入内容，而是指会耗费用户更长时间，尤其是上年纪的用户。用户研究表明，视觉提示越强烈，任务绩效越快。

可点击性和空白区域

有些文本字段的视觉提示效果不理想。下图的实心文本字段，在可点击性方面具有强烈的视觉提示，但空白方面的视觉提示较差。实心文本字段的输入框为灰色，看着更像按钮，而不是内容为空的文本字段。

用户看到空白就会想到空无一物。文本字段的输入框应为空白，以便用户看出应该在输入框中输入内容。有这个提示很重要，这样文本字段才能显眼，因为页面上还有其他元素在吸引用户的注意力。
另一种常见文本字段为具有轮廓线的文本字段，其内部白色空间针对空白有强烈的视觉提示，但可点击性方面的视觉提示较差。用仅1像素宽的轮廓线指明文本字段的可点击性，当将其放在白色背景中时，用户很容易忽略。

带下划线的文本字段，其在可点击性和空白方面的视觉提示效果更差。文本字段的下划线宽度仅为1个像素，不仅容易忽略，用户还会将其误认为是用于分隔内容的行分隔符。缺乏可点击性和空白的视觉提示会增加用户与文本字段交互的时间，虽然可能仅会增加几秒钟，但当涉及到填写表单时，每一秒钟都很重要。

将文本字段放在深色背景中，并设置输入框为白色，这是文本字段的最优显示方式，既加强了可点击性和空白方面的视觉提示，也具有最大的清晰度。用户看到文本字段时，就能清楚地看出功能和用途，这种视觉清晰度能让他们毫不犹豫地立刻向文本字段中输入内容。

圆角

文本字段具有强烈的视觉提示后，就可以考虑圆角事宜了。圆角并不具有视觉提示效果，但它确实会影响用户对物体的态度。
研究发现，可视对象的尖锐轮廓会传达威胁感，并引发负面偏见。另一项研究发现，在不同文化中，曲线轮廓比尖锐轮廓更受青睐。换句话说，带圆角的文本字段可能会让用户觉得表单对他们更友好，但问题是能提高多少友好度。

需要指出的是，就算用户觉得表单很友好，这也不意味着表单具有最佳可用性。友好度仅影响用户对表单的最初印象，即便文本字段使用圆角，但要是用户无法填写表格，他们也可能会认为表单不友好。
设计人员可以根据需要调整文本字段的圆角半径。较大的圆角半径效果不好也不坏，它只是一种审美偏好。设计人员只需设置文本字段的圆角半径以消除尖角即可。

选中状态

选中文本字段时，需要给用户额外的视觉提示。选中状态表明文本字段已激活，让用户知道该在哪里输入内容。选中状态的视觉提示有助于用户关注激活的文本字段，不会将周围的文本字段误认为选中的文本字段。

选中状态的视觉提示不能仅限于文本字段的边框颜色变化，只改变边框颜色会使视障用户和色盲用户难以区分选中状态。
对视觉提示的研究表明，仅使用颜色会让色盲用户失误，同时使用颜色和形状变化可以提高用户看到视觉提示的概率，让他们更快地完成任务。
除了更改文本字段的边框颜色，还应将边框宽度从1像素变为2像素，这使文本字段的颜色和形状都有明显变化，让所有用户都能看到明确的状态变化。

示例

电商平台Shopify网站中的文本字段很明确，文本字段放在深色背景中，输入框为白色，边框使用圆角，且选中时边框宽度变为2像素。文本字段选中时的边框颜色与网站的品牌颜色相匹配，极具吸引力。

形式服从功能

清晰的视觉提示给予文本字段最优的可用性。设计人员可能觉得文本字段很清晰，但并不是所有用户都与设计人员观点一致。请确保文本字段对所有用户都是清晰的，包括那些有视觉障碍的用户。
为了让所有用户都清晰明确，需要有主要和次要的视觉提示。文本字段的视觉提示是可点击性和空白，但对于其他界面组件，视觉提示可能会有所不同。
界面组件的功能决定了视觉提示方式。让功能指导界面组件的外观样式。正如著名建筑师Louis Sullivan在20世纪所说的格言：“形式永远服从功能”。

原文地址：https://uxmovement.com/forms/the-best-way-to-display-text-fields/