美文网首页
Soft Keyboard

Soft Keyboard

作者: 日暮山主人 | 来源:发表于2020-07-29 16:03 被阅读0次

屏幕内拥有键盘样式和功能的控件,比真正的尺寸更小,没有手感很难盲操作。
软键盘具备屏幕内的控件的特性——按需随时改变样式和位置。
一、选择适当的键盘类型


IOS默认.png
Android默认.png

在特定使用场景下,使用恰当的键盘类型可以提升体验,增强服务器提交数据的校验安全性。IOS(11种)、Android(29)提供多种键盘型布局,但是他们仍然不能覆盖所有场景。常用的有
1.默认键盘:常规全键盘,不做任何限制。
2.文本键盘:相比默认取消了表情符号,适合输入密码。
3.整数键盘:只能输入数字0-9
4.浮点数键盘:在整数键盘基础上增加了小数点
5.电话号码键盘:数字键盘基础上增加了“*”和“#”
6.邮箱地址键盘:常规全键盘增加了“@”和“.”
7.URL键盘:输入网址用,在常规全键盘上增加或突出“.com”、“.”和“/”等
8.数字和符号键盘:数字键盘加很多标点符号


image.png
此外还可以对键盘的:是否首字母大写、所有字母大写、单词自动补全等参数进行定制,进一步提升效率和体验。

二、定制键盘命令的功能
键盘包括录入内容按键+功能按键(PC端Tab切换,回车键发送或换行)。软键盘可以对右下角功能键进行定制,IOS提供了11种类型的命令,Android暂时找到5种。常见包括:
1.搜索Search:点击后执行搜索动作
2.完成Done:任务完成后终结动作,例如表单提交
3.下一项Next:通常用在多个输入框的表单中切换到下一个输入框
4.发送Send:通讯板块将内容发送出去
5.前往Go:任务过程中到下一个步骤的动作,例如输入网之后,前往打开的网页
6.回车Return/enter:用来换行

三、自定义键盘
用户使用第三方输入法并不一定完美支持所有键盘类型和动作键的定制,而且有私自收集数据造成隐私泄露的风险。如果对第三方键盘有担忧,或者对输入内容的类型有偏好,可以设置自定义键盘。自定义键盘分为APP内输入视图(Input View)和系统级定制键盘。

APP内输入视图是私有定制的,只能在所属的APP内使用,不可被其他App或者系统使用。例如:ipad版 Numbers App,不同数据类型的表格单元格所对应的输入视图不同,提供简单的数据运算能力。 image.png
系统级定制键盘在系统和所有App全局使用,如各种第三方键盘。还有锤子的一步,钟颖的Pin系统级输入法,可以快速粘贴剪贴板记录甚至同步Mac剪贴板内容,还可以对齐内容执行搜索、分词功能。 image.png

四、注意
1.不要遮挡当前获得焦点的输入框
在移动端,Soft Keyboard约占五分之二的屏幕面积,意味着唤起前后,界面布局会产生很大变化,要注意键盘唤起后界面元素位置的变化。
2.交互稿中需要标注键盘类型
原因包括:如果键盘调用不当,用户则需要手动切换输入法,影响操作效率;对于多输入框表单来说输入框之间的切换、提交表单这些操作都可以通过键盘实现,而无需用户手动点击原界面中的元素;设计不标场景,开发用默认键盘。合理地切换键盘类型和按键命令类型可以提高用户填写表单的效率,也可以让表单填写过程中更加顺畅,降低页面流失率
在交互稿中,将相应的键盘类型全称(英文名)写在界面下方,或者截图放入。对于同一个界面中不同类型输入框的情况,需要标出键盘切换说明。对需要的键盘命令用文字描述的形式或截图。
可以通过imeoptions语句指定,在交互稿中文字标注。如果不指定,程序会判断当前文本框是否为页面中的最后一项,如果是,则显示“完成”,如果不是,则显示“下一项”
注意:用“前往”和“完成”取决于当前文本框的任务是中介点还是终结点。譬如输入网址,用户任务是访问网站,输入只是其中中介作用,所以用前往。对于个人信息修改,任务和操作文本框是一致的,完成文本框也是完成了任务本身,是任务终结点,所以用完成。


image.png

注意IOS的键盘具有上一项和下一项的功能,对于表单的交互设计起到了非常重要的作用,要好好利用
Android的按键命令(回车、搜索、前往、下一项、上一项、完成、发送)


image.png
注意在多输入框表单的场景下,切记标注出键盘的“按键命令”何时变为“下一项”何时变为“完成”
3.H5下的键盘
在H5环境中,键盘的类型仍然可以自由选择。“按键命令的类型”大部分可以选择,但“完成”和“下一项”不可以选择。也就是说程序员调出的不同种类键盘,按键命令只能用“搜索”、“回车”、“前往”,不能用下一项和完成。这个缺陷对于IOS环境中的H5影响并不大,因为IOS有“<>”和完成按钮。但对于Android环境中H5的影响很大,因为当用户填写完一个输入框想跳转下一个输入框时,只能手动点击。如果用户下意识地点击“前往”按钮,则可能出现表单警报。有一个例外,当输入框字符类型是“数字”,“按钮命令”会自动变成“下一项”。 键盘上方的白色工具栏是浏览器提供的插件
4.Ipad拆分键盘
当移动设备横屏情况下宽度太大,用户手指很难触及到屏幕中线,软键盘也会占用过多的纵向空间,操作和显示都有问题。苹果提供一种同时向左右拉ipad软键盘,键盘就会被拆分,这样提供更多内容显示。 image.png
5.大屏手机的键盘单手操作优化
搜狗单手键盘讲键盘栾杜压缩至适合单手操作的位置 image.png

联想水银键盘,当手机向一侧倾斜时,通过重力感应将键盘按钮向倾斜方向集中,最远处的按钮触摸区域更大,拇指可以轻松触及。


image.png
6.银行app乱序键位键盘
意在PC防止木马病毒在触摸手机记录点击位置。但极大降低了用户输入效率,病毒也可以截图获取密码。目前主流采用禁止截图和使用手势密码或指纹等安全技术。 image.png

衍生:

Android中,Keyboard type由32种Input type(文本框属性,指明了输入类型)控制,当开发给文本框(输入框)指定一个Input type后,比如number,系统会根据这个调取不同键盘,如果第三方没有对应的Kayboard type,则会调出默认键盘。此外当没有给文本框指定input type,同样会调出默认键盘。 image.png
部分Input type还可以互相搭配使用来产生更多的keyboard type。所以如果在设计中遇到一些比较复杂的键盘交互,最好根据input type来标注所需要的键盘效果

相关文章

网友评论

      本文标题:Soft Keyboard

      本文链接:https://www.haomeiwen.com/subject/nnefrktx.html