• 
• 前面跟大家分享了关于表单的基础知识点的一些经验总结，有一些朋友私信跟我说，已经很了解表单的基础知识了，但是在设计的时候，还是总是存在纠结困扰的地方。
• 我相当感同身受，做了几年的表单设计以后，我对各类表单及设计点很清晰，但是当我开始设计新产品的表单的时候，还是经常陷入困扰、纠结，经常为了一两个很小的设计点方案和产品经理争论半天；每次坚持自己想法的时候，甚至不能很清晰且有理有据的说明，这让我一度感到很焦虑。为此我查阅大量资料，文章，就是为了解决这种说不出为什么的尴尬无力感。
• 我总结出来，一些我在设计中常遇到的困扰及纠结的设计点，分享给大家。
• 
• 
  
• 
• 一、哪种标签对齐方式更好？
• 这个问题基本是在新建一个产品的时候才会出现，如果你做的产品已有明确的规范和使用场景，那么统一表单标签对齐方式即可。
• 但是，如果你需要重新定义一个新的表单规范时，那么你就需要考虑哪种标签对齐方式更好，怎样区分使用场景！
• 很多的前辈们通过科学实验发现，无论是在眼动仪的热图，还是在许多可用性测试的观察结果中，用户在填写网页表单时视线主要集中在输入框的左侧。他们的视线几乎不会落到输入框的右侧，甚至都不会瞟上一眼。
• 以此为基础，我们在网页表单设计中有4种最常见的标签对齐方式：顶对齐标签、右对齐标签、左对齐标签、行内标签。
• 
• 另外还有混合对齐标签、内联标签、图标标签等，它们基本是在这4种形式上变化，不脱离本质。每一种对齐方式都有一定的优点和局限性；因此在合适的场景下选择合适的标签对齐样式，可以提升用户的输入效率，下面我们来展开说说：
• 
  
• 1. 顶对齐标签（Top aligned labels）
• 顶部对齐是标签在输入域的上方，与输入域进行左对齐，这样可以节省横向空间的使用，标签和输入框位置最为靠近，用户在填写时也比较方便，移动端产品的设计中下拉的交互比左右滑动的交互更为便捷所以采用顶部标签较为常见。
• 
• 从2006年7月起马泰奥·彭佐进行眼动研究，结果表明，从标签移动到输入框，顶对其最短需要50毫秒，左对齐需要500毫秒，是顶对齐的10倍，右对齐是240毫秒。
• 我们通过眼动数据可以看到，顶对齐是效率最高的表单填写样式，因为眼球只需要在标签和输入框之间进行上下单向运动。
  
• 
• 优点：标签和输入框位置最为靠近，表单填写时间最短；用户视线固定，动线一直向下具有清晰的完成路径；节省大量横向空间，另外与输入框对齐视觉更舒适。
• 缺点：占用额外的垂直空间，如果可提供使用的垂直屏幕空间较小，应当谨慎使用顶对齐标签，若表单选项较多的时候会增加表单长度并使页面滚动。
• 适用于场景：可用于以多种方式组合的相关输入框；希望用户快速填写表单并完成任务的情况；页面空间纵向空间充足，标签长度难以限定简化、拓展性要求较高的表单；更适合有国际化的需求比如说法语、德语或荷兰语比英语长很多的语言；当垂直屏幕空间大，表单有组合需求时，顶部标签是不错的选择，比如飞书的基本信息页面：
  
• 
  

• 2.右对齐标签（Align label right）

• 最为常见的表单标签，该标签形式中文字标签与输入域的距离是固定的，有明确的视觉关联。马泰奥·彭佐的眼动研究发现，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在170毫秒和240毫秒，而填写完成时间比左对齐快2倍。
• 
• 优点：标签和输入框之间距离固定，有明确的关联，有利于用户填写，同时节约垂直空间；
• 缺点：左边标签参差不齐，视觉上不够美观，浏览标签造成一定障碍，降低了表单的可读性，横向占用空间大，不利于狭长页面布局，标签长度和输入框弹性小。
• 适用场景：标签和输入域的弹性长度较小，比较适用于既要减少垂直空间，又要加快填写速度的业务场景，比如账号的基本信息。且适合数据内容多、逻辑关系简单、标题字数少的情况（如筛选条件）
• 右对齐标签有利于用户的填写，但是不利于用户对标签信息的查看，如下图，当标签长短不一时，左边的标签就很难对齐：
• 

• 
  

• 3.左对齐标签（Align label right）

• 左对齐标签也是最常用的一种标签，采用文字左对齐的方式将标签文本放置在输入域的左边，这种结构有利于用户对标签整体的查看，从整体上对表单所需要填写的内容更加清晰。
• 根据马泰奥的研究，左对齐标签“典型扫视时间为500毫秒，时间很长，说明用户经历着沉重的认知压力。”左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。
• 在顶、右、左三种方案中，左对齐表单填写速度最慢。
• 
• 优点：标签开头阅读视线对齐，符合用户的阅读模式，比较方便用户浏览表单，也比较节约垂直空间；
• 缺点：由于标签长短不一，有些标签距离输入框较远，视觉跳动较大，使标签与其输入框亲密性降低导致用户填写费力，用户存留时间较长；标签和输入域的弹性长度小，横向占用空间较大，所以不适用于横向空间狭小的表单页面。
• 适用场景：适合表单中存在较多的复杂敏感数据，需要用户谨慎的对待表单的填写，特别是表单含有大量可选输入框，类似“使用偏好”或者高级设置陌生数据时，就可以使用左对齐标签。
• 
• 上图可以看出，右对齐标签填写速度要比左对齐标签快一倍。左对齐标签中用户眼球定位时间长，需要反复建立标签和输入框的联系，但同时文字左对齐也让标签侧的浏览变得容易。反之，右对齐则与之相反。
• 
  
• 需要注意：
• 左对齐受限于标签字数的长短，造成右边的视线不能够统一。与输入域视觉间距大小不一。标签越短，与输入域的间距越大。
• 根据菲茨定律，既起始位置离目标位置距离越远，我们到达目标位置所花费的时间就越长。反之，离目标位置越近，我们所花费的时间就越短。所以对于整个表单的浏览速度也会变得缓慢一些。
• 需要要注意的是，虽然速度是最慢的，但从辩证的角度来看，B端业务设计中，【缓慢完成率】并不总是一件坏事，如果表单数据复杂且安全性高，可以故意减缓用户的填写速度，来确保填写的准确性。”
• 这是一种较为柔和的方式使用户的读取速度变慢，让用户认真的阅读，保证信息采集的准确性。在一些注册类、管理后台类表单中较多使用。
• 当你的产品业务数据信息比较敏感或很重要需要用户仔细斟酌表单内容，谨慎填写时，左对齐标签是不错的选择。若表单内容简单易理解，那么可以使用右对齐标签来提升效率。
• 如下图小鹅通的组织架构填写的部分：
• 
• 
  
• 4. 内联标签（inline tag）
• 内联标签是将文本标签内置于输入域内部显示，原本显示输入提示的位置用来显示输入标签，在输入前告知用户输入域输入的数据内容，输入的时候标签消失。最常见于登录注册的场景。
• 优点：如果屏幕空间十分有限，行内标签是最常使用的方法，同时节省了横向和纵向的页面空间；
• 缺点：输入的时候标签会消失，会让用户产生困惑，使用体验较差，而且拓展性也较差；一般用户记忆标签等信息使用的是大脑的短时记忆，一般不会刻意去记忆输入标签，所以极易导致用户忘记刚刚记住的标签而不知所措感到困惑；
• 适用场景：某种通用的固定场景，例如登录注册等，或者表单录入项较少时可以考虑使用，建议不超过3个输入项；
• 比如UI中国，站酷等登录的页面。
• 
• 注意：
• 人在短时间内只能记住5～9个单位，即“7加减2”法则，这是大部分用户的极限，但设计一般不会去挑战极限，而是要思考，还有一部分用户是远远达不到“7加减2”这个范畴，因此，在设计的时候，就需要降低用户的记忆门槛，采用更加适用的“2加减1”原则，当用户需要输入的字段多余三个的时候，就必须给表单留下标签，用来提示用户。
• 
• 行内标签虽然可以大大节省横向和纵向的空间，但当提示信息消失的缺点也很明显，所以关于内联标签升级出了两种类型：
• 
  
• 4.1 浮动标签
• 浮动标签也是内联标签的一种演化形式，标签在输入前位于输入区类似占位符，在用户输入数据时，内部标签（输入提示信息）会发生位移和大小的变换，浮动到输入域的上面。
• 优点：除了具备内联标签的优点节省水平和垂直的空间外，还无需用户对输入标签进行记忆，保障了用户录入信息的准确性。
• 缺点：需要一定的开发成本。
• 适用场景：除了适用与内联标签的应用场景外，还适用于一些具有一定复杂度表单，输入项较少的简易表单；这种方式比较常见于登录注册的场景中，例如下图花瓣网就是采用该形式。
• 
• 
  
• 4.2 图标标签
• 图标标签也是内联标签的一种演化形式，采用图形图像的方法来替代内联标签中的文本标签，以此来提示输入域中需要填写的内容，如注册登陆等表单。
• 优点：同时能够节省水平和垂直的页面空间，标签设计成图标，使表单更灵活和简洁。
• 缺点：抽象的图标标签，增加认知负担和记忆成本。
• 适用场景：录入项信息区分较大，不易混淆，能用图形轻松识别内容，或某些固定的场景或业务模式以及不超过3个录入项的简易表单；
• 

• 
  5. pc端和移动端，选择表单方式

• pc端
• 在网页端我们大多看到的都是左右结构（右对齐和左对齐），这是因为有空间占比的原因。
• 在 pc 端，横向空间很大，需要考虑到协调的关系，如果采用上下结构，在内容过多的情况下，就会出现重心偏左的视觉效果。并且，视线距离屏幕较远，视觉聚焦面积更大，因此视觉路径较长的这一点就被中和掉了。
• 移动端
• 移动端的限制是屏幕太小，一个横屏展示不开，特别是在标签名字很长的时候，弊端更加明显，当然缺点除了识别度会降低，视觉路径增长之外，纵向空间占比也会增加，本身一屏就能展示完，现在需要两屏甚至更多。所以在移动端更多的是使用上下结构。
• 
• 
  
• 6. 标签对齐总结
• 关于表单对齐方式这个问题是在设计师发问频率较高的一个问题。其实，不论是哪种方式都有相对的利弊，需要根据实际业务场景提供不同的解决方案。当然，为了保证设计语言的一致性，在同一个表单下选择使用一种便好。
• 根据马泰奥·彭佐的对齐方式研究出的时间表总结：单从效率角度看，顶对齐>右对齐>左对齐，根据不同的业务场景，效率并不是唯一的考虑指标。基于以上，我总结了一个对比表：
• 
• 基于上表，得到以下几点建议：

• 1. 如果你希望用户放慢速度，仔细思考表单中每个表单项，左对齐标签是个好选择，特别是含有大量可选输入框或高级设置的陌生数据时；
  
• 
  
• 2. 而顶对齐标签在一些国际化产品的表单设计时，会有更好的延展性；
  
• 
  
• 3. 至于，右对齐标签虽然与表单域联系紧密，便于用户填写，但是要考虑好标签的长短不齐如何解决。能否精简标签内容，以及确定好表单与界面的边距。
• 
  
• 
  

• 二、必填与可选字段的标记如何选择？
• 1. 必填是否需要标记？
• 如果表单中的大多数字段或全部都是必填的，我们是否仍然应该标记它们？
• 一般情况下，设计师可能会觉得每个必填字段都有一个标记是重复、不好看，造成页面视觉噪点的增多，甚至可能看起来很扰乱（有认知负担），确实有些情况下，红色作为一种有特殊含义的颜色，会引起用户误解。
• 那么我们来看看，标记与不标记的对比图：
• 
• 如图所示，答案是需要标记的，我们来聊聊，为什么：
• 我们通常会采取以下一种或两种策略：
• 1. 在表单顶部显示说明，说明中除非另有解释，否则所有字段都是必填；
• 2. 只标记可选字段，因为它们通常较少；
• 3. 在某些特殊情况下，什么也不标记，相信用户按照顺序填写字段；如果不知道，那么只需要点击提交报错即可。
• 这些方法都是使表单交互体验不好的设计问题，为什么呢？

• 1. 用户一般不喜欢阅读表单顶部说明，甚至会忽略掉表单顶部的大段文字说明。
• 
  
• 2. 即使用户阅读了顶部的说明，也可能忘记。特别是当表单很长或填写表单被打断时（这种情况在移动端很常见）。即使用户记得，但这占用了工作记忆，增加了认知负荷，让用户完成任务更难了。
• 
  
• 3. 用户必须扫描表单以确定是否为必填字段。所以，无论是否在表单顶部包含说明，用户都可能会忽略或忘记。他们会扫视表单，找到一个标记为必填或可选的标识。
• 
  
• 4. 如果作必填标记，用户可能会做出假设。“这个没有说必须要填，先空着吧”。即使用户没有留空，也不得不暂停来思考一个字段是否需要填写，减慢交互速度并使过程看起来更长、更乏味。

• 
  
• 所以，想要解决以上问题很简单：标记所有必填字段！
• 尽量明确和清晰展示每个必填字段，并标记它。当然，就像有些设计师所说：界面出现大量必填标识（红色星号）确实会增加视觉噪声。甚至重复的星号 会带来一些认知恐慌。但相比之下，两害取其轻，这些负面因素是轻微的。
• 
  
• 2. 一般是如何标记必填字段？
• 通常包含至少有两种方式：
• 2.1 星号（红色）
• 星号在网页上已经很常见，用户熟悉其含义。
• 优点：不占用太多空间，也看起来与标签文字足够不同。当然也可以使用其他视觉标记形式！但是建议最好遵循市面上常见的形式（雅各布定律），这样更符合用户认知。
• 
• 星号应该在字段标签之前还是在字段标签之后？
• 标识在标签之前能指引用户迅速浏览界面，用户只需扫视标签的最左边字符，就能轻松定位必填哪些字段，效率上会大大提高。
• 如果在标签后面，由于输入框形式、长度各不相同，标识和输入框对齐会导致难以浏览和判断。
• 
• 所以最佳的答案是在标签之前。
• 2.2  “必填”提示
• 当表单中的大多数字段或全部都是必填的，为避免过多“*”造成的的视觉噪点，我们可以利用标签或者占位符来提示用户哪些内容项是必填的，哪些是非必填的。这种处理方式可以减轻大量必填标识（红色星号）造成的视觉噪声。
• 
• 
  
• 2.3 为什么登录表单没有标记必填？
• 一般情况登录表单很短，主要由两个字段组成：用户名和密码，如果使用星号*，标记这些字段的成本很低，并不会出错。但是，绝大多数用户都使用过很多登录表单，用户心智早已建立起来的这两个字段总是必填的。所以，在登录表单中，可以省略这种形式。
• 
• 需要注意，在注册表中不标记必填字段是危险的。注册表单因产品而异，不仅仅包含用户名和密码不同公司在创建帐户时需要不同类型的信息。所以需要标记所有必填字段（包括用户名和密码）
• 
  
• 
• 一、 表单域有必要提供默认值吗？
• 答案是有必要的提供默认值的！
• 我们可以通过提供合理的默认值，有效节省用户提填写表单的时间，进而提升表单提交率。在 Web 表单中也可以利用智能默认减少不必要的选择次数或输入，加速表单完成过程。
• 所以，在表单域中预先为用户填写你认为他们想要的合计输入值是有必要的。
• 
• 当然有可能会存在疑惑：如果默认值不是用户想要的，误导用户怎么办？

• 1. 在设计有默认值的表单域时，需要思考默认值是否是大多数用户可以接受的答案，如果不确信可以先去做一下用户调研，了解用户的心声。
• 
  
• 2. 就算默认值真的不是用户想要的，至少也为他提供了一个示例来告诉用户答案应该是什么样子的。
• 
  
• 3 但是，并不代表所有的表单域都要给出默认值。只有当你有理由确信绝大部分用户，在绝大多数情况下，不会修改这个取值时才提供默认值——否则，这将会给用户带来额外的工作！
• 
  
• 
  

• 二、输入框的宽度如何设定
• 这个问题是很非常常见且最容易被忽视的但实则举重若轻的问题。我自己在早期的时候就犯过，比如：要求输入框长度一致，一个系统内部输入框的长度没有规则等等问题，导致设计和前端都没有规律可找，大大降低了工作效率。
• 后来参考了Ant Design 4.0 系列文章《整齐划一？不如错落有致》，如下图：错落有致的排版表现似乎比整齐划一的左图更舒适，因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体。
• 但左图过度的对齐导致暗示隐性的截断，我们惯性视觉会产生表单字段右侧空间缺了一大块的错觉。
• 
• Ant Design 4.0 系列文章总结到「表单宽度的处理方式核心旨在解决两个问题：
• 1、暗示填写内容长度；
• 2、表单项布局排列效果；
• 唐纳德·诺曼的著作《设计心理学》中详细讲解过心理暗示方面的内容。而宽度的变化就是一种有效暗示。
• 
• 文章认为我们通过设置合理的默认宽度尺寸和描述关系，就可以让设计师们跳过部分繁琐磨人的细节思考，快速搭建表单宽度合理且舒适的页面。下面我们来详细的聊一聊：
• 
  
• 2.1 错落有致优于强制的整齐划一
• 很多设计师在面对表单设计的时候，都会潜意识地将或要求追求所谓视觉上的整齐划一，强行将表单的宽度定位统一的宽度，然而这却犯了形式主义错误，没有深入思考表单应用规范和用户填写的感受，实际上有秩序的“不一致”也不一定比强制性的“整齐划一”的视觉感差，甚至更好。
• 每一类型的表单的输入域都会因其录入数据的类型而存在对应的宽度，输入域的宽度应该匹配和暗示其填写的内容；合理对应的输入宽度不仅能够给用户的输入量带来心理暗示和预判，也提升整个表单数据录入过程中的掌控感和舒适度。
• 通过下图的对比，我们可以明显的看到，错落有致的排列方式更加舒适，并且有更强的暗示作用。
• 
• 
  
• 既然要错落有致，那么要如何做呢？
• 表单设计中，对于单选框、复选框等控件，很明确必须跟随内容自适应处理。但对于输入框、选择框等组件你是否也会产生困惑，是定宽处理还是跟随内容更好。
• 实际业务中，大部分输入框所需填写内容都存在理想长度，输入框的宽度暗示填写内容的长度，合理的宽度帮助减少用户的焦虑，给用户带来安全感。在单项排布时也要尽量考虑用户的观感，通过设置合理的默认宽度尺寸，让设计师快速搭建出观感舒适又给用户降低焦虑的页面。
• 反之，如果输入框不受限于暗示，则应保持长度一致。
• 这里需要特别注意：保证暗示效果的同时，不要设定太多的宽度，反而会让表单显得凌乱；太少又会让表单看起来都像四四方方的盒子。最佳方法是找到适合产品的最佳模度值和数量。
• 
  
• 2.2 模度值
• 上文提到错落有致，那么如何错落有致呢？有什么规则吗？ 
• 设定模度值的优势：
• 表单的外观视觉虽呈现错落有致，但在内在逻辑的约束下做到了“有秩序的不一致”。不仅解决了暗示用户输入量多少的问题，更是避免了设计师在面对表单时不必要的主观和感性，表单设计由规律可循，同时开发人员也更容易地做到对设计稿的精准还原，也可以提升工作效率。
• 

• 
  

• 1. 梳理产品中常见的表单类型

• 根据你所设计产品的具体业务情况，梳理出常用的表单类型，根据这些表单类型的的长短来进行具体输入框尺寸的制定；
• 需要注意：
• B端项目中表单的应用场景十分丰富且复杂，针对每一种场景去定制一个输入框尺寸是不现实的，在页面实际设计中就会显得页面很凌乱。所以，我们特别要解决的问题就是如何让输入框在单个状态与组合状态下都尽量保持较好的对齐状态，同时输入框的尺寸还有规律可循。
• 
  
• 2. 设定表单模度值
• 结合Ant_Design的解决方案，Design设定104px 为原子级宽度尺码 XS，通过倍数+间距叠加的方式（此处计算间距的原因是为了兼顾组合输入框 和单个输入框 对齐问题）从小到大去依次推导出更大的四种宽度来拟合前面划分的尺码。最终得到如下5种宽度尺码和对齐关系。
• 如：基准输入宽度XS = 104px，以其倍数 (n) 加上 (n-1) 倍的间距 (8px) 为规则，分为5种不同尺寸 (XS、S、M、L、XL)。那么我们就得到了S: 104px*2+8px=216px; M:104px*3+16px=328px….五种尺寸（如下图）。
• 
• 当然，我们在设计时，最小原子的宽度不一定设置为104，也可根据业务情况将最小原子XS设置为可容纳6个中文汉字，然后在通过如下规则进行换算。
• Ant design表单设计研究结论建议的5种高频的宽度需求区间，以尺码类比分别是：XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。
• 
  
• 3. 向验证模度值
• 接下来可以通过反向验证第一步我们的罗列出的常用信息内容，是不是都能找到对应的尺寸适配，如果不行的话就调整我们最小输入框的尺寸，使大部分的填写内容都能有合适的尺寸。
• 需要注意，建议在制作设计规范的时候，把每一种尺寸的使用范围情况做详细的说明，如下图。
• 
• 
  
• 三、输入内容需不需要快捷清除图标？
• 我在早期设计表单的时候经常和产品经理争论这个问题，产品经理经常考虑不到这个问题，当设计师提出来时，产品又觉得没有必要。
• 我们在修改表单输入域时，已填写内容时是否需要快捷清除按钮是一个关于效率的问题，需要考虑的不仅仅是逐个清除和一次性快捷清除的对比，还要考虑清除后重新输入数据的成本。
• 1. 如果输入成本低的情况，可以提供一键清空的快捷功能按钮。比如：密码等短数据在输入错误时一键清除后，再次输入也会很快就能完成，此时重新输入的成本不高，可以为提高效率提供一键清除错误信息的快捷功能；
• 2.如果输入成本高时则不建议一键清空。比如：文本框等长文本输入的时候，在精心编辑一段话，并且花费不少时间加以润色后，清除后重新输入的成本就会高很多。此时则不建议提供一键清除的快捷功能，放置误操作。
• 
• 
  
• 四、开关、单选、复选框三个组件如何选择？
• 这个问题是我做表单设计的时候，常与产品经理争论频次最高的，比如业务型产品经理，他的主要精力在业务上，一些表单组件的选择上就没有深度考虑。
• 在表单设计中，特别是只有两种状态下，比如开启/关闭、启用/关闭、显示/隐藏、同意/不同意、默认/自定义等等….选择哪个组件更合适呢？下面详细聊聊我经常和产品沟通的总结：
• 
  
• 1、开关Switch
• 1.1 简要了解开关
• 开关组件的产生就是作为仿照物理开关的映射，提供了两种最为简单、直接的对立选项，比如开/关、启动/禁用等。设计来源于生活中控制灯泡的开关，点击灯泡立即亮起。
• 
  
• 1.2  开关组件的特点
• 1. 标签名称须传达清晰，能够让用户能够明确感知操作后的动作开启或关闭什么；
• 2. 主体标签信息和按钮是分离的，两个视觉焦点；
• 3. 一般点击后会立即反馈；
• 4. 没有 hovering 效果，有动作效果，更适合手指操作（说明开关按钮更常用于移动端）；
• 
  
• 1.3 苹果公司对开关组件的设计规范
• 1. 开关的视觉权重比较高，需避免使用开关控制局部细节或者次要的设置。一般用它控制内容较多更为合适，比如可以将它作为总开关打开或关闭一组设置。
• 2. 通常不要用开关替代复选框，如果我们的规范中定义了复选框，则尽可能保持一致的使用规范。
• 
  
• 1.4 开关使用场景举例
• 通过对开关组件特点，结合苹果组件的规范，我们基本可以梳理出以下几条主要使用场景：
• 1. 开关的标签的含义需传达清晰
• 和单选、复选框不一样的是，因为开关主体的信息和按钮是分离的。所以用户在点击开关按钮前，必须清晰告知用户点击后会发生什么，甚至有时我们需要通过增加副标题来加以说明。
• 
• 
  
• 2. 一般只为立即生效的场景使用开关按钮
• 一般情况下开关只在能够立即生效的场景适用。
• 在表单填写时，往往最终会有「提交」按钮作为结束态，开关作为表单字段的填写，用户点击后并不能够立即生效，而是需要再次点击「提交」按钮，这样处理会让开关的特点所滞后。
• 
• 
  
• 3. 有风险时，需着重提醒用户
• 开关的视觉权重较高，在复杂的表单信息中，相比于单选器、多选器来说，它能够很快吸引到用户的注意力，并能够给用户以视觉提醒。
• 
• 
  
• 4. 避免大面积使用开关
• 开关在视觉感知上它和按钮上有些接近，需要尽可能避免在表单中大量使用开关来控制局部层级内容，一般使用开关控制局部细节或者次要设置，如果需要大面积控制时，推荐使用复选框来替代开关作为局部。
• 
• 
  
• 5. 把它作为高层级内容控制或信息设置
• 把它用来作为总控制来显示更高层级内容，避免 web 表单中大面积的使用开关按钮，会和其他的基本组件造成视觉干扰。这样可以既凸显其重要性，又能提升用户浏览表单的效率。
• 
• 
  
• 1.5 小结
• 开关按钮视觉突出且反应快。用户浏览表单、填写内容组之间，一般不需要很强的视觉差异。如果填写的表单信息之间对比差异过大，开关往往给用户造成过大的视觉干扰，反而阻碍用户浏览表单的效率，所以尽量避免让无数开关出现在表单中。
• 
  
• 2、单选Radio
• 2.1 简要了解单选按钮
• 单选按钮最早的设计模型，来源于收音机切换频道的按键，当我们按下其中一个，其他的按钮就会被弹出，按下的那个按钮就成为了选中的状态，单选按钮只能二选一。
• 
  
• 2.2 单选按钮的特点
• 单选按钮的优点是，将所有信息条件暴露给到用户，它不像开关在使用上带有去猜测、探索的必要。
• 1. 每个选择都非常直观，如果希望用户阅读完所有选项，可以采用单选。
• 2. 拓展性更强，相较于开关、复选框，单选能承载两个或两个以上选择。
• 3. 必须提供默认值，且默认值可以承载内容。
• 
  
• 2.3 场景举例分析
• 1. 需要让用户明确知道两者的区别，甚至需要强调两个选项的不同
• 如果采用复选框，用户需要在两个差距较大的选项中去做思考，这个时候单选更加合适。
• 
• 
  
• 2. 开启/关闭的单选状态，使用复选框
• 复选框对于绝大多数用户都是非常清楚，使用复选框在空间、视觉焦点更是更集中的，所以如果只针对开启/关闭的状态，推荐使用复选框。
• 
• 
  
• 3. 每个选项都关联内容时，使用单选按钮
• 在表单设计中一个好的默认选项，会让很多人保持选择默认选项。提升表单提升效率。需注意给用户提供的默认选择，一定要是安全、方便的选项。
• 如下图，如果采用复选框或者开关，用户就不得不去探索思考开启后是什么，还要担心理解开启/关闭后带来的影响，而对于绝大多数用户来说，系统默认内容无需改动。
• 
• 
  
• 4. 如果是较长需隐藏拆分的内容情况，使用单选按钮
• 在表单设计中，如果遇到的内容需要重新组织或者拆分时，选择使用单选按钮。这样不仅能够做到表单信息简洁，也能够提高用户的浏览效率。
• 
  
• 5. 垂直排列单选，信息阅读更佳
• 如果字段名称较长，需要添加副标题加以说明，这时单选按钮承载的信息较多，使用垂直排列让用户有一致的起始阅读线，眼球转动幅度最小，信息获取体验更佳。
• 如果标签文字较少，也可以横排不至于占用太多的垂直空间。
• 
  
• 2.4.小结
• 复选框的应用拓展性比开关更强，它既可以作为层级内容使用，又可以作为单独的设置项，点击后并立即生效，不用配合其他提交按钮，也可以作为表单填写的一部分。它也不会像单选按钮阅读有信息阻断的问题，不会像开关有强视觉干扰，它会让我们的视觉焦点更集中表单信息上。
• 
  
• 3、复选框Checkbox
• 3.1 简要了解复选框
• 让用户在多选项中进行选择，勾选后和未勾选表示“是/否、要/不要、开启/关闭…” 等问题。
• 
  
• 3.2 复选框的特点
• 1. 复选框的标签内容是简短一句话，不会用逗号去作隔开。
• 2. 作为单选状态时，操作对象和标签主体内容视觉焦点是不分开的，选择后就知道它被选中了。（比如登录页面的用户需知）
• 3. 可直接表示标签内容的开启、关闭。
• 
  
• 3.3 场景举例分析
• 1. 使用复选框时候，用户可以基本清楚会发生什么
• 如果使用开关或者单选框，我们会发现视觉干扰特别严重，一般表单内容不需要特别去强调每一个字段的开启状态。
• 当然如果排版限制，我们也是可以将复选框放到标签的右侧（放右侧复选框需对齐）。
• 
• 
  
• 2. 表单中的复选框生效，需要配合提交按钮
• 复选框的主体标签信息和复选按钮在一起，特别是对于批量填写或设置一批字段，使用复选框效率更高。
• 一般情况下，表单填写中，复选框不会像开关点击后立即生效，它需要配合提交按钮生效。所以用户在提交前可查看他们填写的表单，更有助于在信息防错。
• 
• 
  
• 3. 用复选框来控制表单局部细节
• 如果控制对象的功能是表单的一个局部，或信息内容不是很多，用户也清楚知道选择后会是什么，这时候复选框更适合。这时我们不需要过重的给用户强调什么，用复选框会比使用开关让整个表单的结构内容更清晰。
• 
• 
  
• 3.4 小结
• 单选按钮是二选一，互不干扰的条件，希望用户阅读完这两个选项，使用单选按钮再好不过了，考虑到单选按钮提供的默认选项，提供的要是绝大多数用户需要的，且是安全方便的，如果单选按钮标签文字过多，在排版时垂直排列拓展性更强，阅读体验更佳。
• 
• 
  
• 
• 一、按钮放在页面左下角比较好还是放右下角比较好？
• 这个问题是我在设计表单时常常纠结的问题，上一篇文章聊表单的基础内容，还有朋友在后台留言关于按钮位置的问题，可想，这个问题也困扰了很多的设计师朋友。
• 在复杂些的表单中，分别会在header区、body区、footer区放置影响全局属性、仅影响跟随对象、有“完结流程”属性的按钮。  
• 
• 要了解按钮位置问题，我们需要先了解两个比较重要的设计实验：
• 
  
• 1.1 尼尔森F型眼动浏览路线模型
• 尼尔森（Jakob Nielsen）是一位人机交互博士，毕业于哥本哈根大学，于1995年发表了「十大可用性原则」。尼尔森的「十大可用性原则」是尼尔森博士分析了两百多个可用性问题而提炼出的十项通用型原则。它是产品设计与用户体验设计的重要参考标准，是设计师值得深入研究与运用的理论。
• 
• 从上面的这个模型中就可以演变出来web端界面常见的“f型浏览路径”的纵横操作优先级，如下图所示：
• 
• 可以看出来我们的视线由“1-3”这三个操作节点的最为重要：
• 用到我们常见的“表格顶栏”上的一行操作区来说，从左到右操作优先级依次为“高—中—高（中高）”，1 号位置所在地放置操作类行为是这一行【最高】的；其次是 3 号位置，最后是中间的 2 号位置。
• 
  
• 1.2 古腾堡原则
• 
• 20 世纪 50 年代，古腾堡在设计报纸的过程中，提出了一项原则，认为人的阅读方式应该是遵循某种习惯进行的，好像读书一样除了从左到右，还有从上到下的方式。
• 但这里面蕴含着什么信息呢？经过多方研究，他最终得出了被后人熟知的「古腾堡原则」，并附上了一张图，名为「古腾堡图」。
• 
• 法则指出用户在浏览页面或一些布局时，视线往往趋向于从左上角到右下角进行扫描。古腾堡图将显示介质分为四个象限：左上角的「第一视觉落点区」，也叫「主光学区域」，类似自然光的落点；右下角的「终端区域」；右上角的「强休区」和左下角的「弱休区」。
• 从上图中可以看出，左上角是第一视觉落点区（主视区），而右下角是最终视觉落点区（终点区）。与之相对，右上角和左下角则是视觉盲点。用户的视觉移动端规则是从上到下，从左到右。
• 所以得出结论，界面中的左上和右下是用户视觉最为重点关注的位置。遵循古腾堡法则，设计师应该把界面的关键元素放在主视区，终点区可以放按钮、强提示，盲点区可以用来放一些相对次要的内容，如辅助图形、文字信息。
• 
  
• 我们需要注意的是：

• 顶部按钮的设计，关键还在于可编辑内容区域，而不是按钮本身，顶部按钮更适用于「编辑页面」，需要用户谨慎操作。

• 而底部按钮的核心在于按钮本身，而不是内容。底部按钮更适合全局最终的确定，提交等操作按钮。

• 当我们在设计表单中的组合按钮时，比如：取消与确认、提现与充值。根据古腾堡法则，用户使用界面时从第一视觉落点区是主视觉区(Primary Optical Area)，最终停留在结尾的终点区(Terminal Area)。

• 
• 
  
• 
• B端产品有C端产品不同，会有很多需要填写表单，甚至特别复杂的表单的情况。那么这种情况如何提升表单的用户体验，如何设计更快更好用的表单设计成为考验设计师能力的核心问题。
• 我平时的工作中经常会遇到数据量很大的表单，看似简单排列的表单，其实可能是我经历过很多次设计出的最终结果，所以这里总结一下我平时设计复杂表单的一些思路。
• 一、表单视觉可以不平衡
• 在设计表单时，我们总觉得视觉重心偏左，因此在设计时我们总想让视觉变得更平衡。
• 
• 比如小鹅通，信息全集中在左边，感觉视觉有点失衡。而类似飞书的居中设计，视觉会更平衡。所以这就引起我思考在设计时要不要用居中设计的方式呢？
• 但是当我继续查找资料时发现，其实在表单的设计中我们不用过度的追求视觉平衡，首先人的视觉动线遵循F模型，同时根据行业相关信息可读性研究，眼动舒适角度为30度。
• 
• 因此当表单信息较少，不考虑屏效时，采用从上往下居左边的方式，据研究这是能够最高效完成任务的布局方式。
• 当然也并不是所有的表单都是需要左侧设计，比如飞书设置类表单就是局中设计。
• 为什么呢？其实，设置类表单，数据项较少，相对比较简单，使用居中设计可以让用户更聚焦。
• 而其他大部分的表单设计，比如CRM、ERP、云产品、OA、项目研发、文档产、HR、BI等系统产品的录入类表单均采用的视觉偏左的设计方式，不管表单拓展多复杂的信息，都不会影响整体的一致性。
• 所以，在设计表单时不用过度追求视觉平衡，而是需要优先考虑信息操作效率，信息阅读效率。 
• 
• 
  
• 二、4个策略优化数据量大的表单设计
• 1、保留（Keep）
• 第一步，整理筛选，保留那些用户真正关心的是问题内容和为何要问这些问题的内容，在适当的情境下问合适的问题，可以保留。
• 2、删减（Cut）
• 第二步，有些问题并不需要马上得到答案，对于一些非必填问题，可以考虑拿掉。
• 3、延迟（Postpone）
• 第三步，有些问题马上就问，会让人产生戒备，这时可以采取延迟发问，直到问题不会让人感觉多余或者有侵略性。或者有些问题比较棘手或者是敏感的信息，如果你一上来就问这些信息，用户可能会比较反感，可以从易到难，从基础到敏感问题，让用户慢慢卸下心防。
• 比如，站酷的新版满意度调查.“如果你愿意接受回访，请留下你的联系方式？就是放在了最后，标注选填的方式。
• 4、解释（Explain）
• 有些问题对公司真的有价值，则可以解释编写简短友好的理由，确保能为用户带来好处。
• 比如，“填写联系方式，能让我们后续解决问题以后告诉到您。”
• 
  
• 
• 表单中错误提示的常见位置一般是在右边或者下边，这也是经过很多的产品及用户测试验证过的结论，那么你知道是为什么吗？
• 表单可选的错误提示位置：

• 1. 提示位置在表单域顶部

• 顶部显示所有错误信息，会给用户的记忆造成较高的认知负荷，会强制用户回忆每个错误输入框中的错误消息。
• 当标签顶部对齐时，错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音，用户注意力被分散，很难专注于其中一个，并且可能混淆它们。

• 
  

• 2.提示位置在表单域下边

• 表单域下边的错误信息提示，虽然不符合从左到右的阅读习惯，但它与从上至下的阅读流程相对应。是减少记忆认知负荷的有效方法，可以帮助当场识别错误而不是靠回忆错误，缩短反应时间，提高表单填写效率。
• 手机屏幕缺少水平空间，把错误信息提示放置在下方是个不错的选择。

• 
  

• 3. 提示位置在表单域右边

• 符合人们从左到右的阅读习惯，用户视觉路径自然流畅，很大程度上减少了用户的精力和视觉工作。

• 
  

• 4. 提示位置在表单域左边

• 提示位置在左边与用户期望相违背，因为左侧放置更高优先级的元素，是我们的直觉。但事实上用户需要专注于纠正他们的输入，因此输入框应该是更重要的元素。
• 
• 综上所述如上图，错误提示的最佳位置是输入域下边或者输入域右边。
• 当表单是左右对齐时，最佳提示位置是选择输入域在下边。当表单是顶部对其时，最佳提示位置是选择输入域在右边。如果是移动端则放置在下边。一般情况，为了提高开发效率，会选择都放置下边，方便适配。
• 
  
• 
• 关于表单设计其实还有很多可以去仔细研究的空间，不管是To C 还是To B，都是为了实现用户的需求、帮用户解决问题。
• 当然，理论是死的，设计是活的，当业务与原则出现矛盾时，可以结合具体的业务情况进行适当的调整。
• 以上便是个人对常见的表单纠结点的经验总结，文章中如果有不严谨、错误的地方希望大家给予指正。作为一名刚刚将自己工作内容进行沉淀并分享给大家的设计师，希望大家可以多多点赞评论鼓励下。
• 长达15000+字，文章很长，感谢您的耐心阅读。
• 下期预告：
• 全方位解析在b端产品中避不了的表格设计？
• 最后，我准备了3D素材送给大家，老规矩，资料在公众号后台，需要的话免费拿走，获取方式：【三原设计】公众号后台，发送文字“3D素材”，获得获取方式～
• 
• 参考文献：
• 1、来源链接：https://ant.design/docs/spec/research-form-cn（来源：Ant Design）
• 2、表单设计需要注意：http://t.cn/EhMmZPf
• 3、《Web表单设计·创建高可用性的网页表单》中，作者（卡罗琳·贾雷特）
• 4、B端表单设计优化http://www.woshipm.com/ucd/5327215.html
• 5、《Type & Layout：How Typography and Design Can Get Your Message Across or Get in the Way》
• 文内出现的图像版权属于其合法持有人，只供传递信息之用，非商务用途。如无意侵犯到您的权益，请及时联系我处理。 
• 
  
• 
• 每一份努力都值得被期待，愿你不惊不喜，不卑不亢；清风徐来，花自盛开。我们下篇再见~

Powered by Froala Editor