|B端产品中，Web端表单如何设计( 二 )

优点：时间较短，节约纵向空间。
缺点：整体可读性低，标签长度和输入框弹性小。

4）内联标签：内联标签由于它对空间的占比很小，往往运用于移动端的界面设计中；但如果在交互上处理不好，会有很大的缺陷。
内联标签是用作提示性文字，来告诉用户应该填写什么内容，但用户在填写的适合，它就会消失；因此用户无法仔细检查他们是否写下了所要求的内容，这增加了错误的可能性。
另外一个问题是：用户可能会把占位符文本误认为预填数据，因此忽略它（正如尼尔森诺曼集团的眼动追踪研究所证实的）。
5）图标标签：图标标签是内联标签的一种演化形式，在一定程度上缓解用户的困惑和自我怀疑的心理。
但就图标而言，用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式，用户就要思考和猜测它的含义。
此外，输入项一多，还得记忆那个图标所对应的意思。

优点：空间占比小；在一定程度上缓解用户的困惑和自我怀疑。
缺点：可能造成用户的认知负担，增加用户记忆成本。

6）浮动标签：用户在输入时，内部标题（提示信息）进行浮动位移，即节省了空间，提示性信息依旧在。
但相比其他几种标签样式来说，需要一定的开发成本。

优点：空间占比小，无需用户对标签进行记忆
缺点：需要一定的开发成本

关于标签样式的选择

本文插图

2. 输入域
输入域是表单的核心主体，包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件（按类型分）。
选择适合的控件样式，能在一定程度上提高表单填写的效率。

本文插图

在输入域中，存在多种控件样式，那么在设计产品的过程中，我们该如何选择，如何取舍呢？
以下是我在日常工作中的一些摸索，也包括借鉴前辈的一些经验。供大家参考。
1）文本框
文本框包含了单行文本框和多行文本框。
针对单行文本框的设计建议：
a. 选择适合的大小，它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。
如下图即一典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话，容易误导用户对所需输入金额的判断，造成极大不安全感。