后台系统设计（下篇：输入）

最近在做一个标准版中台（就是展示配置+部分运营数据展示），做的有些吃力，刚好看到了一篇后台系统的组件整理（https://mp.weixin.qq.com/s/tY42iiEih-F1CWat9vQlnw），赶紧做好笔记以备不时之需。

常见类型

·输入框

·步进器/微调器

·滑块

一、Input 输入框

允许用户输入和编辑文本的区域。

外观

单行文本框，用于输入少量的文本：

多行文本，用于输入长字符串，多行文本区域显示：

富文本，允许使用附加的格式、内联图像/链接等文本输入。

最佳用法

·容错格式，允许用户输入多种格式，并智能的处理从而满足程序的数据要求。例如电话输入，允许用户输入空格和 —，系统后台自动清理数据以满足格式要求，而不是报错提示。

·对于简短、固定的单行输入可采用结构化格式，通过潜在的限制使输入的字符数量、类型不易出错，并使用户能够直观的看到输入格式。例如银行卡号、身份证、时间等信息。

·掩码，对于重要的私人信息或数据应该给予掩码保护。例如密码、电话及身份证等信息，也分为全部掩码及部分掩码。对于密码输入可提供「查看」操作，以便用户确认。

·对于搜索操作的文本框，可提供清空快捷操作，从而方便用户快速更换关键词。（Q：由于电脑鼠标的灵活性，此时清空是否有必要？）

·帮助文字用于为填写提供更多的上下文背景或指导。常见的形式有：默认显示，键入显示，悬停或点击显示。

·若输入区域设置了字符或字数限制，应给予一定的提示说明，当用户输入不规范的字符或超出字数限制时应给予清除（Q：清除是否是一个好选择？）。例如记数器，在用户输入每个字符时动态更新。

·输入验证分为主动验证和被动验证两种：

主动验证在用户输入的过程中就进行了验证。例如只接受数字的输入框，在输入字符或特殊符号时会被主动清除，且给予提示说明，告知用户信息的输入要求或规则。

被动验证在键出（失去焦点）时或命令操作（例如提交）后才进行验证操作。

对于错误提示最好的方式是放在控件旁边进行提示，这样用户可快速进行定位更正。关于错误提示文本，应该给予用户解决问题的方法和指导而不是仅仅告诉用户发生了错误（例如密码错误，而是提示请输入6位以上字符），下图是常见错误提示位置：

用户与输入框交互时，请提供良好的视觉反馈，且输入框本身状态提供良好的能供性（常规有：默认、悬停、键入和禁用；验证状态有：提醒、报错和成功）。

·对于多行文本可根据需求提供改变区域的操作，以显示更多内容。分为手动和自动两种，具体选择需要根据空间布局，内容要求进行决择，手动给予用户更大的自由度，自动则在根据内容实际所需。

拖拽控件：只改变高度和高度宽度均可调整两种。在外观和功能上是均有区别，请正确使用请勿混用，以提供符合预期及认知的模式，且设定最大范围。

输入框自动增长（根据输入内容进行高度变化），只可改变输入框高度，请设定最大高度。

二、Stepper 步进器/微调器

以微小的浮动改变数值，步进器包括一个输入区域、增加和减少按钮。

外观

最佳用法

·步进器用于需要微调数字值的情况，且输入值有大小范围的限制及字符限制需求。

·步进器默认始终包含一个值，默认值为一般用户普遍设置的、你希望用户选择最佳值或较为安全的数值（例如最小值）。

·允许通过点击增加/减少按钮，键入数字，使用键盘快捷键（上/下，页面上/下）改变数值。

·为步进器设置最大和最小值。达到最大/最小值时，增加/减少按钮和上/下键盘将被禁用。

·用户与步进器交互时，请提供良好的视觉反馈。增加/减少按给予默认、悬停、选中和禁用状态，输入区域给予默认、键入和报错状态。

·设置输入区域的字符限制。一般为0-9和-，+字符，若不允许负值，那就只可输入0-9。当输入不规范的字符时清除或显示最小值，输入的值超过最大值则显示为最大值，并显示工具提示说明输入范围。

当用户输入不合格的值，再未键出的情况下滑出步进器的视图区域点击保存，如何更好的提示报错？ 答：滑到错误提示区域并提示错误信息（所有被动验证输入都可以用这种方法）。

三、Slider 滑块

从一个范围值中进行滑动选择的控件。通常由一条水平线（水平或垂直）、可移动手柄和标签（有滑块标签、范围标签、值标签）组成。

 外观

单滑块，选择单一的值：

双滑块，用于选择值的范围：

分段式，不允许选择任意值，默认贴靠分段的值：

垂直和水平，根据值的特点及页面情况更加合适的布局：

图标数值文本

带有输入框，可输入文本字段，输入数据与滑块同步

最佳用法

·当用户设置连续值（如音量或亮度）或一系列离散值（如屏幕分辨率设置）时，可使用滑块。

·滑块是一种有界的选择或输入控件，其范围和选择数值的位置均得到了可视化的呈现。根据具体的使用情景我们将滑块细分为：单滑块（单值）、双滑块（可选择范围）、分段式滑块（非范围内的任意值）和带输入框滑块（和输入控件保持同步），以及相应的水平或垂直方向。对于书写及阅读习惯从左向右的人群而言，值的范围一般为左小右大，上大下小。

·如果你不允许滑块选取任意值，请使用分段的步骤点。

·如果滑块可编辑，当鼠标悬停在手柄上时，手柄高亮显示，并出现手型光标。

·允许用户使用拖拽和点击改变手柄的位置。

·在某些情况下，滑块直接充当为命令控件，在用户选择时或选择后，操作结果即时生效。 例如音量控件。

·当滑块上没有其实时显示滑块值的地方时，请使用值标签显示滑块的当前值。