cover_image

深度基础 | 交互中的Android键盘详解

崇书庆 妖鹿山设计屯
2016年09月14日 07:25

本文是《交互稿中键盘标注》的分支和详解。这篇文章前前后后耗时3周,过程中看了Android的开发文档和源码,请教了5个开发同学,还去了知乎提问。所以这次的内容是比较详尽的,也应该是没有人做过的。下面是Android键盘交互规范的源文件,拿走不谢:

Android键盘交互规范.rp下载:http://share.weiyun.com/601d40cbb999cc75447bb50dcf65cc12

难度预警:这篇文有点小难度,不易阅读。可以收藏,等用到的时候再看

为什么要做键盘规范?

其实上次已经讲过这个问题,这次我们再通过一个实际案例来感受下吧


这是我申请信用卡的表单页面,可以看到用户在填写的过程中遇到很多问题:

  • 当用户输入完一个文本框后,需要手动点击下一个才会切换,而不能使用键盘右下角的“下一项”按钮;

  • 在输入身份证号时,没有自动调出数字键盘,而是调出了中文键盘,需要用户手动切换;

  • 身份证号文本框中,竟然可以输入中文;

  • 在输入完表单后,键盘右下角按钮没有变成“完成”,而需要用户收起键盘点击“确定”按钮;

为什么会出现这些问题?因为设计师没有在交互稿中标注键盘。一般来说,设计师不标注键盘,开发同学就会写成“调出默认键盘”。如果我们有了一个键盘规范,那就可以很方便地在交互稿中标注键盘啦。

我们现在知道了交互稿中必须标注键盘,那么我们到底能调出哪几种键盘,键盘中哪些元素是可以控制的呢?它们又有什么样的规则呢?下面我们一一讲解:

1. Keyboard Type(键盘类型)

图片

上图便是常规的键盘类型啦(原图请下载文章开头的键盘规范),是不是很多?

Keyboard type也就是键盘类型,不同的键盘类型可能是键盘布局有所差异,也可能只是交互上有所差异(比如是否支持多行文本,所以上图中部分键盘外观相同)。Android中,keyboard type由32种input type(输入类型)控制,也就是说当给文本框(也就是输入框)指定一个input type后,比如number,系统会根据这个input type调取不同的键盘。如果第三方键盘没有对应keyboard type,则会调出默认键盘。另外,当没有给文本框指定input type时,同样会调出默认键盘。

那么是不是在交互稿中放一张键盘截图就行呢?可能没有那么简单,下面我们详细介绍下input type:

2. Input Type(输入类型)

图片

上图便是32种input type啦,input type(输入类型)是文本框的一种属性。它指明了文本框中的字符类型,是键盘标注中的本质核心。上文中我们提到,系统会根据不同的input type调用相应的keyboard type。不仅如此,其实有部分input type还可以互相搭配使用,比如textEmailAddress可以和textNoSuggestions搭配使用,最终调出的键盘是“邮箱键盘”且“不进行词典联想”。由此可见,keyboard type和input type并不是一一对应关系,我们可以通过多个input type的搭配来产生更多的keyboard type。所以,虽然input type总数是32种,但keyboard type却远大于32种。从这点可以看出,如果我们在设计过程中遇到一些比较复杂的键盘交互,则最好根据input type来标注所需要的键盘效果,仅仅使用键盘截图是不够的。(在标注前你需要了解各个输入类型的含义,如果对具体含义有所困惑,建议查看文章开头提供的“键盘交互规范”。)

是不是标注一下input type就行呢?可能还是不够,下面我们介绍另外一个重要的概念:

3. Keyboard Actions(键盘行为命令)

图片

如上图所示,keyboard actions(键盘行为命令)就是键盘右下角的蓝绿色按钮,它也是可以人为控制的。正确地指定每一个keyboard action可以提高用户的表单填写效率,尤其是“下一项”和“完成”的使用。键盘行为命令共有7种:回车(enter)、搜索(search)、前往(go)、上一项(previous)、下一项(next)、完成(done)、发送(send)。如果我们需要指定keyboard action为其中某一种,可以通过imeOptions语句指定,在交互稿上则使用文字标注即可。如果不指定类型,程序会判断当前文本框是否为页面中的最后一项,如果是,则显示“完成(done)”,如果不是,则显示“下一项(next)”。

关于“前往”和“完成”的区别,在上次的文章中我们有一个互动。我个人倾向于@江凌的观点:

用“完成”还是“前往”取决于当前文本框的任务时中介点还是终结点。譬如输入网址,用户的任务是访问网站,输入网址是任务的中介而非终结,所以用前往;对于个人信息修改,任务和操作文本框是一致的,完成文本框也是完成了任务本身,是任务的终结点,所以用完成。

4. 总结

键盘调用,是交互标注中的一项基本要求。可以提高用户输入效率,提供更好的用户体验。在设计Android原生应用时,关于键盘的交互我们可以控制的是:1,通过input type调出相应的keyboard type;2,指定keyboard actions;3,控制键盘的弹出和收起;

input type有32种,每一种都对应一种keyboard type。部分input type之间还可以互相组合,调出更多类型的keyboard type。由此可知,keyboard type的种类是很多的。所以对于比较复杂的键盘交互来说,我们最好在交互稿中标注input type,而非仅仅是键盘截图。并写明keyboard actions和键盘弹出收起等交互规则。这么做的一个好处是,能够适配手机上的各种第三方输入法。最后,对于多项文本框的页面,我们应该标注出多种键盘的情况,同时需要注意keyboard action的切换。

如果上面所说的功能仍然不能满足你的场景需求,还有一招必杀技:自定义键盘。那么到底怎么做自定义键盘呢?去问你的开发同学吧,带着谦卑脸哦~




作者简介:崇书庆-seeking-雷雷网易UEDC小鲜肉1号,高级交互设计师。花名雷雷,因为外面酷似孙红雷,现支持杭研云信项目。有想法,有态度,爱学习,爱分享就是wuli雷雷~

图片

继续滑动看下一个
妖鹿山设计屯
向上滑动看下一个