那么,我们该如何讲清楚键盘的调用规则和其中需要注意的设计细节呢?本篇文章总结了软键盘调用规则的细节经验,希望能够给设计师一些参考,在设计稿上标注出明确的键盘类型及交互规则,给用户带来更友好的填写体验。
软键盘的基本元素
——
首先,我们先来认识一下软键盘,了解软键盘控件的基本构成元素。下图以 iOS/Android 的默认键盘为例:1. 内容区按键
键盘的核心主体,不同的键盘类型有不同的内容及布局
2. 功能按键
键盘上的动作指令,可根据场景定制按键的动作及交互
3. 其他按键
键盘上的其他按键,包括键盘类型切换、大小写切换、删除、语音输入等
软键盘的类型
——
了解完软键盘的基本构成,接下来看看软键盘有哪些类型。即便是在同一个原生系统,软键盘也有着各式各样的不同类型。我们通过软键盘内容区按键的不同,可以分为以下 8 种常用的 键盘类型 keyboard type ,从而满足大部分的场景需求。 1. 默认键盘 常规的全键盘,不做任何限制,可输入中英文字母数字等![890a0ac8d6a1fe4566063eaaf1354256.png](https://img-blog.csdnimg.cn/img_convert/890a0ac8d6a1fe4566063eaaf1354256.png)
![ba8c77457119b40c66fe418ba8229418.png](https://img-blog.csdnimg.cn/img_convert/ba8c77457119b40c66fe418ba8229418.png)
![083abde2aaf731d667ff381abcc68d13.png](https://img-blog.csdnimg.cn/img_convert/083abde2aaf731d667ff381abcc68d13.png)
![963cb5ed9df3f54fd7e3246e4fb446de.png](https://img-blog.csdnimg.cn/img_convert/963cb5ed9df3f54fd7e3246e4fb446de.png)
软键盘上的功能按键
——
除了认识软键盘的类型,还有一个非常重要的元素—— 功能按键 keyboard actions ,即键盘上的动作指令,这和用户的填写效率及体验有重要的关联。不同系统提供了多种动作指令,如iOS提供了多达12种可指定的动作指令,这里就不一一列举了。其中常用的指令有以下这些:软键盘的细节考量
——
通过以上的介绍,相信大家对软键盘已经有了大致的认识。接下来来说说在实际的产品设计过程中,我们需要注意到哪些细节?细节 1 根据输入场景唤起恰当的键盘类型
细节 2 “ 巧用 ” 键盘的功能按键,定制恰当的动作指令
除了键盘类型,我们还需要考虑键盘上的功能按键,特别是涉及到表单输入的场景。
从前文的示例动图还可以看到:当用户填写完一项内容后需要用户手动移到下一项的位置并触发再次唤起键盘。用户在整个交互过程中,手移动的路径是很长的,特别是一些大屏手机,这大大降低了用户的填写效率。
我们可以合理的利用键盘上的功能按键来解决这个问题并提升填写效率,实现更好的交互体验。
1)表单的填写场景 用户首次触发填写项唤起键盘,这时候可以把键盘的功能按键 keyboard actions指定为「下一步」,用户完成输入内容点击此动作指令即确认当前输入框的内容同时进入下一个内容输入。这样不仅可以减少用户操作,提升表单填写效率,甚至可以降低页面的跳出率。还有一个需要注意的点是:到最后一个输入项的时候,功能按键应该指定为「完成」或者「前往」。细节 3 考虑键盘唤起和收起时的临界条件
键盘唤起和收起都会引起用户可视区域的变化,因此我们还需要考虑键盘唤起和收起时的临界条件。 1)重要内容是否会被遮挡 我们在设计界面的时候,要考虑到唤起键盘时是否会把重要内容遮挡掉。如下图不同产品的登录页面。 唤起输入键盘前:图 1 | 图 2 | 图 3 |
图一初看没有什么问题,实际上却没有考虑到键盘唤起状态时对信息的遮挡。用户输入完手机号,需要先收起键盘再唤起密码的输入,最后又需要先收起键盘才能点击登录按钮,增加了操作成本。
图二和图三则都考虑到了键盘唤起和收起的临界状态,是比较好的案例。图二的设计保证了无论键盘处于什么状态都不改变页面布局且不会遮挡重要信息;图三则采用了页面上移的形式,当键盘被唤起时,页面往上移动,保证重要信息都在用户可视区域内,键盘收起时,页面恢复默认状态。
2)焦点改变与键盘状态的联动 还有一个需要考虑的小细节是用户从唤起键盘到完成输入这一过程并不一定是连续的,如用户聚焦输入框唤起键盘后或者输入到一半时,又想看看页面上的其他内容而上下滑动了页面。 像 这样的场景,我们应该如何处理与键盘状态的联动呢? 比较好的做法应该是当用户上下滑动页面时或点击键盘及输入框以外的地方时,收起键盘,即输入框失焦时收起键盘,用户再次聚焦输入框后唤起键盘。 输入框失焦即收起键盘的交互细节是各系统可支持的配置值,实现起来并不复杂。但如果设计交付物没有标注清楚规则的话,开发同学很可能会忽略。这种情况下当键盘被唤起后,只能由用户手动收起,导致用户在输入的过程可能会出现不顺畅的体验。写在最后
——
完整清晰的软键盘调用规则和临界处理可以提升用户填写效率,确保用户友好的交互体验。我们 在做输入场景的设计时,需要特别注意对软键盘调用的规则处理 : 1.指定合适的键盘类型; 2.指定恰当的功能按键——即动作指令; 3.控制键盘唤起和收起的临界条件。设计处处是细节,而细节,也是友好设计的贴心体现。
共勉之 :-)