B端信息录入：输入框基础设计细节解析（一）

最近和一些做B端产品的朋友聊天，发布你第一次做B端产品的常见问题是：显然网上有很多参考设计规范总结非常详细，但真正使用仍然会有这样或那样的问题，哪个好？有更好的设计方案吗，这也是我一直在思考的问题，不断尝试推翻，尝试推翻…… 目录： 不同状态的输入框 暗示使用输入框 不同用法限制输入框的字数 使用输入框宽高的延伸 画重点 好了，废话不多！让我们从表单中最基本的组件输入框开始！ 不同状态的输入框 因此，输入框的不同状态分为：未输入、已输入、只读不可修改、系统信息带入可修改、禁用、鼠标悬挂、输入激活、可清空、加载 1. 系统自动输入信息 这里就不多说未输入和已输入了，大家都比较清楚。 因此，当系统自动带出数据信息时，输入框通常采用只读状态。只读状态分为两种形式：可修改和不可修改。我们通常将输入框的背景颜色调整为灰色，可修改状态的显示模式与用户输入后的状态显示一致。只读不可修改的状态通常用于系统自动带出的文本数据和数字输入相关计算的总数。 如下图所示： 用户需要手动输入男女数量，总人数由系统自动计算。 2. 禁用状态 禁用状态通常是表单中不需要用户输入信息的输入框，需要用灰色背景和灰色字来区分。 3. 输入信息的操作态 操作态度分为：鼠标悬停-鼠标点击-信息输入-信息自动检索-信息清空。 鼠标悬挂：当鼠标移动到输入框时，会有一个激活状态，如上图中的鼠标悬停状态，输入框的边框颜色会变蓝。 鼠标点击：鼠标点击后，蓝色输入框外侧会溢出半透明的颜色描边，光标会变成相应的蓝色。 这两种状态的使用将使整个操作反馈更加微妙。目前，市场上常用的用法是两者合作或只使用一种状态，不区分细节。 加载：加载通常用于输入框中的搜索过程，其他地方似乎很少使用。其优点是提高系统反馈的细度，特别是当网络状态不佳时，动态加载给用户一定的未知预期。如果没有，用户就没有感知，也不知道下一步该做什么。 事实上，利用加载的优势，我们可以给输入框更多的信息功能。例如，特定的功能图标也可以放置在输入框中，如帮助按钮。点击帮助按钮后，系统将自动加载并弹出帮助说明。 这里在IOS的APP STORE也有应用程序，感兴趣的学生可以玩。可清空：可清空状态是用户希望快速删除输入的信息。在输入框右侧放置删除按钮，可快速删除并进入二次输入模式 4. 扩展使用输入框状态 当我们输入更多的文本时，由于输入框的宽度和使用场景的限制，我们无法预览所有的输入内容，但我们希望显示输入后的文本供用户查看。此时，我们需要扩展输入框的状态。 如下图所示： 可设计输入框的展开状态，鼠标悬停时触发展开效果，右下角放置清空按钮，方便用户随时更改输入信息。 注：这里输入框的展开是从下到上的！ 暗示使用输入框 输入框的暗示提示通常分为框内提示、框外提示和校准提示。 (1)框内提示 输入框中出现的文本为浅灰色。暗示描述用语应注意，如下图所示： 例如，请输入字段标签，并与字段标签的标题重复。这种重复的暗示是不必要的。此时，如果没有其他文本可以解释，暗示只显示请输入。如果可以更详细地解释，我们可以添加详细的1来解释，例如：请遵循XX输入。当然，文本内容应根据实际应用场景设置。 (2)框外提示 框外提示包括：框外文本提示、框外图标提示、隐藏提示。 框外文本提示：文本位于输入框外下方，也采用灰色系统。 如下图所示： 其优点是包容性强，可用于字数限制、更详细的解释、超链接等。 注：文本外侧的暗示可与框内暗示一起使用。 框外图标提示：分为图标提示、隐藏气泡提示、下拉框提升、顶浮层提示。 如下图所示： 图标提示:一般用于提示文本较多的情况。例如，当框外的文本超过一行时，图标提示可以在不想显示多行的情况下使用。 隐藏气泡提示：当鼠标悬挂在输入框上时，气泡提示出现在输入框上方，适用于提示文本较少的情况。此外，气泡提示的位置可以根据使用场景进行更改，具体参考蚂蚁规范，这里不多说。 下拉提示：也经常使用。例如，当用户输入手机号码时，如果系统以前自动记录历史输入信息，则会出现下拉提示。用户只需点击即可重新输入。当其扩展用法时，输入与搜索相关。用户只需输入关键字即可下拉并显示多个相关信息。这里不详细说明。在后续系列文章中，我们将重点关注输入框和枚举相结合的各种复杂用法。请期待。 浮动提示：位于输入框上方，也用于输入框中更多的输入内容。该功能与上述输入框的扩展状态有点相似。如果纯文本显示更推荐使用输入框的扩展状态，如果是标签显示，如下图所示： (3)验证提示 输入框的验证状态分为：输入正确验证、输入错误验证、输入警告。 正确的输入验证：当输入框的文本输入正确时，通常的处理方法不会有任何提示，但当输入错误时会提示错误的信息。当然，如果您想加强用户输入正确的正反馈，通常会在输入框右侧放置钩号图标，如下图所示： 输入错误验证：当用户输入错误时，最常见的设计方法是输入框的颜色变红，输入框下方出现文本提示。不建议使用下拉浮层，因为当表单结果复杂密集时，下拉浮层会阻挡下一行的输入框信息。我们只需要使用红色错误提示文本，而无需配置图标。 输入警告：关于输入警告，我在这里没有添加验证这个词，因为警告验证的使用频率远低于错误验证。基本上，错误验证可以很好地解决问题。警告验证似乎是多余的。 例如，上图第一行右侧的输入框在市场上可见的标准设置中很常见，但其利用率确实很低。原因是它的强调度太高，与错误的验证提示基本上没有太大区别。 那么如何使用警告提示呢？ 在这里，我们可以从移动产品的使用中学习。通常，当我们输入相应的字段时，我们可以根据输入的不同内容进行验证，例如金额超过XX元，可能导致无法XX。没有必要使用如此强烈的错误验证提示。此时，警告提示可以更好地与框外提示文本相结合。只需使用黄色文本来突出警告提示。 不同用法限制输入框的字数 至于输入框的数字限制，我们最常见的是文本域的多行输入框，字数限制将显示在右下角。 如下图所示： 那么如何设计单行文本框的字数限制呢？ 有三种方式： 输入框末尾提示：当输入字数错误时，提示数字变红； 框外文本提示：设置相应的字数限制信息，输入错误时直接转换为错误验证风格； 框内文本提示：框内暗示直接显示限制字数信息，其缺陷不适合添加其他暗示信息。 使用输入框宽高的延伸 由于b端产品的特点，其业务属性相当复杂。只有基本输入框的宽度和高度不能满足日益复杂的业务需求。为了提高输入框的可用性，我们可以设置不同尺寸的输入框的高度和宽度。 1. 设置输入框的高度 输入框的高度设置通常分为三种不同的尺寸，如下图所示： 大尺寸通常是40px、常规尺寸为32px、小尺寸通常是28px或24px等等。规范中没有详细说明如何应用不同尺寸的常见情况，实际应用的情况相对较少。所以为了比较差异，我提取了最大的输入框高度40px最小输入框24px，比较同一复杂使用场景中呈现的效果，如下图所示： 我们可以看到40px高度输入框的效果明显高于24px输入框效果拥挤，小号留白空间更大，整个区域透气性更好。因此，每个人都判断如何使用不同高度的输入框。 2. 设置输入框的宽度 每个人都必须对输入框的宽度设置感到困惑。当页面需要以多列的形式显示时，使用相同宽度的输入框不能节省空间，当遇到复杂的业务组件时，固定宽度的输入框不能满足业务功能的特殊需求。 那么如何设置输入框的宽度呢？ 在这里，我们需要使用删除系统来定义输入框的宽度，如下图所示： 让我们先了解一下删除网格的基本知识先1pt=1px,因为屏幕分辨率是X和Y坐标相乘的结果是2倍分辨率下的1pt=4px，以3倍分辨率下，以此类推pt=9px网页的基本删除单位是8pt 以上推理可得： 在@1x 分辨率下8pt=8px 在@2x分辨率下8pt=32px 在@3x分辨率下8pt=72px 我们看到的网页通常使用@2x因此，我们需要将输入框的宽度设置为：8pt=32px=4px*8px。 即4和8的倍数，如下图所示： 画重点 关于输入框的基础设计细节主要讨论： 输入框的不同状态分为：未输入、已输入、只读不可修改、系统信息带入可修改、禁止、鼠标悬挂、输入激活、清空、加载、输入信息的操作状态，以及输入框状态的扩展和使用。 输入框的暗提示通常分为框内提示、框外提示和校准提示 输入框的数字限制分为：输入框末尾提示、框外文本提示、框内文本提示 对比输入框的不同高度，以及如何使用删除系统为输入框定义宽度 参考文献：http://www.woshipm.com/ucd/577874.html 作者：角马X 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。