打开

看看你的手机键盘,隐藏了多少设计细节?

和出此严 6268阅读 2019-12-25

手机键盘,可以干嘛??

无疑是打字、信息输入,也是用户体验产品最常用、最直接的方式之一。

我们每天都在使用键盘,但是偶尔会遇到一些体验上的不足,如键盘挡住操作入口、很难控制键盘光标的移动...

所以今天想梳理一下手机键盘里的要点、细节点,日后遇到有涉及到键盘输入的地方,可以有更多的思路去解决各种产品/设计问题。


Part1:键盘与命令类型

先简单说下键盘与命令词类型(想看设计要点,可直接滑到Part2部分),对键盘有个全局的认识,方便在工作中知道每种键盘的用途

键盘类型

从技术角度上看,市面上所有的键盘产品可分为:系统键盘(手机默认键盘)、第三方键盘(功能丰富,输入效率高)、自定义键盘(安全性高,有一定开发成本)。

2503435b45809098c4c93a573947d301-picture

从可提供类型看上,iOS一共提供了12种的键盘类型:其中8种是常用的:默认(中英)键盘、邮件键盘、字符与数字键盘、带小数点的数字键盘、存数字键盘、拨号键盘、网址键盘、外国产品键盘(如Twitter、Instagram)

1890fad5cd02672fa3bfe552caf04735-picture

剩下的4种则是这些,但我实在看不出这些键盘和默认(中英)键盘有何区别,因此将这4种独立展示:

51069a80c97f36222ebbe0eb19e451fc-picture

而Android系统键盘只提供了9种,但大部分和iOS的键盘类型一样。因此需要我们在交互稿中,标明对应的键盘类型

58c01c14bc08a56276582a6f58ee716b-picture

命令词类型

而键盘命令词的类型上,iOS提供的也很丰富,多达11种。

766c30881b073fc6f4ca4492f5fa0717-picture

而安卓则少些,但基本能覆盖所有场景了。

a0cb13c8f3be8c7da21b777271a30a39-picture


H5里的插件

iOS自带有‘上一项’和‘下一项’的键盘插件,因而在一些H5表单中可以灵活选择上/下一个文本框或选择器。

而Android在H5是没有’下一项‘命令的(无论第三方还是系统键盘)。因而在H5页面中的表单中,往往需要提供一个外部插件来辅助用户输入。

34289ca14b8dbb36a2ea3eed4df194cc-picture


Part2:设计要点

盘点了键盘与命令词类型后,接下来梳理一些设计要点,避免今后工作中踩坑,完善产品设计细节

‘删除‘不完全是‘清空’

键盘上的‘删除’按钮可以逐一删除输入结果,界面上的’清除‘icon也能做到。但二者间在特定的技术环境下,会存在交互上的差异。

2b4f7f5b44267dd5b1977c63d49c1b9e-picture

一个典型的例子就是:UC浏览器的翻译器。

在 已有翻译结果 的情况下,点击键盘上的‘删除’按钮,只能删除文本框里的内容,对底下的翻译结果并无影响。

192887b4ea501d4ec44f3c2e51a3d5a8-picture而点击

界面上的’清空‘icon,能同时清除掉 文本框内容和翻译结果。

42f5a5820961ab21ae4e0dc23ec2b940-picture

原因在于:

在当前的技术环境下,UC浏览器还无法里做到’实时翻译‘(边输入内容,边显示翻译结果),因此无论用户在文本框里编辑了什么内容,技术上都很难检测到文本框里的信息,所以不会影响到底下的翻译结果。

而’清空‘icon则不同,它就相当于界面上的一个功能入口,点击它完全可以检测/控制到其他内容状态(文本框内容和翻译结果),所以可以做出对这2者的’清除‘指令。


但若能做到’实时翻译‘,就可以同时检测、删除 文本框内容和翻译结果了。就如谷歌浏览器的翻译器:

d342f14bad957123e1141c33aa1de088-picture

键盘可以附带功能入口

产品设计时总有一个固有思维:一定要将某个按钮/功能/操作放在某个界面上因此有时会受到‘视觉布局怪异功能关系不搭’等的困惑。

遇到这种情况时,可以试着将功能和键盘绑定在一起,依附在键盘上才出现。让功能和内容间的关系更加独立开来,释放页面压力。

2b70a417dd536f37306b4f891efbd2b1-picture

但是有个提前:这些功能/内容尽量是和用户的输入行为有关联的,不要把所有功能都添加上去。

注意键盘的遮盖区域

在一些表单设计时,应该注意键盘弹出后对界面布局、用户操作的影响。一些重要信息、操作按钮要尽量放在键盘的遮盖区外,避免用户‘要收起键盘才能操作/看到’的尴尬局面。

0ddf955a6f6ccca249b2605c91617d49-picture

包括手机横屏时的走查,也要注意一下键盘高度对界面的影响。

‘隐私数据’尽量用随机键盘

对于个人财产、身份信息等敏感数据的输入时,用户对该类型信息的重视程度,明显高于其他类型的信息输入。

所以产品设计时可优先考虑 ‘自定义随机键盘’(指键盘上的字母/数字等随机排布),以保护用户财务和隐私安全。

如中国银行的支付密码:

66052bc19bf944202f299c7aa2922991-picture

腾讯各大楼下的访客机也是采用随机键盘,以保护所有访客的预约隐。

a587a016ac497e2ec56239d5da995132-picture

命令按钮位置的不同

在手机键盘里输入文字时,iOS由于系统的限制,对文字的发送指令只能在键盘上来完成,因此iOS用户的交互操作都全部集中在键盘右下角。

5824faf38577a3c5368ea3fb5a67bc7e-picture

而Android端就灵活很多,不仅可以在键盘上执行发送指令,也可以在输入栏/搜索栏周边新增操作入口。

6feb32c4597397c98a64cbc87ac7458c-picture

即使大部分产品都这么做,但还是有部分产品做到了‘两端对齐’,如网易邮箱:

d2882fafa2890fbd56de726e4a33448f-picture


预判用户的行为

用户行为的预判,指的是当我们明确知道用户目的、能推测出用户下一步操作时,可以做一些减少用户操作步骤、提升输入效率的设计,如:

1.自动调起键盘

在一些表单输入的流程中,当能预知到用户的下一步操作时,完全可以帮助用户自动调起键盘的(尤其是需要跳转页面才能输入的表单)

31347d18211591337db9f203b1bb50a1-picture

2.调起对应的键盘类型

这个点无需多讲,当明确知道表单输入所需的文本类型中文/英文/数字/邮箱/网址等,需调起相对应的键盘类型。

9f29f4bd29307b76b1353ed0e882cf20-picture

3.短信验证码的调取

在短信验证码的表单设计时,可以利用系统的‘短信权限’自动输入验证码,减少用户的操作步骤。

iOS:只能将验证码调取在键盘上,点击自动复制粘贴

Android:可以将验证码自动粘贴在文本框里,且自动跳转页面。

验证码.png

前提是:产品已获得手机的短信权限,否则很难调取到验证码信息。

4.更准确的命令词

键盘上的命令词,在交互上的固定认知是:点了就能看到想要的内容。

就如微信的搜索,用户的预期和键盘上的命令词完全是一致的,用户能知道点击会出现什么样的内容。

cca44b1613a0b792fa8881cb68928315-picture

但在视觉上,不恰当的命令词容易让人产生歧义、误解,甚至干扰接下来的操作。

如网易邮箱登录的第一个表单,键盘上对应了‘下一步’命令词,用户知道可以快速切换到第二个表单。

但在第二个表单时,还是‘下一步’命令词 是不是会让人费解??

62079d79af854a585ff22c8fc9df991d-picture

毕竟该处是表单输入的交互终点,用‘前往(Go)、登录(Join)’这些命令词是不是更准确些呢?

因此日常中,我们需要对命令词有更深的理解,方便给予用户更准确的引导。

4f5e77b08b1592b6514ab0ef959e76ae-picture


Part3:有意思的交互

最后盘点一下,在一些第三方和系统自带的键盘上,都有哪些有意思的交互细节?启发一下产品设计时的脑洞。

更准确地移动光标

在输入过程中,想将’光标‘移动在某个文字附近是一件比较麻烦的事,尤其是在小屏幕手机里。

但iOS手机有3D touch功能,不少产品都会通过‘重按键盘’的方式来控制光标的移动。如iOS系统键盘、百度输入法和讯飞输入法:

70cecc34e63b0916985e95597ab32ac0-picture

但是Android手机可没有3D touch,如何解决这个问题?

典型的例子还是UC浏览器,采用一个‘滑块组件’来控制光标的移动。不管Android和iOS端,都能有效地提升输入效率和体验。

09a80915aa84f490cf238ebb5424fdae-picture

长按的彩蛋

除了长按键盘外可以移动光标外,在一些第三方键盘上也隐藏了‘长按’的彩蛋,如:

1.百度输入法

长按可以持续选择表情,还有表情飘出效果。

fcbe1066497c2a47527d961c9c27e03c-picture

2.讯飞输入法

长按可以选择表情的颜色,但部分表情才有而已。

13407e627465df428bf790184038037d-picture

3.搜狗输入法

长按可以切换至‘单手键盘’模式,用于操作大屏幕手机或iPad。

5eea381a763f8c34f7e2e1019c2eda15-picture

结语:

好了,大致的整理就到这了。可能有些细节点讲的不是很好,请你多指教。

下面是一个总结笔记,需要的可到公众号领取。

c7ab74388e8403ab42f039389a746e32-picture


写下你的评论

发布评论 取消
500

写下你的评论

发布
500

评论

查看更多评论

删除评论

删除的评论将永久消失,确定要删除吗?

删除 取消
内容不合法,请修改后提交

云队友 | 热门职位

我要招聘 →

绑定手机

参与互动需要先绑定手机号哦~

完善信息

参与互动需要完善个人信息哦~

参与互动需要进行审核

为了保证社区的内容质量,需要提一个问题,来证明你是可以的!

在问题审核通过后,即可开启PMCAFF所有功能~

  • 微信好友

  • 朋友圈

取消

打开 APP 阅读

推荐使用 PMCAFF APP,阅读体验更佳。