如何设计客户端App的输入框？

Posted 2023-03-23

参考技术A 关于输入框(Text fields)的定义：Text that the user can select or edit and that sends its action message to its target when the user presses the Return key.（从ios设计规范中摘录）。可以理解为让用户录入信息，为达到下一步的操作目的提供前置条件。常见的使用场景包括但不限于注册登录、搜索、内容编辑以及信息表单等。

输入框从用户的输入方式可以分为 文字输入框 和 选择输入框 。

从用户视角出发，输入框的使用在用户眼里可以分为三个阶段： 输入前(default) 、 输入时(active)、 输入后(inputted) 。而贯穿这三个步骤的设计原则就是： 易懂 、 易写 、 易过 。

首先，需要确定当前的使用场景应该选择哪一种类型的输入框，文字输入框 or 选择输入框。像是个人资料部分的性别、城市、生日等完全可以采用选择输入框的样式，没有必要让用户去手动打“男”/“女”，因为操作成本相比于选择实在太高了。

而文字输入框的UI样式又可以分为 标准 和 间隔 。

其中间隔可以让用户更明确自己的输入位数，方便进行快速的二次确认。常见于手机号码、日期、验证码等。

提示的内容包含但不限于：

【1】必填 or 非必填；

【2】允许输入的字符数量；

【3】允许输入的字符类型；

提示包含两种UI样式，一种是比较常规的输入框外部Lable，另一种是内部Placeholder。两种样式在定义输入框的性质时没有太大的体验差异，但如果是规定输入框内允许输入哪些内容时建议放置在外部，比如“密码应该包含字母、数字或下划线。”由于文本内容较长，用户很容易在输入的过程中忘记具体的规则。

尽量提前告知用户有哪些限制条件，不要到用户最后提交的那一刻才告诉用户你之前输错了。当然也可以在用户输入时提醒。

由于是移动客户端的输入框，所以首先要决定是否自动弹起键盘。一般直接点击输入框时是弹起键盘，但进入到编辑页时要不要弹起键盘需要根据使用场景来确定。

以微博为例，新建微博时包括<写微博>、<图片>、<视频>等方式，其中如果用户点击<写微博>后，进入到编辑页是自动为用户弹起键盘的。而用户选择<图片>或<视频>时，首先需要用户选择本地内的图片或视频，然后再进入到文本描述页，此时是不会为用户自动弹起键盘的。两者产生这种差异的原因大抵是<写微博>是以文本作为主要展现形式，重点就在于文本内容本身。而后两者的则主要是要展示照片或视频，文本作为辅助。用户在进行文本描述前，还需要花费不少精力对图片或视频进行二次增删改查，文本描述的步骤往往需要往后靠。另外，豆瓣也是后一种情况，因为豆瓣选择将文字内容和图片融合在一个界面中，两者处于同一个优先级别。

同时需要注意键盘弹起时尽量不要挡住其他功能控件。比如部分功能控件会随着键盘的弹起而自动移位。

关于弹起的键盘，还要确定弹起什么样的键盘。系统键盘还是自定义键盘，拼音键盘还是数字键盘等。像是一些对安全性很高的App，比如银行App在用户输入账号密码时就是采用自家设计的键盘，来保障用户的数据安全。

一些偏探索类的App就经常会采用预设内容的方式来为用户提供输入思路。比如高德、美团、网易新闻等就会自动为用户预设众多选项。

【1】推荐：热门、个性化、基于GPS定位；

【2】历史记录；

【3】相册（以微信为例，用户拍完一张照片后，返回聊天界面，点击“+”号就会弹出之前拍过的一张照片给用户）；

【4】粘贴剪贴板

用户输入时很容易出现字数超过输入框预设范围的情况，这个时候就需要输入框进行自适应。以微信输入框为例，初始状态下是只给用户一行的预设范围，当用户输入多行后，则自动增加输入框的宽度，直到5行的上限。上限范围可以从一句话所占的位数来考虑。

常规的校验范围包括：

【1】格式合法性

【2】位数

【3】重复性

校验的方式一般包含两种：即时校验和触发校验。

*即时校验是用户一进行输入就开始进行实时校验，比如常见的邮箱格式或密码校验，用户输入时，只要不符合格式要求，立刻就进行错误提示。

*触发校验则是用户进行内容提交时才会进行校验，常见于用户注册登录后发现已注册。

用户输入内容后，为了防止用户的某些误操作导致的内容丢失，在部分场景中就需要对用户的一些操作进行二次确认。

以微博为例，用户点击取消后，会弹出是否保存草稿的弹窗。<保存草稿>是保存后退出当前页面，<不保存>是不保存退出当前页面，<取消>是继续停留在当前页面。

以上就是关于App输入框内容的复盘总结。

如何在移动web模仿客户端给input输入框添加自定义清除按钮

项目有个需求就是在input输入框添加清除按钮，网上查找资料加上自己琢磨终于弄出来了。

灵感来自于 http://www.zhangxinxu.com/wordpress/?p=4077

由于项目已经上线给为了减少改动就改为通过js全局控制的方式，就不改html了。

css部分：

 1 /*输入框清除按钮*/
 2 .iss-close{
 3     position: absolute;
 4     top: 0;
 5     color: #ccc!important;
 6     display: none;
 7     cursor: pointer;
 8     z-index: 9999;
 9 }
10 input:valid + .iss-close {
11     display: inline-block;
12 }
13 .iss-close-hide{
14     display: none!important;
15 }

 

js部分：

 1 //统一添加清除按钮和清除按钮事件处理
 2 $("input").attr("required","required");
 3 $("input[type=file],input[type=reset],input[type=submit],input[type=password],input[type=image],input[type=radio],input[type=checkbox],input[type=hidden],input[type=button],input[type=date],input[type=month],input[types=date],input[types=month],input.iss-search,input[readonly],input[disabled]").removeAttr("required");
 4 setTimeout(function(){
 5     $("input[required]").each(function(){
 6         $(this).after(\'<a class="iss-close">\'+
 7             \'<i class="issfont iss-icon-font-round-close-fill"></i>\'+
 8             \'</a>\').next().css({"right":$(this).parent().css("paddingRight"),"marginRight":"-10px"})
 9     });
10 },1000);
11 
12 //模拟ios客户端获取焦点时显示清除按钮，离开焦点隐藏清除按钮
13 $("input[required]").focus(function(){
14     $(this).next(".iss-close").removeClass("iss-close-hide")
15 }).blur(function(){
16     $(this).next(".iss-close").addClass("iss-close-hide")
17 });
18 
19 //点击清除按钮
20 $(".iss-close").live("tap",function(e){
21     e.preventDefault();
22     e.stopPropagation();
23     $(this).prev("input").val("");
24 });

 

实现效果如下：