对于小白产品，产品设计中的任何细节都是不可逾越的山峰。所以，我们开始观察生活，梳理一些设计需要注意的细节，以备需要，并从中受益更多的产品。
在第一期中，我们整理了输入框的设计。下图是我们对此细节的思维导图。
接下来，我们分析从几个常见输入框设计时需要注意的要点。
信息输入框
信息输入框是最常见的输入框之一，通常采用表单输入框的形式。
在进入
之前1，输入框大小
表单输入框的大小通常会影响用户输入的情绪。由于拇指的触发区域控制在45到57px之间，因此输入框的高度应保持在32到40px之间。
2.必填字段提醒
一个文本占位符，用于“必需””出现在输入框中。
符号“*””出现在输入框中。
3.告诉用户输入什么
复制框在输入框前面：一般是一个短语，简短易懂。
占位符文本提示在输入框中：可以是句子或短语。缺点是输入提示后它会消失。
输入输入框前面的文本框+在输入框中添加文本。 （推荐）
4.重要信息提示
格式提示
1在框
中输入文本占位符提示2格式拆分编辑
当需要栗子时，许多人在填写移动电话号码时经常忽略区号的输入。因此，许多输入框是分开设计的，区域代码是分开设置的，以避免这种错误。
字数限制提醒
一般以副本的形式提醒。例如：显示框不得超过输入框后的X字。
规则补充说明
通常，在输入框下方的副本形式中，可以使用重要提醒突出显示提醒。
进入时
1.当前输入位置提示
光标提示
外框高亮提示
2，限制提示
字
1个字数限制输入
首先看一个否定的情况：指定手机号码的数量，但在下图中，当输入数字的数量超过时，您仍然可以输入。
处理它的更好方法是，当达到限制字数时，键盘会自动缩回，并且不允许再次输入内容。这可以提醒用户检查输入内容是否意外丢失了更多文本。
2个字实时提醒
实时提醒用户当前输入的单词数。
格式
键盘默认弹出。
例如，手机号码和银行卡号码默认需要输入数字输入框。弹出键盘默认为数字键盘;如果输入内容包含文本，字母等，则默认弹出字母数字键盘。
3.减少用户输入
历史
使用自己的移动计算机时，通常需要填写手机号码或某些内容。可以
4，一键删除功能
输入内容后，×将出现控件，允许用户一键删除它。
输入后
1.显示敏感信息
手机号码，密码或银行卡号等敏感信息显示为“*”。或者“· &rdquo ;.
2，格式分割显示
它允许用户快速检查他们是否输入了错误的。例如：银行卡号按4-4-4-4显示;手机号码按4-3-3等显示。
3，内容放大显示
输入内容被放大以使用户容易预览内容。
登录注册框
登录注册框在设计时需要注意以下几点：
1.输入框复制类型提示
默认情况下，输入框中会有一个副本通知用户要填写的信息类型。输入框下方的内容有一些提示或建议（例如，密码下方有一个副本）编辑状态下的输入框：无空格，b。长度为8-16个字符，c。必须包含至少2个字母，数字，符号）
2.输入时键盘调用
根据输入框中填写的内容类型调用不同类型的键盘：字母数字键盘或数字键盘。
3.密码显示
密码机密性处理：在键盘输入过程中，系统会用“ld ..”隐藏用户实际输入的字符。进行中。
4.反馈
对于某些内容，您可以实时反馈。当表单输入框有一系列要输入的内容时，如果它进入下一个文本框，它可以实时确定在前一个文本框中输入的内容是否一致，并且可以由实时修改用户。
标记错误原因。当提示文本的内容不符合规范时，最好提示原因，这有利于用户快速修改。
密码默认显示。单击登录按钮时，如果密码不正确，密码将自动显示内容，允许用户检查密码是否正确。
搜索框
通用交互式控件，可帮助用户快速查找大量内容中的目标内容。搜索框可以分为输入框+图标（搜索图标或图片图标或音频图标）+按钮。
常见的搜索框应用场景：
a，搜索引擎条目
湾内容推荐的面向内容的平台，如电子商务和社区
c，准确定位工具，应用程序，朋友等。
d。重用类型（支持使用搜索框搜索不同类型的内容）
设计时要注意的细节
1.编辑内容提示
1面向内容的平台或社区和新闻中心等电子商务平台使用搜索框中的搜索框来实现内容推荐效果。通常根据用户自己的行为数据或内容流行度值来设置这样的副本，并且该副本是时间敏感的。
2搜索引擎条目，准确定位，重用等。使用场景中的搜索框固定且简短，旨在提醒用户交互和搜索内容。
2，字数限制
在输入框中，文本限制很容易被忽略。我们测试了QQ，微信，微博，淘宝等，发现QQ，微信和微博对字数有限制（范围比较大，一般情况下不容易超过字数） ）。限制）。当微博超过字数限制时，会出现一个弹出窗口，QQ和微信将通过比较方式通知用户：键盘无效，并且单词无法成功输入到输入框中。相反，后者的体验相对较差，导致用户具有后感情况。
3，支持一键清除功能
当输入框处于编辑状态并且键入现有字符时，将显示清除图标。单击图标以使用一个键清除输入框的所有内容。清除内容后，图标将被隐藏。
4.其他人
键盘通话。在初始状态下，键盘不会出现;单击输入框时，系统默认调用字母键盘;输入完成后，单击“搜索”按钮，键盘将被回收，页面将进入结果页面。
光标已锁定。获得焦点：在初始状态下，输入框未被光标锁定;在编辑过程中，输入框得到焦点，光标位于第一个字符出现的位置，光标随着内容的增加而移动;输入完成后，光标消失。
实时检索。一个。搜索框将根据输入框中输入的字符实时检索结果，并将结果显示在用户面前; （通常用于为朋友，工具，应用程序等准确定位的情况）
建议的机制。系统记录用户的所有搜索行为数据，并根据输入框中的关键字信息提供包含相同关键字信息并具有整形答案的搜索句子。
内容预览。当内容较少时，输入框可以显示用户填写的所有信息;当内容长度超过输入框的长度时，无法完全查看所有填充的信息。
原始内容编辑框
原始内容编辑框是指在微信和微博等平台上发布原创内容时的文本输入框。
在进入
之前1.占位符文本
原始内容编辑框中的占位符文本通常是一个句子，并且在输入内容时占位符文本会自动消失。
2，键盘自动唤醒
对于直接输入文本的原始内容编辑部分，打开文本框时键盘会自动唤醒，这会减少用户的操作。例如，微信发布的文本和微博发布的文本都是一样的。进入该功能后，键盘自动弹出，光标自动定位。
进入时
1，实时提示单词
您是否曾经遇到过很长一段时间的输入，但是当您点击帖子时，您会被告知您输入的内容太长而无法发送。
因此，在输入过程中实时提醒单词数量非常重要！给栗子：
以颜色区分
以微博为例，在达到限制词数之前，微博显示当前输入的词数，颜色为灰色;当超出限制词数时，微博会显示超出的单词数，颜色为橙色。
显示当前输入词和最大限制词
以站冷为例，当前输入字数和最大限位字数实时显示为输入。
2.输入框适用于文本
执行文本输入时，经常会遇到输入文本超出文本框的初始范围。
更糟糕的解决方案是当文本框的大小随着输入文本的增加而增长。当它达到一定水平时，键盘将阻止内容。
QQ关于内容编辑框的讨论是这种处理方式，文本增加，文本框变大，内容被键盘阻挡，后来输入的内容无法看到。您需要单击文本框以缩回键盘并将光标定位到当前输入位置以继续输入。
处理它的更好方法是：
1文本框的大小不变，文本内容向上移动
如下图所示的INS编辑框，网易云音乐的内容编辑框就是以这种方式处理这种情况。
2输入文本增加时，文本框变大。当它到达键盘位置时，文本内容会向上移动。
输入后
键盘缩回和内容预览
输入完成后，通常需要缩回键盘以预览内容。
1.滑动文本内容框以缩回键盘，文本内容框最大化内容预览。
2.单击按钮以缩回键盘，文本框的大小不会更改，并上下滑动内容以预览内容。
对话框
1.对话部分的形状
2.互动
输入内容时，文本框会变大。例如，ins消息输入框。
3.字数限制提醒
对话框一般也有字数限制，如QQ，字数限制为3420字，但一般不会达到此限制，所以一般在输入前没有字限制提示。
先来几个胸口：
当输入字数超过微信输入框中的最大字数时，单击“发送”。左侧的下图将导致用户错误地认为该消息已成功发送。返回聊天界面。可以找到消息列表页面！证书已发送。
微博私信不能发送超过300字，但当用户输入超过300字时，点击发送，邮件发送成功，默认删除超过300字的内容，但用户是没有提示，这将导致信息不完整。
更好的解决方案：
当QQ聊天输入框超过最大字数时，无法发送消息，提示“字数超过上限”。
4.当输入内容超过初始输入框大小
时首先，随着输入文本的增加，它变得更大。当它达到一定水平时，文本自动向上移动，光标自动定位到最新的输入位置。
结论
好的，以上是分享输入框的设计细节！如果您需要添加或写错地方，欢迎纠正我！
我们的目标是相互学习，共同进步，成为联合产品经理（优秀）（展示）!!!
本文最初由@小白CY出版。未经许可，禁止复制。
该地图来自unsplash，基于CC0协议