发布时间：2021-9-27 分类： 电商动态
有许多类型的输入框。输入框使用许多场景并且具有高频率的交互。它是基本的界面控件之一。本文主要从九个方面向您介绍输入框的一些细节。
输入框类型：包括信息输入框，注册，登录输入框，搜索输入框，原始输入框，对话框输入框等。
文本输入框使用多个场景，交互频率高，是基本的界面控件之一。每个界面都设计有三个默认值，即输入和反馈。输入的结果我们经常使用颜色来反馈，例如：蓝色表示链接，灰色表示失败，绿色表示正确的黄色，颜色表示提示，红色表示错误。
以下是设计:
中需要注意的一些细节首先，标记键盘类型
根据输入框的不同数据类型，为用户提供不同的键盘注释，例如，输入的移动电话号码是数字键盘等，并且用户优选根据提供合适键盘的应用程序。输入内容。
其次，考虑键盘来唤起状态
左：此布局看起来很好，但没有考虑键盘的状态，因为调整键盘时将阻止登录按钮，并且操作成本会增加。
中间图片：无论键盘是否被唤起，页面布局都不会改变。
右：当调出键盘时，页面被抬起并且登录按钮被泄露。
第三，减少用户输入
（1）添加一次性清除按钮：当输入框内容不为空时，获取焦点，并显示一次清除内容的按钮，用户无需一直按下删除键，一个字符被删除。
（2）智能预设：需要填写和选择的表格最好具有预设的初始值或填写的内容，可以是建议或相关推荐，可以帮助用户更准确地填写信息。有效率的。常见使用方案包括搜索Lenovo输入，地址位置等。
第四，输入提示
数据以各种方式呈现，因此在设计输入框时，应该匹配用户输入信息的类型和格式。
当选择输入框进行输入时，应提供清晰的视觉提示，以便用户可以清楚地知道它们的位置，而不是丢失在表格中。这种微妙的反馈将为用户提供更多控制。例如：外部灯的输入框或闪烁的光标，更改颜色，粗体等。数量输入：当用户输入的数量超过一千时，将出现最高分位数提示。对于每个附加数字，最高分位数增加。通过将输入框格式设计为“格式化”，输入内容，用户可以清楚地知道应输入哪种类型和位数。对于手机的输入，输入设置为3-4-4格式，ID卡的输入设置为6-8-4格式，以便用户可以清楚地了解是否存在用户输入的数字。 [对于身份证和手机，保存后，中间的位数可以改为*，毕竟是敏感信息]输入框的输入记录：记录一些输入框的内容，如登录用户姓名，手机号码，无用户登录两次时输入以提高输入速率并优化用户体验。
V.必要的说明
（1）不要过分依赖占位符文本和标签。
输入框后，无法看到占位符文本——一个用户无法检查输入内容是否正确;另一种是当用户在输入框中看到提示文本时，他们可能会想到这个文本已成功预先填充框以忽略它。
可以使用浮动标签。当用户填写当前文本框时，内联标记会浮动到文本框的顶部，这样用户就可以随时确认他们填写的内容是否正确。
通常，当屏幕上有两个以上的输入框时，内联标签不适用。
有关特定标签的说明，请访问：http://www.woshipm.com/pd/931662.html
资料来源：www.woshipm.com/ucd/361227.html
（2）添加文字说明：例如：专业解释，公众可能无法理解的文字说明。
例如，银行转账不及时支付，需要两个小时。金额每天有一个上限，与余额有关。如果在用户输入后通知这些，或者如果报告错误，那么该用户肯定不愿意携带它。
另一个例子：安全隐私或金钱相关，心理上的顾虑，可以保证不会给用户造成损失，或者找到代言，该方案已通过XXX安全认证。在继续下一步之前，请消除您的疑虑。
（3）帮助信息（或相关文本）应出现在需要的地方。
例如，表单中的文字说明了为什么您需要填写信用卡号码，以及生日日期之后的福利，或“服务条款”链接的存在。它们及时出现，以帮助用户解释一些令人困惑的问题。一般来说，这种帮助信息不应超过100字。
资料来源：www.woshipm.com/ucd/361227.html
6.明确反馈
错误的描述应该非常清楚，例如：密码在注册时填写，而不是说密码太低，但是——代码必须超过8位，或密码必须包含大写和小写。
注册以填写手机号码。当提示用户的移动电话号码被注册时，应该提供跳转登录的条目。
七，及时核实
（1）在用户填写内容之后，立即通知用户输入内容是否正确，而不是在提交之后提示。
（2）实时页内验证可以立即通知用户输入的正确性，帮助用户及时更正，无需等待点击提交按钮。如果只有一个错误需要修复，则很容易并且可以减少用户放弃的可能性。
资料来源：www.woshipm.com/ucd/361227.html
八，输入限制问题
对于输入框，当文本只输入一行时，没有问题，但是当输入多行时，如果输入框对单词数有限制，而你没有告诉用户规则，用户会吐。
（1）微信签名会告诉您在输入框的右下角可以输入多少个单词。在5行内，输入框将自动向上打开;当超过5行时，输入框大小不会改变，并且5行以上的字符将被覆盖。
但微信的细节体验并不是很好，因为隐藏的内容是完全不可见的。这一点歌手的聊天界面更好，被阻止的文字将暴露半行，让用户知道它上面还有一个单词。
（2）发布微博时，它会告诉你在右下角输入了多少个单词。如果超过140个单词，数字的颜色将变为橙色，这将作为警告。
（3）了解提问界面，当限制词数量差小于10个单词时，提示仍然是几个单词。当输入超过限制字数时，它直接指示已超过多少字。
九，移动终端自检清单
这个输入框真的有必要吗？
上面是输入框的文字吗？ （不在里面，不在里面）
此输入框是必需的（*）还是可选的？
您是否删除了输入框中的占位符？
输入框是否足够大以显示最可能的输入？
当键盘出现时，可以在横向和纵向模式下看到输入框吗？
输入框是否具有合适的默认值？任何可用的历史值？用户经常使用什么价值？
你能用手机的独特功能（相机，GPS，语音，联系人）填写吗？
您能否帮助用户根据其他信息获取值（例如，基于邮政编码或优惠券输入代码来猜测用户所在的位置）？
是否支持将其直接复制并粘贴到输入框中？
什么类型的键盘适合此输入框？ （注释：如英文键盘或数字键盘）
我可以根据之前输入的字符自动关联或匹配吗？未对名称，地址和电子邮件地址启用自动更正。
你是否允许单词拼写错误或缩写？
允许用户以任何格式输入信息？ （注释：如信用卡号，电话号码中的“ - ”符号）可以自动将用户输入的各种信息转换为统一格式。
本文最初由@二奥一七发表，未经作者许可，禁止转载。
地图来自网络
