表单 用户 标签 前言表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。生活中，大多数人都不喜欢表单，比如前段时间有一些许久没有联系过的朋友让我帮忙填写一下调查问卷，作为一个热心市民的我，自然是选择点开链接帮忙填写；一鼓作气填了一段时间后，看着剩下的问题，我不耐烦的放弃了填写这个调查问卷。所以作为设计师，我们应该“由内而外”而不是“由外而内”的去设计表单，如何让表单变得更容易让人接受也是设计师应该考虑的问题。更多兆日UCD的干货：6000字干货！3个优秀交互设计师应该具备的边界感引言售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。阅读文章 > 一、什么是表单表单是一种用于信息添加、录入的页面类型。是连接用户与数据库的桥梁，通过引导用户进行信息的填写，从而提交数据给后台。在用户填写提交时，还需要对用户输入内容进行校验与反馈，保证用户信息填写的完整度。填写表单是一件麻烦事，当我们想做的是投票、网上购物或者添加好友之前，总是会有表单防碍着我们。正因为多数人不喜欢填写表单，所以在做表单设计时，我们的首要目标是让人们迅速轻松的完成填写，同时获得系统和用户想要的东西。二、如何进行表单设计1. 表单拆分基础表单中会有以下六个元素：1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……5. 提示：描述该输入项需要的输入类型，如：上传的文件类型6. 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，建议将按钮悬浮固定在底部。当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：这个元素是什么类型的？如何处理其他这类东西？元素之间有什么关系？通过合并相同类别元素或者扩展该元素和其他元素之间的关系，能否简化设计？2. 表单录入模式表单根据录入模式可以分为：单步表单、分步表单和高级表单① 单步表单：单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。② 分步表单：内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。③ 高级表单（分组表单）：高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。3. 表单的页面框架表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。我们在选择页面框架时通常需要综合以下三个因素去考虑：内容数量 ：内容如果较多不适合使用弹窗式与原页面关联程度 ：需与原页面关联强建议使用弹窗式、侧边栏式表单的复杂程度： 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。4. 表单的排列方式① 布局方式在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。2. 多列布局的表单会导致用户的视觉路径变长，用户需以 “Z” 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。单列布局优势：视觉路径清晰，填写效率高，体验好；劣势：垂直空间占用率高。建议使用场景：表单内容较少的情况下使用单列布局多列布局优势：省空间，能够放置更多的控件；劣势：视觉路径模糊，填写成本高，填写易出错。建议使用场景：关联性强的填写项横向排放，且将该列中最重要填写项的放于最左侧。② 标签对齐方式标签的对齐方式有：左对齐、右对齐和顶对齐，除了需要考虑单列式布局还是多列式布局，还有我们也需要考虑标签的对齐方式。马泰奥·彭佐在 2006 年 7 月对表单的每种对齐方式做过眼动测试研究，根据研究结论做出以下分析：顶对齐标签：研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。右对齐标签：如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。研究中，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在 170 毫秒和 240 毫秒，而填写完成时间比左对齐快 2 倍。优势：标签和输入框位置紧密，更方便填写劣势：右对齐的布局会造成标签的左侧不齐，影响快速阅读表单的效率问题；如果增加填写项标题字数过多，整体的表单页都需要修改，右对齐灵活性低。建议使用场景：适用于需要填写效率但受到屏幕垂直面积限制的页面。更适用于整页式布局。左对齐标签：在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。优势：易浏览标签；占用纵向空间较少劣势：标签和输入框距离较大，表单填写效率低建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局输入字段上方的粗体标签在顶对齐的情况下，设计师可能会想：如果我们将标签进行加重，这增加了它们的视觉重量，并将它们带到了布局的最前面，这样说是不是可以让用户更好的去完成表单的填写呢？但事实却和设想相反：粗体标签反而增加了用户填写的负担。粗体标签导致从标签移动到输入字段的扫视时间增加了近 60% ，从没有粗体标签的 50 毫秒到有粗体标签的 80 毫秒，更突出的标签没有明显优势。粗体标签更难让用户阅读和感知——可能是因为粗体文本和输入字段的相邻粗边框之间存在更多的视觉混淆。小结标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。三、表单校验形式1. 什么是表单的校验为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的“反馈提示“，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。① 前端校验：主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。② 后端校验：与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。③ 校验触发条件：用户输入时进行校验（例如：注册输入密码时，实时显示密码强度）用户输入完成失去焦点时进行校验（例如：注册重复输入密码时，密码与前一次输入的是否一致）用户输入完成点击操作按钮时进行校验（例如：注册点击提交时进行校验，手机号已被注册所以未通过注册）④ 报错方式：即时报错输入完成后点击 提交/下一步/保存 等操作后报错2. 校验形式根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：① 输入时即时验证，即时报错用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。优点：可以实时告知用户表单的填写时候符合规范缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码② 失去焦点后即时报错用户在输入完成后进行验证，输入框失去聚焦后（即用户点击输入框以外的位置后）与用户进行反馈。例如在注册网易邮箱时，填写完毕后即时报错。优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改。使用场景：注册用户名时，取消聚焦后会反馈用户名是否可用，不可用的情况下是被注册还是格式有问题。③ 操作后（保存/提交/下一步）后全部报错用户完成表单填写后，点击操作按钮（保存/提交/下一步），系统将表单统一上传到后端数据库中进行对比后集中与用户进行反馈。优点：减少对用户的打扰，减少后端服务器压力，提高效率缺点：用户只能点击按钮后才可以得到反馈，不能及时修改；若表单过长，用户返回修改的路径也将增加。使用场景：登录账号是判断密码是否正确最后说说表单是后台最常见的场景之一，所以表单设计是 B 端产品最重要的部分之一。表单的设计是需要产品经理和设计师共同解决的难题。表单需要注意的点还有很多，我们在设计表单的同时，不仅要考虑上述的这些问题，还得“由内而外”的考虑表单为什么这么做，在用户录入信息时能降本提效才是我们应该做的。更多表单设计干货：想把表单的用户体验做到极致？我总结了这5个细节！Hi，我是彩云。阅读文章 > 把表单体验做到极致！11个表单设计的高效技巧大家好，这里是设计夹，今天为大家分享的是「表单设计」。阅读文章 > 欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/web-form-design-2
表单 信息 抽屉 本篇文章总结了 B 端表单设计中的 3 大设计模式，4 大呈现方式及使用场景，希望对大家有所帮助。前言在 B 端设计中，表单设计是常见的需求设计，对于 B 端来说，表单的信息复杂程度会根据业务的实际情况而定，常见的简单表单设计只需要将表单的字段平铺在页面中，用户输入相关信息即可完成表单的任务。但是在 B 端的实际业务中，表单的需求有简单也有非常复杂的场景，如果都采用简单的平铺方式，必定会让表单填写任务变得难以操作。对于不同的表单模式使用的业务场景不同，表单的呈现方式也具有多种选择，并且适用的场景也不同。下面我总结了三种不同的表单展示方式，四种表单的呈现方式以及应用场景。表单设计的 3 大模式1. 平铺平铺：指的是将表单信息完整的排版在界面中。无论是在 B 端还是 C 端设计中，平铺的表单设计是最常见的，这样的表单用户可以一览看全所有表单的信息（但是对于表单字段多且复杂的场景，平铺也不能一览所有）。所以对于平铺的表单设计而言，一般是针对表单信息简单且字段信息较少的情况，如果字段信息小于两屏且字段信息强相关，那么我们可以选择采用平铺的表单设计方式。例如：飞书的审批表单页面设计就是采用平铺的设计方式2. 分组表单的第二种设计方式是分组，分组的排版方式又可以细分为三种方式。分别是：折叠分组、区域分组、标题分组。下面分别介绍了三种分组的详情。折叠分组折叠分组：指的是将表单信息分类显示，通过点击按钮展开和收起表单的具体信息。在 B 端设计中，会存在很多设置类表单设计，最常见的图表数据和样式外观设置，对于一个图表而言，会让用户自定义图表的各种信息设置，并且需要在一个表单中显示完整图表设计所涉及到的范围，所以大多数都会采用折叠分组的形式。折叠分组用户可以一眼看全表单所涉及到的大范围，用户锁定某个标题范围后，再展开去完善对应的具体表单信息，这样用户就可以不用在庞大的表单信息中去寻找自己需要完成的表单信息。折叠表单一般会包含一些默认的数值，用户可不做调整，不调整也不会影响功能的使用。如果说表单信息需要用户手动完整的填写或者确认，那么最好不要选择这种表单的设计方式。例如：Grafana 的自定义 BI 图表设置信息就采用了折叠的表单形式区域分组区域分组：指的是将表单信息分类显示，通过矩形背景划分区域，形成小组表单信息。在 B 端设计中，一些复杂的表单会通过区域分组的形式排版设计，可以将一个表单的信息通过信息的关联关系划分不同的区域形成小组信息，这样有利于信息的归类以及信息的填写。用户在看到复杂表单的时候不会被庞大的表单迷惑，可以更好的找到表单字段，也可以让用户填写表单更有秩序、更清晰。区域分组的使用场景，一般也是针对复杂表单且具有强相关的信息关系。例如：下面是我在工作中所运用的一个区域分组的表单设计方式。标签分组标签分组：指的是将表单信息分组标签化，形成独立的小表单信息，分为上下结构和左右结构。上下结构左右结构复杂的表单可以采用区域分组的形式，还可以采用标签分组的设计形式。标签分组可以一眼看全所有分组大类信息，对于一个表单涉及到多种信息字段的情况，并且每个组的字段信息都是独立的，不是强相关的，那么我们就可以采用标签分组的形式。标签分组可以直接点击标签快速定位到想要查看和填写的表单区域，这样使用户操作更加快速便捷。并且也让庞大的表单信息得到更好的整理，让用户使用更方便，可降低用户对于庞大表单信息的焦虑感。下面可以看一下在 B 端产品中我对于一些复杂表单标签分组的设计方式。3. 分页分页：指的是将整个表单信息通过多页的形式展示。分页表单设计一般会针对具有步骤前后顺序关系的表单。也就是指需要先完成上一步表单信息才能进入到下一步的表单页面，形成一个完整的闭环流程才能使表单信息提交成功。同样的，下面截图为 B 端实际业务工作中的一个分页表单设计页面，因为业务的保密性，所以就不做太多的业务信息，只需要看到分页表单的一个实际设计场景即可。表单的 4 大呈现方式及使用场景1. 弹窗（对于信息较少的表单）最常见的表单呈现方式即弹窗，无论是在 C 端还是 B 端，我们都随处可见弹窗形式的表单。弹窗表单一般呈现在屏幕中间，底部有暗色遮罩层，将底部信息与弹窗表单隔离，使用户专注于表单的填写。弹窗模式的表单一般是针对表单信息较少的情况，并且填写表单不需要关注底部页面的信息。用户可以在弹窗表单中顺利地完成表单的任务。案例：2. 抽屉（内容信息较多，且与底部信息强关联）抽屉形式的表单一般是针对表单信息较多且与底部信息具有强相关的关系。用户在填写表单时需要根据底部信息的辅助完成，或者需要同时操作底部面板中的相关信息，来协助完成表单信息及让交互使用更方便。抽屉形式的表单展示方式是从屏幕右侧弹出，有时候也会有从底部弹出的情况。这里主要分享从右侧弹出的抽屉表单模式，抽屉模式还分为三种模式：有遮罩层的抽屉模式、无遮罩层的抽屉模式、挤压模式。下面分别介绍这三种模式的区别以及使用场景。有遮罩层的抽屉模式有遮罩层的抽屉模式指的是抽屉底部有暗色遮罩层，将抽屉表单信息与底部页面信息隔离，这里的遮罩层与上面弹窗中的遮罩层是同样的作用。那么就有人有疑问了，既然都是有遮罩层具有同样的隔离作用，那为什么要从右侧弹出，而不直接和弹窗一样展示在屏幕中间呢？有遮罩层的右侧抽屉模式的表单具有以下特点：01：右侧抽屉出现位置在屏幕的右侧，虽然有遮罩层，但是仍然可以看到遮罩层底部页面的相关信息，如果在填写表单的同时需要关注底部信息，并为填写表单做辅助，那么右侧抽屉表单模式比常规的弹窗模式更适合。02：右侧抽屉模式的表单面积更大，更适用于复杂表单的呈现，可以展示更多的信息。案例：无遮罩层的抽屉模式无遮罩层的抽屉模式指的是抽屉底部没有暗色遮罩层，抽屉直接浮在底部内容之上，一般通过对抽屉背景做投影来区分底部内容与抽屉内容，让两者之间能更清晰地辨别使用。无遮罩层的右侧抽屉模式的表单具有以下特点：01：与有遮罩层的模式一样具有可根据底部信息辅助完成表单信息的填写的特点。02：适用于复杂表单且可以展示更多的字段信息。03：另外有一个更加重要的特点是：由于底部内容是没有遮挡层，所以用户还可以同时操作底部页面，使用户切换信息更便捷，使用效率得到提高。案例：3. 挤压模式挤压模式指的是表单信息从右侧出现，将原本画布的内容区域宽度减小，从而展示右侧表单。这样的展示方式界面需要做适配，做到画面中的元素自动适配画布大小，以满足正常的阅读和使用。挤压模式与上面的无遮罩层的抽屉模式具有相同的特点，另外挤压模式还具有可以完整看到原本界面中的内容，右侧表单可以自由展开和收起。但是对于表单信息庞大且复杂的业务情况就不太适用于右侧挤压的模式，因为表单宽度占据太多会影响原本界面内容的展示，原本内容会因为宽度区域太小而布局错乱的问题，如果因为右侧挤压的表单出现而改变原有界面内容的布局，对于用户而言使用也不太友好。案例：4. 页面（单独表单填写，且信息量较多）当表单信息庞大且与原界面无强相关的可以直接采用新页面呈现。使表单单独成页更好地展示表单信息减少其它信息的干扰。案例： 总结B 端的业务比较复杂，不同的表单信息的复杂程度有所不同，需要根据实际业务的情况合理地选择表单的展示方式，也需要考虑用户的使用场景以及业务表单的关联关系。简单且不具有强相关的表单可选择平铺，呈现方式可选择弹窗；复杂且具有强相关的表单可选择区域分组，呈现方式可选择无遮罩层抽屉/挤压；复杂且不具有强相关的可选择标签分组，呈现方式可选择有遮罩层抽屉；具有先后顺序的则选择分页，表单信息独立可选择分页的呈现方式（并非强制的表单设计选择方式，需要合理考虑业务哦！）6000字干货！6个方面帮你循序渐进掌握表单设计前言表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。阅读文章 > 欢迎关注作者的微信公众号：「设计小余」本篇来源：优设网原文地址：https://www.uisdc.com/form-design-model
表单 用户 内容 前言表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。表单设计看似很简单、实则很容易忽略用户体验，作为设计师，需要根据触发条件、使用场景将各元素进行灵活的调整，才能确保用户顺畅的完成表单任务，因此，设计出一个可用性非常好的表单非常有必要。本文将针对表单的设计准则及用户体验进行了总结，希望能够帮到大家。本期大纲认识表单表单结构及元素设计细节暂存及送出规则如何提升表单完成率常见误区及避坑指南总结认识表单1. 什么是表单？表单主要用来收集或呈现数据或特定字段等信息，属于信息采集工具，可运用到不同的场景模块中，例如常见的登录注册、调查问卷、个人信息页面。如何确定当前页面是不是表单页，主要看该页面是否发生信息采集而触发用户进行输入、选择、编辑等操作。2. 表单的交互状态完成表单内容需经过三个阶段，即交互前、交互中、交互后的三种状态。交互前：未发生任何操作，默认为初始化状态；交互中：光标插入即成为聚焦状态，占位符消失，随着内容的输入，输入框后面显示一键清除图标；交互后：输入完成光标离开，前端如验证内容有误会立即反馈，无误则回到正常输入后的状态。表单结构及元素设计细节1. 结构/框架首先，在视觉上，移动端表单不管所输入字段有多么少也不要在同一行添置多个表单，使用单列方式呈现，便于用户浏览和理解。如果存在关联性极强的前置条件可设计多列，如：输入手机号码之前要先选择国际电话区号，可将这两个字段纳入同一个（双列）表单项。其次，表单内容需先易后难，避免用户从一开始就产生逃避的想法，需根据内容的关联性循序渐进的引导用户完成。例如：添加地址，常见顺序是姓名、电话、地区、详细地址，如果一开始就让用户填写详细地址的话就不合理了（并不是不行），这等于在颠覆用户的认知，就算完成了表单内容多少也会有些“上头”。最后，当同一页面表单项过多时，需要根据类型、相似性或前后关系进行分组，以保持页面的节奏感，让用户在最短的时间内对整个页面内容有个大致的了解，从而能更轻松的完成表单。另外，将选填的内容尽量靠后，如果重要性较低，就直接去。2. 标签标签的作用是告知用户当前表单要输入什么内容，清晰简洁的表单能让用户更快速的理解。标签的长短决定着其对齐方式，通常标签字数在可控的情况下可使用左对齐；文本字数不可控但不是很多时可使用右对齐；字数不可控且标签长短不一、相差巨大就使用顶对齐（例如英文，大多数不可控，参差不齐）。3. 占位符占位符主要对标签进行描述或补充内容格式，它并非内容，而是在用户输入内容之前帮助其解决常见问题及误区，用以提升表单的完成效率。部分设计师喜欢将占位符和标签保持一致，实无必要，如果只是单纯的为了视觉上统一，使用通用提示「请输入/请选择」也很不错，或者在后面加上推荐性措辞，否则就直接留空。当光标插入时，尽量保留占位符，输入内容后再消失，方便用户在输入内容之前依然可通过占位符得到帮助。在这里需要说明一个误区，避免直接将占位符作为标签使用，如果只是针对登录页面，用户还可以理解，因为其内容比较大众化，账号+密码、额外再加个验证码，很容易理解。但其他类型的表单页面就容易让用户产生疑惑，输入内容时随着占位符的消失，容易忘记表单的内容属性，增加了用户的理解成本和使用难度。4. 输入能让用户选择的就不要让其码字输入，例如：输入手机号码，可让用户跳转到通讯录自行选择。尽量减少需输入的内容，通过已知信息预判并帮助用户自动录入，如：手机号码前要先输入国际区号，若产品主要服务于国内用户，系统自动录入“+86”，可节省用户的操作成本，降低表单的完成难度。在表单输入后，需在后面提供一键清除图标“ⓧ”，因为系统提供的删除功能只能单个文本清除。需对输入的内容设计规范格式，将同一组较长的内容加空格分段，便于浏览记忆。例如地址“广东省 深圳市 龙华区”、手机号码“138 888 88888”等。5. 键盘键盘是内容输入的必备组件，很多时候，产品会允许用户在系统输入法与第三方输入法之间自由切换，基于常规操作似乎没有什么问题，但站在用户体验角度，需要根据不同使用场景考虑是否需要开发内置键盘。如验证码、部分密码只需输入纯数字即可，这时调出内置的纯数字键盘可减少无关元素（字母/符号）的干扰；出于安全考虑，涉及财产相关的密码则需要打乱键盘的字母、数字顺序，虽然会增加用户的理解成本，但与财产的安全性相比，显然在可接受范围之内。6. 选项当表单项存在多个选项时，需根据选项的数量、长短设定不同的展示方式，如单/复选按钮、弹窗、页面跳转等。1）按钮：当选项不超过 6 条且单条选项在 4 个字左右的，可设计成按钮样式供用户选择；2）弹窗：选项较多时，使用操作栏弹窗展示；3）跳转页面：若选项太多且不可控，使用跳转页面的方式则体验更佳。7. 提示提示是用户在操作前对完成表单项可能存在疑惑，当占位符不足以说清楚时，会在标签后面增加一个提示图标，用户点击后通过弹窗或新的页面来查看详细的解释说明。8. 数据验证分为前端验证和后端验证，前端验证无需服务器传输数据，程序已写好的验证规则，光标离开即可验证（就像玩单机游戏），例如内容格式、长短、文本类型验证等；后端验证需要将表单内容传入后台数据库进行匹配，与数据不匹配将验证不通过，例如账号不存在、密码错误等。验证反馈需遵循就近原则，将错误提示显示在对应的表单项附近，便于用户及时修改。另外，不要将错误信息直接清除，可将对应信息或输入框用颜色区分（标红），让用户在原有基础上进行修改则效率更高，试想一下，你一口气输了 30 个数字，因为错了一个就得重复前面的操作次数是什么感受，请记住，把决定权永远留给用户。暂存及送出规则1. 暂存方式暂存是指已完成的表单内容还未提交至系统而需要离开当前页面，系统为避免用户重复完成表单内容而提供的预防措施。我们需要根据用户的实际使用场景来确定是否需要加入暂时存储功能，以给予不同的存储方式。笔者曾经碰到过这样一个问题，在微信某公众号中将一个超长表单完成一大半时，然后需切换到微信拿取几个信息，必须要回到对话列表（当时没有浮窗功能），无奈只能返回查看、并祈祷已输入的内容能够保留，结果…不出意外的给清空了。换个姿势再来，于是下载了对应的某 APP 去完成刚才已重复过的操作，当在微信中拿取信息后再回到某 APP 时，发现已被结束进程，&%￥#@……，卸载，拜拜。这些问题出现的原因有很多，可能是设备问题、也可能是自己的不良习惯，但作为设计师，虽然无法避免问题的出现，但需要给用户提供解决问题的措施。可能有人会说，这些小问题不在设计范畴，是程序控制的，用户习惯五花八门，即便提供预防措施也不一定能增加用户的忠诚度，笔者想说明的是“解决问题不一定能留住用户，但不解决问题一定留不住用户”。在部分较长的表单页面增加暂存功能，可一定程度的提升使用体验，基于场景的不同，我们对手动存储、自动存储、询问后存储三种方式进行解析，以确保选择合理的暂存方式。1）手动存储手动存储并非信息提交，指的是用户在完成表单中途有退出需求时所提供的暂存方案，其最常见的是页面右上角或末尾提供的“草稿箱”功能，存储后，下次可从草稿箱进入接着编辑。多用于 B 端或工具型应用，例如：我们需要发布投票、调查问卷、活动等，可事先设定好条件规则暂时保存至草稿箱，待需要时从草稿箱编辑或发布。2）自动存储对于填写内容超多的表单页面，数据自动存储非常有必要，当遭遇系统崩溃、网络故障、应用闪退等突发事件时，连手动存储的机会都没有，或许花费了很长时间才完成的内容又得重复一遍，真的很让人崩溃。如线上申请信用卡、贷款等复杂表单要求填写各种信息，可能需要来回获取且分多次完成，这时加入自动存储功能，体验一定会更好。3）离开时询问用户未将内容送出时返回/离开，会触发系统弹窗提示“是否保留内容？”，相当于手动存储的强提醒。我们在微信朋友圈编辑好内容、未发布离开时就有此提示。2. 送出方式在表单页面，会存在多种不同的操作按钮，如上一步、下一步、存草稿箱、提交等。这里讲到的送出是指通过下一步、保存、提交或确认等行为召唤按钮将表单内容提交至系统，并根据表单页内容的重要性、将按钮放在不同的操作位置，最常见的有固定页面右上角、固定设备底部和表单底部三种方式。1）固定页面右上角这是一种常见的提交形式，多用于内容较少的页面。当表单较为复杂、且需要认真填写时，为了不影响用户的注意力，也可能将送出按钮放在右上角以弱化视觉吸引力。2）固定设备底部方便用户随时点击，常用于内容重要性不是很高的表单页面，可能选填项多于必填项。这种设计方式有着较强的视觉吸引力，能降低用户的跳出率，促使其快速将表单内容送出。3）表单底部表单内容较长且重要性较高，需要完成绝大部分的必填项，下拉到最后一个表单项时才能看到送出按钮，能起到一定的引导作用。对于内容较少的表单，按钮最靠近内容，用户无需太大的视觉跳跃就能连贯地操作。行为召唤按钮的文案必须清晰简洁，能让用户快速明确按钮的功能和意图，不要让用户思考。如何提升表单完成率1. 用识别代替输入能用技术解决的问题就绝不留给用户，很多时候，用识别代替输入，能提升用户完成表单的效率及使用体验。例如身份证扫描自动识别录入个人信息、银行卡拍照识别卡号、系统自动定位等，都能帮用户省去很多不必要的操作。善用技术的力量，把所谓的麻烦留给技术，得到的回报并不仅仅是用户这一次的完成任务，可能是良性循环。2. 微交互让操作过程更有趣我相信，没有谁会在无聊的时候喜欢填写一些信息提交给产品（除非让 TA 领钱），用户是为了完成某项任务才被迫去完成表单的，所以在这个过程中适当给表单加入微交互，可以让交互过程变的更有趣，还能起到引导用户的作用。例如：B 站用户登录输入密码时，顶部的卡通人物会用双手捂住眼睛，给予用户安全的心理暗示。3. 提前告知必备材料，让用户有心理准备完成表单的主观意愿在于用户时，一般对操作结果会有一定的心理预期，那么应该在用户正式填写表单之前告知必备的材料。假如完成一个表单同时需要身份证、毕业证、银行卡等资料，用户总是被频繁中断、要去寻找这些资料，就会逐渐失去耐心，导致中途放弃的可能。提前告知用户可让其有一定的心理准备，从而接受程度会更高。4. 提前告知奖励，让用户有所期待完成表单的主观意愿在于产品时（与上面相反），为了更好的掌控主动权，部分潜在的风险、必备材料让用户过早知道，可能还没开始就已经放弃了。例如：获取线上理财产品额度时，没有谁会事先告诉你，一定要用身份证实名认证，即便这是必须的，产品也会先让用户提供一些重要性不是那么高的证明材料，然后再循序渐进的引导至重要证件的信息输入，当表单内容即将完成时，对后续的必备材料的接受度就会逐渐增高，毕竟谁都不喜欢在最后一步放弃。虽然不能过于明确用户的付出，但可在用户开始填写表单之前告知可能获得特权、奖励等，让用户有所期待。基于人性趋利、人心向利的弱点，产品可以通过福利、奖品的发放进行利益引用，吸引用户来完成以产品为主导的表单需求。（PS：这就是为什么推荐办理信用卡会带上几个拉杆箱、问卷调查会附带周边礼品赠送的原因）常见误区及避坑指南1. 减少不必要的表单项目PM 总是认为，每一个表单项都是必不可少的，殊不知每多一个选项，就会增加用户的时间成本和操作难度，可能导致用户流失。经过分析后发现并不是所有的表单项都必不可少，虽然有时出于特殊情况，但需要尽量去做到减少表单项。下图所示，身份证为必填项，出生日期完全可以使用技术从身份证号中提取；手机号、邮箱、微信、QQ 让用户填写不是目的，获取联系方式才是主要的，手机号码（必备）、微信（主流）完全能满足对用户联系方式的信息搜集，没必要设计一个既复杂又长的表单让用户全部完成。2. 将相互关联的表单项组合起来将关联性较强的信息组合起来形成一个表单项，不仅让用户输入的连贯性更强、有效节约界面空间资源的占用，还能让表单更有组织性、减少用户的认知负荷。例如时间/日期、区号/电话号码、省/市/区…等3. 隐藏不相关的信息如果用户打开表单时的第一感觉就是内容太多，会心生退意，隐藏不相关的信息、删减无用的字段，通过合理控制表单的复杂性能减少用户的心理负担，必要的信息在用户需要时出现，有效降低用户完成时的无关干扰。4. 合理的利用分页、分组如果隐藏、删减了很多内容后，表单依旧庞大，切记不要把所有表单项一次性全展示给用户，过长的表单感觉要花费很多时间才能完成，会导致用户不知所措、产生烦躁情绪而放弃填写。这时就需要将所有的表单项进行分组，有必要的话就分页展示。将超长表单分割多个小任务，分页呈现并显示操作进度，会让用户对整个表单形成清晰的预期。细心的设计师会发现，很多应用将登录页的手机号/验证码输入进行了分页，主要原因是点击获取验证码之后需等待接收短信，而等待的空档期会让用户产生效率缓慢的感觉，分页后在跳转页面时能掩盖小部分的等待时间，从某种意义上来讲，分页操作的流畅度会“高于”多信息同页面等待完成。将超长表单分组、分页虽能提升体验，但不能过于细化、刻意增加操作步骤，否则可能惹恼用户，遗留下来的将是一个全新的问题。5. 标签与输入框视觉关联接近性原则告诉我们，元素之间的相对距离会影响用户感知他们之间的关系，相互靠近的物体被认为比相互距离较远的物体更有关联性。同一组表单元素应该靠的更近，以体现内容的关联性，确保界面层级清晰，用户不会产生疑惑。6. 字数限制需实时提示单个表单项输入内容较多，需要实时提醒剩余可输入字数，避免用户一股脑的输入完成后才发现内容量已翻倍，就得重新组织语言重复输入，很不友好。这种情况常出现在备注、介绍等较长表单项。另外，在自定义注册账号、设置密码的较短表单项中也会碰到。7. 内容长度与输入区高度相适应重要的表单内容，不管内容多长都应该完整显示，例如个人简介、详细地址等表单项，如果仅仅因为内容过长就将后面的部分隐藏，可以说是非常不友好，用户甚至无法对已输入的信息进行完整的预览，不能确认信息的对错。请记住，如果从一开始就不想让用户输入太多信息，那就从程序上控制并给予对应的提示。表单输入区的宽度虽然是固定的，但可以通过自适应调整高度来确保信息内容的完整性，保持良好的使用体验。总结以上是笔者对表单设计的一点经验和总结，希望对大家有帮助。在设计表单时，需要用结构化的思维去思考分析，视觉只是整个体验的一小部分，如果只关注表面，也很容易将优秀的表单样式复制出来，但却无法理解背后的设计价值，毕竟设计都是先想好为什么，然后才开始做。很多时候，可能有人会认为一些很小的表单细节显得微不足道，就算能起到作用也只是对 1％、1‰甚至1‱的用户，杯水车薪。但是有没有想过，一个应用中可优化的点可能会有100个、1000个…。虽然有时候做的不是很好，但只要能比上一次好，那就毫不犹豫的换掉它。6000字干货！5个Web表单设计冷知识当我们设计 Web 表单时，往往用最直觉的设计经验本能驱动我们去解决一些看似在界面设计中最简单的问题，但每每到细微之处，又会有无数疑问从细节中冒出来给我们的设计造成困扰。阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/form-design-rules
物品 表单 用户 执行类产品中，信息录入是用户工作中最常见的场景之一，用户按照要求录入信息提交给系统，系统整合信息以完成执行结果。页面中，由属性控件和数据容器组成的实体是整个录入流程的载体，录入流程设计的关键是「信息编排」与「高封装度表单」。帮助用户明确当前页面任务，快速查找和定位修改目标，轻松准确地理解表单项含义及生效后果，同时简化填写流程，确保用户准确、轻松、快速地完成任务。录入流程设计关键「信息编排」：将大型、复杂任务拆解为多个部分，并按照相关性分组，减轻用户输入负担。每部分内容单独处理，但最终一起完成提交。通过适当的任务分割，可以降低用户出错率。「高封装度表单」：根据表单的结构关系判断、寻找共性的内容，将他们封装为一个卡片，也可以封装成一个组。主要的目的就是减少用户认知负担，提升操作/使用效率。案例：B端某仓网布局项目项目背景：物流侧因某些原因需经常搬仓，规划侧需知道搬仓对拆单率及耗材费用等影响。因此，上线搬仓模拟系统，辅助业务在线上模拟与评估搬仓方案，通过系统自动化测算搬仓前后的各项指标，决策出最优的搬仓方案。用户痛点：搬仓模拟流程复杂，录入数据繁多，用户线上录入搬仓物品的效率低下。设计目标：调研整理用户工作流程，通过整合任务场景，设计逻辑清晰操作简单的录入流程，优化搬仓路径下各物品集的操作及展示。1. 「信息编排」区分信息间层级关系-使用格式塔心理原则对项目、任务与物品集进行层级区分展示。整体逻辑为项目包含任务，任务包含物品集，一个完整的项目包含基本信息+任务。再根据信息关联性将每个信息点集合成信息组。并根据眼动原理设计最优浏览路径（F型动线）。近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 项目=A基本信息（项目名称与模拟时间）+B任务（最多5个任务，其中任务包含搬仓路径与搬仓物品；每个任务最多包含5个物品集，物品集包含搬仓物品维度与温层属性）2. 「高封装度表单」根据搬仓逻辑及表单结构关系（项目>任务>物品集）及每个结构下添加的内容的一致性（每个任务必须填写搬仓路径及物品集，每个物品集必须选择物品集维度及温层），将他们封装为一个卡片，每个卡片内的结构内容封装成一个组。除了嵌套逻辑，高封装度的表单还要注意组件选取，高封装度表单要保持组件选择及样式的一致性，整个封装组件要有可复用性，整个录入流程从视觉层到交互层给用户一致的体验，以此来减少用户认知负担，提升操作效率。最后以上就是「录入流程设计」的全部内容啦～后续会为大家分享关键信息密度提升设计、场景化设计等一系列的设计方法，希望能给正在从事或准备入局B端的的小伙伴带来启发，也希望跟大家一起探讨更多的B端设计方法。万字干货！超全面的B端设计指南：选择录入（一）在前两篇文章中，我们主要讲到 B 端产品最为重要的信息展示组件表格的设计思路，根据不同的场景对表格进行了答疑，同时部分读者与我反馈，想让我聊聊选择组件的一些内容，今天就来简单聊聊在「数据录入场景」中的一个小点：选择录入。阅读文章 > 万字干货！超全面的B端设计指南：选择录入（二）关于下拉选择器、日期选择的攻略耐心看完，你一定有所收获！阅读文章 > 原创内容，未经授权请勿转载！本篇来源：优设网原文地址：https://www.uisdc.com/input-process-design
复选框 表单 按钮 在 web 表单设计中，我们会经常遇到在开关、单选、复选框三个组件的选择使用上纠结，特别是只有两种状态下，比如开启/关闭、启用/关闭、显示/隐藏、同意/不同意、默认/自定义….我们发现使用 Switch 开关、Radio 单选和 Checkbox 复选这三个组件好像也都是可以的，这时应该选择哪个组件更合适呢？本文主要探讨这三个组件的基本特点，以及在 web 表单设计中，这三个组件使用上有什么区别，以及常见的场景如何去选择。文章概览Switch 开关 • 它就像是灭霸的响指1. 简要了解开关开关作为仿照物理开关的映射，提供了两种最为简单、直接的对立选项，比如开/关、启动/禁用等。它就像生活中控制灯泡的开关，点击灯泡立即亮起。所以它的意符也必须明确，不然用户都不知道，即将要启动/关闭什么。2. 开关组件的特点1）对象标签名称须传达清晰，能够让用户能够明确感知操作后的动作开启或关闭什么；2）主体标签信息和按钮是分离的，两个视觉焦点；3）一般点击后会立即反馈；4）没有 hovering 效果，有动作效果，更适合手指操作；5）非 W3C 组织官方 html 标记，极端情况不支持 Javascript。3. 苹果公司对开关组件的设计规范苹果的「Human Interface Guidelines」有着这么一份对于开关组件的使用规范定义，我们不妨可以借鉴。1) 避免使用开关控制局部细节或者次要的设置。开关的视觉权重比较高，所以用它控制内容较多更为合适，比如可以将它作为总开关打开或关闭一组设置。2) 通常不要用开关替代复选框。如果我们的规范中定义了复选框，则尽可能保持一致的使用规范。4. 开关使用场景举例通过上述对开关组件特点，结合苹果组件的规范，我们基本可以梳理出以下几条主要使用场景：1）开关的标签意符需传达清晰和单选、复选框不一样的是，因为开关主体的信息和按钮是分离的。用户在点击开关按钮前，必须清晰告知用户点击后会发生什么，甚至有时我们需要通过增加副标题来加以说明。2）一般只为立即生效的场景使用开关按钮在表单填写时，往往最终会有「提交」按钮作为结束态，开关作为表单字段的填写，用户点击后并不能够立即生效，而是需要再次点击「提交」按钮。3）有风险，需着重提醒用户开关的视觉权重较高，在复杂的表单信息中，它能够很快吸引到用户的注意力，并能够给用户以视觉提醒。4）避免大面积使用开关，使用它控制局部细节或者次要设置开关在视觉感知上它和按钮上有些接近，所以尽可能避免在表单中大量使用开关来控制局部层级内容，这时推荐使用复选框来替代开关作为局部。5）把它作为高层级内容控制或信息设置把它用来作为总控制来显示更高层级内容，避免 web 表单中大面积的使用开关按钮，会和其他的基本组件造成视觉干扰。这样可以既凸显其重要性，又能提升用户浏览表单的效率。5. 小结开关按钮就像是灭霸的戒指，视觉突出且反应快。用户浏览表单、填写内容组之间，一般不需要很强的视觉差异。如果填写的表单信息之间对比差异过大，开关往往给用户造成过大的视觉干扰，反而阻碍用户浏览表单的效率。Checkbox 复选框 • 它是一个机器小能手1. 简要了解复选框让用户在两个布尔值之间进行选择，勾选后和未勾选表示“是/否、要/不要、开启/关闭…” 等问题。以下内容主要讨论单个复选框的使用情况。2. 复选框的特点1）为了便于用户快速理解，一般复选框的标签内容是一句话，不会用逗号去作隔开。2）作为单选状态时，操作对象和标签主体内容视觉焦点是不分开的，选择后就知道它被选中了。3）可直接表示标签内容的开启、关闭。3. 场景举例分析1) 用户基本清楚会发生什么，使用复选框如果使用开关或者单选框，我们会发现视觉干扰特别严重，一般表单内容不需要特别去强调每一个字段的开启状态。当然如果排版限制，我们也是可以将复选框放到标签的右侧（放右侧复选框需对齐）。2）表单中的复选框生效，需要配合提交按钮一般情况下，表单填写中，复选框不会像开关点击后立即生效，它需要配合提交按钮生效。所以用户在提交前可查看他们填写的表单，更有助于在信息防错。（Ps. 在设置页，复选框可单独作为设置且立即生效。）复选框的主体标签信息和复选按钮在一起，特别是对于批量填写或设置一批字段，使用复选框效率更高。3）用复选框来控制表单局部细节如上述，如果控制对象的功能是表单的一个局部，或信息内容不是很多，用户也清楚知道选择后会是什么，这时候复选框更适合。这时我们不需要过重的给用户强调什么，用复选框会比使用开关让整个表单的结构内容更清晰。4. 小结复选框就像是一个机器小能手，它的应用拓展性比开关更强，它既可以作为层级内容使用，又可以作为设置项，点击后并立即生效。在表单中，作为局部、或者细节内容控制，使用复选框更合适。它也不会像单选按钮阅读有信息阻断的问题，不会像开关有强视觉干扰，它会让我们的视觉焦点更集中表单信息上。Radio 单选按钮 • 白天不懂夜的黑1. 简要了解单选按钮单选按钮最早的设计模型，来源于收音机切换频道的按键，当我们按下其中一个，其他的按钮就会被弹出，按下的那个按钮就成为了选中的状态。单选按钮可谓是泾渭分明，有你不能有我。2. 单选按钮的特点单选按钮的优点是，将所有信息条件暴露给到用户，它不像开关在使用上带有去猜测、探索的必要。1）每个选择都非常直观，如果希望用户阅读完所有选项，用它再好不过了。2）拓展性更强，相较于开关、复选框的布尔值，单选能承载两个或两个以上选择。3）必须提供默认值，且默认值可以承载内容。3. 场景举例分析1）需要让用户明确知道两者的区别，甚至需要强调两个选项的不同如果采用复选框，用户需要在两个差距较大的选项中去作思考。2）开启/关闭的单选状态，使用复选框复选框对于绝大多数用户都是非常清楚，使用复选框在空间、视觉焦点更是更集中的，所以如果只针对开启/关闭的状态，推荐使用复选框。3）每个选项都关联内容时，使用单选按钮我们知道，如果默认选项设计的好，会让很多人保持选择默认选项。下图这个案例，如果采用复选框或者开关，用户就不得不去探索思考开启后是什么，还要担心理解开启/关闭后带来的影响，而对于绝大多数用户来说，这边的报名设置系统默认内容无需改动。需注意给用户提供的默认选择，一定要是安全、方便的选项。4）较长需隐藏拆分的内容情况，使用单选按钮在表单设计中，如果遇到的内容需要重新组织或者拆分时，选择使用单选按钮。这样不仅能够做到表单信息简洁，也能够提高用户的浏览效率。5）垂直排列单选，信息阅读更佳如果字段名称较长，需要添加副标题加以说明，这时单选按钮承载的信息较多，使用垂直排列让用户有一致的起始阅读线，眼球转动幅度最小，信息获取体验更佳。如果标签文字较少，也可以横排不至于占用太多的垂直空间。4. 小结单选按钮就是白天和黑夜，互不干扰的条件，希望用户阅读完这两个选项，使用单选按钮再好不过了，考虑到单选按钮提供的默认选项，提供的要是绝大多数用户需要的，且是安全方便的，如果单选按钮标签文字过多，在排版时垂直排列拓展性更强，阅读体验更佳。全文总结开关更像是一个灭霸的戒指闪闪发光，不过在表单结构、各种控件内容较多，需要页面清晰、避免过多的视觉突出，所以尽量避免让无数个戒指闪亮中表单中。复选框它更像是一个机器小能手，适用和拓展性极强，即可以单独作为设置，不用配合其他提交按钮，也可以作为表单填写的一部分。当我们犹豫使用哪个组件时，选择它一般不会错。单选按钮就像是白天和黑夜，完全不见彼此。单选条件承载的信息也较多，如果希望用户对比感知到两者信息的不同，那么使用单选按钮。最后理论永远只是指导实践的一部分，上述内容可能只是在用户认知和易用性之间，找到一个相对平衡的点，具体的使用场景情况，还是要具体问题具体分析。参考文献Nielsen Norman GroupHuman Interface Guidelines用单选还是多选？这篇全面总结给你答案！本期文章主要研究单选和多选控件的设计细节，虽然是很常见的控件设计，但是也是有非常多需要注意的地方。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/switch-checkbox-radio
在路上
落霞与孤鹜
表哥
